/* Cabecera y pie (plantillas del Theme Builder de Elementor).
   Elementor pone colores, tipografías y espaciados con globales; aquí solo lo que sus
   controles no cubren. Las clases se asignan en Avanzado → Clases CSS de cada elemento. */

/* ---------- Cabecera ---------- */
/* Marca: «Misifus» + «Art» en verde, con los ejes blandos de Fraunces */
.mf-marca { text-decoration: none; }
.mf-marca .elementor-heading-title {
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  white-space: nowrap;
}
.mf-marca .elementor-heading-title span {
  color: var(--verde);
  font-weight: 400;
}

/* El botón del carrito es un .elementor-button: sin esto heredaría el fondo mostaza de los
   botones del kit. Respeta los colores que se elijan en el propio widget (sus variables). */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button {
  background-color: var(--toggle-button-background-color, transparent);
  border-color: var(--toggle-button-border-color, transparent);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button:hover,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button:focus {
  background-color: var(--toggle-button-hover-background-color, transparent);
  border-color: var(--toggle-button-hover-border-color, transparent);
}

/* Contador del carrito: más grande y legible que el de Elementor (10 px). Colores en el widget. */
.elementor-widget-woocommerce-menu-cart .elementor-button-icon[data-counter]::before {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 22px;
  top: -.85em;
}

/* ---------- Pie ---------- */
.mf-pie {
  background-image: var(--grano);
  background-size: 220px;
}
.mf-pie :focus-visible { outline-color: var(--papel); }

/* Enlaces del pie subrayados, como en el prototipo */
.mf-pie .elementor-nav-menu a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  text-decoration-color: rgb(251 250 234 / .5);
}
.mf-pie .elementor-nav-menu a:hover { text-decoration-color: var(--papel); }

/* Huellas de Misifú (SVG en línea en un widget HTML): se van gastando hasta la firma */
.mf-huellas svg {
  display: block;
  width: min(100%, 520px);
  height: auto;
  fill: var(--menta);
}

/* Firma real de Mary, recortada del escaneo: máscara coloreable con currentColor */
.mf-firma {
  display: inline-block;
  width: 132px;
  aspect-ratio: 470 / 310;
  background: currentColor;
  -webkit-mask: url("../img/firma-mary.png") center / contain no-repeat;
          mask: url("../img/firma-mary.png") center / contain no-repeat;
}
.mf-pie .mf-firma { color: var(--papel); rotate: -4deg; }

.mf-pie__legal {
  border-top: 1px solid rgb(251 250 234 / .25);
}

/* Menú principal: a la derecha en escritorio; en móvil, segunda fila alineada a la izquierda
   (align_items del widget no admite valores por breakpoint) */
@media (max-width: 767px) {
  .mf-menu .elementor-nav-menu--main > .elementor-nav-menu { justify-content: flex-start; margin-inline-start: 0; }
}

/* ---------- Home ---------- */
.mf-enlace-obras { font-weight: 600; font-size: 1.1rem; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }

/* Foto del cuaderno en «Hola, soy Mary»: hoja sobre la mesa, con una cinta */
.mf-mary__foto { position: relative; }
.mf-mary__foto img { box-shadow: var(--sombra); rotate: -2deg; }
.mf-mary__foto::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: -12px;
  width: 30%; max-width: 96px; height: 24px; translate: -50% 0; rotate: -3deg;
  background: color-mix(in srgb, var(--menta) 80%, transparent);
  clip-path: polygon(3% 0, 97% 4%, 100% 22%, 97% 45%, 100% 70%, 97% 100%, 2% 96%, 0 74%, 3% 50%, 0 25%);
}
.mf-firma--tinta .mf-firma { color: var(--tinta); width: 140px; }