/* variables.css · Landing Machine · base layer
   Tokens reemplazados por el builder al generar. No editar manualmente.
   ──────────────────────────────────────────────────────────────────── */

:root {

  /* ── Paleta ── */
  --color-fondo:        #f7f6f3;
  --color-fondo-rgb:    247,246,243;      /* sin rgb(), solo "245,234,208" */
  --color-texto:        #302918;
  --color-texto-rgb:    48,41,24;
  --color-texto-2:      #272521;        /* texto secundario/cuerpo (independiente de acento-2) */
  --color-texto-3:      #776743;        /* texto de eyebrow (independiente de acento) */
  --color-subtitulo:    #776743;      /* color propio de .subtitulo, independiente de texto-3 */
  --color-acento:       #cc981e;
  --color-acento-2:     #85a923;
  --color-acento-3:     #d54934;
  --color-superficie:   #edeae3;
  --color-borde:        #d9d1bf;
  --color-borde-rgb:    217,209,191;
  --color-verde:        #7a9e6a;          /* para botón WA y acentos positivos */
  --color-contraste:    #000000;       /* texto (blanco/negro) que mejor lee sobre --color-acento */
  --color-contraste-2:  #000000;     /* ídem, sobre --color-acento-2 */
  --color-contraste-3:  #000000;     /* ídem, sobre --color-acento-3 */

  /* ── Paleta Tienda (mod-tienda) ──
     Independiente de los acentos generales pero con default tomado de
     ahí (acento-2/3/1) — editable aparte solo si el proyecto lo pisa en
     Identidad → Paleta Tienda. */
  --color-tienda-activo:     #85a923;     /* categoría activa (cat-grid/sidebar) */
  --color-tienda-destacado:  #d54934;  /* badge cantidad, selector en-carrito, FAB "Ver carrito" */
  --color-tienda-cerrar:     #cc981e;     /* fondo del botón cerrar del overlay */

  /* ── Tipografía ── */
  --fuente-display:     'Cormorant Garamond', serif;
  --fuente-cuerpo:      'Outfit', sans-serif;
  --fuente-subtitulo:   'Cormorant Garamond', serif;   /* alias a fuente-display o fuente-cuerpo, elegible en Apariencia */

  /* Ajuste global de tamaño (Apariencia → selector +/- junto a cada fuente).
     Se suma con calc() a cada título/cuerpo del sitio — no reemplaza el
     clamp() fluido de cada Hero, lo desplaza entero. Guardado por familia
     tipográfica, no es un valor fijo. */
  --ajuste-titulo:      0rem;
  --ajuste-cuerpo:      0rem;
  --ajuste-eyebrow:         0rem;
  --ajuste-espacio-eyebrow: 0rem;
  --ajuste-subtitulo:       0rem;

  /* Mayúsculas/Itálica por rol — editable en Identidad → Tipografía */
  --eyebrow-transform:      uppercase;    /* none | uppercase */
  --eyebrow-style:          normal;        /* normal | italic */
  --titulo-transform:       none;
  --titulo-style:           italic;
  --subtitulo-transform:    none;
  --subtitulo-style:        italic;
  --cuerpo-transform:       none;
  --cuerpo-style:           normal;

  /* ── Escala tipográfica (fija, no token) ── */
  --texto-xs:   0.6875rem;   /* 11px */
  --texto-sm:   0.8125rem;   /* 13px */
  --texto-md:   1.0625rem;   /* 17px */
  --texto-lg:   1.25rem;     /* 20px */
  --texto-xl:   1.75rem;     /* 28px */
  --texto-2xl:  2.5rem;      /* 40px */

  /* ── Espaciado (fijo, no token) ── */
  --espacio-xs:   8px;
  --espacio-sm:   16px;
  --espacio-md:   24px;
  --espacio-lg:   48px;
  --espacio-xl:   80px;
  --espacio-2xl:  120px;

  /* ── Secciones ── */
  --sec-v:  52px;   /* padding vertical de secciones */
  --sec-h:  24px;   /* padding horizontal mobile */

  /* ── Layout: contenedor de contenido ──
     Ancho máximo y padding lateral estándar para nav, secciones y footer.
     Fuente única: cambiar acá afecta todo el sitio, módulos actuales y futuros. */
  --ancho-contenido: 1100px;
  --contenedor-pad:  var(--sec-h);

  /* ── Componentes ── */
  --radio:       2px;    /* e.g. "2px", "8px", "0px" */
  --transicion:  0.25s ease;
  --sombra-box:  0 8px 40px rgba(var(--color-texto-rgb), 0.10);
  --nav-h:       56px;     /* e.g. "80px" */

  /* ── Texturas SVG (inyectadas por base/texturas.js en runtime) ── */
  /* --t6-h, --t6-v, --t8-h, --t8-v, --t2 se definen por JS */

}

/* --contenedor-pad por breakpoint — único lugar donde se define el padding
   lateral estándar de tablet y desktop para cualquier módulo. */
@media (min-width: 768px)  { :root { --contenedor-pad: var(--espacio-lg);  } }
@media (min-width: 1024px) { :root { --contenedor-pad: var(--espacio-2xl); } }


/* reset.css · Landing Machine · base layer */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:focus:not(:focus-visible) { outline: none; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  background:    var(--color-fondo);
  color:         var(--color-texto);
  font-family:   var(--fuente-cuerpo);
  font-weight:   300;
  font-size:     calc(var(--texto-md) + var(--ajuste-cuerpo, 0rem));
  line-height:   1.7;
  overflow-x:    hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Carga suave */
html       { opacity: 0; }
html.listo { opacity: 1; transition: opacity 0.25s ease; }

img    { display: block; max-width: 100%; height: auto; object-fit: cover; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
input  { font-family: inherit; font-size: inherit; }

/* Scrollbar oculta — navegación por ruedita/teclado/touch */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

/* Contenedor estándar — usar en todo módulo (nav, secciones, footer) para que
   su ancho quede alineado con el resto del sitio. Aplicar .lm-contenedor-pad
   al elemento externo (fondo/full-bleed) y .lm-contenedor al interno
   (contenido). Cambiar ancho o padding se hace en una sola línea en
   base/variables.css — nunca hardcodear estos valores en un módulo. */
.lm-contenedor-pad { padding-inline: var(--contenedor-pad); }
.lm-contenedor      { max-width: var(--ancho-contenido); margin-inline: auto; }


/* tipografia.css · Landing Machine · base layer */

h1, h2, h3 {
  font-family:    var(--fuente-display);
  font-weight:    500;
  font-style:     var(--titulo-style, italic);
  text-transform: var(--titulo-transform, none);
  line-height:    1.05;
  color:          inherit;
}

/* Etiqueta de sección: "El espacio", "Las clases", etc. */
.seccion-label {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-eyebrow, 0rem));
  font-weight:    500;
  letter-spacing: 0.28em;
  text-transform: var(--eyebrow-transform, uppercase);
  font-style:     var(--eyebrow-style, normal);
  color:          var(--color-texto-3);
  opacity:        0.60;
  display:        flex;
  align-items:    center;
  gap:            var(--espacio-sm);
  margin-bottom:  calc(var(--espacio-md) + var(--ajuste-espacio-eyebrow, 0rem));
}

.seccion-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-borde);
}

.seccion__titulo {
  font-size: calc(var(--texto-2xl) - 2px + var(--ajuste-titulo, 0rem));
}

.seccion__intro {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:    1.80;
  color:          var(--color-texto-2);
  margin-top:     var(--espacio-sm);
  text-transform: var(--cuerpo-transform, none);
  font-style:     var(--cuerpo-style, normal);
}

.eyebrow {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-eyebrow, 0rem));
  font-weight:    500;
  letter-spacing: 0.28em;
  text-transform: var(--eyebrow-transform, uppercase);
  font-style:     var(--eyebrow-style, normal);
  display:        block;
}

/* Subtítulo: tipo propio (Apariencia → Subtítulo), reusable por cualquier
   módulo. Fuente/tamaño/mayúsculas/color independientes de título, cuerpo
   y eyebrow — agregar esta clase alcanza para heredar los 4 controles. */
.subtitulo {
  font-family:    var(--fuente-subtitulo, var(--fuente-display));
  font-style:     var(--subtitulo-style, italic);
  font-weight:    400;
  font-size:      calc(var(--texto-lg) + var(--ajuste-subtitulo, 0rem));
  line-height:    1.3;
  text-transform: var(--subtitulo-transform, none);
  color:          var(--color-subtitulo);
}

/* Secciones */
.seccion { padding: 32px var(--sec-h) var(--sec-v); }

@media (min-width: 768px) {
  .seccion { min-height: 100vh; min-height: 100svh; }
}


/* botones.css · Landing Machine · base layer
   Todos los estilos de botones van acá. Los módulos NO definen botones propios. */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--espacio-xs);
  font-family:     var(--fuente-cuerpo);
  font-size:       calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:     500;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  padding:         13px 26px;
  border-radius:   var(--radio);
  transition:      opacity var(--transicion), background var(--transicion), border-color var(--transicion);
  white-space:     nowrap;
  line-height:     1;
  cursor:          pointer;
  border:          1px solid transparent;
}

/* Sólido — color acento */
.btn--primario {
  background: var(--color-acento);
  color:      var(--color-contraste);
}
.btn--primario:hover { opacity: 0.85; }

/* Ghost — sobre fotos oscuras */
.btn--ghost {
  font-family:  var(--fuente-display);
  font-style:   italic;
  font-weight:  600;
  font-size:    calc(1.05rem + var(--ajuste-cuerpo, 0rem));
  letter-spacing: 0.01em;
  text-transform: none;
  padding:      11px 28px;
  background:   transparent;
  color:        #fff;
  border-color: rgba(255,255,255,0.45);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.80);
  background:   rgba(255,255,255,0.08);
  opacity:      1;
}

/* Outline — sobre fondos claros */
.btn--outline {
  background:  transparent;
  color:       var(--color-acento);
  border-color: var(--color-acento);
}
.btn--outline:hover { background: var(--color-acento); color: var(--color-contraste); opacity: 1; }

/* Enviar formulario */
.btn--enviar {
  width:      100%;
  background: var(--color-acento);
  color:      var(--color-contraste);
  padding:    15px 24px;
  font-size:  calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  letter-spacing: 0.10em;
}
.btn--enviar:hover   { opacity: 0.85; }
.btn--enviar:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}


/* Modal genérico — usado por privacidad (form y footer) */

.privacidad-trigger {
  font-size:             calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:                 var(--color-acento);
  text-decoration:       underline;
  text-underline-offset: 2px;
  cursor:                pointer;
}

.modal {
  position:        fixed;
  inset:           0;
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--espacio-sm);
  visibility:      hidden;
  opacity:         0;
  transition:      opacity 0.22s ease, visibility 0s linear 0.22s;
}
.modal--visible {
  visibility: visible;
  opacity:    1;
  transition: opacity 0.22s ease;
}

.modal__overlay {
  position:                    absolute;
  inset:                       0;
  background:                  rgba(0,0,0,0.55);
  backdrop-filter:             blur(4px);
  -webkit-backdrop-filter:     blur(4px);
}

.modal__card {
  position:       relative;
  z-index:        1;
  background:     var(--color-fondo);
  width:          100%;
  max-width:      640px;
  max-height:     84vh;
  display:        flex;
  flex-direction: column;
  border-radius:  calc(var(--radio) + 4px);
  overflow:       hidden;
  box-shadow:     0 24px 64px rgba(0,0,0,0.22);
  transform:      translateY(12px);
  transition:     transform 0.22s ease;
}
.modal--visible .modal__card { transform: translateY(0); }

.modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--espacio-md);
  padding:         var(--espacio-md) var(--espacio-md) var(--espacio-sm);
  border-bottom:   1px solid rgba(var(--color-borde-rgb), 0.10);
  flex-shrink:     0;
  background:      var(--color-fondo);
}

.modal__titulo {
  font-family: var(--fuente-display);
  font-size:   calc(var(--texto-xl) + var(--ajuste-titulo, 0rem));
  font-weight: 500;
  font-style:  italic;
  color:       var(--color-acento);
}

.modal__cerrar {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       32px;
  height:      32px;
  flex-shrink: 0;
  color:       var(--color-texto);
  opacity:     0.50;
  transition:  opacity var(--transicion);
}
.modal__cerrar:hover { opacity: 1; }

.modal__cuerpo {
  overflow-y:                    auto;
  padding:                       var(--espacio-md);
  scrollbar-width:               none;
  -webkit-overflow-scrolling:    touch;
}
.modal__cuerpo::-webkit-scrollbar { display: none; }

.modal__intro {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:    1.75;
  color:          var(--color-texto);
  margin-bottom:  var(--espacio-md);
  padding-bottom: var(--espacio-sm);
  border-bottom:  1px solid rgba(var(--color-borde-rgb), 0.08);
}

.modal__seccion            { margin-bottom: var(--espacio-sm); }
.modal__seccion:last-child { margin-bottom: 0; }

.modal__seccion-titulo {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-acento);
  margin-bottom:  6px;
}

.modal__texto {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.75;
  color:       var(--color-texto);
}

.modal__lista {
  font-size:    calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:  1.75;
  color:        var(--color-texto);
  margin-top:   4px;
  padding-left: var(--espacio-sm);
  list-style:   disc;
}

.modal__campo-vacio { font-style: italic; opacity: 0.45; }

.modal__pie {
  font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:       var(--color-texto);
  opacity:     0.55;
  margin-top:  var(--espacio-md);
  padding-top: var(--espacio-sm);
  border-top:  1px solid rgba(var(--color-borde-rgb), 0.08);
  line-height: 1.6;
}
.modal__pie a { color: var(--color-acento); }


/* carrusel.css · Landing Machine · base layer
 * Fotos apiladas con fundido (motor en base/carrusel.js). El alto lo fija
 * el aspect-ratio de la pista, nunca las fotos: así no se achata dentro de
 * un flex. Marco, tamaño y controles los dibuja cada módulo.
 */

.carrusel__pista {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: var(--carrusel-proporcion, 3 / 4);
  touch-action: pan-y;
}

.carrusel__slide {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .45s ease;
}
.carrusel__slide--activo {
  opacity:        1;
  pointer-events: auto;
}


/* separador.css · Landing Machine · base layer
   Línea horizontal suave entre partes de una página: 1 px del color del
   texto muy diluido, que se desvanece en las puntas. Va en el borde de
   arriba del elemento con .separador y ocupa el ancho del contenido. */

.separador { position: relative; }

.separador::before {
  content:        '';
  position:       absolute;
  top:            0;
  left:           50%;
  width:          min(var(--separador-ancho, 640px), calc(100% - 2 * var(--contenedor-pad)));
  height:         1px;
  transform:      translateX(-50%);
  background:     linear-gradient(to right, transparent, rgba(var(--color-texto-rgb), 0.16) 20%, rgba(var(--color-texto-rgb), 0.16) 80%, transparent);
  pointer-events: none;
}


/* mod-nav / nav-03 / styles.css
   Base heredada de nav-01 (mismo chasis: nav fija, logo, links, social,
   hamburguesa y menú desplegable) más la barra de venta propia de este
   layout. El menú solo se dibuja si el proyecto tiene links, así que estas
   reglas quedan inertes mientras no los haya — ver template.php. */

/* nav-01 · Nav fija superior · hamburguesa izquierda mobile */

body { padding-top: var(--nav-h); }

nav#nav {
  position:         fixed;
  top: 0; left: 0; right: 0;
  z-index:          100;
  height:           var(--nav-h);
  background-color: rgba(var(--nav-fondo-rgb, var(--color-fondo-rgb)), var(--nav-fondo-opacidad, 0.94));
  background-image: var(--t6-h), var(--t6-v);
  backdrop-filter:        blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.07);
}

.nav__inner {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Mobile: padding propio, más angosto que el estándar .lm-contenedor-pad
   (sin tocar — layout mobile ya validado) */
@media (max-width: 767px) {
  nav#nav { padding-inline: 14px; }
}

.nav__logo {
  display:     flex;
  align-items: center;
  height:      100%;
  flex:        1;
  padding-left: var(--espacio-xs);
}

.logo-img {
  height: 44px;
  width:  auto;
  display: block;
}

/* Links: ocultos en mobile, visibles desde tablet */
.nav__links { display: none; }

.nav__social {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.nav__social .footer__icon-link { width: 30px; height: 30px; }

/* Hamburguesa: va primero (izquierda) en mobile */
.nav__toggle {
  width:           40px;
  height:          40px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  flex-shrink:     0;
  order:           -1;
}

.nav__toggle-icon { display: block; color: var(--color-texto); }

.nav__toggle .bar {
  transition:      transform var(--transicion), opacity var(--transicion);
  transform-box:   fill-box;
  transform-origin: center;
}

.nav--abierto .nav__toggle .bar--1 { transform: translateY(6px)  rotate(45deg); }
.nav--abierto .nav__toggle .bar--2 { opacity: 0; }
.nav--abierto .nav__toggle .bar--3 { transform: translateY(-6px) rotate(-45deg); }

/* Menú mobile: panel desde esquina superior izquierda */
.nav__menu-mobile {
  position:         fixed;
  top:              var(--nav-h);
  left:             14px;
  width:            190px;
  background-color: rgba(var(--nav-fondo-rgb, var(--color-fondo-rgb)), var(--nav-fondo-opacidad, 0.98));
  backdrop-filter:        blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right:  1px solid rgba(var(--color-borde-rgb), 0.07);
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.07);
  border-radius: 0 0 var(--radio) var(--radio);
  padding:        var(--espacio-sm) var(--espacio-md) var(--espacio-md);
  flex-direction: column;
  z-index:        99;
  display:        flex;
  visibility:     hidden;
  opacity:        0;
  transform:      translateY(-8px);
  transition:     opacity var(--transicion), transform var(--transicion), visibility 0s linear 0.25s;
  pointer-events: none;
}

.nav__menu-mobile a {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.2;
  font-weight: 400;
  text-align:  center;
  padding:     10px 0;
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.08);
  transition:  opacity var(--transicion), color var(--transicion);
}

.nav__menu-mobile a.activo {
  color:       var(--color-acento);
  font-weight: 600;
}

.nav__menu-mobile a:last-child { border-bottom: none; }
.nav__menu-mobile a:hover      { opacity: 0.65; }

/* Link destacado (ej. Tienda) — misma mancha de acuarela que en desktop.
   display:inline-block para que el blob abrace el texto, no todo el ancho
   del panel (que es angosto, 220px, y quedaría un rectángulo pegado). */
.nav__menu-mobile a.nav__link--destacado {
  display:     inline-block;
  position:    relative;
  font-weight: 700;
  border-bottom: none;
}
.nav__menu-mobile a.nav__link--destacado::before {
  content:       '';
  position:      absolute;
  inset:         -2px -10px;
  z-index:       -1;
  background:    radial-gradient(ellipse at 38% 42%,
                    color-mix(in srgb, var(--color-acento) 55%, transparent) 0%,
                    color-mix(in srgb, var(--color-acento) 28%, transparent) 45%,
                    transparent 72%);
  border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
  filter:        blur(1px);
  transform:     rotate(-3deg);
}

.nav--abierto   .nav__menu-mobile,
.nav--cerrando  .nav__menu-mobile {
  visibility:     visible;
  pointer-events: auto;
  transition:     opacity var(--transicion), transform var(--transicion);
}

.nav--abierto .nav__menu-mobile {
  opacity:   1;
  transform: translateY(0);
}

.nav--cerrando .nav__menu-mobile {
  opacity:   0;
  transform: translateY(-8px);
}

/* Íconos sociales (compartidos con footer) */
.footer__icon-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  transition:      opacity var(--transicion);
  color:           var(--color-texto);
}

.footer__icon-link:hover { opacity: 0.65; }

.footer__icon-share { margin-left: -4px; }

/* Modo "con color" (toggle desde el builder) — cada red usa su color de marca
   en vez de heredar currentColor. Compartir queda siempre neutro. */
.footer__icon-link--color.footer__icon-wa       { color: #25D366; }
.footer__icon-link--color.footer__icon-ig       { color: #E1306C; }
.footer__icon-link--color.footer__icon-fb       { color: #1877F2; }
.footer__icon-link--color.footer__icon-tiktok   { color: #000000; }
.footer__icon-link--color.footer__icon-yt       { color: #FF0000; }
.footer__icon-link--color.footer__icon-linkedin { color: #0A66C2; }

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .nav__toggle      { display: none; }
  .nav__menu-mobile { display: none !important; }

  .nav__logo { flex: none; }

  .nav__links {
    display:     flex;
    align-items: center;
    gap:         var(--espacio-md);
    flex:        1;
    justify-content: center;
  }

  .nav__links a {
    font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:     4px 0;
    transition:  opacity var(--transicion);
    position:    relative;
  }

  .nav__links a::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    left:       0;
    width:      0;
    height:     1px;
    background: var(--color-acento);
    transition: width var(--transicion);
  }

  .nav__links a:hover::after,
  .nav__links a.activo::after { width: 100%; }
  .nav__links a:hover         { opacity: 0.75; }
  .nav__links a.activo        { color: var(--color-acento); opacity: 1; }

  /* Link destacado (ej. Tienda) — mancha de acuarela en vez del subrayado */
  .nav__links a.nav__link--destacado {
    font-weight: 700;
    padding:     5px 14px;
  }
  .nav__links a.nav__link--destacado::before {
    content:       '';
    position:      absolute;
    inset:         -5px -8px;
    z-index:       -1;
    background:    radial-gradient(ellipse at 38% 42%,
                      color-mix(in srgb, var(--color-acento) 55%, transparent) 0%,
                      color-mix(in srgb, var(--color-acento) 28%, transparent) 45%,
                      transparent 72%);
    border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
    filter:        blur(1px);
    transform:     rotate(-3deg);
  }
  .nav__links a.nav__link--destacado::after { display: none; }
  .nav__links a.nav__link--destacado.activo { color: var(--color-texto); }
}

/* ── Desktop (1024px) ── */
@media (min-width: 1024px) {
  .logo-img { height: 50px; }
}


/* ── Barra de venta ──────────────────────────────────────────────
   Oculta por defecto: la muestra base/campanha.css cuando el body tiene
   .modo-campanha. En el modo normal el nav se ve como cualquier otro. */
.nav__venda {
  display:     none;
  align-items: center;
  gap:         10px;
}
.nav__venda-frase {
  display:    none; /* entra recién en tablet+, no hay lugar en la franja mobile */
  margin:     0;
  max-width:  22ch;
  font-size:  0.66rem;
  line-height: 1.2;
  color:      var(--color-texto-2);
}
/* Botón con textura, luz arriba, canto inferior, un destello que lo
   cruza cada 4 s (::after), como el Comprar de los benefícios, y un
   agite cada 3 s. */
.nav__venda-btn {
  position:         relative;
  overflow:         hidden;
  flex-shrink:      0;
  border:           none;
  border-radius:    8px;
  padding:          11px 24px;
  background-color: var(--color-acento-2);
  background-image: var(--t6-h), var(--t6-v),
                    linear-gradient(180deg, color-mix(in srgb, var(--color-acento-2) 70%, #eaf7b0), var(--color-acento-2) 55%, color-mix(in srgb, var(--color-acento-2) 85%, #000));
  color:            #ffffff;
  font-family:      var(--fuente-cuerpo);
  font-style:       normal;
  font-weight:      500;
  font-size:        1.2rem;
  white-space:      nowrap;
  text-shadow:      0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow:       inset 0 1px 0 rgba(255, 255, 255, 0.45),
                    0 2px 0 color-mix(in srgb, var(--color-acento-2) 65%, #000),
                    0 4px 12px rgba(var(--color-texto-rgb), 0.18);
  cursor:           pointer;
  animation:        nav-venda-chamar 3s ease-in-out infinite;
}
.nav__venda-btn::after {
  content:        '';
  position:       absolute;
  top:            0;
  left:           -60%;
  width:          40%;
  height:         100%;
  background:     linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform:      skewX(-20deg);
  pointer-events: none;
  animation:      nav-venda-destello 4s ease-in-out infinite;
}

/* Flecha a la izquierda del botón, apuntándole: empujón continuo
   (el agite del botón es cada 3 s). Triángulo sólido, sin vástago. */
.nav__venda-flecha {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--color-acento-2);
  animation:   nav-venda-flecha-nudge 0.9s ease-in-out infinite;
}

@keyframes nav-venda-destello {
  0%, 60%   { left: -60%; }
  85%, 100% { left: 130%; }
}
/* Agite: quieto la mayor parte del ciclo, sacude al final y vuelve. */
@keyframes nav-venda-chamar {
  0%, 66%, 100% { transform: rotate(0deg) scale(1); }
  72%  { transform: rotate(-5deg) scale(1.05); }
  78%  { transform: rotate(5deg) scale(1.05); }
  84%  { transform: rotate(-3deg) scale(1.02); }
  90%  { transform: rotate(3deg) scale(1.02); }
  96%  { transform: rotate(0deg) scale(1); }
}
@keyframes nav-venda-flecha-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__venda-btn,
  .nav__venda-btn::after,
  .nav__venda-flecha { animation: none; }
}

/* Tablet: la frase entra recién acá, en mobile no hay lugar en la franja */
@media (min-width: 768px) {
  .nav__venda-frase { display: block; }
}


/* hero-08 · Foto arriba entera sin recortar, bloque de contenido abajo con
   fondo propio, sin texto sobre la imagen. Mobile-first. */
/* Fondo único de la landing: lino (--color-fondo) con la textura del sitio,
   igual en hero, "Como funciona" y benefícios (y en depoimentos-01). */
.hero-08,
.como-funciona,
.beneficios-nova {
  background-color: var(--color-fondo);
  background-image: var(--t6-h), var(--t6-v);
}
/* Contenedor de la franja de trechinhos, que sale a los bordes de la sección. */
.hero-08 {
  --hero-marrom: color-mix(in srgb, var(--color-texto) 65%, var(--color-texto-3) 35%);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.hero-08__familia {
  display: block;
  width: 100%;
  height: auto;
}

/* Franja entre la foto de la familia y la capa: crema con textura, frase en una
   línea y hilos con punto a los lados; la sombra cae sobre las dos fotos. */
.hero-08__frase {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px var(--sec-h) 13px;
  background-color: color-mix(in srgb, var(--color-fondo) 78%, var(--color-acento) 22%);
  background-image: var(--t6-h), var(--t6-v);
  box-shadow: 0 0 14px rgba(var(--color-texto-rgb), 0.18);
}
.hero-08__frase::before,
.hero-08__frase::after {
  content: '';
  flex: 1 1 0;
  min-width: 0;
  height: 5px;
}
.hero-08__frase::before {
  background:
    radial-gradient(circle at right center, var(--color-acento) 0 2.5px, transparent 3px),
    linear-gradient(to right, transparent, rgba(var(--color-texto-rgb), 0.3)) center / 100% 1px no-repeat;
}
.hero-08__frase::after {
  background:
    radial-gradient(circle at left center, var(--color-acento) 0 2.5px, transparent 3px),
    linear-gradient(to left, transparent, rgba(var(--color-texto-rgb), 0.3)) center / 100% 1px no-repeat;
}
.hero-08__frase-texto {
  flex: 0 0 auto;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 6.2cqw, 1.9rem);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--hero-marrom);
}

/* Ancla del precio flotante (.hero-08__precio); no cambia el flujo de la foto. */
.hero-08__foto-wrap { position: relative; }

/* multiply: el blanco del borde de la acuarela toma el lino del fondo. */
.hero-08__foto {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.hero-08__foto--mobile  { display: block; }
.hero-08__foto--desktop { display: none; }

.hero-08__bloque {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
  padding: 10px var(--sec-h) 0;
}

.hero-08__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-08__eyebrow { color: var(--color-texto-3); margin-bottom: -2px; }
.hero-08__h1 {
  color: var(--hero-marrom);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  margin: 0;
}
.hero-08__h1 strong { font-weight: 700; }
/* Título + botón de compra: el botón (.auditorio-flutuante-comprar, de
   auditorio.css) flota a la derecha del título, como en el player, sin ocupar
   lugar en el flujo; el padding del h1 evita que se pisen. */
.hero-08__titulo { position: relative; }
.hero-08__titulo .hero-08__h1 { padding-right: 116px; }
.hero-08__comprar {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}

.hero-08__intro {
  font-size: calc(var(--texto-md) - 1px);
  line-height: 1.6;
  margin: 4px 0 0;
  max-width: 42ch;
}
/* Mismo aire que el gap de .hero-08__bloque, menos los 2px de gap propio. */
.hero-08__texto .hero-08__intro:first-of-type {
  margin-top: calc(var(--espacio-md) - 2px);
}

/* Precio: componente .sello-precio (auditorio.css); acá solo su posición,
   sobre el borde inferior de la foto y apenas arriba del botón de compra. */
.hero-08__precio {
  right: 35px;
  bottom: -1.1em;
}

/* Ficha + amostras: ocultas hasta que auditorio.js las arma (--visible).
   Espaciado por márgenes de cada pieza: la línea y el texto del app
   necesitan aires distintos. */
.hero-08__amostras {
  display: none;
  flex-direction: column;
}
.hero-08__amostras--visible { display: flex; }

/* Ficha en una línea: datos separados por un punto en acento; el álbum en
   display. La línea que la cierra es el borde del título de las amostras. */
.hero-08__ficha:not([hidden]) {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     baseline;
  margin:          0;
  font-size:       0.74rem;
  line-height:     1.3;
  letter-spacing:  0.02em;
  color:           var(--color-texto-3);
}
.hero-08__ficha-dato:not([hidden]) ~ .hero-08__ficha-dato:not([hidden])::before {
  content:     '·';
  margin:      0 0.5em;
  color:       var(--color-acento);
  font-weight: 700;
}
.hero-08__ficha strong {
  font-family: var(--fuente-display);
  font-style:  italic;
  font-weight: 600;
  font-size:   1.3em;
  color:       var(--color-texto);
}

/* Trechinhos: franja terracota con textura a todo el ancho de la sección
   (50% - 50cqw = hasta los bordes de .hero-08), título con el dibujo de
   los de benefícios en claro. Sin trechinhos (auditorio.js saca título y
   lista) no se muestra. */
.hero-08__trechos {
  margin:           var(--espacio-md) calc(50% - 50cqw) 0;
  padding:          calc(var(--espacio-md) - 3px) var(--sec-h) var(--espacio-md);
  background-color: color-mix(in srgb, var(--color-acento-3) 85%, var(--color-texto) 15%);
  background-image: var(--t6-h), var(--t6-v);
}
.hero-08__trechos:not(:has(.hero-08__amostras-lista)) { display: none; }
/* Con .hero-08__trechos delante: le gana a .beneficios-nova__titulo, que
   está más abajo en este archivo. */
.hero-08__trechos .hero-08__amostras-titulo {
  margin: 0 0 var(--espacio-sm);
  color:  var(--color-fondo);
}
.hero-08__trechos .hero-08__amostras-titulo span { color: #fff3c4; }

.hero-08__amostras-lista {
  display: flex;
  flex-direction: row;
  gap: 6px;
  max-width: 672px;
  margin-inline: auto;
}
.hero-08__amostra {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.hero-08__amostra--ativo {
  border-color: color-mix(in srgb, var(--color-acento) 65%, #ffd93b 35%);
  background: color-mix(in srgb, var(--color-acento) 65%, #ffd93b 35%);
  color: var(--color-texto);
}
.hero-08__amostra-icone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff3c4;
  color: color-mix(in srgb, var(--color-acento-3) 85%, var(--color-texto) 15%);
}
.hero-08__amostra-pausa { display: none; }
.hero-08__amostra--ativo .hero-08__amostra-play  { display: none; }
.hero-08__amostra--ativo .hero-08__amostra-pausa { display: block; }
.hero-08__amostra-titulo {
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  /* Máximo 2 líneas: un nombre más largo se corta con "…" y el botón no crece. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ── Tablet / Desktop ── */
@media (min-width: 768px) {
  .hero-08__bloque { max-width: 640px; margin: 0 auto; width: 100%; }
  .hero-08__ficha:not([hidden]) { font-size: 0.84rem; }
}

@media (min-width: 1024px) {
  .hero-08__foto--mobile  { display: none; }
  .hero-08__foto--desktop { display: block; }
  .hero-08__bloque { max-width: 720px; }
  .hero-08__h1 { font-size: 2.4rem; }
}

/* "Como funciona" · a todo el ancho, sin card: la guía (celular con prints
   a la izquierda, título y pasos a la derecha; base/carrusel.css) y debajo
   las aclaraciones. */
.como-funciona {
  --cf-marrom:       color-mix(in srgb, var(--color-texto) 65%, var(--color-texto-3) 35%);
  --cf-marrom-suave: color-mix(in srgb, var(--color-texto) 35%, var(--color-texto-3) 65%);
  padding-top:    calc(var(--espacio-md) + 10px);
  padding-bottom: 0;
}

/* Título en la columna de los pasos, mismo dibujo que los de benefícios
   ("O que você RECEBE"): itálica + palabra clave en mayúsculas y color. */
.como-funciona__titulo {
  margin:      0 0 6px 4px;
  font-family: var(--fuente-display);
  font-style:  italic;
  font-weight: 500;
  font-size:   1.6rem;
  line-height: 1.05;
  color:       var(--color-texto);
}
/* Línea corta bajo FUNCIONA: ancla el título a los pasos. */
.como-funciona__titulo span::after {
  content:       '';
  display:       block;
  width:         2.4em;
  height:        3px;
  margin-top:    6px;
  border-radius: 2px;
  background:    color-mix(in srgb, var(--color-acento-2) 80%, var(--color-texto) 20%);
}
.como-funciona__titulo span {
  display:        block;
  font-style:     normal;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color:          color-mix(in srgb, var(--color-acento-2) 70%, var(--color-texto) 30%);
}

/* Aclaraciones bajo el carrusel, a todo el ancho de la pantalla (márgenes
   negativos = el padding de la sección): arriba lo del player (verde de los
   pasos), abajo lo que viene además del álbum (ocre). Un ícono por línea.
   Lo del player va en una tarjeta verde suave; los extras siguen debajo,
   sin línea (el aire de la tarjeta los separa). */
.como-funciona__notas {
  margin: calc(var(--espacio-md) + 5px) calc(-1 * var(--contenedor-pad)) 0;
}
.como-funciona__notas-grupo,
.como-funciona__notas-lista {
  display:          flex;
  flex-direction:   column;
  gap:              7px;
  margin:           0;
  list-style:       none;
}
.como-funciona__notas-grupo {
  --nota-cor: var(--color-acento-2);
  gap:        0;
  padding:    var(--espacio-lg) var(--contenedor-pad);
}
/* Lo del player: tarjeta verde suave con textura, dentro del ancho del
   contenido (no franja), pegada al carrusel. */
.como-funciona__notas-grupo--player {
  margin:           0 var(--contenedor-pad) var(--espacio-lg);
  padding:          var(--espacio-md);
  border-radius:    calc(var(--radio) + 6px);
  background-color: color-mix(in srgb, var(--nota-cor) 12%, var(--color-fondo));
  background-image: var(--t6-h-lite), var(--t6-v-lite);
  box-shadow:       0 4px 14px rgba(var(--color-texto-rgb), 0.08);
}
.como-funciona__notas-grupo--player .como-funciona__player { margin-top: var(--espacio-md); }
/* Extras: lista centrada como bloque bajo el título, ítems a la izquierda. */
.como-funciona__notas-grupo--extras {
  --nota-cor:  var(--color-acento);
  padding-top: 0;
}
.como-funciona__notas-grupo--extras .como-funciona__notas-lista {
  align-self:  center;
  padding-top: 4px;
}
.como-funciona__notas li {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   clamp(0.7rem, 3.15vw, 0.86rem);
  line-height: 1.3;
  color:       var(--cf-marrom);
}
.como-funciona__notas li strong {
  font-weight: 600;
  color:       color-mix(in srgb, var(--nota-cor) 70%, var(--color-texto) 30%);
}
.como-funciona__notas svg {
  flex:            0 0 auto;
  width:           16px;
  height:          16px;
  fill:            none;
  stroke:          color-mix(in srgb, var(--nota-cor) 75%, var(--color-texto) 25%);
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

/* Aclaración de la cuenta (4.º ítem del player): la separa de las tres de arriba
   la línea suave de base/separador.css a todo el ancho de la lista, y va en dos
   párrafos de dos líneas. El ícono se centra en la primera línea. */
.como-funciona__notas .como-funciona__nota-conta {
  --contenedor-pad: 0px;
  --separador-ancho: 100%;
  align-items:       flex-start;
  margin-top:        5px;
  padding-top:       12px;
}
.como-funciona__notas .como-funciona__nota-conta svg { margin-top: calc((1.3em - 16px) / 2); }
.como-funciona__nota-par { display: block; }
.como-funciona__nota-par + .como-funciona__nota-par { margin-top: 6px; }
/* La segunda línea de cada párrafo aclara la primera: mismo tamaño, tono más suave. */
.como-funciona__nota-aclara { color: color-mix(in srgb, var(--cf-marrom) 78%, var(--color-fondo)); }

/* Mismo celeste que el Abrir de la mini: el color ya dice adónde lleva.
   Al pie del grupo del player, centrado. */
.como-funciona__player {
  align-self:       center;
  display:          inline-flex;
  align-items:      center;
  gap:              6px;
  padding:          5px 11px 5px 5px;
  border:           none;
  border-radius:    999px;
  background-color: var(--auditorio-cor-abrir);
  background-image: var(--t6-h), var(--t6-v);
  color:            #1a1a1a;
  font-family:      var(--fuente-cuerpo);
  font-size:        0.74rem;
  font-weight:      600;
  box-shadow:       0 3px 10px rgba(var(--color-texto-rgb), 0.16);
  cursor:           pointer;
}
.como-funciona__player-icone {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  padding-left:    1px;
  border-radius:   50%;
  background:      #ffffff;
}

/* Celular a la izquierda; a la derecha el título y los pasos, que ocupan
   el mismo alto que el celular (título arriba, pasos repartidos). */
.como-funciona__inner { display: flex; flex-direction: column; }
.como-funciona__corpo {
  display:               grid;
  grid-template-columns: 46% 1fr;
  gap:                   10px;
  align-items:           stretch;
}
.como-funciona__coluna {
  display:        flex;
  flex-direction: column;
}

/* Marco con "mentón": abajo más grueso y esquinas casi rectas, para que la
   mini de los prints (botón de la esquina) no quede cortada. */
.como-funciona__celular {
  align-self:       start;
  padding:          4px 4px 22px;
  border-radius:    20px;
  background-color: var(--color-texto);
  background-image: var(--t6-h), var(--t6-v);
  box-shadow:       0 10px 24px rgba(var(--color-texto-rgb), 0.28);
}
.como-funciona__celular .carrusel__pista {
  --carrusel-proporcion: 540 / 1064;
  border-radius: 16px 16px 6px 6px;
  background:    var(--color-superficie);
}

.como-funciona__passos {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  margin:          0 0 15px;
  padding:         0;
  list-style:      none;
}

.como-funciona__passos li {
  display:     flex;
  align-items: center;
  padding:     4px 0;
}
.como-funciona__passos li + li { border-top: 1px solid color-mix(in srgb, var(--color-texto) 12%, transparent); }

/* Paso: número en círculo + verbo y aclaración; apagado salvo el activo,
   que lleva fondo claro y la barra de la cuenta del carrusel. */
.como-funciona__passo {
  position:              relative;
  display:               grid;
  grid-template-columns: 18px 1fr;
  gap:                   2px 6px;
  align-items:           center;
  width:                 100%;
  padding:               6px 2px 8px;
  border:                none;
  background:            transparent;
  color:                 var(--cf-marrom-suave);
  font-family:           var(--fuente-cuerpo);
  text-align:            left;
  opacity:               0.5;
  cursor:                pointer;
  transition:            opacity var(--transicion), background-color var(--transicion);
}
.como-funciona__passo[aria-current] { opacity: 1; }
.como-funciona__passo-num {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  border:          1.5px solid var(--color-acento-2);
  border-radius:   50%;
  color:           var(--color-acento-2);
  font-size:       0.7rem;
  font-weight:     700;
  transition:      background-color var(--transicion), color var(--transicion);
}
.como-funciona__passo[aria-current] .como-funciona__passo-num {
  background-color: var(--color-acento-2);
  background-image: var(--t6-h), var(--t6-v);
  color:            #ffffff;
}
.como-funciona__passo-titulo {
  font-size:   clamp(0.9rem, 4.1vw, 1rem);
  font-weight: 600;
  line-height: 1.2;
  color:       var(--cf-marrom);
}
.como-funciona__coracao {
  width:          0.95em;
  height:         0.95em;
  vertical-align: -0.12em;
  fill:           var(--color-acento-3);
}
.como-funciona__passo-texto {
  grid-column: 2;
  font-size:   clamp(0.68rem, 3.05vw, 0.76rem);
  line-height: 1.25;
}
.como-funciona__passo::after {
  content:          '';
  position:         absolute;
  left:             26px;
  right:            2px;
  bottom:           3px;
  height:           2px;
  border-radius:    2px;
  background:       var(--color-acento-2);
  transform:        scaleX(0);
  transform-origin: left;
}
[data-carrusel-corriendo] .como-funciona__passo[aria-current]::after {
  animation: como-funciona-cuenta var(--carrusel-intervalo) linear forwards;
}

/* Benefícios: lo que fortalece y la compra. */
.beneficios-nova { padding-block: var(--espacio-md) var(--espacio-lg); }
.beneficios-nova__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-md);
}

/* Título centrado en 3 líneas: "O que (mais) você" / PALABRA / nota. */
.beneficios-nova__titulo {
  margin:      0;
  text-align:  center;
  font-family: var(--fuente-display);
  font-style:  italic;
  font-weight: 500;
  font-size:   1.45rem;
  line-height: 1.15;
  color:       var(--color-texto);
}
.beneficios-nova__titulo span {
  display:        block;
  font-style:     normal;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color:          color-mix(in srgb, var(--color-acento-3) 80%, var(--color-texto) 20%);
}
.beneficios-nova__titulo--verde span {
  color: color-mix(in srgb, var(--color-acento-2) 70%, var(--color-texto) 30%);
}
.beneficios-nova__nota {
  margin:         2px 0 18px;
  text-align:     center;
  font-size:      0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--color-texto-3);
}

.beneficios-nova__texto {
  margin:      0;
  text-align:  center;
  font-size:   0.9rem;
  line-height: 1.45;
  color:       var(--color-texto-2);
}
.beneficios-nova__texto strong { font-weight: 600; }

.beneficios-nova__compra {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             10px;
  margin-top:      var(--espacio-md);
}

/* Botones en Garamond, con textura y un destello que los cruza cada 4 s, a
   destiempo uno del otro (keyframes beneficios-comprar-destello). Comprar en
   el verde del sitio; Presentear en terracota con el presente en crema. */
.beneficios-nova__btn {
  position:         relative;
  overflow:         hidden;
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  padding:          9px 16px 10px;
  border:           none;
  border-radius:    999px;
  background-image: var(--t6-h), var(--t6-v);
  color:            #ffffff;
  font-family:      var(--fuente-display);
  font-size:        clamp(1.05rem, 4.9vw, 1.25rem);
  font-weight:      600;
  letter-spacing:   0.01em;
  line-height:      1.1;
  white-space:      nowrap;
  box-shadow:       0 6px 16px rgba(var(--color-texto-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor:           pointer;
}
.beneficios-nova__btn--comprar    { background-color: color-mix(in srgb, var(--color-acento-2) 72%, var(--color-texto) 28%); }
.beneficios-nova__btn--presentear { background-color: color-mix(in srgb, var(--color-acento-3) 80%, var(--color-texto) 20%); }
.beneficios-nova__btn::after {
  content:        '';
  position:       absolute;
  top:            0;
  left:           -60%;
  width:          40%;
  height:         100%;
  background:     linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform:      skewX(-20deg);
  pointer-events: none;
  animation:      beneficios-comprar-destello 4s ease-in-out infinite;
}
.beneficios-nova__btn--presentear::after { animation-delay: -2s; }
.beneficios-nova__btn-icone {
  --cor:      #fff3c4;
  --fita:     color-mix(in srgb, var(--color-acento-3) 55%, var(--color-texto) 45%);
  width:      1.05em;
  height:     1.05em;
  margin-top: -3px;
}

/* ── Como funciona y benefícios · Tablet (768px) ── */
@media (min-width: 768px) {
  .como-funciona__titulo { font-size: 2.3rem; margin: 0 0 24px 12px; }
  .como-funciona__player { padding: 6px 14px 6px 6px; font-size: 0.84rem; }
  .como-funciona__corpo { grid-template-columns: 260px 1fr; gap: 36px; }
  .como-funciona__passo { grid-template-columns: 30px 1fr; gap: 2px 12px; padding: 10px 12px 12px; }
  .como-funciona__passo-num { width: 30px; height: 30px; font-size: 0.9rem; }
  .como-funciona__passo::after { left: 54px; right: 12px; }
  .como-funciona__passo-titulo { font-size: 1.25rem; }
  .como-funciona__passo-texto { font-size: 1rem; }
  .beneficios-nova__titulo { font-size: 1.8rem; }
  .beneficios-nova__texto { font-size: 1rem; }
  .beneficios-nova__compra { gap: 16px; }
}

/* ── Como funciona y benefícios · Desktop (1024px) ── */
@media (min-width: 1024px) {
  .como-funciona__corpo { grid-template-columns: 300px 1fr; gap: 56px; padding-inline: 24px; }
  .beneficios-nova__inner { max-width: 640px; }
}

/* ── Animaciones ── */
@keyframes como-funciona-cuenta {
  to { transform: scaleX(1); }
}
@keyframes beneficios-comprar-destello {
  0%, 60%   { left: -60%; }
  85%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .beneficios-nova__btn::after,
  .como-funciona__passo::after { animation: none; }
}


/* documental-01 — video del documental (Bunny Stream), a sangre bajo el nav.
   Oculto por default en el HTML (hidden); documental.js lo muestra. */

.documental {
  position: relative;
  width: 100%;
  /* Misma textura de grano del sitio que .sobre-disco (texturas.js). */
  background-color: var(--color-fondo);
  background-image: var(--t6-h), var(--t6-v);
}

.documental__midia {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.documental__poster,
.documental__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.documental__video[hidden] {
  display: none;
}

.documental__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  /* Blanco como los controles nativos del video: sobre una imagen oscura el
     play tiene que verse igual. */
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-texto);
  cursor: pointer;
  transition: var(--transicion);
}

.documental__play:hover {
  background: #fff;
}

.documental__play[hidden] {
  display: none;
}

/* "Minidoc" sobre o título, no estilo eyebrow do site (.eyebrow), na cor
   de eyebrow: diz o que é antes do nome. A margem negativa come parte do
   entrelinha alto do título (1.7), para os dois ficarem próximos. */
.documental__eyebrow {
  margin: 0 0 -6px;
  padding: var(--espacio-sm) var(--sec-h) 0;
  color: var(--color-texto-3);
}

/* Título, ficha y descripción replicados de la cabecera del disco en el
   auditorio (.auditorio-player__cabecalho-titulo/-ano/-desc): mismo peso,
   interlineado y aire; sin la cursiva del h2 base. */
.documental__titulo {
  padding: 0 var(--sec-h);
  font-family: var(--fuente-display);
  font-size: var(--texto-lg);
  font-weight: 600;
  font-style: normal;
  line-height: 1.7;
  color: var(--color-texto);
}

.documental__texto {
  padding: 0 var(--sec-h) var(--espacio-sm);
  color: var(--color-texto-2);
}

/* Encostada no título (margem negativa, como o ano do disco). */
.documental__ficha {
  margin-top: -4px;
  padding: 0 var(--sec-h);
  color: var(--color-texto-3);
  font-size: var(--texto-xs);
}

/* 4px depois da ficha, como a descrição do disco. Embaixo, o mesmo ar que
   separa a história das ações no reprodutor. */
.documental__descricao {
  margin-top: 4px;
  padding: 0 var(--sec-h) var(--espacio-md);
  font-size: .88rem;
  color: var(--color-texto-2);
  line-height: 1.5;
  max-width: 60ch;
}

/* Franja + depoimentos. As tarjetas são as do reprodutor (auditorio.css);
   aqui só o ritmo vertical do .auditorio-player (gap md). Em cima, um pouco
   de ar a mais depois da descrição; embaixo, mais ar que o padrão antes da
   próxima seção. */
.documental__depoimentos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
  padding: var(--espacio-sm) var(--sec-h) var(--espacio-lg);
}

/* Cabeçalho sem caixa nem fundo próprio (fica o da seção, com o grão):
   na primeira linha o título e o botão (à direita), colado embaixo o
   texto, e fecha com a mesma linha suave que separa os depoimentos. Entre
   a linha e o primeiro depoimento, o mesmo ar que entre depoimentos (gap
   sm), descontando o gap md do pai. */
.documental__franja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--espacio-sm);
  row-gap: 2px;
  align-items: center;
  margin-bottom: calc(var(--espacio-sm) - var(--espacio-md));
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-texto-3) 20%, transparent);
}
.documental__franja-subtitulo {
  grid-column: 1 / -1;
}
.documental__franja-titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-texto);
}
.documental__franja-subtitulo {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
}

/* Pastilha: ícone azul e rótulo lado a lado, fundo linho (o creme do site
   com o grão), sem borda, sombra bem suave. A margem negativa deixa a
   linha com a altura do título, assim o texto de baixo fica colado. */
.documental__agradecer {
  display: inline-flex;
  margin: -6px 0;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border: none;
  border-radius: 999px;
  background-color: var(--color-fondo);
  background-image: var(--t6-h), var(--t6-v);
  box-shadow: 0 1px 2px rgba(var(--color-texto-rgb), 0.06), 0 3px 10px rgba(var(--color-texto-rgb), 0.08);
  cursor: pointer;
  transition: box-shadow var(--transicion);
}
.documental__agradecer:hover,
.documental__agradecer:focus-visible {
  box-shadow: 0 1px 3px rgba(var(--color-texto-rgb), 0.08), 0 5px 16px rgba(var(--color-texto-rgb), 0.12);
}
.documental__agradecer-icone {
  display: flex;
  color: var(--color-agradecer);
}
.documental__agradecer-icone svg {
  width: 18px;
  height: 18px;
}
.documental__agradecer-texto {
  font-size: var(--texto-xs);
  font-weight: 700;
  color: var(--color-texto-2);
}

@media (min-width: 768px) {
  .documental__play {
    width: 84px;
    height: 84px;
  }

  .documental__eyebrow,
  .documental__titulo,
  .documental__texto,
  .documental__descricao,
  .documental__ficha,
  .documental__depoimentos {
    padding-left: var(--espacio-lg);
    padding-right: var(--espacio-lg);
  }
}


/* sec-06 · Foto con marco + card de texto debajo, dentro del marco */

/* Padding vertical a la mitad del estándar de .seccion: los 3 bloques van
   seguidos. */
.sec-06 {
  width:          100%;
  padding-top:    16px;
  padding-bottom: 26px;
}

/* Marco (passe-partout), mismo tratamiento que .sobre-disco__foto. Sin
   aspect-ratio ni object-fit: toma el tamaño real de la foto. */
.sec-06__marco {
  position:   relative;
  width:      100%;
  padding:    10px;
  background: var(--color-fondo);
  box-shadow: var(--sombra-box);
}

.sec-06__foto {
  display: block;
  width:   100%;
  height:  auto;
}

/* Card: superficie lino con textura, 20% opaca. */
.sec-06__placa {
  padding:          10px 20px 20px;
  border-radius:    calc(var(--radio) + 6px);
  background-color: color-mix(in srgb, var(--color-superficie) 20%, transparent);
  background-image: var(--t6-h-lite), var(--t6-v-lite);
  box-shadow:       var(--sombra-box);
  text-align:       center;
}

/* Título: mismo tratamiento que .subtitulo, al 80% para que entre en 1 línea. */
.sec-06__titulo {
  font-family:   var(--fuente-subtitulo, var(--fuente-display));
  font-style:    italic;
  font-weight:   500;
  font-size:     calc((var(--texto-xl) + var(--ajuste-subtitulo, 0rem)) * 0.8);
  line-height:   1.2;
  color:         var(--color-texto);
  margin-bottom: 2px;
  white-space:   nowrap;
}

.sec-06__titulo-chico {
  font-size: 0.5em;
}

.sec-06__titulo-grande {
  font-size: calc(1em + 4px);
}

.sec-06__aclaracion {
  font-size:     calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:   1.4;
  color:         var(--color-texto-3);
  margin-bottom: var(--espacio-xs);
}

/* Botón de contacto: tinte suave de acento-2, texto en color de cuerpo. */
.sec-06__cta {
  margin-top:   var(--espacio-xs);
  background:   color-mix(in srgb, var(--color-acento-2) 18%, var(--color-superficie));
  border-color: color-mix(in srgb, var(--color-acento-2) 35%, transparent);
  color:        var(--color-texto);
}
.sec-06__cta:hover { opacity: 0.85; }
.sec-06__cta-icone {
  width:       18px;
  height:      18px;
  flex-shrink: 0;
}


/* mod-depoimentos / depoimentos-01 — depoimentos en estilo editorial, directo
   sobre el fondo lino de la sección (sin color propio), separados por una
   línea sutil. Estructura full-bleed (de punta a punta de la pantalla) por si
   en el futuro vuelve a llevar color de fondo. Compartida por la home normal
   y la página de captura (modo campanha). Sin .seccion (ese componente fuerza
   min-height:100vh en tablet+, pensado para módulos tipo hero — acá el alto
   sale solo del contenido). Fondo con textura propia del sitio (--t6-h/v, ver
   texturas.js) sobre --color-superficie, mismo recurso que ya usan nav-01 y
   footer-01.

   Los nombres de clase vienen de mod-seccion/sec-depoimentos, de donde salió
   este módulo. Se conservan a propósito: .depoimento__realce también lo usa
   el modal de compra de mod-auditorio, y renombrarlo acá lo dejaría sin
   estilo allá. */

/* Sección completa: lista de frases + zona de foto y frase de cierre. */
/* Título: primera pieza de la franja de las frases (mismo fondo), el aire
   de arriba lo pone él (la sección no tiene padding-top). */
.sobre-disco__cabeca { padding-top: var(--espacio-lg); }
.sobre-disco__titulo span { color: var(--depoimentos-titulo-cor); }

.sobre-disco {
  position:         relative;
  display:          flex;
  flex-direction:   column;
  gap:              var(--espacio-lg);
  padding-top:      0;
  padding-bottom:   var(--espacio-lg);
  background-color: var(--color-fondo);
  background-image: var(--t6-h), var(--t6-v);
}

/* Zona de foto + frase de cierre — mismo fondo que el resto de la sección
   (se probó un fondito cálido acá, Pablo volvió al fondo normal). */
.sobre-disco__resto-wrap {
  /* Sin padding propio: el gap del flex column de .sobre-disco arriba, y
     su padding-bottom abajo (ambos var(--espacio-lg)), ya dan el mismo
     aire de los dos lados — sumar padding acá lo duplicaba. */
  padding-block: 0;
}

.sobre-disco__resto {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-lg);
}

.sobre-disco__frase {
  max-width:     30rem;
  margin-inline: auto;
  text-align:    center;
}
/* Jerarquía: párrafos en Garamond más chico y el último (el agradecimiento)
   con el tamaño de antes y más peso. */
.sobre-disco__frase p { margin: 0 0 1em; }
.sobre-disco__frase p:not(:last-child) { font-size: 1.125rem; }
.sobre-disco__frase p:last-child {
  margin:      1.4em 0 0;
  font-weight: 600;
}

/* Título y frases sobre el fondo de la sección (lino con textura, el mismo
   de toda la landing); la línea de arriba la pone .separador. */
.sobre-disco__lista {
  /* Petróleo: verde del sitio con el azul de Agradecer, oscurecido; distinto de
     los títulos de benefícios (terracota y verde). */
  --depoimentos-titulo-cor: color-mix(in srgb, color-mix(in srgb, var(--color-acento-2) 45%, var(--color-agradecer, #2f80c9)) 70%, var(--color-texto));
}
.depoimento { margin: 0; }

.depoimento__inner {
  position:      relative;
  max-width:     640px;
  margin-inline: auto;
  padding-block: calc(var(--espacio-md) + 6px);
}

/* Línea entre depoimentos, acotada al ancho del texto (no full-bleed) y
   con aire propio a los costados (no toca los bordes del bloque) — en
   marrón (--color-texto-3) en vez del borde neutro, un poco más visible. */
.depoimento + .depoimento .depoimento__inner::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       var(--espacio-md);
  right:      var(--espacio-md);
  border-top: 1px solid color-mix(in srgb, var(--color-texto-3) 20%, transparent);
}

/* .subtitulo ya trae familia Cormorant + itálica + color — acá el tamaño
   (el de los párrafos de la frase de cierre) y el interlineado. */
.depoimento__texto {
  font-size:   1.125rem;
  line-height: 1.25;
}

/* Frase resaltada dentro de un depoimento — sale del markup `**así**` del
   texto guardado. Más peso que el itálico base, sin llegar a un bold duro
   (font-weight 700 se sentía demasiado). */
.depoimento__realce { font-weight: 600; }

.depoimento__autor {
  text-align:      right;
  padding-right:   var(--espacio-sm);
  margin-top:      var(--espacio-sm);
  font-style:      normal;
  font-size:       var(--texto-xs);
  font-weight:     400;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           var(--color-texto-3);
}

/* Foto de familia — "cuadro" central: passe-partout claro + sombra suave,
   sin borde duro. */
.sobre-disco__foto {
  max-width:     420px;
  margin-inline: auto;
  padding:       10px;
  background:    var(--color-fondo);
  box-shadow:    var(--sombra-box);
}
.sobre-disco__foto img {
  display: block;
  width:   100%;
  height:  auto;
}


/* footer-01 · Una fila: logo + social + dirección */

.footer-01 {
  background-color: var(--color-superficie);
  background-image: var(--t6-h), var(--t6-v);
  border-top:       1px solid rgba(var(--color-borde-rgb), 0.10);
  padding-block:    var(--espacio-lg);
}

.footer-01__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--espacio-md);
  text-align:     center;
}

.footer-01__logo-img {
  height: 36px;
  width:  auto;
}

.footer-01__dir {
  font-size: calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto);
}

.footer-01__meta {
  font-size: calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto-2);
  opacity:   0.70;
}

.footer-01__meta-link {
  font-size:   inherit;
  color:       inherit;
  cursor:      pointer;
}

.footer-01__meta--priv {
  margin-top: var(--espacio-xs);
}

.footer-01__credito {
  font-size:  calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:      var(--color-texto-2);
  opacity:    1;
  margin-top: var(--espacio-sm);
}

.footer-01__credito a {
  font-family:    var(--fuente-display);
  font-weight:    600;
  color:          #0a6e4a;
}

.footer-01__social {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-sm);
}

.footer__icon-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  color:           var(--color-acento-2);
  opacity:         0.70;
  transition:      opacity var(--transicion);
}
.footer__icon-link:hover { opacity: 1; }