/* =====================================================================
   MADRE SELVA · Landing · Ajustes aprobados por el titular (27/10/2026)
   Se carga DESPUÉS de madre-selva-carbon-v2.css. No modifica esa hoja.

   1. Hero en tablet y celular: plantilla única para BASE, PRO y PREMIUM
      (al final de esta hoja; ver PLANTILLA_HERO_RESPONSIVE.md).
      Escritorio (>= 1100 px): sin cambios.
   2. Módulo interactivo (#stage): sin velos de color sobre las fotos;
      legibilidad con sombra tipográfica discreta.
   ===================================================================== */

/* ---------- 2. Módulo interactivo: fotos sin velo de color ---------- */
#stage article.hero-slide::after {
  background-image: none !important;
  background-color: transparent !important;
}
#stage article.hero-slide .slide-copy :is(p, h2, small) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* ---------- 3. Degradé de transición de la v2: franja CTA → «Para quien dirige» ----------
   Es la MISMA regla de madre-selva-carbon-v2.css (bloque 6), sin cambios de
   color ni de medida. En la v2 no lleva !important y el «corte corto» de 58 px
   de la hoja original (que sí lo lleva) la anulaba: verificado el 27/10 en
   ES/PT-BR/EN. Aquí solo se le da la prioridad necesaria para que se aplique. */
body section.section.ms-sale-real {
  background-image: linear-gradient(180deg, var(--msc-carbon) 0, var(--msc-gray) var(--msc-fade)) !important;
}

/* ---------- Bloque extendido de la landing aprobada (commit 9886e9e, 27/10 17:55),
   incorporado sin cambios. Va al final para prevalecer sobre los anteriores. ---------- */
/* =====================================================================
   3. Carbón Premium extendido a las superficies principales (27/10)
   Auditoría previa (1440 px): 15 bloques con fondo claro (L 220–246).
   - Fondos grandes → carbón #1F1F1D / grafito #262624, alternados.
   - Texto sobre esos fondos → blanco cálido / marfil; antetítulos y
     acentos en dorado, como en «Costos claros» (#sistema), ya aprobada.
   - Tarjetas con fondo propio (notas, fichas, productos, explorador,
     píldoras, preguntas, planes, SELVA IA / IA PRO, módulo): sin cambios.
   - Las variables de la hoja carbón v2 se redefinen para que sus
     degradés de transición unan los tonos nuevos sin cortes.
   Sin cambios: hero, franjas CTA, «Un pedido mueve todo», video,
   marquesina, cierre, footer, formularios, precios y fotografías.
   ===================================================================== */
:root {
  --msc-gray: #1F1F1D;
  --msc-gray-0: rgba(31, 31, 29, 0);
  --msc-warm: #262624;
  --msc-warm-0: rgba(38, 38, 36, 0);
  --msa-ivory: #F4F0E9;
  --msa-muted: #CFC8BC;
  --msa-gold: #D4B074;
}

html:root, html:root body { background-color: #1F1F1D !important; }

/* «Para quien dirige»: el corte claro original (gradiente con !important) pasa a carbón */
html body section.section.ms-sale-real {
  background-image: linear-gradient(180deg, #1F1F1D 0, #1F1F1D 100%) !important;
}

/* Fondos: carbón */
body section.section.ms-sale-real,
body section.image-break,
body div.ms-cta-band--inside + section.section,
body div.ms-v3.ms-interior-carousel,
body section#ms-selva-historia.section { background-color: #1F1F1D !important; }

/* Fondos: grafito */
body section.statement.ms-chaos,
body section#sistema + section.section,
body section#por-dentro.inside,
body section#ms-evolution.ms-commercial,
body section#asistentes.section.ms-ai,
body section.section.audience.ms-v2-emp,
body section.section.faq-section { background-color: #262624 !important; }

/* Texto sobre los fondos nuevos (fuera de las tarjetas con fondo propio) */
:is(section.ms-sale-real, section.ms-chaos, section#sistema + section.section, section#por-dentro,
    div.ms-cta-band--inside + section.section, section#ms-evolution, section#asistentes,
    section.ms-v2-emp, section#ms-selva-historia)
  :is(h2, h3, strong, b, .title):not(:is(.ms-note, .lightcard, .ficha-step, .product, .ms-explorer, .pill, .mc-card, .ms-ai-card, #stage, .media) *) {
  color: var(--msa-ivory) !important;
}
:is(section.ms-sale-real, section.ms-chaos, section#sistema + section.section, section#por-dentro,
    div.ms-cta-band--inside + section.section, section#ms-evolution, section#asistentes,
    section.ms-v2-emp, section#ms-selva-historia)
  :is(p, small, figcaption, .sub, .mc-intro, .ms-ai-close, .profit):not(:is(.ms-note, .lightcard, .ficha-step, .product, .ms-explorer, .pill, .mc-card, .ms-ai-card, #stage, .media) *) {
  color: var(--msa-muted) !important;
}
:is(section.ms-sale-real, section.ms-chaos, section#sistema + section.section, section#por-dentro,
    div.ms-cta-band--inside + section.section, section#ms-evolution, section#asistentes,
    section.ms-v2-emp, section#ms-selva-historia)
  :is(.eyebrow, .micro, .mc-ey, .serif, .italic-green, p.serif):not(:is(.ms-note, .lightcard, .ficha-step, .product, .ms-explorer, .pill, .mc-card, .ms-ai-card, #stage, .media) *) {
  color: var(--msa-gold) !important;
}

/* ---------- Hero: fotos BASE / PRO / PREMIUM oscurecidas un 20 % (titular, 27/10) ----------
   Equivale a una capa negra uniforme al 20 % sobre cada foto, para mejorar la
   lectura del texto. Afecta solo a las imágenes; textos, logo, CTA,
   transiciones y degradado existente del hero sin cambios.                   */
#ms-hero .h3-bg img { filter: none; }
/* reemplazado (titular, 27/10): el oscurecimiento uniforme del 20 % también
   sombreaba las caras; la lectura del texto se resuelve con el degradé del
   lado izquierdo en las tres escenas (bloque «Hero: degradé lateral»). */

/* =====================================================================
   Paneles y tarjetas oscuras con detalles dorados (titular, 27/10)
   Mensajes sueltos · panel «De la prueba a la versión final» ·
   explorador «Un vistazo por dentro» · tabla «Pedido de viandas» ·
   Vendido / Cobrado / Pendiente · rubros de «Emprendedores» ·
   preguntas frecuentes. Las capturas de la app no se modifican.
   ===================================================================== */
:root {
  --msp-card: #2C2B28;         /* tarjeta sobre carbón/grafito  */
  --msp-card-2: #232321;       /* tarjeta anidada               */
  --msp-line: rgba(227, 199, 126, 0.45);
  --msp-ivory: #F4F0E9;
  --msp-muted: #CFC8BC;
  --msp-gold: #D4B074;
  --msp-green: #9FD3BE;        /* verde institucional legible sobre oscuro */
}

/* Mensajes sueltos */
section.ms-chaos .ms-note { background: var(--msp-card) !important; border-color: var(--msp-line) !important; }
section.ms-chaos .ms-note small { color: var(--msp-gold) !important; }
section.ms-chaos .ms-note strong { color: var(--msp-ivory) !important; }
section.ms-chaos .ms-note .ms-icon:not(.ms-icon-green) { background: #E3C77E !important; color: #1F1B16 !important; }

/* Panel «De la prueba a la versión final» */
section#sistema + section.section .lightcard { background: var(--msp-card) !important; border-color: var(--msp-line) !important; }
section#sistema + section.section .lightcard .eyebrow { color: var(--msp-gold) !important; }
section#sistema + section.section .lightcard h3 { color: var(--msp-ivory) !important; }
section#sistema + section.section .ficha-step { background: var(--msp-card-2) !important; border-color: var(--msp-line) !important; }
section#sistema + section.section .ficha-step.ficha-final { background: #34322E !important; }
section#sistema + section.section .ficha-num { background: #1F1F1D !important; color: var(--msp-gold) !important; box-shadow: inset 0 0 0 1px var(--msp-line); }
section#sistema + section.section .ficha-step b { color: var(--msp-ivory) !important; }
section#sistema + section.section .ficha-step small { color: var(--msp-muted) !important; }

/* Explorador «Un vistazo por dentro» */
#por-dentro .ms-explorer { background: #1F1F1D !important; border-color: var(--msp-line) !important; }
#por-dentro .ms-explore-tabs { background: var(--msp-card) !important; border-color: var(--msp-line) !important; }
#por-dentro .ms-explore-tabs button:not(.active) { color: var(--msp-ivory) !important; }
#por-dentro .ms-explorer strong { color: var(--msp-gold) !important; }
#por-dentro .ms-explorer :is(span, figcaption) { color: var(--msp-muted) !important; }
#por-dentro .ms-explorer button:not(.active):not([id^="explore-tab"]) { background-color: var(--msp-card) !important; border-color: var(--msp-line) !important; color: var(--msp-ivory) !important; }

/* Tabla «Pedido de viandas» (Costos claros) */
#sistema .ui.ms-cost-ui { background: var(--msp-card) !important; border-color: var(--msp-line) !important; color: var(--msp-ivory) !important; }
#sistema .ms-cost-ui :is(.ui-title, strong, b) { color: var(--msp-ivory) !important; }
#sistema .ms-cost-ui :is(p, em, small) { color: var(--msp-muted) !important; }
#sistema .ms-cost-ui :is(.ms-pill, .ms-brand-chip, .ms-section-label) { color: var(--msp-gold) !important; }
#sistema .ms-cost-ui span:not(:has(*)) { color: var(--msp-gold) !important; }
#sistema .ms-cost-ui i { color: #1F1B16 !important; }   /* números 01–04 sobre su círculo dorado: contraste AA */
#sistema .ms-cost-ui :is(.ms-breakdown, .ms-result-panel) { background: var(--msp-card-2) !important; border-color: var(--msp-line) !important; }
#sistema .ms-cost-ui :is(.ms-total-row, .ms-cost-foot) { background: rgba(24, 84, 70, 0.35) !important; border-color: rgba(159, 211, 190, 0.35) !important; }
#sistema .ms-cost-ui :is(.ms-total-row, .ms-cost-foot), #sistema .ms-cost-ui :is(.ms-total-row, .ms-cost-foot) :is(span, strong, b, small, em) { color: var(--msp-green) !important; }

/* Vendido / Cobrado / Pendiente */
/* la hoja original fija estas tarjetas con «.section:not(#elabora-revende) .product-list .product» (incluye un id) */
html body div.ms-cta-band--inside + section.section:not(#ms-x) .product-list .product { background: var(--msp-card) !important; border: 1px solid var(--msp-line) !important; }
html body div.ms-cta-band--inside + section.section:not(#ms-x) .product-list .product .ui-tag { color: var(--msp-gold) !important; }
html body div.ms-cta-band--inside + section.section:not(#ms-x) .product-list .product h3 { color: var(--msp-ivory) !important; }
html body div.ms-cta-band--inside + section.section:not(#ms-x) .product-list .product small { color: var(--msp-muted) !important; }

/* Rubros de «Emprendedores» */
section.ms-v2-emp .method .pill { background: #1F1F1D !important; border-color: var(--msp-line) !important; color: var(--msp-ivory) !important; }

/* Preguntas frecuentes */
section.faq-section details { background: #1F1F1D !important; border-color: var(--msp-line) !important; }
section.faq-section details details { background: var(--msp-card-2) !important; }
section.faq-section summary { color: var(--msp-ivory) !important; }
section.faq-section details p { color: var(--msp-muted) !important; }

/* ---------- Hero BASE: degradé negro desde la izquierda (titular, 27/10) ----------
   Solo en la escena BASE, para la lectura del texto. Aparece y desaparece con
   la misma transición que las fotos (0,9 s). PRO y PREMIUM sin cambios.      */
#ms-hero .h3-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) 28%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0) 70%);
}
#ms-hero[data-scene="0"] .h3-bg::after { opacity: 1; }
/* Hero: degradé lateral también en PRO y PREMIUM (escritorio), más suave y
   solo sobre la zona del texto: termina en el 44 % del ancho, antes de las caras
   (la chica de PRO y el ejecutivo de PREMIUM), que quedan sin ninguna sombra. */
#ms-hero[data-scene="1"] .h3-bg::after,
#ms-hero[data-scene="2"] .h3-bg::after {
  opacity: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.40) 24%, rgba(0, 0, 0, 0) 44%);
}

/* ---------- Franja CTA de «Un vistazo por dentro»: más compacta (titular, 27/10) ----------
   La v2 reserva 80 px arriba y abajo para degradés que, con el fondo carbón
   completo, van de oscuro a oscuro: solo dejaban espacio vacío.          */
body div.ms-cta-band.ms-cta-band--inside {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* ---------- Degradés de transición entre secciones: 40 % más cortos (titular, 27/10) ----------
   La v2 usa --msc-fade para el alto del degradé y el relleno extra de cada
   sección: 80 px → 48 px (escritorio) y 56 px → 34 px (celular).
   No afecta al hero.                                                       */
:root { --msc-fade: 48px; }
@media (max-width: 640px) {
  :root { --msc-fade: 34px; }
}

/* ---------- «Emprendedores»: foto de la cocina con dos profesionales (titular, 27/10) ----------
   La hoja original amplía la foto al 125 % y la corre a la izquierda (encuadre
   pensado para el food truck). Para esta foto se anula y se centra en el tramo
   donde trabajan la cocinera y el cocinero (≈45 %–86 % del ancho de la foto).          */
section.ms-v2-emp .ms-v2-ft img {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  object-fit: cover !important;
  object-position: 77% center !important;   /* tablet y celular */
}
@media (min-width: 801px) {
  section.ms-v2-emp .ms-v2-ft img { object-position: 86% center !important; }   /* recuadro ~1:1 */
}
@media (max-width: 360px) {
  section.ms-v2-emp .ms-v2-ft img { object-position: 74% center !important; }   /* recuadro angosto */
}

/* ---------- «Para quien dirige»: encuadre de la foto (titular, 27/10) ----------
   Las dos personas ocupan el 64–100 % del ancho de la foto; con 65 % quedaban
   cortadas. Al 100 % se ven ambas en escritorio y celular.                */
section.ms-sale-real .photo { background-position: 100% 50% !important; }

/* ---------- Tablet y celular: recuadros con la proporción de su foto (titular, 27/10) ----------
   «Para quien dirige» (3:2) y «Emprendedores» (cocina, 16:9): con altura fija,
   el recorte cortaba a una de las dos personas. Escritorio sin cambios.   */
@media (max-width: 1099px) {
  section.ms-sale-real .photo {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2;
    background-position: center !important;
  }
  section.ms-v2-emp .ms-v2-ft {
    height: auto !important;
    aspect-ratio: 1672 / 941;
  }
  section.ms-v2-emp .ms-v2-ft img {
    height: 100% !important;
    object-position: center !important;
  }
}

/* =====================================================================
   Hero · tablet y celular · PLANTILLA ÚNICA (BASE / PRO / PREMIUM)
   Ver PLANTILLA_HERO_RESPONSIVE.md. Zonas, de arriba abajo:
   1 controles fijos arriba a la derecha · 2 logo y textos (el logo arranca
   a la altura del idioma) · 3 panel de foto a todo el ancho, apoyado en la
   barra · 4 barra inferior. Fondo de 1–2: color liso de cada plan
   (verde petróleo, azul noche, bordó).
   Sustituye los ajustes individuales anteriores. Escritorio sin cambios.
   ===================================================================== */
@media (max-width: 1099px) {
  #ms-hero { --msh-ph: min(75vw, 620px); --msh-strip: 70px; }

  /* 1 · controles: no ocupan alto ni desplazan el contenido */
  #ms-hero .hr-utility { position: absolute !important; top: 24px; right: 5.4vw; z-index: 3; }

  /* 2 · texto: deja libre el alto del panel de foto */
  #ms-hero .hr-editorial { padding-bottom: calc(var(--msh-ph) + 24px) !important; }

  /* 3 · panel de foto: misma escala en los tres planes, sin deformar */
  #ms-hero .h3-bg img:not(.h3-amb) {
    inset: auto !important; top: auto !important; left: 0 !important; right: 0;
    bottom: var(--msh-strip) !important;
    width: 100% !important; height: var(--msh-ph) !important; max-width: none;
    object-fit: cover !important; object-position: 100% 50% !important;
    transform: none !important; filter: none !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3%);
    mask-image: linear-gradient(180deg, transparent 0, #000 3%);
    z-index: 1;
  }

  /* ambiente: la foto de cada plan, desenfocada, con poco contraste y teñida del
     color oscuro del plan (verde petróleo, azul noche, bordó): textura de foto
     oscura, sin destellos de lámparas. */
  #ms-hero .h3-bg img.h3-amb:not(.h3-amb-b) {
    display: block !important;
    inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none;
    object-fit: cover !important; object-position: 0% 0% !important;
    transform: scale(2.2) !important; transform-origin: 0 0;
    filter: blur(18px) brightness(0.22) contrast(0.6) !important;   /* 60 % más oscuro (titular, 27/10) */
    -webkit-mask-image: none !important; mask-image: none !important;
    z-index: 0; opacity: 0 !important; transition: opacity 0.9s;
  }
  #ms-hero .h3-bg img.h3-amb.h3-on:not(.h3-amb-b) { opacity: 1 !important; }
  #ms-hero .h3-bg img.h3-amb-b { display: none !important; }
  #ms-hero .h3-bg { background-color: #000E08 !important; background-image: none !important; }
  #ms-hero .h3-bg::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* sobre la foto desenfocada, bajo la nítida */
    background-color: rgba(0, 14, 8, 0.86); transition: background-color 0.9s;
  }
  /* fino degradé oscuro premium del color de la pared de cada foto (60 % más oscuro), sin destellos (titular, 27/10) */
  #ms-hero[data-scene="0"] .h3-bg::before { background-color: transparent; background-image: linear-gradient(165deg, rgba(0, 21, 13, 0.9) 0%, rgba(0, 9, 5, 0.94) 100%); }   /* BASE · verde petróleo oscuro premium */
  #ms-hero[data-scene="1"] .h3-bg::before { background-color: transparent; background-image: linear-gradient(165deg, rgba(4, 9, 15, 0.9) 0%, rgba(1, 3, 6, 0.94) 100%); }   /* PRO · azul noche oscuro premium */
  #ms-hero[data-scene="2"] .h3-bg::before { background-color: transparent; background-image: linear-gradient(165deg, rgba(20, 2, 3, 0.9) 0%, rgba(8, 0, 1, 0.94) 100%); }   /* PREMIUM · bordó oscuro premium */

  #ms-hero .h3-bg::after { display: none; }
}
/* tablet: el descriptor de la marca no se parte en columna estrecha; foto más arriba */
@media (min-width: 601px) and (max-width: 1099px) {
  #ms-hero { --msh-ph: min(62vw, 560px); }
  #ms-hero .h3-brand { width: auto !important; max-width: none !important; }
  #ms-hero .h3-brand :is(.h3-desc, .h3-tag) { white-space: nowrap; }
}
/* celular: panel casi cuadrado; encuadre que centra el grupo de cada foto */
@media (max-width: 600px) {
  #ms-hero { --msh-ph: 92vw; }
  #ms-hero .h3-bg img[data-i="0"]:not(.h3-amb) { object-position: 88% 50% !important; }   /* BASE: dos mujeres y tablet (foto 1720×914) */
  #ms-hero .h3-bg img[data-i="1"]:not(.h3-amb) { object-position: 100% 50% !important; }  /* PRO (28/10): camarera, cliente y clienta */
}
/* tablet vertical: la foto sube detrás del texto, como en escritorio (titular, 27/10).
   Panel más alto: la foto se ve más ancha y deja a la izquierda el fondo del local
   (en BASE, el sillón verde) bajo las letras; las personas quedan a la derecha.
   La parte superior se funde hacia el fondo para que el texto se lea. Celular sin cambios. */
@media (min-width: 601px) and (max-width: 1099px) and (orientation: portrait) {
  #ms-hero { --msh-ph: min(86vw, 780px); --msh-ov: calc(var(--msh-ph) * 0.34); }
  #ms-hero .hr-editorial { padding-bottom: calc(var(--msh-ph) - var(--msh-ov)) !important; }
  #ms-hero .h3-bg img:not(.h3-amb) {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.4) 10%, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.4) 10%, #000 22%);
  }
  #ms-hero .h3-bg img[data-i="0"]:not(.h3-amb) { object-position: 62% 50% !important; }   /* BASE: sillón a la izquierda, mujeres a la derecha */
  #ms-hero .h3-bg img[data-i="1"]:not(.h3-amb) { object-position: 100% 50% !important; }  /* PRO */
  #ms-hero .h3-bg img[data-i="2"]:not(.h3-amb) { object-position: 76% 50% !important; }   /* PREMIUM: ejecutivo a la derecha del texto */
}
/* tablet horizontal: foto a pantalla completa, como en escritorio (titular, 27/10).
   Texto a la izquierda sobre el degradé lateral de escritorio; las personas a la
   derecha. Sin panel, sin fondo de color y sin foto desenfocada. */
@media (min-width: 900px) and (max-width: 1099px) and (orientation: landscape) {
  #ms-hero .hr-editorial { padding-bottom: 56px !important; max-width: 38%; }   /* texto angosto: las personas quedan libres */
  #ms-hero .h3-slot .h3-h1 { font-size: 4vw !important; }                       /* título en proporción de escritorio */
  #ms-hero .h3-bg img:not(.h3-amb) {
    inset: 0 !important; width: 100% !important; height: 100% !important;
    -webkit-mask-image: none; mask-image: none;
  }
  #ms-hero .h3-bg img.h3-amb:not(.h3-amb-b) { display: none !important; }
  #ms-hero .h3-bg::before { display: none; }
  #ms-hero .h3-bg::after { display: block; z-index: 2; }
  #ms-hero .h3-bg img[data-i="0"]:not(.h3-amb) { object-position: 45% 50% !important; }  /* BASE: las dos mujeres a la derecha del texto */
  #ms-hero .h3-bg img[data-i="1"]:not(.h3-amb) { object-position: 100% 50% !important; } /* PRO (28/10) */
  #ms-hero .h3-bg img[data-i="2"]:not(.h3-amb) { object-position: 100% 50% !important; } /* PREMIUM */
}

/* ---------- Hero PRO y PREMIUM en escritorio: fotos del 28/10 ----------
   Las personas están a la derecha y la pared oscura a la izquierda: la foto se
   apoya en su borde derecho. Así el texto queda sobre la pared, la cara del dueño
   (PREMIUM) no queda bajo el selector de idioma y la clienta de PRO no se corta.
   BASE sin cambios. */
@media (min-width: 1100px) {
  #ms-hero .h3-bg img[data-i="1"]:not(.h3-amb),
  #ms-hero .h3-bg img[data-i="2"]:not(.h3-amb) { object-position: 100% 50% !important; }
}
/* PRO en pantallas apaisadas más cuadradas que 16:10 (tablet horizontal y escritorio):
   aun apoyada a la derecha, la nuca del cliente sentado quedaba bajo el título. La foto
   se achica hacia su esquina inferior derecha y el borde liberado se rellena con el
   mismo azul noche de la pared (muestreado: #04162D arriba, #000F21 abajo), con un
   fundido, de modo que la pared continúa sin corte. Textos en su posición oficial. */
@media (min-width: 900px) and (orientation: landscape) and (max-aspect-ratio: 8/5) {
  #ms-hero[data-scene="1"] .h3-bg { background: linear-gradient(180deg, #04162D 0%, #000F21 100%) !important; }
  #ms-hero .h3-bg img[data-i="1"]:not(.h3-amb) {
    transform: scale(var(--ms-pro-k)) !important; transform-origin: 100% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 7%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 7%);
    mask-composite: intersect;
  }
}
/* cuanto más cuadrada la pantalla, más se achica (proporción ancho/alto) */
#ms-hero { --ms-pro-k: 0.92; }
@media (max-aspect-ratio: 3/2) { #ms-hero { --ms-pro-k: 0.86; } }
@media (max-aspect-ratio: 7/5) { #ms-hero { --ms-pro-k: 0.8; } }
@media (max-aspect-ratio: 13/10) { #ms-hero { --ms-pro-k: 0.74; } }

/* =====================================================================
   Hero · CELULAR (<= 600 px) · ESCENA ÚNICA INTEGRADA (titular, 28/10)
   Reemplaza en celular el panel apilado (texto arriba, foto abajo) de la
   plantilla anterior: la foto actual de cada plan cubre todo el hero, el logo
   queda arriba a la izquierda y título, subtítulo, lema y CTA abajo a la
   izquierda, sobre la foto. Mismas fotos, sin recortes físicos: solo
   object-fit/object-position. Tablet y escritorio sin cambios.
   ===================================================================== */
@media (max-width: 600px) {
  /* el hero ocupa el alto visible (mínimo 820 px, para que en celulares bajos
     la foto no se achique y el texto no pise tablets ni celulares); el texto
     se apoya abajo y el logo arriba */
  #ms-hero { --msm-h: max(100vh, 820px); --msm-h: max(100svh, 820px); min-height: var(--msm-h); }
  #ms-hero .hr-editorial {
    padding-bottom: 28px !important;
    min-height: calc(var(--msm-h) - 24px - var(--msh-strip));
  }
  #ms-hero .h3-copy { margin-top: auto !important; }

  /* foto a todo el hero, sin panel ni fundido superior */
  #ms-hero .h3-bg img:not(.h3-amb) {
    inset: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    -webkit-mask-image: none; mask-image: none;
  }
  /* encuadre por plan: la persona principal grande, cara y dispositivo libres */
  /* Misma escala de personas en los tres planes (titular, 28/10): la referencia es
     la camarera de PRO, con la foto a todo el alto. En BASE y PREMIUM las personas
     salen más grandes en su foto original, así que la foto ocupa el --msm-k superior
     del hero (BASE 83 %, PREMIUM 72 %) y se funde hacia abajo en la base oscura del
     texto. Sin recorte físico: solo el tamaño del recuadro y object-position.
     BASE: la mujer con la tablet en mano; la tablet queda por encima del título. */
  #ms-hero .h3-bg img[data-i="0"]:not(.h3-amb) { --msm-k: 83%; object-position: var(--msm-base, 48%) 50% !important; }
  #ms-hero .h3-bg img[data-i="1"]:not(.h3-amb) { object-position: var(--msm-pro, 74%) 50% !important; }
  #ms-hero .h3-bg img[data-i="2"]:not(.h3-amb) { --msm-k: 72%; object-position: var(--msm-premium, 87%) 50% !important; }
  #ms-hero .h3-bg img:is([data-i="0"], [data-i="2"]):not(.h3-amb) {
    top: 0 !important; bottom: auto !important; height: var(--msm-k) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  /* BASE y PREMIUM: bajan 3,5 % para que el pelo no roce los indicadores; arriba se funden en la pared oscura */
  #ms-hero .h3-bg img:is([data-i="0"], [data-i="2"]):not(.h3-amb) {
    top: 3.5% !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 78%, transparent 100%);
  }
  #ms-hero .h3-bg img[data-i="2"]:not(.h3-amb) { top: 7% !important; }   /* PREMIUM, más chica: un poco más abajo */
  #ms-hero .h3-bg { background-color: #050505 !important; }

  /* sin foto desenfocada ni velo de color del panel */
  #ms-hero .h3-bg img.h3-amb { display: none !important; }
  #ms-hero .h3-bg::before { display: none; }

  /* legibilidad (titular, 28/10: «oscurecer un poco el fondo con degradé»):
     base inferior oscura bajo título, subtítulo y CTA; lateral izquierdo; y un
     velo suave arriba a la izquierda detrás del logo. Arriba a la derecha, un velo
     oscuro bajo idioma, Pausa e indicadores apaga lámparas y luces de las fotos
     (titular, 28/10: «sin destellos arriba en los botones, limpio y sobrio»);
     se desvanece antes de las caras. */
  #ms-hero {
    --msm-top:
      radial-gradient(ellipse 72% 26% at 100% 0%, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 12%, rgba(0, 0, 0, 0) 22%);
  }
  #ms-hero .h3-bg::after {
    display: block; z-index: 2; opacity: 1;
    background:
      var(--msm-top),
      radial-gradient(ellipse 62% 34% at 0% 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.68) 22%, rgba(0, 0, 0, 0.3) 42%, rgba(0, 0, 0, 0) 56%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.32) 40%, rgba(0, 0, 0, 0) 64%) !important;
  }
  #ms-hero[data-scene="0"] .h3-bg::after {   /* BASE: fondo más claro, algo más de degradé */
    background:
      var(--msm-top),
      radial-gradient(ellipse 62% 34% at 0% 0%, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 24%, rgba(0, 0, 0, 0.34) 44%, rgba(0, 0, 0, 0) 58%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.38) 42%, rgba(0, 0, 0, 0) 66%) !important;
  }
  /* ES y PT, como el modelo EN: el descriptor y el lema de la marca son más largos
     en estos idiomas y se acercaban a las caras. Mismo texto, fuente y tamaño; solo
     menos espaciado entre letras, para que ocupen el mismo ancho que en inglés. */
  html:is([data-ms-lang="es"], [data-ms-lang="pt"]) #ms-hero .h3-brand :is(.h3-desc, .h3-tag) { letter-spacing: 0.06em !important; }
  #ms-hero .hr-editorial :is(.h3-brand, .h3-copy, .h3-actions) span,
  #ms-hero .hr-editorial :is(.h3-h1, .h3-sub, .h3-link) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.45);
  }
}
/* celular angosto (< 360 px): PREMIUM un poco a la derecha, para que el pelo no quede bajo «MADRE SELVA» */
@media (max-width: 359px) {
  #ms-hero { --msm-premium: 84.5%; }
}

/* =====================================================================
   Cierre de la landing (titular, 28/10) · PC, tablet y celular · ES/PT-BR/EN
   - «Preguntas frecuentes»: menos espacio vacío arriba y abajo.
   - Bloque final («Más claridad para tu negocio.»): misma separación entre
     antetítulo, título, frase dorada y botón; interlineado legible; sección
     más alta para que se vea más la foto de fondo. Textos, colores, foto y
     links sin cambios.
   ===================================================================== */
html body section.section.faq-section { padding-top: 64px !important; padding-bottom: 64px !important; }

html body section.final {
  --msf-gap: 28px;
  padding-top: 128px !important;
  padding-bottom: 136px !important;
}
/* «MADRE SELVA» (titular, 28/10): al 54 % de la frase dorada («Más control para vos.»; 90 % menos un 40 %),
   que mide 0,82 del título; el título usa clamp(42px, 10vw, 70px) hasta 800 px y clamp(42px, 5vw, 76px) desde ahí. */
html body section.final .eyebrow {
  display: block; margin: 0 !important; line-height: 1.1 !important;
  font-size: clamp(18.6px, 2.21vw, 33.7px) !important; letter-spacing: 0.14em !important;
}
@media (max-width: 800px) {
  html body section.final .eyebrow { font-size: clamp(18.6px, 4.43vw, 31px) !important; }
}
html body section.final h2 { margin: var(--msf-gap) auto 0 !important; line-height: 1.08 !important; }
html body section.final h2 .serif { display: block; margin-top: var(--msf-gap) !important; line-height: 1.12 !important; }
html body section.final h2 br { display: none; }
html body section.final .btn { margin-top: var(--msf-gap) !important; }

@media (max-width: 1099px) {
  html body section.section.faq-section { padding-top: 48px !important; padding-bottom: 48px !important; }
  html body section.final { --msf-gap: 24px; padding-top: 104px !important; padding-bottom: 112px !important; }
}
@media (max-width: 600px) {
  html body section.section.faq-section { padding-top: 36px !important; padding-bottom: 36px !important; }
  html body section.final { --msf-gap: 20px; padding-top: 84px !important; padding-bottom: 92px !important; }
}