/*
 Theme Name:   Mel i Llimona Child
 Theme URI:    https://melillimona.com
 Description:  Child theme de Divi para melillimona.com. Solo contiene el CSS que Divi 5 no cubre con Variables y Presets.
 Author:       Mel i Llimona
 Template:     Divi
 Version:      2.4.7
 Text Domain:  mel-i-llimona-child
*/

/* === Mel i Llimona · CSS global mínimo (v2.1.0 · consolidada) ===
   Regla: todo lo que Divi pueda hacer (colores, tipografía, espaciados,
   botones, tarjetas) se hace con Variables y Presets, NO aquí.

   Cambios v2.1 respecto a v2:
   · Hero unificado (antes §16, §20, §22, §23): un solo valor de padding, sin conflictos de especificidad.
   · El hero ya no rompe el parallax / vídeo de fondo de Divi (z-index solo en .et_pb_row).
   · Bloqueo de scroll del panel válido con la clase en <html> o en <body>.
   · Foco visible en crema sobre fondos oscuros (hero, cabecera transparente, pie).
   · Contraste ≥ 3:1 en bordes de campos y tramos del carrusel (WCAG 1.4.11).
   · Puntos del carrusel con área táctil de 24 px (WCAG 2.5.8).
   · Eliminadas reglas duplicadas o muertas (§11/§12, §13, migas, filas :has()).
   · Colores y fuentes sueltos pasados a tokens en :root.
   · Panel móvil con 100dvh; migas visibles (reducidas) en móvil.
   · Numeración de secciones correlativa (1–20).

   ÍNDICE
    1. Tokens
    2. Base: anclas, foco, movimiento, transiciones
    3. Comparador antes/después
    4. Carrusel «a sangre» + navegación
    5. Selector de idioma
    6. Panel del menú (off-canvas) + menú interior
    7. Botón MENU / cerrar (iconos CSS)
    8. Pie global
    9. Formularios Fluent Forms sobre fondo oscuro
   10. Hero (home y niveles n1 / n2 / interior)
   11. Migas de pan sobre el hero
   12. Cabecera transparente sobre el hero
   13. Lista con filetes (+ variante en línea)
   14. Tarjeta regalo superpuesta
   15. Imágenes con Aspect Ratio
   16. Formulario de compra de la tarjeta regalo
*/


/* =========================================================
   1. Tokens (espejo de las Variables de Divi, solo para este CSS)
   ========================================================= */
:root {
  --mll-crema: #F3EFE7;
  --mll-crema-2: #E9E4D9;          /* fondo de carga del comparador */
  --mll-tinta: #262A24;
  --mll-texto-sec: #3F433B;
  --mll-gris: #5C6158;             /* texto atenuado sobre crema (5,6:1) */
  --mll-verd-fosc: #4B5849;
  --mll-salvia-claro: #DCE1D6;     /* texto secundario sobre verd fosc */
  --mll-error-claro: #F7E9E8;
  --mll-blanco: #FFFFFF;

  --mll-linea: rgba(38, 42, 36, 0.18);        /* filetes decorativos */
  --mll-linea-ui: rgba(38, 42, 36, 0.55);     /* bordes de controles ≥ 3:1 sobre crema */
  --mll-linea-ui-clara: rgba(243, 239, 231, 0.75); /* bordes de controles ≥ 3:1 sobre verd fosc */
  --mll-sombra: rgba(38, 42, 36, 0.18);

  --mll-serif: "Prata Local", Prata, Georgia, serif;
  --mll-sans: "Jost Local", Jost, system-ui, sans-serif;

  --mll-header-h: 96px;
  --mll-adminbar: 0px;
}
body.admin-bar { --mll-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --mll-adminbar: 46px; } }


/* =========================================================
   2. Base
   ========================================================= */

/* Anclas bajo la cabecera fija */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--mll-header-h) + var(--mll-adminbar)); }

/* Foco visible accesible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.et_pb_button:focus-visible {
  outline: 2px solid var(--mll-verd-fosc);
  outline-offset: 3px;
}
/* Sobre fondos oscuros, contorno en crema */
.mll-hero :focus-visible,
.mll-pie :focus-visible,
.mll-form-oscuro :focus-visible { outline-color: var(--mll-crema); }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Transiciones discretas (sin desplazamientos ni zoom) */
a, .et_pb_button { transition: opacity .3s ease, background-color .3s ease, color .3s ease; }


/* =========================================================
   3. Comparador antes/después — shortcode [mll_antes_despues]
   Antes a la izquierda, Después a la derecha; línea crema de 1 px con asa circular.
   ========================================================= */
.mll-compare { position: relative; overflow: hidden; margin: 0; width: 100%; aspect-ratio: 4 / 5; background: var(--mll-crema-2); --pos: 50%; user-select: none; }
.mll-compare .mll-compare__img,
.mll-compare img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.mll-compare .mll-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.mll-compare__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--mll-crema); transform: translateX(-.5px); pointer-events: none; }
.mll-compare__asa { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mll-crema); box-shadow: 0 2px 10px var(--mll-sombra); }
.mll-compare__asa::before, .mll-compare__asa::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid var(--mll-tinta); border-width: 0 0 1px 1px; }
.mll-compare__asa::before { left: 12px; transform: translateY(-50%) rotate(45deg); }
.mll-compare__asa::after  { right: 12px; transform: translateY(-50%) rotate(-135deg); }
.mll-compare__etq { position: absolute; bottom: 16px; padding: 6px 10px; background: rgba(243, 239, 231, .92); color: var(--mll-tinta); font-size: 10px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
.mll-compare__etq--antes { left: 16px; }
.mll-compare__etq--despues { right: 16px; }
.mll-compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.mll-compare.is-focus .mll-compare__asa { outline: 2px solid var(--mll-verd-fosc); outline-offset: 3px; }


/* =========================================================
   4. Carrusel «a sangre» (estilo Aman)
   Uso: clase mll-carrusel-bleed en el Group Carousel. Loop: Off.
   Las tarjetas siguientes asoman a la derecha; a la izquierda se recorta.
   Navegación: línea fina de progreso por tramos; flechas debajo a la derecha (ocultas en móvil).
   ========================================================= */
.et_pb_group_carousel.mll-carrusel-bleed,
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_container { overflow: visible !important; }
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_container {
  clip-path: inset(-100vh -100vw -100vh 0) !important; /* solo recorta a la izquierda */
}
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_slide {
  visibility: visible !important; opacity: 1 !important; clip-path: none !important;
}
/* NOTA a11y: las tarjetas visibles fuera del tramo activo deben llevar inert/aria-hidden (JS de Divi). */
.et_pb_section:has(.mll-carrusel-bleed) { overflow-x: clip; }

.et_pb_group_carousel.mll-carrusel-bleed { padding-bottom: 64px !important; }
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_dots {
  position: absolute !important; left: 0; right: 112px; bottom: 8px;
  display: flex !important; gap: 0 !important; justify-content: stretch !important;
  margin: 0 !important; padding: 0 !important;
}
/* Área táctil 24 px; trazo visible 2 px gracias a background-clip */
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_dot {
  flex: 1 1 0; width: auto !important; height: 24px !important; min-height: 24px;
  margin: 0 !important; padding: 11px 0 !important; border: 0 !important;
  border-radius: 0 !important; opacity: 1 !important;
  background: var(--mll-linea-ui) !important; background-clip: content-box !important;
  cursor: pointer;
}
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_dot_active { background-color: var(--mll-tinta) !important; }
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_arrow {
  top: auto !important; bottom: 0 !important; left: auto !important; transform: none !important;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--mll-tinta); background: transparent !important;
  opacity: 1 !important; visibility: visible !important;
}
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_arrow_prev { right: 48px !important; }
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_arrow_next { right: 0 !important; }
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_arrow:hover { color: var(--mll-verd-fosc); }
.et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_arrow .et-pb-icon { font-size: 18px !important; color: inherit !important; }
@media (max-width: 767px) {
  .et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_arrow { display: none !important; }
  .et_pb_group_carousel.mll-carrusel-bleed .et_pb_group_carousel_dots { right: 0; }
}


/* =========================================================
   5. Selector de idioma «ES · CA» — shortcode [mll_idiomas]
   ========================================================= */
.mll-idiomas {
  display: inline-block;
  font-size: 13px; letter-spacing: .08em; line-height: 1;
  white-space: nowrap; color: var(--mll-tinta);
}
.mll-idiomas__actual { font-weight: 500; }
.mll-idiomas__enlace { color: var(--mll-gris); text-decoration: none; }
.mll-idiomas__enlace:hover { color: var(--mll-verd-fosc); }
.mll-idiomas__sep { color: var(--mll-gris); }


/* =========================================================
   6. Panel del menú (off-canvas) — Section con la clase mll-panel
   ========================================================= */
.mll-panel {
  display: none !important;
  position: fixed !important;
  top: calc(16px + var(--mll-adminbar)); right: 16px; z-index: 100000;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px - var(--mll-adminbar));
  max-height: calc(100dvh - 32px - var(--mll-adminbar));
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(38, 42, 36, .25);
}
.mll-menu-open .mll-panel { display: block !important; }
/* Sin scroll de fondo: vale con la clase en <html> o en <body> */
html.mll-menu-open, html.mll-menu-open body, body.mll-menu-open { overflow: hidden; }

@media (max-width: 767px) {
  .mll-panel {
    top: var(--mll-adminbar); right: 0; width: 100vw; border-radius: 0;
    height: calc(100vh - var(--mll-adminbar)); height: calc(100dvh - var(--mll-adminbar));
    max-height: none;
  }
}
@media (max-width: 600px) { body.admin-bar .mll-panel { top: 0; height: 100dvh; } } /* la barra de WP no es fija aquí */

/* El editor de Divi muestra siempre el panel para poder editarlo */
.et-fb .mll-panel, .et_fb_active .mll-panel {
  display: block !important; position: relative !important;
  top: 0; right: 0; width: auto; height: auto; max-height: none; box-shadow: none;
}

/* Menú dentro del panel: lista vertical, submenú siempre visible debajo de su enlace */
.mll-panel .et-menu,
.mll-panel .et_pb_menu__menu > nav > ul {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 14px; margin: 0 !important;
}
.mll-panel .et_pb_menu__menu { display: block !important; }
.mll-panel .et_mobile_nav_menu { display: none !important; }   /* sin hamburguesa de Divi */
.mll-panel .et-menu li { display: block !important; padding: 0 !important; margin: 0 !important; }
.mll-panel .et-menu li a {
  padding: 0 !important;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.mll-panel .et-menu .menu-item-has-children > a::after { display: none !important; } /* sin flecha */
.mll-panel .et-menu .sub-menu {
  position: static !important; display: block !important;
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  width: auto !important; margin: 10px 0 0 !important; padding: 0 0 0 18px !important;
  background: transparent !important; box-shadow: none !important; border: 0 !important;
}
.mll-panel .et-menu .sub-menu li + li { margin-top: 8px !important; }
.mll-panel .et-menu .sub-menu li a { font-size: .9em; width: auto !important; }


/* =========================================================
   7. Botón MENU (☰) / cerrar (✕) — iconos dibujados con CSS
   Clase mll-menu-toggle en el enlace o en su contenedor (cubrimos ambos).
   Solo icono en todos los tamaños; el texto queda para lectores de pantalla (font-size 0).
   ":not(#_)" sube la prioridad para ganar al CSS que genera Divi en cada botón.
   ========================================================= */
a.mll-menu-toggle.et_pb_button:not(#_):not(#_),
.mll-menu-toggle a.et_pb_button:not(#_):not(#_) {
  display: inline-flex !important; align-items: center !important; gap: 0 !important;
  white-space: nowrap !important; padding: 8px !important;
  font-size: 0 !important; letter-spacing: 0 !important;
  min-width: 40px; min-height: 40px; justify-content: center !important;
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
a.mll-menu-toggle.et_pb_button:not(#_):not(#_):is(:hover, :focus, :active),
.mll-menu-toggle a.et_pb_button:not(#_):not(#_):is(:hover, :focus, :active) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  padding: 8px !important;
}
a.mll-menu-toggle:focus:not(:focus-visible),
.mll-menu-toggle .et_pb_button:focus:not(:focus-visible) { outline: none; }

a.mll-menu-toggle.et_pb_button:not(#_):not(#_)::before,
.mll-menu-toggle a.et_pb_button:not(#_):not(#_)::before { display: none !important; }

/* ☰ */
a.mll-menu-toggle.et_pb_button:not(#_):not(#_)::after,
.mll-menu-toggle a.et_pb_button:not(#_):not(#_)::after {
  content: "" !important; display: inline-block !important; position: static !important;
  opacity: 1 !important; margin: 0 !important; font-size: 0 !important;
  width: 22px !important; height: 14px !important; flex: none !important;
  color: inherit !important; transform: none !important;
  background:
    linear-gradient(currentColor, currentColor) top    / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat !important;
}
/* ✕ dentro del panel */
.mll-panel a.mll-menu-toggle.et_pb_button:not(#_):not(#_)::after,
.mll-panel .mll-menu-toggle a.et_pb_button:not(#_):not(#_)::after {
  width: 18px !important; height: 18px !important;
  background:
    linear-gradient(45deg,  transparent calc(50% - .8px), currentColor calc(50% - .8px), currentColor calc(50% + .8px), transparent calc(50% + .8px)),
    linear-gradient(-45deg, transparent calc(50% - .8px), currentColor calc(50% - .8px), currentColor calc(50% + .8px), transparent calc(50% + .8px)) !important;
}


/* =========================================================
   8. Pie global — Section con la clase mll-pie
   ========================================================= */
.mll-pie .et-menu,
.mll-pie .et_pb_menu__menu > nav > ul {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 10px; margin: 0 !important;
}
.mll-pie .et-menu li { padding: 0 !important; margin: 0 !important; }
.mll-pie .et-menu li a {
  padding: 0 !important; font-size: 15px; line-height: 1.4; text-transform: none; letter-spacing: 0;
  color: var(--mll-salvia-claro) !important; text-decoration: none; opacity: 1 !important;
}
.mll-pie .et-menu li a:hover { color: var(--mll-crema) !important; text-decoration: underline; text-underline-offset: 4px; }
.mll-pie .et_mobile_nav_menu { display: none !important; }
.mll-pie .et_pb_menu__menu { display: block !important; }
.mll-pie .mll-pie__fila { border-bottom: 1px solid rgba(243, 239, 231, .18); } /* filete decorativo */


/* =========================================================
   9. Formularios Fluent Forms sobre fondo oscuro — clase mll-form-oscuro en el módulo
   ========================================================= */
.mll-form-oscuro .fluentform,
.mll-form-oscuro .fluentform label,
.mll-form-oscuro .fluentform .ff-el-input--label label { color: var(--mll-crema) !important; }
.mll-form-oscuro .fluentform .ff-el-input--label label {
  font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 400 !important;
}
.mll-form-oscuro .fluentform .ff-el-form-control {
  background: transparent !important; color: var(--mll-crema) !important;
  border: 0 !important; border-bottom: 1px solid var(--mll-linea-ui-clara) !important;
  border-radius: 0 !important; padding: 10px 0 !important; font-size: 16px !important; box-shadow: none !important;
}
.mll-form-oscuro .fluentform .ff-el-form-control::placeholder { color: var(--mll-salvia-claro); opacity: 1; }
.mll-form-oscuro .fluentform .ff-el-form-control:focus { border-bottom-color: var(--mll-crema) !important; }
.mll-form-oscuro .fluentform .ff-el-form-check { margin-right: 20px !important; }
.mll-form-oscuro .fluentform .ff-el-form-check-label { font-size: 14px !important; color: var(--mll-salvia-claro) !important; text-transform: none; letter-spacing: 0; }
.mll-form-oscuro .fluentform input[type="checkbox"] { accent-color: var(--mll-crema); }
.mll-form-oscuro .fluentform .ff-el-tc label,
.mll-form-oscuro .fluentform .ff_t_c { font-size: 13px !important; color: var(--mll-salvia-claro) !important; text-transform: none !important; letter-spacing: 0 !important; }
.mll-form-oscuro .fluentform a { color: var(--mll-crema) !important; text-decoration: underline; }
.mll-form-oscuro .fluentform .ff-btn-submit {
  background: var(--mll-crema) !important; color: var(--mll-verd-fosc) !important;
  border: 0 !important; border-radius: 2px !important; padding: 13px 26px !important;
  font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 400 !important;
}
.mll-form-oscuro .fluentform .ff-btn-submit:hover { background: var(--mll-blanco) !important; }
.mll-form-oscuro .fluentform .text-danger,
.mll-form-oscuro .fluentform .error { color: var(--mll-error-claro) !important; font-size: 13px; }
.mll-form-oscuro .ff-message-success {
  background: transparent !important; border: 1px solid rgba(243, 239, 231, .4) !important;
  color: var(--mll-crema) !important; box-shadow: none !important; border-radius: 2px;
}


/* =========================================================
   10. Hero — Section con la clase mll-hero (+ modificador de nivel)
   Home ............ mll-hero                  → 100 %
   Nivel 1 (pilar) . mll-hero mll-hero--n1     → 85 %
   Nivel 2 (subpág.) mll-hero mll-hero--n2     → 75 %   (mll-hero--interior = alias de n2)
   Nivel 3 (fichas CPT) mll-hero mll-hero--n3  → 60 %   (Taller, Evento, Proyecto, Guía)
   Todos los valores de cada nivel viven en variables: un solo sitio para cambiarlos.
   v2.1.5 (19/10/2026): N2 65 → 75 %, N3 50 → 60 %.
   ========================================================= */
.et_pb_section.mll-hero {
  --hero-min: 720px; --hero-alto: 100;
  --hero-pt: 140px;  --hero-pb: 64px;
  position: relative;
  min-height: max(var(--hero-min), calc(var(--hero-alto) * 1vh));
  min-height: max(var(--hero-min), calc(var(--hero-alto) * 1svh));
  display: flex !important; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--hero-pt) + var(--mll-adminbar)) !important;
  padding-bottom: var(--hero-pb) !important;
  background-size: cover !important; background-position: center !important;
}
.et_pb_section.mll-hero.mll-hero--n1 { --hero-min: 680px; --hero-alto: 85; --hero-pb: 56px; }
.et_pb_section.mll-hero:is(.mll-hero--n2, .mll-hero--interior) { --hero-min: 640px; --hero-alto: 75; --hero-pb: 56px; }
.et_pb_section.mll-hero.mll-hero--n3 { --hero-min: 600px; --hero-alto: 60; --hero-pb: 48px; } /* N3 */

@media (max-width: 767px) {
  .et_pb_section.mll-hero { --hero-min: 600px; --hero-alto: 88; --hero-pt: 120px; --hero-pb: 40px; }
  .et_pb_section.mll-hero.mll-hero--n1 { --hero-min: 560px; --hero-alto: 75; --hero-pb: 36px; }
  .et_pb_section.mll-hero:is(.mll-hero--n2, .mll-hero--interior) { --hero-min: 520px; --hero-alto: 66; --hero-pb: 36px; }
  .et_pb_section.mll-hero.mll-hero--n3 { --hero-min: 480px; --hero-alto: 55; --hero-pb: 32px; } /* N3 */
}
@media (max-width: 600px) { body.admin-bar .et_pb_section.mll-hero { --mll-adminbar: 0px; } }

/* Velo para que se lean el texto y la cabecera (v2.1.4: más oscuro) */
.et_pb_section.mll-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, rgba(38, 42, 36, .50) 0%, rgba(38, 42, 36, 0) 30%),
    linear-gradient(0deg,   rgba(38, 42, 36, .78) 0%, rgba(38, 42, 36, .35) 50%, rgba(38, 42, 36, 0) 75%),
    rgba(38, 42, 36, .12);
}
/* Ancho de lectura del hero: H1 en 2 líneas, texto en 2–3 */
.et_pb_section.mll-hero h1 {
  max-width: 760px;
  text-wrap: balance;   /* reparte las palabras entre las líneas */
}
.et_pb_section.mll-hero .et_pb_text_inner p {
  max-width: 560px;
}
/* Solo las filas por encima del velo: no tocar parallax ni vídeo de fondo de Divi */
.et_pb_section.mll-hero > .et_pb_row { position: relative; z-index: 1; }

/* Páginas interiores: textos en crema automáticamente */
.mll-hero:is(.mll-hero--n1, .mll-hero--n2, .mll-hero--n3, .mll-hero--interior):not(#_) :is(h1, h2, .et_pb_text_inner, .et_pb_text_inner *) { /* N3 */
  color: var(--mll-crema) !important;
}

/* Botón-enlace en crema sobre la foto — clase mll-enlace-claro */
.mll-hero a.mll-enlace-claro.et_pb_button:not(#_):not(#_),
.mll-hero .mll-enlace-claro a.et_pb_button:not(#_):not(#_) {
  color: var(--mll-crema) !important; border-color: var(--mll-crema) !important;
}
.mll-hero a.mll-enlace-claro.et_pb_button:not(#_):not(#_)::after,
.mll-hero .mll-enlace-claro a.et_pb_button:not(#_):not(#_)::after { color: inherit !important; }

/* =========================================================
   11. Migas de pan (Rank Math) sobre el hero — módulo Text con clase mll-migas
   Las migas quedan arriba y el resto del contenido abajo, dentro de la misma columna.
   ========================================================= */
.mll-hero:is(.mll-hero--n1, .mll-hero--n2, .mll-hero--n3, .mll-hero--interior) { justify-content: flex-start !important; }
.mll-hero .et_pb_row:has(.mll-migas) {
  flex: 1 1 auto !important; display: flex !important; padding-top: 0 !important;
}
.mll-hero .et_pb_column:has(.mll-migas) {
  display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
}
.mll-hero .et_pb_text.mll-migas:not(#_):not(#_) {
  /* Ajuste fino heredado de v2 (top: -60px). Si las migas quedan bien sin él, poner 0px. */
  --mll-migas-ajuste: -60px;
  position: relative !important; top: var(--mll-migas-ajuste) !important;
  margin-top: 0 !important; margin-bottom: auto !important; padding-bottom: 32px;
}

.mll-hero .rank-math-breadcrumb {
  margin: 0 !important; font-size: 12px; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(38, 42, 36, .45);
}
.mll-hero .rank-math-breadcrumb p { margin: 0; padding: 0; }
.mll-hero .rank-math-breadcrumb,
.mll-hero .rank-math-breadcrumb a,
.mll-hero .rank-math-breadcrumb span,
.mll-hero .rank-math-breadcrumb .separator { color: rgba(243, 239, 231, .85) !important; text-decoration: none; }
.mll-hero .rank-math-breadcrumb .separator { margin: 0 .5em; }
.mll-hero .rank-math-breadcrumb a:hover { color: var(--mll-crema) !important; text-decoration: underline; text-underline-offset: 3px; }
.mll-hero .rank-math-breadcrumb .last { color: var(--mll-crema) !important; }

@media (max-width: 767px) {
  /* Visibles pero discretas (antes se ocultaban) */
  .mll-hero .et_pb_text.mll-migas:not(#_):not(#_) { --mll-migas-ajuste: 0px; padding-bottom: 20px; }
  .mll-hero .rank-math-breadcrumb { font-size: 10px; letter-spacing: .12em; }
}


/* =========================================================
   12. Cabecera transparente sobre el hero (Theme Builder)
   Clases: Section cabecera mll-cabecera · logos mll-logo-oscuro / mll-logo-claro · botón mll-btn-reservar
   Sin hero, la cabecera se ve como siempre. En el editor de Divi no se activa.
   ========================================================= */
.mll-logo-claro { display: none !important; }

/* Estado 1 · sobre el hero: transparente y en crema */
html:has(.mll-hero):not(:has(.et-fb, .et_fb_active)) .et_pb_section.mll-cabecera:not(#_):not(#_) {
  position: absolute !important; top: var(--mll-adminbar); left: 0; right: 0; z-index: 1000;
  background: transparent !important; background-color: transparent !important;
}
@media (max-width: 600px) {
  html:has(.mll-hero):not(:has(.et-fb, .et_fb_active)) body.admin-bar .et_pb_section.mll-cabecera:not(#_):not(#_) { top: 46px; }
}

html:has(.mll-hero):not(:has(.et-fb, .et_fb_active)):not(.mll-scrolled) .mll-cabecera .mll-logo-oscuro { display: none !important; }
html:has(.mll-hero):not(:has(.et-fb, .et_fb_active)):not(.mll-scrolled) .mll-cabecera .mll-logo-claro  { display: block !important; }

html:has(.mll-hero):not(:has(.et-fb, .et_fb_active)):not(.mll-scrolled) .mll-cabecera:not(#_):not(#_)
  :is(.et_pb_text_inner, .et_pb_text_inner *, .mll-idiomas, .mll-idiomas a, .mll-idiomas span, a.mll-menu-toggle, .mll-menu-toggle a) {
  color: var(--mll-crema) !important;
}
html:has(.mll-hero):not(:has(.et-fb, .et_fb_active)):not(.mll-scrolled) .mll-cabecera:not(#_):not(#_)
  :is(a.mll-btn-reservar, .mll-btn-reservar a.et_pb_button) {
  background: transparent !important; color: var(--mll-crema) !important;
  border: 1px solid var(--mll-crema) !important;
}
html:has(.mll-hero):not(:has(.et-fb, .et_fb_active)):not(.mll-scrolled) .mll-cabecera:not(#_):not(#_)
  :is(a.mll-btn-reservar, .mll-btn-reservar a.et_pb_button):hover {
  background: var(--mll-crema) !important; color: var(--mll-tinta) !important;
}
/* Foco en crema mientras la cabecera está sobre la foto */
html:has(.mll-hero):not(.mll-scrolled) .mll-cabecera :focus-visible { outline-color: var(--mll-crema); }

/* Estado 2 · al pasar el hero: fija arriba, fondo crema */
@keyframes mll-bajar { from { transform: translateY(-100%); } to { transform: none; } }
html.mll-scrolled:has(.mll-hero):not(:has(.et-fb, .et_fb_active)) .et_pb_section.mll-cabecera:not(#_):not(#_) {
  position: fixed !important; top: var(--mll-adminbar);
  background: var(--mll-crema) !important; background-color: var(--mll-crema) !important;
  box-shadow: 0 1px 0 var(--mll-linea);
  animation: mll-bajar .35s ease;
}
@media (max-width: 600px) {
  html.mll-scrolled:has(.mll-hero) body.admin-bar .et_pb_section.mll-cabecera:not(#_):not(#_) { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.mll-scrolled .et_pb_section.mll-cabecera:not(#_):not(#_) { animation: none !important; }
}


/* =========================================================
   13. Lista con filetes — módulo Text con clase mll-lista-filetes y una <ul>;
   cada <li> empieza con <strong>Título</strong>.
   Variante en línea: añadir mll-lista-filetes--linea.
   ========================================================= */
.mll-lista-filetes:not(#_):not(#_) ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mll-lista-filetes:not(#_):not(#_) li {
  list-style: none !important; margin: 0 !important; padding: 16px 0 !important;
  border-top: 1px solid var(--mll-linea);
}
.mll-lista-filetes:not(#_):not(#_) li:last-child { border-bottom: 1px solid var(--mll-linea); }
.mll-lista-filetes:not(#_):not(#_) li::before,
.mll-lista-filetes:not(#_):not(#_) li::marker { content: none; }
.mll-lista-filetes:not(#_):not(#_) li strong {
  display: block; margin-bottom: 4px;
  font-family: var(--mll-serif); font-weight: 400; font-size: 17px; line-height: 1.3;
  color: var(--mll-tinta);
}

.mll-lista-filetes--linea:not(#_):not(#_) li {
  padding: 14px 0 !important;
  font-size: 15px; line-height: 1.6; color: var(--mll-texto-sec);
}
.mll-lista-filetes--linea:not(#_):not(#_) li strong {
  display: inline; margin: 0 .25em 0 0;
  font-family: var(--mll-sans); font-weight: 500; font-size: 15px;
}
.mll-lista-filetes--linea:not(#_):not(#_) p:empty,
.mll-lista-filetes--linea:not(#_):not(#_) li > br:last-child { display: none; }


/* =========================================================
   14. Tarjeta regalo superpuesta a la imagen — Group con clase mll-tarjeta-regalo
   dentro de la columna de la imagen. Único elemento con sombra de la home.
   ========================================================= */
.et_pb_column:has(.mll-tarjeta-regalo) { position: relative; }
.mll-tarjeta-regalo:not(#_):not(#_) {
  position: absolute !important; left: -48px; bottom: -40px; z-index: 2;
  width: 320px; min-height: 200px; box-sizing: border-box;
  box-shadow: 0 18px 40px var(--mll-sombra);
}
@media (max-width: 980px) {
  .mll-tarjeta-regalo:not(#_):not(#_) {
    position: relative !important; left: auto; bottom: auto;
    width: auto !important; max-width: 360px; min-height: 0;
    margin: -48px 20px 0 20px !important; padding: 24px !important;
  }
}


/* =========================================================
   15. Imágenes con Aspect Ratio: recortar en lugar de deformar
   Divi 5 fija ancho y alto con Aspect Ratio pero no añade object-fit.
   Encuadre opcional (class): mll-img-arriba · mll-img-abajo · mll-img-izquierda · mll-img-derecha
   Para logos / PNG que no deben recortarse: mll-img-contener
   ========================================================= */
.et_pb_image img { object-fit: cover; object-position: 50% 50%; }
.et_pb_image.mll-img-contener img  { object-fit: contain; }
.et_pb_image.mll-img-arriba img    { object-position: 50% 20%; }
.et_pb_image.mll-img-abajo img     { object-position: 50% 80%; }
.et_pb_image.mll-img-izquierda img { object-position: 25% 50%; }
.et_pb_image.mll-img-derecha img   { object-position: 75% 50%; }


/* =========================================================
   16. Formulario de compra de la tarjeta regalo — contenedor mll-compra-tarjeta
   Shortcode [mll_tarjeta_regalo id="533"] (inc/tarjeta-regalo.php).
   Los importes (.mll-importe) los crea el JS como <button type="button" aria-pressed>.
   ========================================================= */

/* 16a. Elementos de WooCommerce que no se muestran */
.mll-compra-tarjeta .mll-select-oculto,
.mll-compra-tarjeta .reset_variations,
.mll-compra-tarjeta .woocommerce-variation-price,
.mll-compra-tarjeta .price,
.mll-compra-tarjeta .quantity { display: none !important; }

/* 16b. Botones de importe */
.mll-importes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.mll-importe {
  min-width: 88px; min-height: 44px; padding: 14px 20px;
  border: 1px solid var(--mll-linea-ui); border-radius: 2px;
  background: transparent; color: var(--mll-tinta);
  font: 400 15px var(--mll-sans); cursor: pointer;
}
.mll-importe.is-on, .mll-importe[aria-pressed="true"], .mll-importe:hover {
  background: var(--mll-verd-fosc); border-color: var(--mll-verd-fosc); color: var(--mll-blanco);
}
.mll-importe:focus-visible { outline: 2px solid var(--mll-verd-fosc); outline-offset: 2px; }

/* 16c. Etiquetas y campos */
.mll-compra-tarjeta label {
  display: block; margin: 0 0 6px; font: 400 12px var(--mll-sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--mll-tinta);
}
.mll-compra-tarjeta :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], textarea) {
  width: 100%; margin-bottom: 4px; padding: 10px 0 !important;
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--mll-linea-ui) !important; border-radius: 0 !important;
  font: 300 16px var(--mll-sans); color: var(--mll-tinta); box-shadow: none !important;
}
.mll-compra-tarjeta :is(input, textarea):focus { border-bottom-color: var(--mll-tinta) !important; }
.mll-compra-tarjeta input::placeholder { text-overflow: ellipsis; }
.mll-compra-tarjeta textarea { min-height: 44px; resize: vertical; }
.mll-compra-tarjeta .pwgc-subtitle { margin: 0 0 16px; font: 400 12px var(--mll-sans); color: var(--mll-gris); }

/* 16d. Distribución en dos columnas (ids de PW Gift Cards Pro 3.22)
   Para · Destinatario  |  De · Fecha de entrega  |  Mensaje a lo ancho */
.mll-compra-tarjeta #pwgc-purchase-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas: "to nombre" "from fecha" "mensaje mensaje" !important;
  column-gap: 32px !important; row-gap: 8px !important; align-items: start !important;
}
.mll-compra-tarjeta #pwgc-purchase-container > * { order: 0 !important; min-width: 0; margin: 0 !important; }
.mll-compra-tarjeta #pwgc-form-to             { grid-area: to !important; }
.mll-compra-tarjeta #pwgc-form-recipient-name { grid-area: nombre !important; }
.mll-compra-tarjeta #pwgc-form-from           { grid-area: from !important; }
.mll-compra-tarjeta #pwgc-form-delivery-date  { grid-area: fecha !important; }
.mll-compra-tarjeta #pwgc-form-message        { grid-area: mensaje !important; }
.mll-compra-tarjeta #pwgc-form-email-design,
.mll-compra-tarjeta #pwgc-custom-amount-form,
.mll-compra-tarjeta #pwgc-quantity-one-per-recipient { display: none !important; }

/* 16e. Botón de compra */
.mll-compra-tarjeta .single_add_to_cart_button {
  margin-top: 8px !important;
  background: var(--mll-verd-fosc) !important; color: var(--mll-blanco) !important;
  border: 0 !important; border-radius: 2px !important; padding: 15px 26px !important;
  font: 400 14px var(--mll-sans) !important; line-height: 1.2 !important;
}
.mll-compra-tarjeta .single_add_to_cart_button::after { display: none !important; }

@media (max-width: 767px) {
  .mll-compra-tarjeta #pwgc-purchase-container {
    grid-template-columns: 1fr !important;
    grid-template-areas: "to" "nombre" "from" "fecha" "mensaje" !important;
  }
}

/* =========================================================
   18 · Formulario de reserva del taller (Woo Add To Cart)
   Módulo de Divi con la clase  mll-reserva
   (Advanced → Attributes → class). Añadir al FINAL de style.css
   y subir Version: en la cabecera.
   ========================================================= */

/* Tabla de variaciones → etiquetas encima de cada desplegable */
.mll-reserva table.variations,
.mll-reserva table.variations tbody,
.mll-reserva table.variations tr,
.mll-reserva table.variations th,
.mll-reserva table.variations td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left;
}
.mll-reserva table.variations { margin: 0 0 8px !important; }
.mll-reserva table.variations tr { margin-bottom: 20px; }
.mll-reserva table.variations th.label,
.mll-reserva table.variations th.label label {
  font-family: 'Jost local', Jost, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--mll-tinta, #262A24);
  margin: 0 0 8px;
}

/* Desplegables */
.mll-reserva table.variations select {
  width: 100%;
  min-height: 48px;
  padding: 12px 40px 12px 14px;
  font-family: 'Jost local', Jost, sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--mll-tinta, #262A24);
  background-color: #fff;
  border: 1px solid rgba(38, 42, 36, .3);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234B5849' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.mll-reserva table.variations select:focus {
  outline: 2px solid var(--mll-verd-fosc, #4B5849);
  outline-offset: 2px;
  border-color: var(--mll-verd-fosc, #4B5849);
}

/* Enlace «Limpiar» */
.mll-reserva .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #5C6158;
  text-decoration: underline;
}

/* Precio y disponibilidad de la variación elegida */
.mll-reserva .woocommerce-variation-price .price {
  display: block;
  margin: 8px 0 4px;
  font-family: 'Prata Local', Prata, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--mll-verd-fosc, #4B5849) !important;
}
.mll-reserva .woocommerce-variation-availability .stock {
  font-size: 13px;
  color: #5C6158 !important;
  margin: 0 0 16px;
}
.mll-reserva .woocommerce-variation-availability .out-of-stock {
  color: #B53A36 !important;
}

/* Cantidad oculta (una plaza por reserva) */
.mll-reserva .quantity { display: none !important; }

/* Botón = Botón primario */
.mll-reserva .single_add_to_cart_button,
.mll-reserva .single_add_to_cart_button.button {
  display: inline-block;
  margin: 8px 0 0 !important;
  padding: 15px 26px !important;
  font-family: 'Jost local', Jost, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  background: var(--mll-verd-fosc, #4B5849) !important;
  border: 0 !important;
  border-radius: 2px !important;
  cursor: pointer;
  transition: opacity .3s ease;
}
.mll-reserva .single_add_to_cart_button:hover { opacity: .88; }
.mll-reserva .single_add_to_cart_button::after { display: none !important; } /* flecha de Divi */
.mll-reserva .single_add_to_cart_button.disabled,
.mll-reserva .single_add_to_cart_button:disabled {
  opacity: .45 !important;
  cursor: not-allowed;
}

/* =========================================================
   20. Ficha de taller · Franja de datos clave  [mll_datos]
   Section con la clase mll-datos-franja (fondo Verd Fosc)
   ========================================================= */
.mll-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 32px;
  align-items: start;
}
.mll-dato { display: flex; flex-direction: column; gap: 4px; color: var(--mll-crema, #F3EFE7); text-decoration: none; }
.mll-dato__label {
  font-family: 'Jost', sans-serif; font-size: 12px; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase; opacity: .8;
}
.mll-dato__valor { font-family: 'Prata', serif; font-size: 24px; line-height: 1.2; }
.mll-dato--proxima { border-left: 1px solid rgba(243, 239, 231, .4); padding-left: 24px; }
.mll-dato__ver {
  font-family: 'Jost', sans-serif; font-size: 15px; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 4px;
}
.mll-dato--proxima:hover .mll-dato__ver { text-decoration-thickness: 2px; }

@media (max-width: 767px) {
  .mll-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .mll-dato__valor { font-size: 20px; }
  .mll-dato--proxima {
    grid-column: 1 / -1; border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(243, 239, 231, .4); padding-top: 16px;
  }
}

/* Lista con viñetas [mll_lista] y frase [mll_para_quien] */
.mll-lista:not(#_) { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.mll-lista:not(#_) li { list-style: none !important; position: relative; margin: 0; padding-left: 22px; line-height: 1.5; }
.mll-lista:not(#_) li::marker { content: none; }
.mll-lista:not(#_) li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; border-radius: 50%; background: #4B5849;
}
.mll-para-quien { color: #4B5849; font-style: italic; margin: 0; }

/* Pasos [mll_pasos] */
.mll-pasos:not(#_) {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px;
}
.mll-pasos:not(#_) li { list-style: none !important; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mll-pasos:not(#_) li::before, .mll-pasos:not(#_) li::marker { content: none; }
.mll-paso__num { font-family: 'Prata', serif; font-size: 40px; line-height: 1; color: #4B5849; }
.mll-paso__titulo:not(#_) { font-family: 'Prata', serif; font-size: 20px; line-height: 1.25; margin: 0; padding: 0; }
.mll-paso__texto p { margin: 0 0 .6em; padding: 0; }
.mll-paso__texto p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .mll-pasos:not(#_) { grid-template-columns: 1fr; gap: 24px; }
  .mll-paso__num { font-size: 32px; }
}

/* Imagen de galería [mll_imagen] */
.mll-imagen { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.mll-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sección «La técnica» — Section con la clase mll-tecnica */
.mll-tecnica h3:not(#_):not(#_) { margin: 1.6em 0 .5em; padding: 0; }
.mll-tecnica h3:not(#_):not(#_):first-child { margin-top: 0; }
@media (min-width: 981px) {
  .mll-tecnica .mll-imagen { position: sticky; top: 120px; }
}

/* «Qué incluye» — Section con la clase mll-incluye */
.mll-incluye ul:not(#_):not(#_) { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mll-incluye ul:not(#_):not(#_) li { list-style: none !important; position: relative; padding-left: 22px; margin: 0 0 8px; }
.mll-incluye ul:not(#_):not(#_) li::marker { content: none; }
.mll-incluye ul:not(#_):not(#_) li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: #4B5849;
}

/* «Antes de venir» [mll_antes] */
.mll-antes__datos { font-weight: 500; color: #4B5849; }
.mll-antes p { margin: 0 0 .6em; }
.mll-antes p:last-child { margin-bottom: 0; }

/* Quién imparte [mll_tallerista] */
.mll-tallerista { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.mll-tallerista__foto { flex: 0 0 200px; margin: 0; aspect-ratio: 1; overflow: hidden; }
.mll-tallerista__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mll-tallerista__texto { flex: 1 1 420px; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.mll-tallerista__nombre { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #4B5849; font-weight: 500; }
.mll-tallerista__bio p { margin: 0 0 .6em; }
.mll-tallerista__bio p:last-child { margin-bottom: 0; }
.mll-tallerista__enlace { color: #4B5849; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .mll-tallerista__foto { flex-basis: 140px; } }

/* =========================================================
   Próximas fechas [mll_fechas] y bloque «Avísame»
   Section con id «fechas» y clase mll-fechas-seccion (fondo arena)
   ========================================================= */
.mll-fechas:not(#_) { list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid #C9C2B3; }
.mll-fecha:not(#_) {
  list-style: none !important; margin: 0; padding: 24px 0; border-bottom: 1px solid #C9C2B3;
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px 40px; align-items: center;
}
.mll-fecha::before, .mll-fecha::marker { content: none !important; }
.mll-fecha__cuando, .mll-fecha__que { display: flex; flex-direction: column; gap: 4px; }
.mll-fecha__dia { font-family: 'Prata', serif; font-size: 30px; line-height: 1; color: #262A24; white-space: nowrap; }
.mll-fecha__hora { font-size: 15px; }
.mll-fecha__titulo { font-weight: 500; color: #262A24; }
a.mll-fecha__titulo { text-decoration: underline; text-underline-offset: 4px; }
.mll-fecha__meta { font-size: 15px; color: #4B5849; }
.mll-fecha__compra { display: flex; align-items: center; gap: 24px; justify-content: flex-end; }
.mll-fecha__compra > span { display: flex; flex-direction: column; }
.mll-fecha__precio { font-weight: 500; white-space: nowrap; }
.mll-fecha__plazas { font-size: 14px; white-space: nowrap; }
.mll-fecha__plazas.is-pocas { color: #B53A36; font-weight: 500; }
.mll-fecha__btn.et_pb_button:not(#_):not(#_) {
  margin: 0; white-space: nowrap; background: #4B5849; border: 1px solid #4B5849; color: #F3EFE7;
  border-radius: 2px; padding: 14px 24px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}
.mll-fecha__btn.et_pb_button:not(#_):not(#_):hover { background: #262A24; border-color: #262A24; color: #F3EFE7; padding: 14px 24px; }
.mll-fecha__btn.et_pb_button:not(#_):not(#_)::after { display: none; }
.mll-fecha.is-agotada { opacity: .55; }

/* Precio y plazas apilados a la izquierda del botón */
.mll-fecha__compra { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 24px; row-gap: 2px; align-content: center; }
.mll-fecha__precio { grid-column: 1; grid-row: 1; }
.mll-fecha__plazas { grid-column: 1; grid-row: 2; }
.mll-fecha__btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

@media (max-width: 767px) {
  .mll-fecha:not(#_) { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .mll-fecha__compra { justify-content: start; margin-top: 6px; }
  .mll-fecha__dia { font-size: 20px; }
}

/* «Avísame» cuando no hay fechas */
.mll-avisame { max-width: 640px; }
.mll-avisame__titulo:not(#_) { font-family: 'Prata', serif; font-size: 24px; line-height: 1.25; margin: 0 0 8px; padding: 0; }
.mll-avisame__texto { margin: 0 0 24px; }
.mll-fecha__precio, .mll-fecha__plazas { justify-self: end; text-align: right; }
@media (max-width: 767px) { .mll-fecha__precio, .mll-fecha__plazas { justify-self: start; text-align: left; } }

/* Opiniones [mll_opiniones] y galería [mll_galeria] */
.mll-opiniones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.mll-opinion:not(#_) { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.mll-opinion__texto { font-family: 'Prata', serif; font-size: 22px; line-height: 1.45; margin: 0; color: #262A24; }
.mll-opinion__pie { font-size: 14px; color: #4B5849; letter-spacing: .04em; }
.mll-galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.mll-galeria__item { display: block; aspect-ratio: 1; overflow: hidden; }
.mll-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mll-galeria__item:hover img { transform: scale(1.03); }
@media (max-width: 767px) {
  .mll-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
  .mll-opinion__texto { font-size: 19px; }
}

/* Preguntas frecuentes [mll_faq] */
.mll-faq { max-width: 860px; border-top: 1px solid #C9C2B3; }
.mll-faq__item { border-bottom: 1px solid #C9C2B3; }
.mll-faq__pregunta { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; }
.mll-faq__pregunta::-webkit-details-marker { display: none; }
.mll-faq__pregunta h3:not(#_):not(#_) { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; margin: 0; padding: 0; color: #262A24; }
.mll-faq__pregunta::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 24px; line-height: 1; color: #4B5849; transition: transform .2s ease;
}
.mll-faq__item[open] .mll-faq__pregunta::after { transform: translateY(-50%) rotate(45deg); }
.mll-faq__pregunta:focus-visible { outline: 2px solid #4B5849; outline-offset: 4px; }
.mll-faq__respuesta { padding: 0 40px 24px 0; }
.mll-faq__respuesta p { margin: 0 0 .6em; }
.mll-faq__respuesta p:last-child { margin-bottom: 0; }

/* Relacionados [mll_relacionados] */
.mll-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.mll-tarjeta { display: flex; flex-direction: column; gap: 12px; color: #262A24; text-decoration: none; }
.mll-tarjeta__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.mll-tarjeta__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mll-tarjeta:hover .mll-tarjeta__img img { transform: scale(1.03); }
.mll-tarjeta__etiqueta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #4B5849; }
.mll-tarjeta__titulo { font-family: 'Prata', serif; font-size: 22px; line-height: 1.25; }
.mll-tarjeta:hover .mll-tarjeta__titulo { text-decoration: underline; text-underline-offset: 4px; }
.mll-tarjeta__texto { font-size: 15px; line-height: 1.55; }
.mll-tarjeta--post { background: #EEF1EC; padding: 24px; }
.mll-tarjeta--post .mll-tarjeta__img { margin: -24px -24px 0; }

/* Finalizar compra: texto blanco sobre verde, también en hover */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus{
  background-color:#4d5a4b !important;
  color:#ffffff !important;
  border:0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background-color:#3f4a3e !important; /* un punto más oscuro */
}
/* Flecha de Divi (aparece al pasar el ratón) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:after{
  color:#ffffff !important;
}

/* Tarjeta regalo y cupón: mismo estilo, solo en el carrito */
.woocommerce-cart #pwgc-redeem-gift-card-number,
.woocommerce-cart #coupon_code{
  width: 300px; max-width: 100%;
  height: 52px; padding: 0 14px;
  background: #fff; border: 1px solid #bbb; color: #4e4e4e;
  box-sizing: border-box; vertical-align: middle;
}
.woocommerce-cart #pwgc-redeem-button,
.woocommerce-cart button[name="apply_coupon"]{
  height: 52px; vertical-align: middle;
}

/* =========================================================
   17. Páginas legales — Section con la clase mll-legal
   Fila 1: cabecera (módulo Text mll-legal__cab: migas + caption + H1 + fecha)
   Fila 2 (1/4 + 3/4): mll-legal__indice  |  mll-legal__cuerpo
   Fila 3: mll-legal__otras (lista de enlaces a las otras páginas legales)
   ========================================================= */
.et_pb_section.mll-legal { background: var(--mll-crema); padding: calc(var(--mll-header-h) + 64px) 0 96px !important; }

/* Cabecera */
.mll-legal__cab { border-bottom: 1px solid var(--mll-linea); padding-bottom: 40px; margin-bottom: 56px !important; }
.mll-legal__cab .rank-math-breadcrumb { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mll-gris); margin-bottom: 40px; }
.mll-legal__cab .rank-math-breadcrumb a { color: var(--mll-gris); text-decoration: none; }
.mll-legal__cab .rank-math-breadcrumb a:hover { color: var(--mll-verd-fosc); text-decoration: underline; text-underline-offset: 3px; }
.mll-legal__cab .mll-caption { display: block; font: 400 12px var(--mll-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mll-verd-fosc); margin-bottom: 16px; }
.mll-legal__cab h1 { font-family: var(--mll-serif); font-weight: 400; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.1; color: var(--mll-tinta); margin: 0 0 20px; padding: 0; }
.mll-legal__cab .mll-legal__fecha { font: 300 14px var(--mll-sans); color: var(--mll-gris); margin: 0; }

/* Índice lateral fijo */
.mll-legal__indice { position: sticky; top: calc(var(--mll-header-h) + var(--mll-adminbar) + 24px); }
.et_pb_column:has(.mll-legal__indice) { align-self: flex-start; position: sticky; top: calc(var(--mll-header-h) + var(--mll-adminbar) + 24px); }
.mll-legal__indice p:first-child { font: 400 11px var(--mll-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mll-gris); margin-bottom: 16px; }
.mll-legal__indice ol { list-style: none !important; counter-reset: idx; margin: 0 !important; padding: 0 !important; border-left: 1px solid var(--mll-linea); }
.mll-legal__indice li { counter-increment: idx; margin: 0 !important; padding: 0 !important; }
.mll-legal__indice li a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; font: 400 14px/1.4 var(--mll-sans); color: var(--mll-texto-sec); text-decoration: none; }
.mll-legal__indice li a::before { content: counter(idx, decimal-leading-zero) "  "; color: var(--mll-gris); font-size: 12px; }
.mll-legal__indice li a:hover,
.mll-legal__indice li a.is-activo { color: var(--mll-verd-fosc); border-left-color: var(--mll-verd-fosc); }

/* Cuerpo de lectura */
.mll-legal__cuerpo { max-width: 68ch; font: 300 17px/1.75 var(--mll-sans); color: var(--mll-texto-sec); }
.mll-legal__cuerpo h2 { font-family: var(--mll-serif); font-weight: 400; font-size: 1.625rem; line-height: 1.2; color: var(--mll-tinta); margin: 64px 0 20px; padding-top: 24px; border-top: 1px solid var(--mll-linea); }
.mll-legal__cuerpo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mll-legal__cuerpo h3 { font: 500 1.0625rem/1.4 var(--mll-sans); color: var(--mll-tinta); margin: 32px 0 8px; }
.mll-legal__cuerpo p { margin: 0 0 1.1em; padding: 0; }
.mll-legal__cuerpo strong { font-weight: 500; color: var(--mll-tinta); }
.mll-legal__cuerpo a { color: var(--mll-verd-fosc); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mll-legal__cuerpo ul { list-style: none; margin: 0 0 1.4em; padding: 0; }
.mll-legal__cuerpo ul li { position: relative; padding: 0 0 0 20px; margin-bottom: .5em; }
.mll-legal__cuerpo ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--mll-verd-fosc); }
/* Tabla (cookies, tratamientos) */
.mll-legal__cuerpo table { width: 100%; border-collapse: collapse; margin: 8px 0 32px; font-size: 14px; line-height: 1.5; border: 0; }
.mll-legal__cuerpo th { text-align: left; font: 400 11px var(--mll-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mll-gris); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--mll-linea-ui); }
.mll-legal__cuerpo td { padding: 12px 12px 12px 0; border: 0; border-bottom: 1px solid var(--mll-linea); vertical-align: top; }
/* Ficha resumen del responsable (dl o bloque con clase) */
.mll-legal__cuerpo .mll-legal__ficha { background: #EEF1EC; padding: 28px 32px; margin: 0 0 40px; }
.mll-legal__cuerpo .mll-legal__ficha p { margin: 0 0 .4em; font-size: 15px; }

/* Otras páginas legales */
.mll-legal__otras { border-top: 1px solid var(--mll-linea); padding-top: 40px; margin-top: 80px !important; }
.mll-legal__otras p:first-child { font: 400 11px var(--mll-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mll-gris); }
.mll-legal__otras ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.mll-legal__otras li { padding: 0 !important; }
.mll-legal__otras a { font: 400 1.125rem var(--mll-serif); color: var(--mll-tinta); text-decoration: none; }
.mll-legal__otras a:hover { color: var(--mll-verd-fosc); text-decoration: underline; text-underline-offset: 4px; }
.mll-legal__otras a[aria-current="page"] { color: var(--mll-gris); pointer-events: none; }

@media (max-width: 980px) {
  .et_pb_column:has(.mll-legal__indice), .mll-legal__indice { position: static; }
  .mll-legal__indice { margin-bottom: 48px; }
  .mll-legal__indice ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 767px) {
  .et_pb_section.mll-legal { padding-top: calc(var(--mll-header-h) + 32px) !important; padding-bottom: 64px !important; }
  .mll-legal__indice ol { columns: 1; }
  .mll-legal__cuerpo { font-size: 16px; }
  .mll-legal__cuerpo .mll-legal__ficha { padding: 20px; }
  .mll-legal__cuerpo table { display: block; overflow-x: auto; }
}
@media print {
  .mll-legal__indice, .mll-legal__otras, .mll-cabecera, .mll-pie { display: none !important; }
  .mll-legal__cuerpo { max-width: none; color: #000; }
}
.et_pb_section.mll-legal:not(#_) { padding-top: 48px !important; }
.mll-legal__cab .rank-math-breadcrumb { margin-bottom: 24px !important; }
.mll-legal__cab .rank-math-breadcrumb p { margin: 0; padding: 0; }
.mll-legal__otras p:first-child { margin-bottom: 16px !important; }

/* =========================================================
   19. Plantilla de entrada (blog) · v1 · 10/11/2026
   Clases: .mll-articulo (Post Content), .mll-consejo, .mll-aviso,
   .mll-indice, .mll-faq, .mll-autora, .mll-compartir, .mll-tiempo-lectura
   Pegar al final de style.css y subir Version (p. ej. 2.1.5).
   ========================================================= */

/* 19a. Cuerpo del artículo: columna de lectura ~700 px, 18 px */
.mll-articulo {
  max-width: 700px;
  margin-inline: auto;
  font-family: var(--mll-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.75;
  color: var(--mll-texto-sec);
}
.mll-articulo p { margin: 0 0 1.2em; padding: 0; }
.mll-articulo h2,
.mll-articulo h3 {
  font-family: var(--mll-serif);
  font-weight: 400;
  color: var(--mll-tinta);
  padding: 0;
}
.mll-articulo h2 { font-size: 30px; line-height: 1.2; margin: 2.2em 0 .6em; }
.mll-articulo h3 { font-size: 22px; line-height: 1.3; margin: 1.8em 0 .5em; }
.mll-articulo h2:first-child { margin-top: 0; }
.mll-articulo strong { font-weight: 500; color: var(--mll-tinta); }
.mll-articulo a {
  color: var(--mll-tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mll-articulo a:hover { color: var(--mll-verd-fosc); }

/* Listas con filetes (como B10) y numeradas para pasos */
.mll-articulo ul,
.mll-articulo ol { margin: 0 0 1.4em; padding: 0; list-style: none; }
.mll-articulo ul li,
.mll-articulo ol li {
  position: relative;
  padding: .55em 0 .55em 1.6em;
  border-top: 1px solid var(--mll-linea);
}
.mll-articulo ul li:last-child,
.mll-articulo ol li:last-child { border-bottom: 1px solid var(--mll-linea); }
.mll-articulo ul li::before {
  content: "";
  position: absolute; left: .2em; top: 1.3em;
  width: 6px; height: 6px;
  background: var(--mll-verd-fosc);
}
.mll-articulo ol { counter-reset: mll-paso; }
.mll-articulo ol li { counter-increment: mll-paso; padding-left: 2.2em; }
.mll-articulo ol li::before {
  content: counter(mll-paso);
  position: absolute; left: 0; top: .55em;
  font-family: var(--mll-serif);
  color: var(--mll-verd-fosc);
}

/* Cita */
.mll-articulo blockquote {
  margin: 2em 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--mll-verd-fosc);
  font-family: var(--mll-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--mll-tinta);
}
.mll-articulo blockquote p:last-child { margin-bottom: 0; }
.mll-articulo blockquote cite {
  display: block; margin-top: .6em;
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase; font-style: normal;
  color: var(--mll-gris);
}

/* Imágenes con pie: sin radio ni sombra */
.mll-articulo figure { margin: 2em 0; }
.mll-articulo img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.mll-articulo figcaption {
  margin-top: .6em;
  font-size: 14px; line-height: 1.5;
  color: var(--mll-gris);
}

/* Tablas */
.mll-articulo .wp-block-table { margin: 2em 0; overflow-x: auto; }
.mll-articulo table { width: 100%; border-collapse: collapse; font-size: 16px; border: 0; }
.mll-articulo th,
.mll-articulo td {
  padding: .7em .8em .7em 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--mll-linea);
}
.mll-articulo th {
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mll-gris);
}

/* 19b. Recuadros dentro del cuerpo */
.mll-consejo,
.mll-aviso { margin: 2em 0; padding: 28px 32px; }
.mll-consejo { background: #EEF1EC; }                 /* Verd sutil: bloque de El Taller */
.mll-aviso { background: var(--mll-crema-2); border-left: 2px solid var(--mll-tinta); }
.mll-consejo > :last-child,
.mll-aviso > :last-child { margin-bottom: 0; }
.mll-consejo__titulo,
.mll-aviso__titulo {
  margin: 0 0 .5em !important;
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mll-verd-fosc);
}

/* 19c. Índice */
.mll-indice {
  max-width: 700px;
  margin-inline: auto;
  border-top: 1px solid var(--mll-linea);
  border-bottom: 1px solid var(--mll-linea);
  padding: 16px 0;
}
.mll-indice__titulo {
  cursor: pointer;
  list-style: none;
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mll-gris);
}
.mll-indice__titulo::-webkit-details-marker { display: none; }
.mll-indice__titulo::after { content: " +"; }
.mll-indice[open] .mll-indice__titulo::after { content: " −"; }
.mll-indice__lista { margin: 12px 0 0; padding: 0 0 0 1.4em; }
.mll-indice__lista li { padding: 3px 0; font: 300 16px/1.5 var(--mll-sans); }
.mll-indice__lista a { color: var(--mll-tinta); text-decoration: none; border-bottom: 1px solid transparent; }
.mll-indice__lista a:hover { border-bottom-color: var(--mll-tinta); }

/* 19d. FAQ (mismo aspecto que el preset MLL · Acordeón) */
.mll-faq { max-width: 700px; margin-inline: auto; border-bottom: 1px solid var(--mll-linea); }
.mll-faq__item { border-top: 1px solid var(--mll-linea); }
.mll-faq__pregunta {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font: 400 19px/1.4 var(--mll-serif);
  color: var(--mll-tinta);
}
.mll-faq__pregunta::-webkit-details-marker { display: none; }
.mll-faq__pregunta::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font: 300 24px/1 var(--mll-sans);
}
.mll-faq__item[open] .mll-faq__pregunta::after { content: "−"; }
.mll-faq__respuesta { padding: 0 40px 22px 0; font: 300 16px/1.7 var(--mll-sans); color: var(--mll-texto-sec); }
.mll-faq__respuesta p { margin: 0 0 .8em; padding: 0; }
.mll-faq__respuesta p:last-child { margin-bottom: 0; }

/* 19e. Caja de autora */
.mll-autora {
  display: flex; gap: 24px; align-items: flex-start;
  max-width: 700px; margin-inline: auto;
  padding: 32px 0;
  border-top: 1px solid var(--mll-linea);
}
.mll-autora__foto { width: 96px; height: 96px; flex: 0 0 96px; object-fit: cover; border-radius: 0; }
.mll-autora__texto p { margin: 0; padding: 0; }
.mll-autora__eyebrow {
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mll-gris);
}
.mll-autora__nombre { margin-top: 4px !important; font: 400 20px/1.3 var(--mll-serif); color: var(--mll-tinta); }
.mll-autora__bio { margin-top: 8px !important; font: 300 15px/1.6 var(--mll-sans); color: var(--mll-texto-sec); }
.mll-autora__enlace {
  display: inline-block; margin-top: 12px;
  font: 400 14px/1.4 var(--mll-sans);
  color: var(--mll-tinta);
  border-bottom: 1px solid var(--mll-tinta);
  padding-bottom: 3px;
}
@media (max-width: 600px) {
  .mll-autora { flex-direction: column; gap: 16px; }
}

/* 19f. Compartir */
.mll-compartir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  max-width: 700px; margin-inline: auto;
}
.mll-compartir__titulo {
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mll-gris);
}
.mll-compartir__enlace {
  background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  font: 400 14px/1.4 var(--mll-sans);
  color: var(--mll-tinta);
  border-bottom: 1px solid var(--mll-tinta);
}

/* 19g. Cabecera: metadatos e imagen destacada (LCP) */
.mll-tiempo-lectura { white-space: nowrap; }
.mll-entrada-meta, .mll-entrada-meta p { color: var(--mll-gris); }
.mll-articulo-portada img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* 19h. FAQ: título */
.mll-faq__titulo {
  max-width: 700px; margin: 0 auto 32px; padding: 0;
  font: 400 36px/1.2 var(--mll-serif);
  color: var(--mll-tinta);
}
.mll-faq-bloque + .mll-cta-blog,
.et_pb_module:has(.mll-faq-bloque) + .et_pb_module .mll-cta-blog { margin-top: 64px; }

/* 19i. CTA por categoría (como B15 · Tarjeta CTA) */
.mll-cta-blog {
  max-width: 700px; margin-inline: auto;
  background: var(--mll-crema);
  padding: 40px;
}
.mll-cta-blog p { padding: 0; }
.mll-cta-blog__eyebrow {
  margin: 0 0 12px;
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mll-gris);
}
.mll-cta-blog__titulo { margin: 0 0 12px; padding: 0; font: 400 20px/1.3 var(--mll-serif); color: var(--mll-tinta); }
.mll-cta-blog__texto { margin: 0 0 24px; font: 300 16px/1.7 var(--mll-sans); color: var(--mll-texto-sec); }
.mll-cta-blog__boton {
  display: inline-block;
  background: var(--mll-verd-fosc); color: var(--mll-blanco);
  padding: 15px 26px; border-radius: 2px;
  font: 400 14px/1.2 var(--mll-sans);
}
.mll-cta-blog__boton:hover { opacity: .9; color: var(--mll-blanco); }

/* 19j. Relacionadas: mismas tarjetas que «Historias de taller» (4:5) */
.et_pb_section:has(.mll-sin-relacionadas) { display: none; }
.mll-relacionadas__eyebrow {
  margin: 0 0 12px; padding: 0;
  font: 400 11px/1.4 var(--mll-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mll-gris);
}
.mll-relacionadas__titulo { margin: 0 0 40px; padding: 0; font: 400 36px/1.2 var(--mll-serif); color: var(--mll-tinta); }
@media (max-width: 767px) { .mll-relacionadas__titulo { font-size: 28px; } }
.mll-relacionadas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}
.mll-tarjeta-blog { display: flex; flex-direction: column; align-items: flex-start; }
.mll-tarjeta-blog__imagen { display: block; width: 100%; margin-bottom: 20px; }
.mll-tarjeta-blog__imagen img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 0; box-shadow: none;
}
.mll-tarjeta-blog__etiqueta {
  display: inline-block; margin-bottom: 12px;
  padding: 5px 10px;
  background: #EEF1EC; color: var(--mll-verd-fosc);
  font: 400 10px/1 var(--mll-sans);
  letter-spacing: .18em; text-transform: uppercase;
}
.mll-tarjeta-blog__titulo { margin: 0 0 16px; padding: 0; font: 400 20px/1.3 var(--mll-serif); }
.mll-tarjeta-blog__titulo a { color: var(--mll-tinta); }
.mll-tarjeta-blog__enlace {
  font: 400 14px/1.4 var(--mll-sans);
  color: var(--mll-tinta);
  border-bottom: 1px solid var(--mll-tinta);
  padding-bottom: 3px;
}
@media (max-width: 980px) { .mll-relacionadas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .mll-relacionadas { grid-template-columns: 1fr; }
  .mll-faq__titulo { font-size: 28px; }
  .mll-cta-blog { padding: 32px 24px; }
}

@media (max-width: 767px) {
  .mll-articulo { font-size: 17px; }
  .mll-articulo h2 { font-size: 26px; }
  .mll-articulo h3 { font-size: 20px; }
  .mll-articulo blockquote { font-size: 19px; }
  .mll-consejo, .mll-aviso { padding: 24px 20px; }
}