/* ===== v2: tipografías + ajustes sobre styles.css ===== */
:root{
  --serif: "Italiana", Georgia, serif;   /* títulos de sección (display) */
  --sans:  "PT Sans", system-ui, sans-serif;        /* cuerpo */
  --ui:    "Montserrat", system-ui, sans-serif;
}
/* Italiana es fina: engrosamos un poco para legibilidad en títulos */
h1, h2, h3, .display, .norisk blockquote, .stat__num, .tipos__num {
  font-weight:400; letter-spacing:.01em; -webkit-text-stroke:.3px currentColor;
}
.eyebrow, .btn, .header-tag, .tipo__level, .compare__tag { font-family:"Montserrat", system-ui, sans-serif; -webkit-text-stroke:0; }
/* en esta demo no hay scroll-reveal: mostramos todo */
.reveal{ opacity:1 !important; transform:none !important; }

/* ===== HERO v2 (headline + subheadline + video) ===== */
.v2hero{ text-align:center; padding-top:clamp(2.6rem,11vw,3.4rem); padding-bottom:clamp(1.4rem,4vw,2rem); }
@media(min-width:900px){
  .v2hero{ min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:center; padding-block:1.4rem; }
}
.v2hero .wrap{ width:100%; }
.v2hero h1{
  font-family:"Italiana", Georgia, serif; font-weight:400;
  font-size:clamp(2.1rem,4.8vw,2.9rem); line-height:1.1; letter-spacing:.012em;
  color:var(--ink); max-width:26ch; margin:.5rem auto 0;
  -webkit-text-stroke:.35px var(--ink);
}
.v2hero h1 em{ font-style:normal; color:var(--gold-deep); -webkit-text-stroke:.35px var(--gold-deep); }
/* DESKTOP: headline más grande y que ocupe más a lo ancho */
@media(min-width:900px){
  .v2hero h1{ font-size:clamp(2.9rem,5.2vw,3.9rem); max-width:30ch; line-height:1.05; }
}
.v2hero__sub{ font-family:"PT Sans",system-ui,sans-serif; font-size:clamp(.95rem,1.6vw,1.15rem); color:var(--text-soft); max-width:56ch; margin:1rem auto 0; }

/* encuadre abierto abajo que sale de detrás del video, mismo ancho que el video */
/* Mismo branding que la cajita del bono (.urgency): fondo crema, borde sutil, texto
   cobre — y sale DESDE DETRÁS del video (z-index menor + se mete bajo el borde). */
.v2kicker{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:min(680px,92vw);
  background:var(--cream-2);
  border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0;
  padding:.9rem 1.5rem 1.9rem;
  margin:clamp(1.3rem,3vw,1.9rem) auto -22px;
}
.v2kicker span{ font-family:"Montserrat",system-ui,sans-serif; font-weight:600; font-size:.9rem; letter-spacing:.005em; color:var(--copper); }

.v2vsl{ position:relative; z-index:2; width:100%; max-width:min(680px,92vw); margin:0 auto; border-radius:14px 14px 0 0; overflow:hidden; background:#241608; aspect-ratio:16/9; box-shadow:0 14px 44px rgba(36,22,8,.22); }
/* Barra de progreso VTurb: pegada DEBAJO del video, mismo ancho que el cuadro. */
.vsl-progress{ width:100%; max-width:min(680px,92vw); height:7px; margin:0 auto; background:rgba(0,0,0,.5); border-radius:0 0 12px 12px; overflow:hidden; }
.vsl-progress>div{ background:linear-gradient(90deg,#9e7c3c,#e8c67a) !important; box-shadow:0 0 6px rgba(198,161,91,.5); }
/* Desktop: ventana de video más grande (y la barra la sigue). */
@media(min-width:900px){
  .v2vsl{ max-width:min(940px,92vw); }
  .vsl-progress{ max-width:min(940px,92vw); }
}
.v2vsl img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
.v2vsl__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.v2vsl__play span{ width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(0,0,0,.3); }
.v2vsl__play svg{ margin-left:4px; color:var(--ink); }
.v2hint{ display:inline-flex; align-items:center; gap:.55rem; margin-top:.9rem; font-family:"Montserrat",system-ui,sans-serif; font-size:.82rem; color:var(--text-soft); }
.v2hint .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* Aviso de desbloqueo (más visible) — caja sobre la foto del hero */
.v2unlock{
  display:flex; align-items:center; gap:.9rem;
  max-width:min(600px,94vw); margin:1.7rem auto 0;
  padding:1.05rem 1.5rem;
  border:1.5px solid var(--gold); border-radius:14px;
  background:rgba(250,245,238,.96);
  box-shadow:0 14px 40px rgba(20,12,4,.34);
  text-align:left;
  font-family:"Montserrat",system-ui,sans-serif; font-size:1rem; line-height:1.45; font-weight:500;
  color:var(--ink);
}
.v2unlock svg{ flex:none; width:30px; height:30px; color:var(--gold-deep); animation:v2pulse 2s ease-in-out infinite; }
.v2unlock strong{ color:var(--gold-deep); font-weight:700; }
@keyframes v2pulse{ 0%,100%{opacity:.5; transform:scale(.94)} 50%{opacity:1; transform:scale(1)} }

/* v2: "Quién está detrás" en cobre/tabique (#6d3914, color de marca) */
.proof{ background:var(--copper) !important; }
/* v2: Tipologías en OLIVO (#464123, color de marca aún sin usar) */
.tipos{ background:var(--olive) !important; padding-bottom:clamp(2.5rem,6vw,3.6rem) !important; }
.tipos .eyebrow{ color:var(--beige) !important; }
.tipos h2{ color:var(--cream) !important; }
.tipos .lead{ color:rgba(244,234,217,.8) !important; }
/* v2: el CTA final va sobre FONDO CLARO (sin imagen oscura de fondo) */
.final-cta{
  background:var(--cream) !important; color:var(--text) !important; text-align:center;
  padding-top:clamp(2.2rem,6vw,3.4rem) !important;
  padding-bottom:clamp(1.2rem,4vw,2rem) !important;
  border-top:1px solid var(--line);          /* línea de separación */
}
.final-cta h2{ color:var(--ink) !important; }
.final-cta p{ color:var(--text-soft) !important; }
.final-cta .eyebrow{ color:var(--gold) !important; }
.final-cta .urgency{ background:var(--cream-2) !important; border-color:var(--line) !important; color:var(--copper) !important; }

/* ===== RENDER full-bleed al final ===== */
.v2render{ margin-top:clamp(-2.5rem,-3vw,-1rem); }
/* fundimos SOLO el borde superior (cielo) para que no se vea la línea del borde */
.v2render img{
  width:100%; display:block;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 12%);
}
/* En la página principal (bloqueada) el render va pegado al hero, sin margen negativo */
.v2render--top{ margin-top:0; }
/* Recorta el cielo del render bloqueado (lo ancla al edificio) para acercarlo a la caja */
.v2render--top img{
  /* móvil: recorta el cielo de arriba y ancla al edificio → la punta queda justo bajo la caja */
  max-height:260px; object-fit:cover; object-position:center 46%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 4%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 4%); }
/* Desktop: banda recortada + degradado crema alto, que arranca por encima del techo. */
@media(min-width:900px){
  .v2render--top img{ max-height:clamp(360px,46vw,600px); object-fit:cover; object-position:center 40%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 24%); }
}