/* ============================================================
   MANGA EXPERT — Página informativa (pre-oferta)
   Adriana Bologna · COQ26

   La paleta sale de la landing vieja de ClickFunnels: rosa
   empolvado, dorado y marrón cacao. NO es la del evento gratuito
   (champagne/celeste): MANGA EXPERT es un producto con marca
   propia, y la página tiene que sentirse un escalón más arriba.

   ♿ La audiencia tiene 51% de +55 años. Cuerpo 17px mínimo en
   mobile, botones de 56px, cero gris claro sobre fondo claro.
   Esto no se "optimiza" después: está medido en 38.485 encuestas.
   ============================================================ */

:root{
  /* ---------- Rosas ---------- */
  /* Bandas y secciones rosas. Era #C08C82; se bajó dos puntos porque
     el blanco encima daba 2,87:1 y el mínimo para titulares es 3.
     Ahora da 3,09:1 y a ojo es el mismo rosa. */
  --blush-deep:#BA867C;
  --blush:#D9A79E;           /* rosa de marca (la banda del hero) */
  --blush-soft:#F3DED5;
  --cream:#FDF5EF;           /* lienzo base */
  /* Salió del fondo original del logo. Ya no hace falta que coincida
     —al logo se le quitó el fondo— pero el tono quedó: es el rosa de
     la marca y ata el hero con la banda superior. */
  --cream-deep:#F3DCD1;

  /* ---------- Dorados ----------
     Muestreados del logo: el oro no es un color plano, es un degradé
     de cuatro paradas (luz alta, medio, sombra, rebote). Un dorado
     de un solo tono al lado de ese logo se ve mostaza. */
  --gold:#D9AE4A;
  --gold-light:#F6DC93;
  --gold-mid:#B0821F;
  --gold-deep:#8A6318;
  --gold-ink:#7A5610;        /* el único que se usa como texto: 5.2:1 sobre cream */

  /* ---------- Marrones (texto) ---------- */
  --cocoa:#5A3620;           /* títulos */
  --cocoa-soft:#7B5740;      /* cuerpo */
  --cocoa-deep:#3D2415;      /* fondos oscuros */
  --white:#fff;

  --display:'Playfair Display', Georgia, serif;
  --body:'Montserrat', system-ui, -apple-system, sans-serif;
  --script:'Great Vibes', cursive;

  /* ---------- La flor de lis como imagen ----------
     Misma silueta que el <symbol id="lis"> del HTML. Existe en dos
     versiones porque un dorado medio desaparece sobre fondo oscuro.
     Se usa en separadores y marcas de agua. */
  --lis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23D9AE4A'%3E%3Cpath d='M50 3c-5 12-9 23-7 35 .6 4 2.4 7 4 9.5h6c1.6-2.5 3.4-5.5 4-9.5 2-12-2-23-7-35z'/%3E%3Cpath d='M43 45c-9-8-23-5-26 6-2.6 9.6 5 18 14 15-6-2.6-8-9-4.6-14 3.4-5 11-5 15-1z'/%3E%3Cpath d='M57 45c9-8 23-5 26 6 2.6 9.6-5 18-14 15 6-2.6 8-9 4.6-14-3.4-5-11-5-15-1z'/%3E%3Crect x='33' y='50' width='34' height='8' rx='3'/%3E%3Cpath d='M46 58v18c-1.4 6-5 11-11 14h30c-6-3-9.6-8-11-14V58z'/%3E%3C/svg%3E");
  --lis-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23F0D68A'%3E%3Cpath d='M50 3c-5 12-9 23-7 35 .6 4 2.4 7 4 9.5h6c1.6-2.5 3.4-5.5 4-9.5 2-12-2-23-7-35z'/%3E%3Cpath d='M43 45c-9-8-23-5-26 6-2.6 9.6 5 18 14 15-6-2.6-8-9-4.6-14 3.4-5 11-5 15-1z'/%3E%3Cpath d='M57 45c9-8 23-5 26 6 2.6 9.6-5 18-14 15 6-2.6 8-9 4.6-14-3.4-5-11-5-15-1z'/%3E%3Crect x='33' y='50' width='34' height='8' rx='3'/%3E%3Cpath d='M46 58v18c-1.4 6-5 11-11 14h30c-6-3-9.6-8-11-14V58z'/%3E%3C/svg%3E");

  --maxw:1140px;
  --radius:16px;
  --radius-lg:26px;
  --shadow-sm:0 8px 24px rgba(90,54,32,.08);
  --shadow-md:0 22px 56px rgba(90,54,32,.16);
  --shadow-gold:0 14px 34px rgba(138,99,24,.30);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  /* 17px de base. No bajar: es el piso de legibilidad para 55+ */
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--cocoa-soft);
  background:var(--cream);
  overflow-x:hidden;
}
@media(min-width:900px){ body{font-size:1.125rem} }

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3{font-family:var(--display);color:var(--cocoa);line-height:1.2;font-weight:700}
strong,b{color:var(--cocoa);font-weight:700}

.wrap{width:min(92%,var(--maxw));margin-inline:auto}
.sec{padding:clamp(3.5rem,7vw,6rem) 0;position:relative}
.center{text-align:center}

/* ---------- Encabezados de sección ---------- */
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:.85rem;
  /* Se declara la familia porque en la sección de Adri el volante es
     un <h2>, y sin esto heredaría la serif de los títulos */
  font-family:var(--body);line-height:1.4;
}
.sec-title{
  font-size:clamp(1.75rem,4.6vw,3rem);
  text-transform:uppercase;letter-spacing:.01em;margin-bottom:.6rem;
}
.sec-title em{font-style:normal;color:var(--gold-ink)}
.lead{max-width:38rem;font-size:1.02em;color:var(--cocoa-soft)}
.center .lead{margin-inline:auto}

/* ============================================================
   SEPARADOR
   La flor de lis del logo entre dos filetes dorados. Antes había
   un rombo genérico; el emblema ata cada sección a la marca.
   ============================================================ */
.rule{
  width:150px;height:1px;margin:1.4rem auto 1.7rem;position:relative;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.rule::after{
  content:"";position:absolute;left:50%;top:-13px;
  width:24px;height:26px;transform:translateX(-50%);
  background:var(--lis) center/contain no-repeat;
}
/* Sobre fondo oscuro el oro medio se apaga: sube a la luz alta */
.ben-sec .rule::after,.final .rule::after,.faq-sec .rule::after{background-image:var(--lis-claro)}
.ben-sec .rule,.final .rule,.faq-sec .rule{
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
}

/* ============================================================
   ESQUINAS ORNAMENTALES
   El detalle de filigrana dorada de las tarjetas de la landing
   vieja. Es lo que hace que la página se lea "vintage" y no
   "plantilla de SaaS". Va como background, no como markup.
   ============================================================ */
.orn{position:relative}
.orn::before,.orn::after{
  content:"";position:absolute;width:44px;height:44px;
  background-repeat:no-repeat;background-size:contain;
  pointer-events:none;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23D9AE4A' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M3 30V9a6 6 0 0 1 6-6h21'/%3E%3Cpath d='M9 33V15a6 6 0 0 1 6-6h18'/%3E%3Cpath d='M9 38c8 0 11-3 11-11'/%3E%3Ccircle cx='33' cy='9' r='2' fill='%23D9AE4A' stroke='none'/%3E%3Ccircle cx='9' cy='33' r='2' fill='%23D9AE4A' stroke='none'/%3E%3C/svg%3E");
}
.orn::before{top:10px;left:10px}
.orn::after{bottom:10px;right:10px;transform:rotate(180deg)}
@media(max-width:600px){
  .orn::before,.orn::after{width:30px;height:30px}
  .orn::before{top:7px;left:7px}
  .orn::after{bottom:7px;right:7px}
}

/* ============================================================
   BOTÓN PRINCIPAL
   No es un checkout: la página se manda ANTES de que se anuncie la
   oferta y no lleva ninguna cifra (decisión de Juan, 09/08/2026).
   Desde el 10/08 abre WhatsApp con el mensaje que dispara el flujo
   de preinscripción: es la única acción de toda la página, así que
   el botón lleva el peso visual completo del oro.
   ============================================================ */
.cta{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  min-height:56px;                      /* área táctil para 55+ */
  padding:1rem 2.4rem;border-radius:999px;
  /* Cuatro paradas, no dos: el oro del logo tiene luz alta, medio,
     sombra y rebote. Un degradé de dos tonos al lado se ve plano. */
  background:linear-gradient(160deg,
    var(--gold-light) 0%,
    var(--gold) 30%,
    var(--gold-mid) 58%,
    #E7C976 100%);
  color:var(--white);text-align:center;
  box-shadow:var(--shadow-gold);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  position:relative;overflow:hidden;
}
.cta b{
  font-size:1.02rem;font-weight:700;line-height:1.3;
  text-shadow:0 1px 2px rgba(90,54,32,.35);
}
.cta span{font-size:.8rem;font-weight:600;opacity:.95;letter-spacing:.02em}
.cta:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(138,99,24,.42)}
.cta:focus-visible{outline:3px solid var(--cocoa);outline-offset:3px}
/* Brillo que cruza el botón cada tanto. Sutil: la página tiene que
   verse cara, no un banner de casino. */
.cta::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,72%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){ .cta::after{animation:none;display:none} }
@media(max-width:560px){
  .cta{width:100%;padding:.95rem 1.2rem}
  .cta b{font-size:.95rem}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:
    radial-gradient(880px 520px at 50% -10%,rgba(217,174,74,.20),transparent 62%),
    linear-gradient(180deg,var(--cream-deep) 0%,var(--cream-deep) 22%,var(--cream) 72%);
  /* Poco aire arriba a propósito: la imagen del hero ya trae el suyo
     dentro —la flor de lis es más alta que la cabeza de Adri, así que
     sobre ella queda un hueco transparente que no se puede recortar
     sin cortar el logo—. Sumarle relleno a la sección duplicaba ese
     vacío. */
  text-align:center;padding:clamp(.6rem,1.6vw,1.2rem) 0 clamp(2.5rem,6vw,4rem);
}

/* ---------- El mockup hace de título ---------- */
.hero-logo{margin:0 auto 1.1rem;line-height:0}
.hero-logo img{
  /* Esta versión es más alta que ancha (900x1027), así que el ancho
     se mide por la altura que genera: a 500px de ancho ocupa 570 de
     alto, que es lo máximo antes de empujar el botón fuera de la
     primera pantalla en un celular.
     El recorte es de 900px, así que a 500 sobra resolución retina. */
  width:min(500px,90vw);height:auto;margin-inline:auto;
  filter:drop-shadow(0 14px 30px rgba(138,99,24,.22));
}
@media(max-width:520px){ .hero-logo img{width:min(360px,86vw)} }

/* La promesa del curso: es la frase que tiene que leerse sí o sí.
   Sube a 19-24px para despegarse de la línea de beneficios que va
   abajo; sin esa diferencia las dos competían y ninguna ganaba. */
.hero-sub{
  font-size:clamp(1.2rem,3.2vw,1.5rem);max-width:32rem;
  margin:0 auto 1.6rem;color:var(--cocoa-soft);line-height:1.45;
}
.hero-sub strong{color:var(--cocoa)}

/* ---------- Beneficios de preinscribirse ----------
   Una sola frase encima del botón. Sin caja, sin viñetas, sin
   íconos: dentro del hero cualquier recuadro compite con el botón,
   que es lo único que tiene que destacar. */
.perk{
  max-width:31rem;margin:0 auto 1.4rem;
  /* No baja de 15px: es texto de apoyo, pero el 51% de la audiencia
     tiene 55+ y por debajo de eso deja de leerse. La jerarquía con
     la promesa se consigue agrandando arriba, no achicando acá. */
  font-size:.94rem;line-height:1.5;color:var(--cocoa-soft);
}
/* La prioridad se resalta con color y peso, sin subrayado ni
   recuadro: alcanza para que el ojo la agarre primero. */
.perk strong{
  color:var(--gold-ink);font-weight:700;
}
@media(max-width:520px){ .perk{font-size:.9rem;margin-bottom:1.2rem} }

.hero-anchor{
  margin-top:1rem;font-size:.92rem;color:var(--cocoa-soft);
}
.hero-anchor b{color:var(--cocoa)}

/* ============================================================
   BANDA DESLIZANTE
   ============================================================ */
.band{
  background:var(--blush-deep);color:var(--white);
  padding:.85rem 0;overflow:hidden;white-space:nowrap;
  border-block:1px solid rgba(201,162,39,.45);
}
.band-track{display:inline-flex;gap:2.4rem;animation:slide 34s linear infinite;will-change:transform}
.band-track span{
  font-family:var(--display);font-size:1.05rem;font-weight:600;font-style:italic;
}
.band-track .dot{color:var(--gold-light);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .band-track{animation:none} }

/* ============================================================
   VIDEO
   ============================================================ */
.video-sec{background:var(--cream-deep)}
/* El marco NO fija proporción: la define el propio video con su
   height:auto. Así no hay que adivinar si es horizontal o vertical,
   y nunca queda ni recortado ni con bandas negras.
   El max-height es el freno para un video vertical: sin él, a 820px
   de ancho ocuparía tres pantallas de alto. */
.video-box{
  position:relative;max-width:820px;margin:2.2rem auto 0;
  border-radius:var(--radius);overflow:hidden;line-height:0;
  box-shadow:var(--shadow-md);background:var(--cocoa-deep);
  border:1px solid rgba(201,162,39,.45);
}
.video-box video,.video-box iframe{
  display:block;width:100%;height:auto;max-height:76vh;
  margin-inline:auto;border:0;background:var(--cocoa-deep);
}

/* ============================================================
   LOS 3 PROYECTOS
   Los módulos 8, 9 y 10 son pasteles completos. Van antes del
   temario porque son el resultado visible: la audiencia compra
   la foto del pastel, no la lista de clases.
   ============================================================ */
/* ============================================================
   MARCA DE AGUA
   La flor de lis enorme y casi invisible detrás de los bloques
   oscuros. Es lo que hace que el fondo se lea "trabajado" y no
   un rectángulo marrón. Nunca por encima del texto: opacidad
   baja y z-index detrás.
   ============================================================ */
.ben-sec,.final{position:relative;overflow:hidden}
.ben-sec::before,.final::before{
  content:"";position:absolute;pointer-events:none;
  background:var(--lis-claro) center/contain no-repeat;
  opacity:.05;
}
.ben-sec::before{width:520px;height:560px;top:-90px;right:-140px;transform:rotate(12deg)}
.final::before{width:440px;height:480px;bottom:-120px;left:-110px;transform:rotate(-14deg)}
/* El contenido va por encima de la marca de agua */
.ben-sec>.wrap,.final>.wrap{position:relative;z-index:1}
@media(max-width:720px){
  .ben-sec::before{width:320px;height:340px;top:-50px;right:-110px}
  .final::before{width:280px;height:300px;bottom:-80px;left:-90px}
}

/* Blanco, y no crema: viene justo después del bloque oscuro de
   beneficios y va antes del crema de Adri. Dos secciones oscuras
   pegadas se leen como una sola, y el blanco además es el mejor
   fondo posible para fotos de pasteles. */
.proy-sec{background:var(--white)}

/* ---------- Carrusel de proyectos ----------
   El desplazamiento lo hace el navegador con scroll-snap: en el
   celular se desliza con el dedo sin JS. Las flechas y los puntos
   son un agregado; si el JS falla, el carrusel igual funciona. */
.car{position:relative;max-width:460px;margin:2.4rem auto 0}
.car-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  border-radius:var(--radius);
}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:3px solid var(--gold-light);outline-offset:4px}

.car-slide{flex:0 0 100%;scroll-snap-align:center;margin:0}
.car-img{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(217,174,74,.45);
  box-shadow:var(--shadow-md);background:rgba(217,174,74,.08);
}
.car-img img{width:100%;height:100%;object-fit:cover}

.car-slide figcaption{
  padding:1rem .6rem 0;text-align:center;
  font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--cocoa);
  line-height:1.25;
}
.car-slide figcaption small{
  display:block;margin-top:.3rem;
  font-family:var(--body);font-size:.86rem;font-weight:500;
  color:var(--cocoa-soft);line-height:1.45;
}

.car-nav{
  position:absolute;top:36%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--cocoa-deep);color:var(--gold-light);
  border:1px solid rgba(217,174,74,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.car-nav:hover{background:var(--gold);color:var(--cocoa-deep)}
.car-nav[disabled]{opacity:.28;cursor:default}
.car-nav[disabled]:hover{background:var(--cocoa-deep);color:var(--gold-light)}
.car-prev{left:-66px}
.car-next{right:-66px}
/* Cuando ya no entran al costado, se apoyan sobre la foto */
@media(max-width:620px){
  .car-prev{left:10px}
  .car-next{right:10px}
  .car-nav{width:42px;height:42px;background:rgba(61,36,21,.8)}
}

.car-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.3rem}
.car-dot{
  width:9px;height:9px;border-radius:99px;padding:0;
  background:rgba(90,54,32,.2);transition:all .25s var(--ease);
}
.car-dot.on{background:var(--gold);width:28px}

/* ============================================================
   TEMARIO · 12 MÓDULOS EN ACORDEÓN
   Acordeón nativo <details>, no JS: buena parte de esta audiencia
   usa celulares viejos y el acordeón tiene que abrir siempre.
   ============================================================ */
.prog-sec{background:var(--cream)}
.mods{max-width:780px;margin:2.4rem auto 0;display:grid;gap:.7rem;text-align:left}

details.mod{
  background:var(--white);border:1px solid rgba(201,162,39,.38);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease);
}
details.mod[open]{border-color:var(--gold)}
details.mod summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.9rem;
  padding:1.05rem 1.2rem;min-height:56px;
}
details.mod summary::-webkit-details-marker{display:none}
details.mod summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

.mod-n{
  flex:none;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));
  color:var(--white);font-family:var(--display);font-weight:700;font-size:1rem;
  box-shadow:0 4px 12px rgba(138,99,24,.28);
}
.mod-t{flex:1;min-width:0}
.mod-t b{
  display:block;font-family:var(--display);font-size:1.1rem;
  font-weight:700;color:var(--cocoa);line-height:1.3;
}
.mod-t small{display:block;font-size:.8rem;color:var(--gold-ink);font-weight:600;margin-top:.15rem}
.mod-x{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.5);color:var(--gold-ink);
  font-size:1.25rem;line-height:1;transition:transform .25s var(--ease);
}
details.mod[open] .mod-x{transform:rotate(45deg);background:var(--gold);color:var(--white)}

.mod-list{list-style:none;padding:0 1.2rem 1.1rem 1.2rem}
.mod-list li{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.6rem 0;font-size:.95rem;color:var(--cocoa-soft);
  border-top:1px solid rgba(201,162,39,.18);line-height:1.45;
}
.mod-list li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:.22rem;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/11px no-repeat;
}
/* Los módulos de proyecto no son una lista de clases: es un párrafo */
.mod-proy{
  padding:.2rem 1.2rem 1.2rem;font-size:.95rem;color:var(--cocoa-soft);
  border-top:1px solid rgba(201,162,39,.18);padding-top:.9rem;margin-top:0;
}

.prog-total{
  margin-top:1.6rem;font-size:.95rem;color:var(--cocoa);
  font-weight:600;
}

/* ============================================================
   BENEFICIOS
   Bloque oscuro entre dos claros. Es lo más parecido a un stack
   de valor que tiene esta página, así que se le da el peso
   visual del oro sobre fondo denso.
   ============================================================ */
/* Mismo rosa que el FAQ. El texto NO va suelto sobre ese rosa:
   crema sobre #C08C82 da 2,7:1 de contraste y no pasa ni cerca del
   mínimo. Por eso cada beneficio vive dentro de una tarjeta crema,
   igual que las preguntas del FAQ viven dentro de su acordeón. */
.ben-sec{background:var(--blush-deep)}
.ben-sec h2{color:var(--white)}
.ben-sec .sec-title em{color:var(--cream-deep)}

.ben-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
  max-width:900px;margin:2.4rem auto 0;text-align:left;
}
.ben{
  display:flex;align-items:flex-start;gap:1.05rem;
  background:var(--cream);
  border:1px solid rgba(217,174,74,.55);border-radius:var(--radius);
  padding:1.5rem 1.6rem;box-shadow:0 10px 26px rgba(90,54,32,.12);
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.ben:hover{transform:translateY(-3px);border-color:var(--gold)}

.ben-ico{
  flex:none;width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--cream-deep);
  border:1px solid rgba(217,174,74,.5);
  color:var(--gold-ink);
}
.ben-txt b{
  display:block;font-family:var(--display);font-size:1.2rem;font-weight:700;
  color:var(--cocoa);line-height:1.25;margin-bottom:.25rem;
}
.ben-txt p{font-size:.94rem;line-height:1.5;color:var(--cocoa-soft)}

/* Las filigranas de las esquinas se corren para no chocar con el
   ícono, que ya ocupa la esquina de arriba a la izquierda */
.ben.orn::before{display:none}
.ben.orn::after{bottom:8px;right:8px;opacity:.5}

@media(max-width:820px){
  .ben-grid{grid-template-columns:1fr;gap:.8rem}
  .ben{padding:1.2rem 1.25rem;gap:.9rem}
  .ben-ico{width:44px;height:44px;border-radius:12px}
  .ben-ico svg{width:22px;height:22px}
  .ben-txt b{font-size:1.08rem}
  .ben-txt p{font-size:.9rem}
}

/* ============================================================
   ADRIANA
   ============================================================ */
.adri-sec{background:var(--cream-deep)}
.adri-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.adri-media{
  position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  border:3px solid var(--gold);box-shadow:var(--shadow-md);background:var(--blush-soft);
}
.adri-media img{width:100%;height:100%;object-fit:cover}
.adri-sig{
  font-family:var(--script);font-size:2.1rem;color:var(--gold-ink);
  line-height:1.1;margin-top:1.4rem;
}
.adri-grid .lead{max-width:none}
.adri-grid .lead + .lead{margin-top:.9rem}
@media(max-width:860px){
  .adri-grid{grid-template-columns:1fr;gap:1.8rem;text-align:center}
  /* Tres párrafos centrados se leen mal: el texto vuelve a la
     izquierda aunque el título y la foto queden centrados. */
  .adri-grid .lead{text-align:left}
  .adri-media{max-width:210px}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-sec{background:var(--blush-deep)}
.faq-sec h2{color:var(--white)}
.faq-sec .lead{color:var(--white)}
.faq-sec .sec-title em{color:var(--cream-deep)}

/* Volante de las dos secciones rosas.
   Iba en dorado claro, que sobre este rosa queda en 2:1 y es texto
   chico y espaciado: el peor caso posible para una audiencia con
   51% de +55. En marrón oscuro sube a 4,8:1 y se lee. */
.ben-sec .eyebrow,.faq-sec .eyebrow{color:var(--cocoa-deep)}
.faq-list{max-width:760px;margin:2.4rem auto 0;display:grid;gap:.7rem;text-align:left}
details.faq{
  background:var(--cream);border:1px solid rgba(201,162,39,.4);
  border-radius:var(--radius);overflow:hidden;
}
details.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:1.1rem 1.3rem;min-height:56px;
  font-weight:600;color:var(--cocoa);font-size:1rem;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";flex:none;font-size:1.6rem;line-height:1;color:var(--gold-ink);
  transition:transform .25s var(--ease);
}
details.faq[open] summary::after{content:"–"}
details.faq p{padding:0 1.3rem 1.2rem;font-size:.95rem;line-height:1.6}

/* ============================================================
   CIERRE
   ============================================================ */
.final{
  background:
    radial-gradient(700px 380px at 50% 100%,rgba(201,162,39,.2),transparent 62%),
    var(--cocoa-deep);
  text-align:center;
}
.final h2{color:var(--cream);font-size:clamp(1.7rem,4.4vw,2.8rem);max-width:18em;margin:0 auto .8rem}
.final h2 em{font-style:normal;color:var(--gold-light)}
.final p{color:rgba(253,245,239,.78);max-width:34rem;margin:0 auto 1.8rem}

footer{
  background:var(--cocoa-deep);color:rgba(253,245,239,.5);
  text-align:center;padding:1.8rem 1.5rem;font-size:.83rem;
  border-top:1px solid rgba(201,162,39,.25);
}
footer a{color:var(--gold-light);text-decoration:underline}

/* Acá vivía una barra fija abajo en mobile, con el mismo botón, que
   entraba al pasar el hero. Sacada el 10/08/2026: en una página que
   no vende nada todavía, un botón que persigue al lector molesta más
   de lo que aporta. El mensaje sigue en el hero y en el cierre. */

/* ---------- Aparición al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ============================================================
   MARCADOR DE IMAGEN FALTANTE
   Mientras el archivo no existe se ve el recuadro punteado con
   el nombre exacto que hay que soltar en assets/. Cuando la foto
   real carga, el recuadro desaparece solo.
   ============================================================ */
.ph{
  display:grid;place-items:center;text-align:center;padding:1.2rem;
  background:var(--cream-deep);border:2px dashed var(--gold);
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-txt{color:var(--gold-ink);font-size:.8rem;font-weight:600;line-height:1.45}
.ph-txt b{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.2rem}
.ph.ok{border-color:transparent;background:transparent;padding:0}
.ph.ok .ph-txt{display:none}
.proy-img.ph{border-width:2px}
/* El retrato de Adri conserva el aro dorado cuando la foto carga:
   sin el aro, un retrato claro sobre fondo claro no se recorta. */
.adri-media.ph.ok{border:3px solid var(--gold)}