/* =========================================================
   DÓLARES SIN SECRETOS
   Sistema: off-black + un solo acento (carmesí).
   Radios: pill para botones, 16px para paneles, 10px para lo chico.
   Tema fijo oscuro en toda la página. Ninguna sección se invierte.
   ========================================================= */

:root{
  --bg:        #07070a;
  --bg-2:      #0d0d11;
  --bg-3:      #141418;
  --panel-ac:  #1c0509;          /* panel con tinte carmesí muy bajo */
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);

  --fg:        #f7f6f4;
  --fg-2:      #b6b3ae;
  --fg-3:      #8a8781;

  /* --accent para fondos sólidos. Con texto blanco da 4.9:1, pasa AA.
     --accent-2 para texto sobre el fondo oscuro: 6.1:1, también AA.
     El carmesí puro sobre negro queda en 4.0:1, que solo alcanza para
     texto grande, por eso las palabras sueltas usan --accent-2. */
  --accent:    #e10e2b;
  --accent-2:  #ff4d63;
  --accent-ink:#ffffff;
  --accent-dim:rgba(225,14,43,.14);

  --r-pill: 999px;
  --r-panel: 16px;
  --r-sm: 10px;

  --wrap: 1120px;

  --ease: cubic-bezier(.16,1,.3,1);

  /* permite animar height:auto en el acordeón */
  interpolate-size: allow-keywords;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  margin:0 0 .5em;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.08;
}

p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }

/* El atributo hidden trae display:none del navegador, pero cualquier regla
   nuestra que declare display se lo come. Sin esto, un .btn oculto con
   hidden se sigue viendo, porque .btn declara display:inline-flex. */
[hidden]{ display:none !important; }

:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:20px;
}
.wrap--angosto{ max-width:760px; }

.ac{ color:var(--accent-2); }
.dim{ color:var(--fg-3); display:block; }

/* =========================================================
   BARRA SUPERIOR
   Sin menú a propósito: en una carta de venta cada link es una fuga.
   ========================================================= */
.barra-top{
  position:relative;
  z-index:3;
  padding:20px 0;
}
.barra-top__in{ display:flex; align-items:center; }

.marca{
  font-weight:800;
  font-size:17px;
  letter-spacing:-.02em;
}
.marca__ac{ color:var(--accent-2); }

/* =========================================================
   HERO
   Centrado a propósito: en una carta de venta el mensaje es el diseño.
   Sin botón hasta que el reloj lo habilita.
   ========================================================= */
.hero{
  position:relative;
  padding:56px 0 92px;
  text-align:center;
  overflow:hidden;
}

/* El glow radial de las referencias. Uno solo en toda la página. */
.hero__luz{
  position:absolute;
  top:-260px;
  left:50%;
  translate:-50% 0;
  width:min(1100px, 150vw);
  aspect-ratio:1;
  background:radial-gradient(circle,
    rgba(225,14,43,.34) 0%,
    rgba(225,14,43,.13) 34%,
    transparent 66%);
  pointer-events:none;
}

.hero__in{ position:relative; }

.pill{
  display:inline-block;
  margin:0 0 26px;
  padding:8px 18px;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  color:var(--fg-2);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
}

.hero__t{
  margin:0 0 22px;
  font-size:clamp(40px, 8.2vw, 74px);
  letter-spacing:-.038em;
}

.hero__s{
  max-width:52ch;
  margin:0 auto;
  color:var(--fg-2);
  font-size:clamp(16.5px, 2.1vw, 19px);
}

/* =========================================================
   SECCIONES
   ========================================================= */
.sec{ padding:76px 0; }

.t2{
  font-size:clamp(28px, 4.6vw, 42px);
  letter-spacing:-.032em;
  margin:0 0 32px;
}
.t2--ancho{ max-width:20ch; }
.t2--sm{ font-size:clamp(20px, 3vw, 24px); color:var(--fg-3); margin-bottom:10px; }

.prosa{
  max-width:62ch;
  color:var(--fg-2);
}
.prosa p:last-child{ margin-bottom:0; }

.sec--problema .prosa{ margin-top:8px; }

/* =========================================================
   LOS TRES DÍAS
   No son tres tarjetas iguales: la del día 3 invierte el contraste
   porque es el día donde pasa lo que la persona vino a buscar.
   ========================================================= */
.dias{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.dia{
  padding:28px 24px 26px;
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
}

.dia__n{
  display:inline-block;
  margin-bottom:16px;
  padding:5px 12px;
  border-radius:var(--r-pill);
  background:var(--accent-dim);
  color:var(--accent-2);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
}

.dia__t{
  font-size:21px;
  margin:0 0 10px;
  letter-spacing:-.02em;
}

.dia__d{
  margin:0;
  color:var(--fg-2);
  font-size:15.5px;
  line-height:1.55;
}

/* El día del lanzamiento. Único bloque sólido en el acento. */
.dia--clave{
  background:linear-gradient(165deg, var(--accent), #a80a20);
  border-color:transparent;
}
.dia--clave .dia__n{
  background:rgba(0,0,0,.24);
  color:#fff;
}
.dia--clave .dia__d{ color:rgba(255,255,255,.88); }

/* =========================================================
   BONOS
   Dos, no tres. Son los dos que existen de verdad.
   ========================================================= */
.bonos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

.bono{
  display:flex;
  gap:18px;
  padding:26px 24px;
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  background:var(--bg-2);
}

.bono__ico{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  background:var(--accent-dim);
  color:var(--accent-2);
  font-size:21px;
}

.bono__t{
  font-size:18px;
  margin:0 0 8px;
  letter-spacing:-.015em;
}

.bono__d{
  margin:0;
  color:var(--fg-2);
  font-size:15.5px;
  line-height:1.55;
}

/* =========================================================
   QUIÉN TE ENSEÑA
   ========================================================= */
.sec--quien{ padding-top:20px; }

.quien{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:40px;
  align-items:center;
}

.quien__foto{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-panel);
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 22%, rgba(225,14,43,.30), transparent 62%),
    var(--panel-ac);
  display:grid;
  place-items:center;
}
.quien__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.quien__nom{
  margin:0 0 4px;
  font-size:clamp(26px, 4vw, 34px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
}

.quien__cred{
  margin:0 0 18px;
  color:var(--accent-2);
  font-size:15px;
  font-weight:700;
}

/* =========================================================
   OFERTA
   Aparece con el reloj. Ver ctaSegundos en app.js.
   ========================================================= */
.sec--oferta{ padding-top:20px; }

/* Los dos paneles viven en la misma celda. El slot mide siempre lo que mide
   el más alto de los dos, así que el cambio de uno por el otro no mueve
   ni un pixel del contenido que está debajo. */
.oferta-slot{
  display:grid;
  max-width:620px;
  margin-inline:auto;
}
.oferta-slot > *{ grid-area:1 / 1; }

/* Apagado, no removido: sigue ocupando su celda para sostener el alto. */
.oferta-slot > .off{
  visibility:hidden;
  pointer-events:none;
}

.oferta-espera,
.oferta{
  border-radius:var(--r-panel);
}

.oferta-espera{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  border:1px dashed var(--line-2);
  background:var(--bg-2);
  text-align:center;
}

.oferta-espera__pulso{
  width:9px;
  height:9px;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--accent-2);
}
@media (prefers-reduced-motion: no-preference){
  .oferta-espera__pulso{ animation:pulso 1.9s var(--ease) infinite; }
}
@keyframes pulso{
  0%,100%{ opacity:.35; transform:scale(.85); }
  50%    { opacity:1;   transform:scale(1.15); }
}

.oferta-espera__t{
  margin:0 0 4px;
  font-weight:700;
  font-size:17px;
}
.oferta-espera__d{
  margin:0;
  color:var(--fg-3);
  font-size:14.5px;
}

.oferta{
  padding:38px 32px 32px;
  border:1px solid var(--line-2);
  background:
    radial-gradient(circle at 50% 0%, rgba(225,14,43,.20), transparent 62%),
    var(--bg-2);
  text-align:center;
}

@media (prefers-reduced-motion: no-preference){
  .oferta[data-entra]{ animation:entra .55s var(--ease) both; }
}
@keyframes entra{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

.oferta__label{
  margin:0 0 6px;
  color:var(--fg-3);
  font-size:14px;
  font-weight:600;
}

.oferta__precio{
  margin:0 0 26px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
}
.oferta__num{
  font-size:clamp(56px, 12vw, 76px);
  font-weight:800;
  letter-spacing:-.05em;
  line-height:1;
}
.oferta__mon{
  font-size:24px;
  font-weight:700;
  color:var(--fg-2);
}

.oferta__lista{
  display:grid;
  gap:11px;
  margin:0 0 28px;
  text-align:left;
  max-width:400px;
  margin-inline:auto;
}
.oferta__lista li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  color:var(--fg-2);
  font-size:15.5px;
  line-height:1.45;
}
.oferta__lista i{
  flex:0 0 auto;
  margin-top:2px;
  color:var(--accent-2);
  font-size:16px;
}

.oferta__nota{
  margin:16px 0 0;
  color:var(--fg-3);
  font-size:13.5px;
}

/* =========================================================
   BOTONES
   Un solo estilo primario en toda la página.
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.btn i{ font-size:19px; }

.btn--pr{
  background:var(--accent);
  color:var(--accent-ink);
}
.btn--pr:hover{ background:#f5122f; }
.btn--pr:active{ transform:translateY(1px); }

.btn--gd{
  width:100%;
  max-width:400px;
  padding:17px 30px;
  font-size:17px;
}

/* =========================================================
   PREGUNTAS
   Acordeón nativo. Sin JS.
   ========================================================= */
.faq{
  border-bottom:1px solid var(--line);
}
.faq:first-of-type{ border-top:1px solid var(--line); }

.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 2px;
  cursor:pointer;
  font-weight:700;
  font-size:17px;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }

.faq__ico{
  flex:0 0 auto;
  color:var(--accent-2);
  font-size:16px;
  transition:rotate .25s var(--ease);
}
.faq[open] .faq__ico{ rotate:45deg; }

.faq__r{
  padding:0 2px 22px;
  color:var(--fg-2);
  font-size:15.5px;
}
.faq__r p{ margin:0; max-width:62ch; }

/* =========================================================
   CIERRE
   ========================================================= */
.cierre{
  padding:80px 0 96px;
  text-align:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 100%, rgba(225,14,43,.16), transparent 60%),
    var(--bg);
}
.cierre__in{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cierre__t{
  max-width:18ch;
  font-size:clamp(28px, 5vw, 44px);
  letter-spacing:-.034em;
  margin:0 0 30px;
}
.cierre__t .ac{ display:block; }

/* =========================================================
   PIE
   ========================================================= */
.pie{
  padding:26px 0;
  border-top:1px solid var(--line);
  color:var(--fg-3);
  font-size:14px;
}
.pie__in{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* =========================================================
   BARRA FIJA
   Aparece junto con la oferta. Fixed, así que no mueve el layout.
   ========================================================= */
.barra-fija{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  padding:12px 0;
  border-top:1px solid var(--line-2);
  background:rgba(13,13,17,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
@media (prefers-reduced-transparency: reduce){
  .barra-fija{ background:var(--bg-2); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

@media (prefers-reduced-motion: no-preference){
  .barra-fija[data-entra]{ animation:sube .45s var(--ease) both; }
}
@keyframes sube{
  from{ transform:translateY(100%); }
  to  { transform:none; }
}

.barra-fija__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.barra-fija__txt{ display:flex; flex-direction:column; line-height:1.25; }
.barra-fija__p{ font-weight:800; font-size:19px; letter-spacing:-.02em; }
.barra-fija__d{ color:var(--fg-3); font-size:13px; }

/* Cuando la barra está visible, el pie necesita aire para no quedar tapado. */
body.con-barra .pie{ padding-bottom:92px; }

/* =========================================================
   ENTRADA POR SCROLL
   Nativa, sin listeners de scroll. Comunica jerarquía: cada bloque
   entra cuando le toca, en vez de aparecer todo de golpe.
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .dia, .bono, .quien__foto, .quien__txt{
      animation:revela linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%;
    }
  }
}
@keyframes revela{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}

/* =========================================================
   MÓVIL
   Todo lo asimétrico colapsa a una sola columna.
   ========================================================= */
@media (max-width: 900px){
  .quien{ grid-template-columns:1fr; gap:26px; }
  .quien__foto{ max-width:260px; }
}

@media (max-width: 760px){
  body{ font-size:16.5px; }
  .sec{ padding:56px 0; }
  .hero{ padding:40px 0 68px; }

  .dias,
  .bonos{ grid-template-columns:1fr; }

  .bono{ flex-direction:column; gap:14px; }

  .oferta{ padding:32px 22px 26px; }

  .cierre{ padding:64px 0 80px; }

  .barra-fija__d{ display:none; }
  .barra-fija .btn{ padding:13px 20px; font-size:15px; }
  .barra-fija__p{ font-size:17px; }
}

@media (max-width: 400px){
  .barra-fija__txt{ display:none; }
  .barra-fija .btn{ width:100%; }
}