/* ===== COLORES: cámbialos aquí ===== */
:root{
  --ivory:#F5F0E8; --paper:#FBF8F2; --teal:#397F8B; --teal-d:#2b6670;
  --ink:#27474D;    /* texto de párrafos y campos */
  --title:#1E5560;  /* titulares */
  --deep:#1B4A52;   /* pie de página */
  --sand:#E6D8C2;   /* fondo de la sección "Detrás de los regalos invisibles" */
  --plum:#542B55; --coral:#D9776D;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem,5vw,5rem);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;font-size:clamp(16px,1.111vw,40px)} /* la página escala sola en pantallas grandes */
body{font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.7;color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1;letter-spacing:-.012em;color:var(--title)}
em{font-style:italic}
.mark{font:400 .78rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:1.6rem}
.mega{font-size:clamp(2.4rem,5.7vw,6.1rem)}
.mega .mark{display:block;font-family:var(--sans)}

/* Marco editorial de las fotos */
.frame{position:relative;border:.625rem solid var(--paper);border-radius:6px;background:var(--paper);box-shadow:0 22px 50px -26px rgba(32,37,41,.45);rotate:1.4deg;translate:0 var(--py,0px)}
.frame::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--teal);border-radius:6px;transform:translate(-1.1rem,1.1rem)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;border-radius:2px}

/* 01 HERO */
.hero{position:relative;z-index:3;min-height:100svh;display:grid;grid-template-columns:minmax(0,40rem) auto;justify-content:center;gap:clamp(1.5rem,3.5vw,4.5rem);align-items:center;padding:clamp(1.2rem,3svh,2.2rem) var(--pad) clamp(.8rem,2svh,1.5rem)}
.hero-copy{position:relative;z-index:2}
h1{font-size:clamp(2.4rem,5vw,5.4rem);margin-bottom:1.3rem}
h1 em{color:var(--coral);font-weight:400}
.book{font-size:1.25rem;margin-bottom:1.3rem}
.book span{display:block;font-family:var(--serif);font-style:italic;font-size:2.5rem;line-height:1.1;color:var(--teal);margin-bottom:.3rem}
.ask{font-family:var(--serif);font-style:italic;font-size:1.65rem;line-height:1.3;color:var(--ink);margin-bottom:1.6rem;padding-top:1.1rem;position:relative}
.ask::before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;background:var(--coral)}
.hero-frame{align-self:center;height:min(82svh,49rem);aspect-ratio:2/3;rotate:1.8deg}
.hero-frame::before{transform:translate(1.4rem,1.4rem)}

/* FORMULARIO (misma lógica; solo estilo) */
.signup{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;max-width:40rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.92rem;line-height:1.2;letter-spacing:.04em;color:var(--teal-d)}
input[type=text],input[type=email]{width:100%;font:inherit;font-size:1.1rem;color:var(--ink);background:transparent;border:1px solid rgba(32,37,41,.3);background:rgba(251,248,242,.85);padding:.8rem .9rem;border-radius:2px;line-height:1.3;transition:border-color .3s,box-shadow .3s}
input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
input[aria-invalid=true]{border-color:#a4493d}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn,.status,.promise,.thanks{grid-column:1/-1}
.btn{font:500 .86rem/1.4 var(--sans);letter-spacing:.14em;color:#fff;background:var(--teal);border:0;padding:1.1rem 1.6rem;cursor:pointer;margin-top:.5rem;transition:background .4s,transform .4s,box-shadow .4s}
.btn:hover{background:var(--plum);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(84,43,85,.6)}
.btn:disabled{opacity:.7;cursor:wait;transform:none}
.status{min-height:0;font-size:.95rem;color:var(--teal-d)}.status.is-error{color:#a4493d}
.promise{font-size:1.05rem;line-height:1.5;font-weight:400;color:#3f5256;margin-top:.2rem}
.thanks{padding:1.5rem 0;animation:rise 1s ease both}
.thanks-h{font-family:var(--serif);font-size:3rem;color:var(--teal);margin-bottom:.4rem;line-height:1}

/* 02 QUIÉN ES CRISTINA */
.who{position:relative;z-index:2;background:var(--sand);padding:clamp(2.2rem,5.5vh,3.8rem) var(--pad) clamp(2rem,4.5vh,3.2rem)}
.who .mega{max-width:16ch;position:relative;z-index:3;margin-bottom:-.2em}
.who .mega em{display:block;font-size:1.3em;line-height:.95;color:var(--plum);font-weight:400;margin-top:-.12em}
.who .mega{max-width:none}
.who-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.who-frame{aspect-ratio:4/5;rotate:-1.6deg;margin-top:1rem}
.who-frame::before{transform:translate(1.1rem,1.1rem);background:var(--coral);opacity:.9}
.who-frame img{object-position:50% 68%}
.who-text{padding-top:1.5rem;max-width:46rem}
.who-name{font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,3.8vw,4rem);line-height:1;color:var(--plum);margin-bottom:1.5rem;padding-top:1.3rem;position:relative}
.who-name::before{content:"";position:absolute;top:0;left:0;width:3.5rem;height:2px;background:var(--coral)}
.who-bio{font-size:1.4rem;line-height:1.75;font-weight:400}
.pull{margin:3rem 0 0 -9vw;position:relative;z-index:3;translate:0 var(--py,0px)}
.pull span{display:inline;font-family:var(--serif);font-style:italic;font-size:clamp(1.9rem,3.7vw,3.5rem);line-height:1.2;color:var(--plum);background:var(--sand);padding:.1em .35em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 03 TESTIMONIOS + VIDEO — tres columnas independientes (izquierda · video · derecha) */
.voices{position:relative;background:var(--teal);color:var(--ivory);padding:clamp(2.2rem,5.5vh,3.8rem) var(--pad) clamp(2.5rem,6vh,4.5rem);overflow:hidden}
.voices .mega{color:var(--ivory);max-width:17ch;margin-bottom:clamp(.8rem,2.5vh,1.6rem)}
.voices-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,26.5rem) minmax(0,1fr);gap:0 clamp(1.2rem,3vw,3rem);align-items:start}
.vcol{display:flex;flex-direction:column;gap:2.2rem;min-width:0}
.vcol-l{grid-column:1}
.vcol-c{grid-column:2;align-items:center;gap:2.6rem}
.vcol-r{grid-column:3;padding-top:5rem}
.video-frame{width:100%;max-width:26.5rem;aspect-ratio:9/16;rotate:-1deg;border-color:var(--ivory);background:#000;z-index:2}
.video-frame::before{background:var(--plum);transform:translate(1.25rem,1.25rem)}
.t{margin:0;position:relative}
.t p{font-family:var(--serif);font-style:italic;line-height:1.15;font-size:1.6rem}
.t cite{display:block;font:400 .85rem var(--sans);letter-spacing:.1em;margin-top:1rem;opacity:.85}
.ph{border:1px dashed rgba(245,240,232,.6);padding:1.6rem;max-width:21rem}
.ph-tag{display:inline-block;font:500 .68rem var(--sans);letter-spacing:.16em;text-transform:uppercase;background:var(--coral);color:#fff;padding:.3rem .6rem;margin-bottom:1rem}

/* Testimonios como IMAGEN (capturas): marco, bloque de color detrás y leve inclinación */
.t.t-img{padding:0;border:0;width:min(100%,21rem)}
.t.t-img img{position:relative;width:100%;height:auto;border:.6rem solid var(--b,var(--paper));border-radius:4px;box-shadow:0 20px 44px -24px rgba(0,0,0,.55);background:var(--paper)}
.t.t-img::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:var(--s,transparent);transform:translate(.9rem,.9rem)}
/* Colores de cada marco: --b = borde, --s = bloque de color detrás. Cámbialos aquí. */
.t1.t-img{--b:var(--sand);--s:var(--plum)}
.t2.t-img{--b:var(--sand);--s:var(--coral)}
.t3.t-img{--b:var(--sand);--s:var(--plum)}
.t4.t-img{--b:var(--sand);--s:var(--coral)}
.t5.t-img{--b:var(--sand);--s:var(--plum)}
/* Posición y inclinación (dentro de su columna) */
.t1.t-img{align-self:flex-end;width:min(100%,23rem);rotate:-1.6deg}
.t4.t-img{align-self:flex-start;width:min(100%,24rem);rotate:1.2deg}
.t2.t-img{align-self:flex-start;width:min(100%,22rem);rotate:1.4deg}
.t3.t-img{align-self:flex-end;margin-right:2vw;rotate:-1.2deg}
.t5.t-img{align-self:center;margin-top:.6rem;rotate:1deg}

/* 04 CIERRE */
.join{padding:clamp(2.2rem,5vh,3.5rem) var(--pad) clamp(1.5rem,3vh,2.2rem);position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.join .mega{font-size:clamp(2.3rem,5vw,5.4rem);max-width:15ch}
.join .mega b{color:var(--coral);font-weight:500}
.join-in{max-width:38.75rem}
footer{background:var(--deep);text-align:center;padding:1rem 1rem;font-size:.85rem;color:rgba(245,240,232,.7)}

/* MOVIMIENTO SUTIL */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-frame{animation:rise 1.8s .2s ease both}
.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity 1.3s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* RESPONSIVE */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:1.5rem}
  .hero-frame{order:-1;height:auto;width:min(86%,400px);margin:0 auto 1.5rem;aspect-ratio:4/5}
  .hero-frame img{object-position:50% 30%}
  .hero-copy{padding-bottom:3rem}
  .signup{grid-template-columns:1fr}
  .btn{width:100%}
  .who{padding-top:2rem}
  .who-grid{grid-template-columns:1fr}
  .who-frame{width:min(86%,420px);margin:2.5rem auto 0}
  .who-text{padding-top:2.5rem}
  .pull{margin-left:0}
  .voices-grid{grid-template-columns:1fr;gap:1.6rem}
  .vcol{display:contents}
  .video-frame,.t1,.t2,.t3,.t4{grid-column:1;grid-row:auto;margin:0;max-width:none}
  .video-frame{width:min(88%,380px);margin:1rem auto 2rem!important}
  .t1{order:1}.video-frame{order:2}.t2{order:3}.t3{order:4}.t4{order:5}.t5{order:6}
  .t.t-img{justify-self:center!important;margin:0!important;width:min(86%,22rem)!important}
  .join{grid-template-columns:1fr;gap:1.8rem}
  .join-in{margin:0}
  body{font-size:1.125rem}
}