/* ═══════════════════════════════════════════════════════════
   21 Días de Vacío — Gladys Morán
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#241813;
  --ink-2:#3a2a22;
  --terracotta:#8b4a3b;
  --clay:#b5613c;
  --clay-d:#8f4a2d;
  --cream:#f8f3ec;
  --sand:#e5d9c7;
  --muted:#6b5a50;
  --white:#fff;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --hdr-h:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  max-width:100vw;
  width:100%;
}
body{
  margin:0;background:var(--white);color:var(--ink-2);
  font-family:var(--sans);font-size:17px;line-height:1.75;font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
  width:100%;
  position:relative;
}
img,picture,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.08;color:var(--ink)}
p{margin:0 0 1.15em}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:12px;top:12px}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}

/* ── Layout ─────────────────────────────────────────────── */
.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 48px,760px)}
.center{text-align:center}
.sec{padding:clamp(88px,11vw,150px) 0}
.sec--cream{background:var(--cream)}
.sec--dark{background:var(--ink);color:#e9ded1}
.sec__head{max-width:660px;margin:0 0 clamp(46px,6vw,72px)}
.center .sec__head,.sec__head.center{margin-inline:auto}

.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,6vw,88px);align-items:center}
.grid-2--flip{grid-template-columns:.95fr 1.05fr}

/* ── Tipografía ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);
  margin:0 0 22px;
}
.eyebrow--dark{color:var(--terracotta)}
.h2{font-size:clamp(2.15rem,4.4vw,3.35rem);letter-spacing:-.005em;margin-bottom:.55em}
.lead{font-size:clamp(1.06rem,1.5vw,1.2rem);color:var(--ink-2);line-height:1.7}
p{color:var(--muted)}
.lead{color:var(--ink-2)}

.pull{
  font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.72rem);font-style:italic;
  line-height:1.42;color:var(--terracotta);
  border-left:2px solid var(--sand);padding-left:26px;margin:34px 0;
}
.signature{
  font-family:var(--serif);font-style:italic;font-size:1.9rem;
  color:var(--terracotta);margin-top:34px;
}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  --bg:var(--clay);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.02em;
  padding:16px 30px;border:1px solid var(--bg);border-radius:2px;
  background:var(--bg);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{--bg:var(--clay-d);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(36,24,19,.5)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:19px 38px;font-size:15px}
.btn--sm{padding:11px 20px;font-size:13px}
.btn--block{width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--sand)}
.btn--ghost:hover{background:transparent;border-color:var(--sand);transform:none;box-shadow:none}
.btn[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none}
.btn em{font-style:normal;opacity:.62;font-size:.9em}

.lnk{
  font-size:14.5px;letter-spacing:.02em;color:#fff;text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.42);
  transition:border-color .3s var(--ease)
}
.lnk:hover{border-color:#fff}

/* ═══ HEADER ═══════════════════════════════════════════════ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--hdr-h);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             color .45s var(--ease),height .45s var(--ease);
  color:#fff;
}
.hdr__inner{
  width:min(100% - 48px,var(--wrap));margin-inline:auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px
}
/* ── Logotipo del header ─────────────────────────────────────
   El SVG va inline (no como <img>) para poder usar Alex Brush y
   para poder recolorearlo con CSS entre los dos estados.        */
.brand{display:block;text-decoration:none;flex:none}
.brand__logo{
  display:block;width:390px;height:58px;
  transition:width .45s var(--ease),height .45s var(--ease)
}

.lg-title{font-family:"Alex Brush","Brush Script MT",cursive;font-size:52px;dominant-baseline:central}
.lg-author{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.28em;dominant-baseline:central}
.lg-by{font-family:var(--serif);font-size:11px;font-style:italic;letter-spacing:.08em}
.lg-swash{fill:none;stroke-width:1.2;opacity:.85}
.lg-rule{stroke-width:1}

.brand__logo text,.brand__logo path,.brand__logo line{
  transition:fill .5s var(--ease),stroke .5s var(--ease)
}

/* Estado 1 — sobre el hero: letras en blanco */
.lg-title{fill:#fff}
.lg-author{fill:rgba(255,255,255,.88)}
.lg-by{fill:rgba(255,255,255,.7)}
.lg-swash{stroke:rgba(255,255,255,.58)}
.lg-rule{stroke:rgba(255,255,255,.4)}

/* Estado 2 — tras el scroll: colores originales de marca */
.is-scrolled .lg-title{fill:var(--ink)}
.is-scrolled .lg-author{fill:var(--terracotta)}
.is-scrolled .lg-by{fill:#8f786c}
.is-scrolled .lg-swash{stroke:var(--clay)}
.is-scrolled .lg-rule{stroke:#d9c8b8}

.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-size:14px;font-weight:400;text-decoration:none;letter-spacing:.01em;
  opacity:.88;transition:opacity .3s var(--ease)
}
.nav a:hover{opacity:1}
.nav .btn{opacity:1;color:#fff}

/* estado tras scroll: fondo claro, texto oscuro */
.hdr.is-scrolled{
  background:rgba(248,243,236,.88);
  border-bottom-color:var(--sand);
  color:var(--ink);
  --hdr-h:74px;height:74px;
}
.hdr.is-scrolled .brand__logo{width:360px;height:54px}

@media (max-width:1080px){
  .brand__logo,.hdr.is-scrolled .brand__logo{width:330px;height:49px}
}
@media (max-width:960px){
  .brand__logo,.hdr.is-scrolled .brand__logo{width:270px;height:42px}
  .nav{gap:16px}
  .nav .btn{padding:9px 14px}
}
.hdr.is-scrolled .nav .btn{color:#fff}

.burger{
  display:none;width:42px;height:42px;background:none;border:0;cursor:pointer;
  padding:0;position:relative;color:inherit
}
.burger span{
  position:absolute;left:11px;width:20px;height:1.5px;background:currentColor;
  transition:transform .35s var(--ease),opacity .25s var(--ease)
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ═══ HERO ═════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;color:#fff;isolation:isolate
}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:72% center;
  animation:kenburns 26s var(--ease-out) forwards
}
@keyframes kenburns{from{transform:scale(1.005)}to{transform:scale(1.075)}}
/* En vertical el encuadre es más cerrado: menos zoom para no comerse el borde. */
@keyframes kenburns-suave{from{transform:scale(1)}to{transform:scale(1.04)}}

/* El degradado protege la columna de texto (0–52%) y deja libre a la mujer (>70%). */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(26,16,12,.94) 0%,rgba(26,16,12,.88) 26%,
                    rgba(26,16,12,.62) 46%,rgba(26,16,12,.26) 62%,
                    rgba(26,16,12,.05) 78%,transparent 88%),
    linear-gradient(to top,rgba(26,16,12,.55),transparent 42%);
}
.hero__body{
  width:min(100% - 48px,var(--wrap));margin-inline:auto;
  padding-top:var(--hdr-h);max-width:none
}
.hero__body>*{max-width:640px}
.hero__title{
  font-size:clamp(2.9rem,6.6vw,5.15rem);font-weight:300;
  line-height:1.03;letter-spacing:-.015em;color:#fff;margin:0 0 .5em
}
.hero__title .line{display:block}
.hero__title .line--em{font-style:italic;color:#f0d9c4}
.hero__sub{
  font-size:clamp(1.04rem,1.55vw,1.17rem);line-height:1.72;
  color:rgba(255,255,255,.84);max-width:520px;margin-bottom:2.4em
}
.hero__cta{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.hero__note{
  margin-top:2.6em;font-size:12.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.6);text-transform:uppercase
}
.hero__scroll{
  position:absolute;left:50%;bottom:34px;translate:-50% 0;
  width:1px;height:54px;background:rgba(255,255,255,.22);overflow:hidden;
  transition:opacity .4s var(--ease)
}
/* Se oculta al salir del hero: detiene el compositing de su animación infinita. */
body.is-past-hero .hero__scroll{opacity:0;visibility:hidden}
.hero__scroll span{
  position:absolute;inset:0;background:rgba(255,255,255,.9);
  animation:scrollline 2.6s var(--ease-out) infinite
}
@keyframes scrollline{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

/* ── Hero en viewports verticales ───────────────────────────
   Se activa por la FORMA de la ventana, no por el ancho, para que
   coincida exactamente con el recorte que sirve <picture>.
   El texto baja al tercio inferior: así el rostro queda libre.      */
@media (max-aspect-ratio:1/1){
  .hero{align-items:flex-end;min-height:92svh}
  .hero__media img{object-position:center;animation-name:kenburns-suave}
  .hero__body{padding-top:0;padding-bottom:clamp(38px,7vh,74px)}
  .hero__body>*{max-width:none}
  .hero__sub{max-width:34ch;margin-bottom:2em}
  /* Degradado pesado abajo (para el texto) y un toque arriba (para el header) */
  .hero__scrim{
    background:linear-gradient(to top,
      rgba(22,13,10,.97) 0%,   rgba(22,13,10,.94) 24%,
      rgba(22,13,10,.74) 42%,  rgba(22,13,10,.36) 58%,
      rgba(22,13,10,.10) 74%,  rgba(22,13,10,.44) 100%)
  }
  .hero__scroll{display:none}
}

/* ── Animación de entrada (hero) ────────────────────────── */
.r{opacity:0;transform:translateY(26px);filter:blur(9px);animation:rise .95s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}

/* ── Animación al hacer scroll ──────────────────────────── */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  transition-delay:var(--d,0ms)
}
.reveal.in{opacity:1;transform:none}

/* ═══ EL LIBRO ═════════════════════════════════════════════ */
.figure{margin:0}
/* El retrato de origen mide 467px; no lo ampliamos para no perder nitidez.
   Si llega una versión de mayor resolución, sube este max-width. */
.figure img{
  width:100%;max-width:467px;height:auto;margin-inline:auto;border-radius:3px;
  box-shadow:0 34px 70px -34px rgba(72,40,24,.52)
}
/* ── Datos del libro (cristal) ──────────────────────────────
   El desenfoque necesita materia detrás: sobre blanco liso no se
   percibe nada. La aureola de ::before es lo que el cristal refracta. */
.facts{
  list-style:none;margin:42px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px
}
.facts::before{
  content:"";position:absolute;z-index:0;inset:-22% -10% -30%;
  pointer-events:none;
  background:
    radial-gradient(42% 80% at 12% 40%, rgba(181,97,60,.36), transparent 70%),
    radial-gradient(40% 72% at 50% 74%, rgba(139,74,59,.24), transparent 72%),
    radial-gradient(42% 78% at 88% 32%, rgba(226,166,132,.40), transparent 70%);
  filter:blur(8px)
}

.fact{
  position:relative;z-index:1;
  padding:20px 18px 18px;border-radius:14px;
  background:rgba(253,249,244,.55);
  -webkit-backdrop-filter:blur(16px) saturate(155%);
  backdrop-filter:blur(16px) saturate(155%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 12px 32px -16px rgba(92,49,28,.34),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             background .45s var(--ease)
}
.fact:hover{
  transform:translateY(-4px);
  background:rgba(253,249,244,.66);
  box-shadow:
    0 20px 40px -18px rgba(92,49,28,.42),
    inset 0 1px 0 rgba(255,255,255,.95)
}
.fact__num{
  display:block;font-family:var(--serif);font-size:2.6rem;font-weight:400;
  line-height:.95;color:var(--terracotta)
}
.fact__label{
  display:block;margin-top:9px;font-size:11px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink)
}
.fact__note{
  display:block;margin-top:5px;font-size:12.5px;line-height:1.42;color:var(--muted)
}

/* Sin soporte de backdrop-filter el cristal se vería translúcido y sucio. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fact{background:rgba(253,249,244,.9)}
}
@media (prefers-reduced-transparency:reduce){
  .fact{background:#fdf9f4;backdrop-filter:none;-webkit-backdrop-filter:none}
  .facts::before{opacity:.5}
}

/* ═══ PARTES ═══════════════════════════════════════════════ */
.parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.part{
  position:relative;overflow:hidden;background:var(--white);
  border:1px solid var(--sand);padding:34px 28px 32px;isolation:isolate;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)
}
.part:hover{
  border-color:var(--terracotta);transform:translateY(-5px);
  box-shadow:0 22px 44px -26px rgba(72,40,24,.4)
}
.part>*:not(.part__num){position:relative;z-index:1}
.part__num{
  position:absolute;top:0;right:16px;z-index:0;font-family:var(--serif);
  font-size:3.6rem;line-height:1;color:var(--terracotta);opacity:.12;pointer-events:none
}
.part__days{
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--terracotta);margin:0 0 12px
}
.part h3{font-size:1.55rem;margin:0 0 12px;line-height:1.16}
.part p{font-size:15px;line-height:1.62;margin:0;color:var(--muted)}

.callout{
  margin:clamp(40px,5vw,62px) auto 0;max-width:720px;text-align:center;
  font-family:var(--serif);font-size:clamp(1.24rem,2.1vw,1.55rem);
  font-style:italic;line-height:1.5;color:var(--ink-2)
}
.callout b{font-style:normal;font-weight:500;color:var(--terracotta);display:block;margin-top:.35em}

/* ═══ MANIFIESTO ═══════════════════════════════════════════ */
.manifesto{position:relative;overflow:hidden}
.manifesto::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 90% at 22% 0%,rgba(181,97,60,.34),transparent 62%);
  pointer-events:none
}
.manifesto__list{
  list-style:none;margin:0;padding:0;position:relative;
  display:flex;flex-direction:column;gap:.24em;
  font-family:var(--serif);font-size:clamp(1.6rem,4.1vw,3rem);
  font-weight:300;line-height:1.24;color:#f3e7da;text-align:center
}
.manifesto__list li:nth-child(even){font-style:italic;color:#e0b795}

/* ═══ INVITACIÓN ═══════════════════════════════════════════ */
.invite .lead,.invite p{margin-left:auto;margin-right:auto}

/* Sello de primera edición */
.seal{display:block;width:186px;height:186px;max-width:100%;margin:0 auto clamp(28px,4vw,44px)}
.sl-ring{fill:none;stroke:var(--clay)}
.sl-arc{font-family:var(--serif);font-size:9.5px;font-weight:500;letter-spacing:.28em;fill:#7c685b}
.sl-num{font-family:var(--serif);font-style:italic;font-size:54px;font-weight:500;fill:var(--clay);text-anchor:middle;dominant-baseline:central}
.sl-title{font-family:"Alex Brush","Brush Script MT",cursive;font-size:38px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.sl-author{font-family:var(--serif);font-size:11px;font-weight:600;letter-spacing:.35em;fill:var(--terracotta);text-anchor:middle}
.thanks{
  font-family:var(--serif);font-style:italic;font-size:1.4rem;
  color:var(--terracotta);margin:2em 0 2.4em
}

/* ═══ CHECKOUT ═════════════════════════════════════════════ */
.sec--checkout{
  background:var(--cream);border-top:1px solid var(--sand);
  padding:clamp(64px,8vw,104px) 0
}
.sec__head--tight{margin-bottom:clamp(32px,4vw,46px)}
.sec__head--tight .lead{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)
}
.checkout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}

/* ═══ MULTI-STEP CHECKOUT & STEPPER ═════════════════════════ */
.checkout__main{min-width:0}

.stepper{
  position:relative;
  margin-bottom:34px;
  padding-bottom:6px;
}
.stepper__track{
  position:absolute;
  top:16px;
  left:30px;
  right:30px;
  height:2px;
  background:var(--sand);
  z-index:1;
}
.stepper__progress{
  height:100%;
  width:0%;
  background:var(--terracotta);
  transition:width .4s var(--ease);
}
.stepper__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:2;
}
.stepper__step{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.stepper__btn{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  text-decoration:none;
}
.stepper__num{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--cream);
  border:2px solid var(--sand);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  transition:all .3s var(--ease);
}
.stepper__label{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.stepper__step.is-active .stepper__num{
  background:var(--terracotta);
  border-color:var(--terracotta);
  color:#fff;
  box-shadow:0 0 0 4px rgba(181,97,60,0.15);
}
.stepper__step.is-active .stepper__label{
  color:var(--ink);
  font-weight:600;
}
.stepper__step.is-completed .stepper__num{
  background:var(--clay);
  border-color:var(--clay);
  color:#fff;
}
.stepper__step.is-completed .stepper__label{
  color:var(--clay);
}

/* Steps Slides */
.carousel-container{
  position:relative;
}
.checkout-step{
  display:none;
  animation:stepFadeIn .35s var(--ease-out);
}
.checkout-step.is-active{
  display:block;
}
@keyframes stepFadeIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
.step__desc{
  font-size:13.5px;
  color:var(--muted);
  margin:-4px 0 20px;
  line-height:1.5;
}

/* Step Navigation Buttons */
.step-nav-actions{
  margin-top:24px;
}
.step-nav-actions--split{
  display:flex;
  gap:12px;
  align-items:center;
}
.step-nav-actions--split .btn{
  flex:1.4;
}
.btn--secondary{
  flex:1 !important;
  background:transparent;
  border:1px solid var(--sand);
  color:var(--ink);
  padding:15px 18px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all .3s var(--ease);
  border-radius:0;
  text-align:center;
}
.btn--secondary:hover{
  border-color:var(--clay);
  color:var(--clay);
  background:rgba(181,97,60,0.04);
}

/* Step 3: Review summary box */
.review-box{
  background:var(--white);
  border:1px solid var(--sand);
  padding:16px 20px;
  margin-bottom:18px;
}
.review-box__group{
  padding:8px 0;
}
.review-box__group:not(:last-child){
  border-bottom:1px dashed var(--sand);
}
.review-box__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:3px;
}
.review-box__header strong{
  font-size:11.5px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
}
.review-edit-btn{
  background:none;
  border:0;
  color:var(--terracotta);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  padding:2px 6px;
  border-radius:4px;
  text-decoration:underline;
  transition:opacity .2s;
}
.review-edit-btn:hover{
  opacity:.8;
}
.review-box__text{
  font-size:14px;
  color:var(--ink);
  margin:0;
  line-height:1.45;
}

/* Payment Guarantee */
.payment-guarantee{
  background:var(--cream);
  border:1px solid var(--sand);
  padding:14px 18px;
  margin-bottom:16px;
}
.payment-guarantee__shield{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--clay);
  font-size:13px;
  font-weight:600;
  margin-bottom:4px;
}
.payment-guarantee__methods{
  font-size:12px;
  color:var(--muted);
  margin:0;
  line-height:1.45;
}

.form fieldset{border:0;margin:0 0 26px;padding:0}
.form legend{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--terracotta);padding:0 0 12px
}
/* Campos emparejados: menos filas sin perder claridad de lectura. */
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.row--cp{grid-template-columns:1.7fr 1fr}

.field{position:relative;margin-bottom:16px}
.field input,.field select{
  width:100%;font-family:var(--sans);font-size:15px;font-weight:400;color:var(--ink);
  background:#ffffff;border:1px solid #dfd3c3;border-radius:8px;
  padding:24px 16px 8px 16px;appearance:none;
  box-shadow:0 1px 3px rgba(36,24,19,0.03);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  box-sizing:border-box;
}
.field select{
  cursor:pointer;padding-right:38px;background-color:#ffffff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' fill='none' stroke='%23b5613c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 3 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
.field label{
  position:absolute;left:16px;top:16px;font-size:14px;font-weight:400;color:var(--muted);
  pointer-events:none;transform-origin:0 0;
  transition:transform .25s var(--ease),color .25s var(--ease);
  z-index:2;
}
.field input:focus,.field select:focus{
  outline:0;border-color:var(--terracotta);background:#ffffff;
  box-shadow:0 0 0 3.5px rgba(181,97,60,0.12);
}
.field input:focus+label,
.field input:not(:placeholder-shown)+label,
.field label.lbl-static{transform:translateY(-8px) scale(.74);color:var(--terracotta);font-weight:600}
.field select:focus~label.lbl-static{color:var(--terracotta);font-weight:600}

.field.has-error input,.field.has-error select{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,0.1);background:#fffdfd}
.err{
  display:block;font-size:12px;color:#b3261e;margin-top:6px;margin-left:4px;
  opacity:0;max-height:0;transition:opacity .25s var(--ease);
}
.field.has-error .err{opacity:1;max-height:40px}

.actions{margin-top:4px}
.trust{
  font-size:12px;line-height:1.55;color:var(--muted);
  margin:14px 0 0;text-align:center
}
/* El PDF no está disponible: se anuncia sin competir con el CTA real. */
.btn--pdf{
  display:block;width:100%;margin-top:14px;padding:11px 18px;
  background:transparent;color:var(--muted);border:1px dashed var(--sand);
  font-size:13px
}
.btn--pdf em{font-style:normal;opacity:.7}

.summary{position:sticky;top:calc(var(--hdr-h) + 24px)}
.summary__card{background:var(--white);border:1px solid var(--sand);padding:24px 24px 22px}
.summary__card>.eyebrow{margin-bottom:16px}
.summary__item{display:flex;gap:14px;align-items:center;padding:0 0 18px;border-bottom:1px solid var(--sand)}
.summary__item img{width:52px;height:65px;object-fit:cover;border-radius:2px;flex:none}
.summary__item h3{font-size:1.24rem;margin:0 0 2px;line-height:1.2}
.summary__item p{font-size:12.5px;margin:0;color:var(--muted)}
.summary__lines{margin:16px 0 0;padding:0 0 14px;border-bottom:1px solid var(--sand)}
.summary__lines div{display:flex;justify-content:space-between;margin-bottom:8px}
.summary__lines dt{font-size:14px;color:var(--muted);margin:0}
.summary__lines dd{font-size:14px;margin:0;color:var(--ink)}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 0}
.summary__total span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.summary__total strong{font-family:var(--serif);font-size:1.85rem;font-weight:400;color:var(--ink)}
.summary__total i{font-style:normal;font-size:.82rem;color:var(--muted);letter-spacing:.06em}
.summary__secure{
  font-size:11.5px;letter-spacing:.05em;color:var(--muted);
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--sand);text-align:center
}
.summary__card--dedication{
  margin-top:16px;
  background:var(--white);
  border:1px solid var(--sand);
  padding:22px 24px 20px;
}
.dedication__desc{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 14px;
}
.field--dedication textarea{
  width:100%;
  font-family:var(--sans);
  font-size:14px;
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:6px;
  padding:12px 14px;
  resize:vertical;
  min-height:78px;
  line-height:1.5;
  transition:border-color .3s var(--ease),background .3s var(--ease);
  box-sizing:border-box;
}
.field--dedication textarea:focus{
  outline:0;
  border-color:var(--clay);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(181,97,60,0.08);
}
.field--dedication textarea::placeholder{
  color:#a8998d;
  font-style:italic;
}
.dedication__note{
  font-size:11.5px;
  color:var(--terracotta);
  font-style:italic;
  margin:10px 0 0;
  text-align:right;
}

/* ═══ FAQ ══════════════════════════════════════════════════ */
.faq{border-top:1px solid var(--sand)}
.faq__item{border-bottom:1px solid var(--sand)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.42rem);color:var(--ink);
  padding:26px 0;transition:color .3s var(--ease)
}
.faq__q:hover{color:var(--terracotta)}
.faq__q i{
  position:relative;flex:none;width:13px;height:13px
}
.faq__q i::before,.faq__q i::after{
  content:"";position:absolute;background:var(--terracotta);
  transition:transform .38s var(--ease),opacity .3s var(--ease)
}
.faq__q i::before{top:6px;left:0;width:13px;height:1.4px}
.faq__q i::after{left:6px;top:0;height:13px;width:1.4px}
.faq__q[aria-expanded="true"] i::after{transform:rotate(90deg);opacity:0}

.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__a>div{overflow:hidden}
.faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr}
.faq__a p{margin:0;padding:0 0 28px;max-width:640px;font-size:16px}

/* ═══ FOOTER ═══════════════════════════════════════════════ */
.ftr{background:var(--ink);color:#d9cabb;padding:70px 0 34px}
.ftr__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.ftr__brand{max-width:260px}
.ftr__logo{display:block;width:230px;height:92px;margin-left:-14px}
.lgl-title{font-family:"Alex Brush","Brush Script MT",cursive;font-size:68px;text-anchor:middle;dominant-baseline:central}
.lgl-author{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.38em;text-anchor:middle;dominant-baseline:central}
.lgl-stroke{fill:none;stroke:#e5a587;stroke-linecap:round;stroke-linejoin:round}
.lgl-rule{stroke:rgba(237,222,209,.4);stroke-width:.8}
.ftr__sub{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  margin:6px 0 0;color:#b39d8c;text-align:center
}
.ftr__ig{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:14.5px;
  color:#d9cabb;transition:color .3s var(--ease)
}
.ftr__ig:hover{color:#fff}
.ftr__legal{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;color:#8f7c6d
}
.ftr__legal nav{display:flex;gap:24px}
.ftr__legal a{text-decoration:none;transition:color .3s var(--ease)}
.ftr__legal a:hover{color:#fff}

/* ═══ MODAL ════════════════════════════════════════════════ */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(24,15,11,.62);backdrop-filter:blur(6px);
  animation:fade .3s var(--ease)
}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__box{
  position:relative;background:var(--white);max-width:520px;width:100%;
  padding:44px 42px 38px;max-height:88vh;overflow-y:auto;
  animation:pop .45s var(--ease-out)
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal__box h3{font-size:1.95rem;margin:0 0 14px}
.modal__box p{font-size:15px}
.modal__x{
  position:absolute;top:14px;right:18px;background:none;border:0;cursor:pointer;
  font-size:28px;line-height:1;color:var(--muted);padding:4px
}
.modal pre{
  background:var(--cream);border:1px solid var(--sand);padding:16px;
  font-size:12.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;
  color:var(--ink-2);margin:0 0 18px;max-height:210px;overflow:auto
}
.modal__hint{font-size:13px;color:var(--muted)}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:1024px){
  .parts{grid-template-columns:repeat(2,1fr)}
  .checkout{grid-template-columns:1fr;gap:40px}
  .summary{position:static;order:-1}
  .summary__card{display:grid;grid-template-columns:1fr auto;gap:0 34px;align-items:center}
  .summary__card>.eyebrow{grid-column:1/-1}
  .summary__lines{grid-column:1;border-bottom:0;padding-bottom:0}
  .summary__item{grid-column:1/-1}
  .summary__total{grid-column:2;grid-row:3;padding:0}
  .summary__secure{grid-column:1/-1}
}
@media (max-width:860px){
  :root{--hdr-h:76px}
  /* Sin nav visible sobra ancho: el logotipo puede crecer otra vez. */
  .brand__logo,.hdr.is-scrolled .brand__logo{width:312px;height:52px}
  .nav{
    position:fixed;inset:var(--hdr-h) 0 auto;flex-direction:column;align-items:stretch;
    gap:0;padding:14px 24px 30px;
    background:rgba(248,243,236,.96);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--sand);color:var(--ink);
    clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)
  }
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav a{padding:16px 0;border-bottom:1px solid var(--sand);font-size:17px;color:var(--ink);opacity:1}
  .nav .btn{margin-top:18px;border-bottom:0;justify-content:center}
  .burger{display:block}

  .grid-2,.grid-2--flip{grid-template-columns:1fr}
  .grid-2--flip .figure{order:2}
  .figure img{max-width:420px;margin-inline:auto}
  .hero{min-height:100svh;padding-bottom:34px}
  .hero__media img{object-position:center 20%;animation:kenburns-suave 20s var(--ease-out) forwards}
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(26,16,12,.78) 0%,rgba(26,16,12,.86) 38%,rgba(26,16,12,.94) 80%,rgba(26,16,12,.98) 100%),
      linear-gradient(to top,rgba(26,16,12,.85),transparent 50%);
  }
  .hero__cta{gap:20px}
  .hero__cta .btn{width:100%}
  .hero__scroll{display:none}
}

/* Teléfono en horizontal: poca altura, hay que comprimir el hero. */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .hero{min-height:auto;padding:calc(var(--hdr-h) + 28px) 0 42px}
  .hero__title{font-size:clamp(2rem,5.2vw,2.9rem)}
  .hero__sub{margin-bottom:1.5em}
  .hero__note,.hero__scroll{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap,.wrap--narrow{width:min(100% - 36px,var(--wrap))}
  .hero{min-height:100svh;padding-bottom:28px}
  .hero__media img{object-position:center 15%}
  .hero__body{padding-top:calc(var(--hdr-h) + 14px)}
  /* Titular más contenido: libera altura para que el texto no suba a la cara. */
  .hero__title{font-size:clamp(2.3rem,8.8vw,3.05rem)}
  .hero__sub{font-size:1rem;line-height:1.64;margin-bottom:1.8em}
  .hero__note{margin-top:1.9em;font-size:11.5px}

  .brand{overflow:visible;width:auto;max-width:calc(100vw - 72px)}
  .brand__logo,.hdr.is-scrolled .brand__logo{width:300px;height:48px;max-width:100%}

  .seal{width:148px;height:148px}
  .ftr__logo{width:206px;height:82px;margin-left:0}
  .stepper__track{left:20px;right:20px}
  .stepper__label{font-size:11px;letter-spacing:0}
  .stepper__num{width:28px;height:28px;font-size:12px}
  .checkout,.checkout__main,.carousel-container,.sec{max-width:100%;overflow-x:hidden}
  .parts{grid-template-columns:1fr}
  /* Correo/Teléfono y Ciudad/Estado se apilan, pero Colonia + C.P. siguen
     juntos: el C.P. es corto y separarlos sólo añadiría una fila. */
  .row{grid-template-columns:1fr;gap:0}
  .row--cp{grid-template-columns:1.6fr 1fr;gap:16px}
  /* Una columna, cada tarjeta en horizontal: número a la izquierda. */
  .facts{grid-template-columns:1fr;gap:10px}
  .fact{
    display:grid;grid-template-columns:auto 1fr;align-items:center;
    column-gap:16px;padding:14px 16px
  }
  .fact__num{grid-row:1/3;font-size:2.1rem}
  .fact__label{margin-top:0}
  .fact__note{margin-top:2px}
  .summary__card{grid-template-columns:1fr}
  .summary__total{grid-column:1;grid-row:auto;padding-top:20px}
  .modal__box{padding:36px 26px 30px}
  .ftr__legal{flex-direction:column;gap:14px}
  .ftr__legal nav{flex-direction:column;gap:10px}
}

/* ═══ ACCESIBILIDAD: movimiento reducido ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .r,.reveal{opacity:1;transform:none;filter:none}
  .hero__media img{animation:none;transform:none}
}