/* ============================================================
   Monsieur Henri — Sistema de diseño
   Mentorías personalizadas con Henry Orrego
   ============================================================ */

:root{
  /* Paleta de marca */
  --navy:#102A43;
  --night:#081B33;
  --emerald:#10A37F;
  --mint:#49D6B2;
  --ivory:#F7F3E8;
  --soft:#FAFCFD;
  --slate:#627D98;
  --gold:#D6A84B;

  /* Derivados */
  --navy-90:rgba(16,42,67,.90);
  --navy-70:rgba(16,42,67,.70);
  --navy-12:rgba(16,42,67,.12);
  --navy-06:rgba(16,42,67,.06);
  --emerald-14:rgba(16,163,127,.14);
  --gold-16:rgba(214,168,75,.16);
  --line:rgba(16,42,67,.13);

  /* Roles semánticos — tema claro */
  --bg:var(--soft);
  --bg-alt:var(--ivory);
  --surface:#ffffff;
  --surface-2:#F3F6F9;
  --ink:var(--navy);
  --ink-soft:var(--slate);
  --border:var(--line);
  --accent:var(--emerald);
  --accent-ink:#0B7A5F;

  /* Tipografía */
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Escala */
  --step--1:clamp(.82rem,.79rem + .12vw,.88rem);
  --step-0:clamp(.98rem,.95rem + .16vw,1.06rem);
  --step-1:clamp(1.18rem,1.10rem + .35vw,1.38rem);
  --step-2:clamp(1.45rem,1.30rem + .70vw,1.95rem);
  --step-3:clamp(1.85rem,1.55rem + 1.35vw,2.85rem);
  --step-4:clamp(2.30rem,1.75rem + 2.40vw,4.10rem);

  /* Forma y profundidad */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(8,27,51,.05), 0 2px 8px rgba(8,27,51,.05);
  --sh-2:0 2px 6px rgba(8,27,51,.06), 0 12px 32px rgba(8,27,51,.09);
  --sh-3:0 8px 20px rgba(8,27,51,.10), 0 30px 70px rgba(8,27,51,.16);
  --sh-glow:0 0 0 1px rgba(16,163,127,.25), 0 12px 40px rgba(16,163,127,.18);

  --maxw:1180px;
  --gutter:clamp(1.15rem,4vw,2.75rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --bg:var(--night);
  --bg-alt:#0C2440;
  --surface:#12304F;
  --surface-2:#0E2743;
  --ink:#EAF2F8;
  --ink-soft:#9FB6CC;
  --border:rgba(234,242,248,.14);
  --accent:var(--mint);
  --accent-ink:var(--mint);
  --sh-1:0 1px 2px rgba(0,0,0,.3);
  --sh-2:0 2px 6px rgba(0,0,0,.28), 0 12px 32px rgba(0,0,0,.38);
  --sh-3:0 10px 30px rgba(0,0,0,.4), 0 30px 80px rgba(0,0,0,.5);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-ui);font-size:var(--step-0);
  line-height:1.65;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease),color .4s var(--ease);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;
  letter-spacing:-.015em;margin:0 0 .5em;font-variation-settings:'SOFT' 0,'WONK' 0}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--emerald);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.5rem,9vw,7rem)}
.eyebrow{
  font-family:var(--font-ui);font-size:var(--step--1);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.lede{font-size:var(--step-1);color:var(--ink-soft);max-width:62ch;line-height:1.55}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.stack>*+*{margin-top:1rem}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.7rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-weight:600;font-size:var(--step-0);letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--emerald);color:#fff;box-shadow:0 6px 20px rgba(16,163,127,.32)}
.btn--primary:hover{background:#0E9070;box-shadow:0 10px 30px rgba(16,163,127,.42)}
.btn--ghost{border-color:var(--border);background:transparent;color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn--light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn--light:hover{background:rgba(255,255,255,.18)}
.btn--gold{background:var(--gold);color:var(--night);box-shadow:0 6px 20px rgba(214,168,75,.3)}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.btn--sm{padding:.55rem 1.05rem;font-size:var(--step--1)}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s
}
.header.is-stuck{border-bottom-color:var(--border);box-shadow:var(--sh-1)}
.header__in{display:flex;align-items:center;gap:1.5rem;min-height:88px}
/* ---------- Bloque de marca ----------
   El lockup vive sobre una placa azul nocturno para que el blanco, el
   verde luminoso y el acento dorado se lean igual en tema claro y oscuro. */
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand__plate{
  position:relative;display:inline-flex;align-items:center;
  padding:.5rem .95rem;border-radius:16px;
  background:linear-gradient(135deg,#081B33 0%,#0C2C4A 58%,#0B3E3A 100%);
  box-shadow:0 2px 10px rgba(8,27,51,.18), inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)
}
.brand__plate::before{                 /* resplandor esmeralda muy discreto */
  content:"";position:absolute;left:6%;top:50%;width:46%;height:150%;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(73,214,178,.22),transparent 72%);
  opacity:.85;transition:opacity .3s var(--ease)
}
.brand img{position:relative;height:44px;width:auto;max-width:none;display:block}
.brand .logo-sim{display:none}
.brand:hover .brand__plate{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(16,163,127,.28), inset 0 1px 0 rgba(255,255,255,.10)
}
.brand:hover .brand__plate::before{opacity:1}
.brand:focus-visible .brand__plate{box-shadow:0 0 0 3px var(--emerald)}
[data-theme="dark"] .brand__plate{
  background:linear-gradient(135deg,#0C2440 0%,#123655 58%,#0E4A45 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08)
}
.nav{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:var(--step--1);font-weight:500;color:var(--ink-soft);
  padding:.35rem 0;position:relative;transition:color .2s
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .25s var(--ease)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{width:100%}
.header__tools{display:flex;align-items:center;gap:.55rem}
.langtog{display:inline-flex;background:var(--navy-06);border-radius:var(--r-pill);padding:3px;border:1px solid var(--border)}
[data-theme="dark"] .langtog{background:rgba(255,255,255,.06)}
.langtog button{
  border:0;background:transparent;padding:.34rem .78rem;border-radius:var(--r-pill);
  font-size:.78rem;font-weight:700;letter-spacing:.06em;cursor:pointer;color:var(--ink-soft);transition:.2s
}
.langtog button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.iconbtn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
  background:transparent;display:grid;place-items:center;cursor:pointer;transition:.2s
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.burger{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--night)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,var(--night) 0%,rgba(8,27,51,.94) 34%,rgba(8,27,51,.68) 52%,rgba(8,27,51,.14) 78%,rgba(8,27,51,.05) 100%)
}
.hero__in{position:relative;padding-block:clamp(4.5rem,12vw,8.5rem);color:#fff}
.hero__col{max-width:34rem}
.hero h1{color:#fff;margin-bottom:.55em}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero .lede{color:rgba(255,255,255,.82)}
.hero .eyebrow{color:var(--gold)}
.hero .eyebrow::before{background:var(--gold)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.75rem;
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.16)}
.hero__meta div{min-width:9rem}
.hero__meta b{display:block;font-family:var(--font-display);font-size:var(--step-2);color:var(--mint);line-height:1}
.hero__meta span{font-size:var(--step--1);color:rgba(255,255,255,.66)}

/* ---------- Tarjetas ---------- */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(16,163,127,.4)}
.card__media{aspect-ratio:1/1;overflow:hidden;background:var(--surface-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:1.35rem 1.45rem 1.6rem}
.card__body h3{margin-bottom:.35em}
.card__body p{font-size:var(--step--1);color:var(--ink-soft);margin:0}

/* Tarjeta seleccionable (áreas de aprendizaje) */
.pick{
  position:relative;text-align:left;width:100%;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);
  padding:1.25rem 1.15rem;display:flex;flex-direction:column;gap:.7rem;
  transition:.25s var(--ease)
}
.pick:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-2)}
.pick[aria-pressed="true"]{border-color:var(--emerald);background:var(--emerald-14);box-shadow:var(--sh-glow)}
.pick[aria-pressed="true"]::after{
  content:"✓";position:absolute;top:.75rem;right:.85rem;width:24px;height:24px;
  background:var(--emerald);color:#fff;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:700
}
.pick svg{width:44px;height:44px;flex-shrink:0}
.pick img{width:52px;height:52px;object-fit:contain}
.pick strong{font-size:var(--step-0);font-weight:650;letter-spacing:-.01em}
.pick span{font-size:.82rem;color:var(--ink-soft);line-height:1.45}

/* ---------- Secciones con fondo ---------- */
.band{position:relative;overflow:hidden}
.band__bg{position:absolute;inset:0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,252,253,.86),rgba(250,252,253,.94))}
[data-theme="dark"] .band__bg::after{background:linear-gradient(180deg,rgba(8,27,51,.88),rgba(8,27,51,.95))}
.band>.wrap{position:relative;z-index:1}
.band--dark{background:var(--night);color:#fff}
.band--dark h2,.band--dark h3{color:#fff}
.band--dark .lede,.band--dark p{color:rgba(255,255,255,.76)}
.band--dark .band__bg::after{background:linear-gradient(180deg,rgba(8,27,51,.72),rgba(8,27,51,.9))}
.band--dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);backdrop-filter:blur(8px)}
.band--dark .card__body p{color:rgba(255,255,255,.7)}

/* ---------- Proceso ---------- */
.steps{display:grid;gap:clamp(1rem,2.4vw,1.75rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.step img{aspect-ratio:1/1;object-fit:cover;width:100%}
.step__body{padding:1.2rem 1.3rem 1.5rem}
.step__n{
  counter-increment:s;position:absolute;top:1rem;left:1rem;z-index:2;
  width:40px;height:40px;border-radius:50%;background:var(--night);color:var(--gold);
  display:grid;place-items:center;font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  box-shadow:0 6px 18px rgba(8,27,51,.35)
}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:var(--step-0);margin-bottom:.3em}
.step p{font-size:.86rem;color:var(--ink-soft);margin:0}

/* ---------- Split ---------- */
.split{display:grid;gap:clamp(1.75rem,5vw,4rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.split__media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.split--rev .split__media{order:-1}
@media(min-width:820px){.split--rev .split__media{order:1}}

/* Lista con viñeta de nodo */
.nodelist{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.9rem}
.nodelist li{position:relative;padding-left:2rem;font-size:var(--step-0);line-height:1.5}
.nodelist li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;border-radius:50%;
  background:var(--emerald);box-shadow:0 0 0 4px var(--emerald-14)
}
.nodelist li:nth-child(3n)::before{background:var(--gold);box-shadow:0 0 0 4px var(--gold-16)}

/* ---------- Sello del tutor ---------- */
.seal{position:relative;width:min(340px,80vw);aspect-ratio:1;margin-inline:auto}
.seal__frame{position:absolute;inset:0;z-index:2;pointer-events:none}
.seal__photo{
  position:absolute;inset:11%;border-radius:50%;overflow:hidden;
  background:var(--surface-2);display:grid;place-items:center;text-align:center;padding:1.5rem
}
.seal__photo img{width:100%;height:100%;object-fit:cover}
.seal__photo p{font-size:.8rem;color:var(--ink-soft);margin:0}

/* ---------- Reserva / wizard ---------- */
.booking{background:var(--bg-alt);border-top:1px solid var(--border)}
.wizard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);overflow:hidden;margin-top:2.5rem
}
.wizard__bar{display:flex;gap:2px;background:var(--border)}
.wizard__bar span{
  flex:1;height:5px;background:var(--surface-2);position:relative;overflow:hidden
}
.wizard__bar span.done{background:var(--emerald)}
.wizard__bar span.now{background:linear-gradient(90deg,var(--emerald) 50%,var(--surface-2) 50%)}
.wizard__head{
  padding:1.6rem clamp(1.25rem,3.5vw,2.5rem) 0;display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem;flex-wrap:wrap
}
.wizard__head h3{margin:0;font-size:var(--step-2)}
.wizard__count{font-size:var(--step--1);color:var(--ink-soft);font-weight:600;letter-spacing:.04em}
.wizard__body{padding:1.25rem clamp(1.25rem,3.5vw,2.5rem) 2rem;min-height:340px}
.wizard__body>p.hint{color:var(--ink-soft);font-size:var(--step--1);margin-bottom:1.6rem;max-width:60ch}
.wizard__foot{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;
  padding:1.15rem clamp(1.25rem,3.5vw,2.5rem);border-top:1px solid var(--border);background:var(--surface-2)
}
.panel{display:none}
.panel.is-active{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Selector de idioma — dos botones grandes */
.langpick{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-block:.5rem 1.5rem}
.langpick button{
  position:relative;cursor:pointer;text-align:left;
  border:2px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.35rem;
  transition:.28s var(--ease);overflow:hidden
}
.langpick button::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(135deg,var(--emerald-14),transparent 60%)
}
.langpick button:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--sh-2)}
.langpick button[aria-pressed="true"]{border-color:var(--emerald);box-shadow:var(--sh-glow)}
.langpick button[aria-pressed="true"]::before{opacity:1}
.langpick .flagword{
  font-family:var(--font-display);font-size:var(--step-2);line-height:1;position:relative;z-index:1
}
.langpick .sub{font-size:var(--step--1);color:var(--ink-soft);position:relative;z-index:1}
.langpick .tick{
  position:absolute;top:1rem;right:1.1rem;width:28px;height:28px;border-radius:50%;
  background:var(--emerald);color:#fff;display:grid;place-items:center;font-weight:700;
  opacity:0;transform:scale(.6);transition:.25s var(--ease);z-index:1
}
.langpick button[aria-pressed="true"] .tick{opacity:1;transform:scale(1)}

.locknote{
  display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--gold-16);border:1px solid rgba(214,168,75,.4);font-size:var(--step--1);line-height:1.5
}
.locknote svg{flex-shrink:0;margin-top:2px}

/* Calendario */
.calwrap{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cal__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.cal__nav strong{font-family:var(--font-display);font-size:var(--step-1);text-transform:capitalize}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal__dow{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;padding-bottom:.4rem}
.cal__day{
  aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:var(--surface-2);
  cursor:pointer;font-size:.9rem;font-weight:600;display:grid;place-items:center;transition:.18s;position:relative
}
.cal__day:hover:not(:disabled){background:var(--emerald-14);border-color:var(--accent)}
.cal__day:disabled{opacity:.28;cursor:not-allowed;background:transparent}
.cal__day.is-sel{background:var(--emerald);color:#fff;box-shadow:var(--sh-glow)}
.cal__day.has-slots::after{content:"";position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cal__day.is-sel.has-slots::after{background:#fff}
.slots{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));margin-top:.75rem}
.slot{
  border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-pill);
  padding:.6rem .5rem;font-size:.88rem;font-weight:600;cursor:pointer;transition:.18s
}
.slot:hover{border-color:var(--accent);color:var(--accent-ink)}
.slot[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}
.slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* Formulario */
.field{display:grid;gap:.4rem;margin-bottom:1.15rem}
.field label{font-size:var(--step--1);font-weight:600;letter-spacing:-.005em}
.field label .req{color:var(--emerald)}
.field label .opt{color:var(--ink-soft);font-weight:400;font-size:.82em;letter-spacing:0}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--step-0);padding:.8rem 1rem;border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:var(--surface);color:var(--ink);
  transition:border-color .2s,box-shadow .2s;width:100%
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px var(--emerald-14)
}
.field textarea{min-height:104px;resize:vertical}
.field small{font-size:.78rem;color:var(--ink-soft)}
.field.err input,.field.err select,.field.err textarea{border-color:#C2410C;box-shadow:0 0 0 4px rgba(194,65,12,.12)}
.field .errmsg{font-size:.78rem;color:#C2410C;display:none}
.field.err .errmsg{display:block}
.two{display:grid;gap:0 1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Resumen */
.summary{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.summary__row{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--border);font-size:var(--step-0)}
.summary__row:last-child{border-bottom:0}
.summary__row dt{color:var(--ink-soft);font-size:var(--step--1);margin:0}
.summary__row dd{margin:0;font-weight:600;text-align:right}
.summary__row--hi{background:var(--emerald-14);border-bottom-color:rgba(16,163,127,.3)}
.summary__row--hi dd{color:var(--accent-ink);font-family:var(--font-display);font-size:var(--step-1)}
.summary__row--total dd{font-family:var(--font-display);font-size:var(--step-1)}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .75rem;border-radius:var(--r-pill);
  font-size:.76rem;font-weight:700;letter-spacing:.03em
}
.pill--es{background:var(--gold-16);color:#8A6A22}
.pill--en{background:var(--emerald-14);color:var(--accent-ink)}
[data-theme="dark"] .pill--es{color:var(--gold)}

/* ---------- Pago por transferencia (paso 6) ---------- */
.pagar{margin-block:1.5rem}
.pagar>h4{margin:0 0 .3rem;font-family:var(--font-display);font-size:var(--step-1);font-weight:600}
.pagar__h{margin:0 0 1.1rem;font-size:var(--step--1);color:var(--ink-soft);line-height:1.55;max-width:58ch}

.pagar__valor{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.1rem;border-radius:var(--r-md);background:var(--night);color:#fff;
  box-shadow:var(--sh-1);margin-bottom:1.1rem}
.pagar__valor .lab{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:.1rem}
.pagar__valor b{font-family:var(--font-display);font-size:var(--step-3);line-height:1;color:var(--mint)}

.pagar__cards{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}

.pgcard{
  display:flex;flex-direction:column;gap:.7rem;padding:1.1rem;border-radius:var(--r-md);
  background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--sh-1);
  border-top:4px solid var(--pgc,var(--emerald))}
.pgcard__top{display:flex;align-items:center;gap:.6rem}
.pgcard__n{width:1.55rem;height:1.55rem;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--pgc,var(--emerald));color:#fff;font-size:.78rem;font-weight:700;
  font-family:var(--font-ui);line-height:1}
.pgcard__t{margin:0;font-family:var(--font-display);font-size:var(--step-0);font-weight:600;line-height:1.25}
.pgcard__lab{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.pgcard__dato{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--step-1);
  letter-spacing:.04em;word-break:break-all;line-height:1.3;margin:-.25rem 0 0;
  -webkit-user-select:all;user-select:all}
.pgcard__ayuda{margin:0;font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.pgcard__btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto;padding-top:.2rem}
.pgcard__nota{margin:0;font-size:.72rem;line-height:1.45;color:var(--ink-soft);opacity:.85}

.cpy{
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;flex:1 1 auto;
  min-height:44px;padding:.5rem .9rem;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-ui);font-size:.82rem;font-weight:600;line-height:1;
  border:1.5px solid var(--pgc,var(--emerald));background:var(--surface);color:var(--pgc,var(--emerald));
  transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease)}
.cpy:hover{background:var(--pgc,var(--emerald));color:#fff}
.cpy:active{transform:scale(.98)}
.cpy:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cpy.is-ok{background:var(--emerald);border-color:var(--emerald);color:#fff}
.cpy.is-ok svg{display:none}
.cpy--val{flex:0 0 auto;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff}
.cpy--val:hover{background:#fff;color:var(--night);border-color:#fff}
.abrir{
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;flex:1 1 auto;min-height:44px;
  padding:.5rem .9rem;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;
  font-family:var(--font-ui);font-size:.82rem;font-weight:600;line-height:1;
  background:var(--pgc,var(--emerald));color:#fff;border:1.5px solid var(--pgc,var(--emerald));
  transition:filter .18s var(--ease),transform .12s var(--ease)}
.abrir:hover{filter:brightness(1.1)}
.abrir:active{transform:scale(.98)}
.abrir:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.pagar__cierre{
  margin:1.1rem 0 0;padding:.85rem 1.05rem;border-radius:var(--r-md);
  background:var(--surface-2);border-left:4px solid var(--emerald);
  font-size:var(--step--1);line-height:1.55}

/* Compartir comprobante por WhatsApp. No confirma nada: solo abre el chat. */
.wabtn{
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  width:100%;min-height:52px;margin-top:1.1rem;padding:.85rem 1.4rem;
  border-radius:var(--r-pill);text-decoration:none;text-align:center;
  font-family:var(--font-ui);font-size:var(--step-0);font-weight:700;line-height:1.25;
  color:#06301C;background:linear-gradient(135deg,#5BE585 0%,#25D366 55%,#12B551 100%);
  box-shadow:0 6px 20px rgba(37,211,102,.34), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease)}
.wabtn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,.44);filter:brightness(1.04)}
.wabtn:active{transform:translateY(0) scale(.99)}
.wabtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wabtn svg{flex:none}
.wabtn__nota{margin:.6rem 0 0;font-size:.78rem;line-height:1.5;color:var(--ink-soft);text-align:center}

[data-theme="dark"] .wabtn{box-shadow:0 6px 22px rgba(37,211,102,.28), inset 0 1px 0 rgba(255,255,255,.25)}

@media (max-width:560px){
  .wabtn{font-size:var(--step--1);padding:.85rem 1rem;min-height:54px}
  .wabtn__nota{text-align:left}
}
@media (prefers-reduced-motion:reduce){ .wabtn:hover,.wabtn:active{transform:none} }

[data-theme="dark"] .pgcard{background:rgba(255,255,255,.04);border-top-color:var(--pgcl,var(--mint))}
[data-theme="dark"] .pgcard__n{background:var(--pgcl,var(--mint));color:var(--night)}
[data-theme="dark"] .cpy{background:transparent;color:var(--pgcl,var(--mint));border-color:var(--pgcl,var(--mint))}
[data-theme="dark"] .cpy:hover{background:var(--pgcl,var(--mint));color:var(--night)}
[data-theme="dark"] .cpy.is-ok{background:var(--mint);border-color:var(--mint);color:var(--night)}
[data-theme="dark"] .abrir{background:var(--pgcl,var(--mint));border-color:var(--pgcl,var(--mint));color:var(--night)}
[data-theme="dark"] .pagar__cierre{background:rgba(255,255,255,.05)}

@media (max-width:560px){
  .pagar__cards{grid-template-columns:1fr}
  .pagar__valor b{font-size:var(--step-2)}
  .pgcard__dato{font-size:var(--step-0)}
  .cpy,.abrir{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){ .cpy:active,.abrir:active{transform:none} }

.paybox{
  border:1.5px dashed rgba(16,163,127,.45);background:var(--emerald-14);
  border-radius:var(--r-md);padding:1.25rem 1.35rem;margin-block:1.25rem
}
.paybox h4{margin:0 0 .6rem;font-family:var(--font-ui);font-size:var(--step-0);font-weight:700}
.paybox ol{margin:0;padding-left:1.15rem;font-size:var(--step--1);line-height:1.7;color:var(--ink-soft)}

/* Confirmación */
.finish{text-align:center;padding-block:1.5rem}
.finish img{width:min(280px,60%);margin:0 auto 1.5rem;border-radius:var(--r-lg)}
.finish h3{font-size:var(--step-2)}
.ref{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--step-1);
  letter-spacing:.12em;background:var(--night);color:var(--mint);
  padding:.65rem 1.3rem;border-radius:var(--r-sm);margin-block:.5rem 1.25rem
}

/* ---------- Footer ---------- */
.footer{background:var(--night);color:rgba(255,255,255,.72);padding-block:3.5rem 2rem;position:relative;overflow:hidden}
.footer__bg{position:absolute;inset:0;opacity:.5}
.footer__bg img{width:100%;height:100%;object-fit:cover}
.footer .wrap{position:relative;z-index:1}
.footer__top{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-bottom:2.25rem;border-bottom:1px solid rgba(255,255,255,.13)}
.footer img.logo{height:44px;width:auto;margin-bottom:1rem}
.footer h4{font-family:var(--font-ui);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:var(--step--1);line-height:1.5}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;font-size:var(--step--1);transition:color .2s}
.footer a:hover{color:var(--mint)}
.footer__bot{padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.5)}

/* ---------- Utilidades ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,calc(100% + 3rem));z-index:99;
  background:var(--night);color:#fff;padding:.85rem 1.5rem;border-radius:var(--r-pill);
  box-shadow:var(--sh-3);font-size:var(--step--1);transition:transform .45s var(--ease);max-width:90vw;
  visibility:hidden
}
.toast.show{transform:translate(-50%,0);visibility:visible}
.demo-banner{
  background:var(--gold);color:var(--night);text-align:center;font-size:.8rem;font-weight:600;
  padding:.45rem 1rem;letter-spacing:.01em
}

@media(max-width:860px){
  .nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--surface);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 1.25rem;
    box-shadow:var(--sh-2);border-bottom:1px solid var(--border)}
  .nav.open{display:flex}
  .nav a{padding:.8rem 0;border-bottom:1px solid var(--border)}
  .burger{display:grid}
  .header__tools{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
@media print{.header,.footer,.wizard__foot{display:none}}

/* Tokens de iconografía (SVG en línea de dos tonos) */
:root{--ico-1:#102A43;--ico-2:#10A37F;--ico-3:#D6A84B}
[data-theme="dark"]{--ico-1:#EAF2F8;--ico-2:#49D6B2;--ico-3:#D6A84B}
.ico{width:48px;height:48px;display:block}
.ico [data-s="1"]{stroke:var(--ico-1)}
.ico [data-s="2"]{stroke:var(--ico-2)}
.ico [data-f="3"]{fill:var(--ico-3)}

/* Correcciones de comportamiento */
[hidden]{display:none!important}
.demo-banner{display:none}
body.is-demo .demo-banner{display:block}

/* El logo a color vive sobre fondo claro; sobre el héroe oscuro el header es translúcido */
.errmsg{color:#C2410C;font-size:.82rem;font-weight:600}
[data-theme="dark"] .errmsg{color:#FCA36B}
.pick .ico{width:44px;height:44px}
#p1Mod .pick{gap:.45rem}

/* Barra de progreso del asistente: pista fina y separada del borde redondeado */
.wizard__bar{
  background:transparent;gap:6px;
  padding:1.4rem clamp(1.25rem,3.5vw,2.5rem) 0
}
.wizard__bar span{height:4px;border-radius:999px;background:var(--border)}
.wizard__bar span.done{background:var(--emerald)}
.wizard__bar span.now{background:linear-gradient(90deg,var(--emerald) 50%,var(--border) 50%)}
.wizard__head{padding-top:1.1rem}

/* ============================================================
   Actualización: fotografías y modalidades
   ============================================================ */

/* ---------- Portada con fotografía ---------- */
.hero__photo{display:none}
.hero .hero__col{max-width:36rem}
.hero__firma{
  margin-top:1.4rem;display:inline-flex;align-items:center;gap:.7rem;
  font-size:var(--step--1);color:rgba(255,255,255,.7)
}
.hero__firma img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 30%;
  border:1.5px solid rgba(73,214,178,.5)}
@media(max-width:820px){
  .hero__bg{display:none}
  .hero{background:linear-gradient(170deg,var(--night),#0B2440 60%,var(--night))}
  .hero__in{padding-block:2.75rem 0}
  .hero__photo{
    display:block;width:calc(100% + var(--gutter)*2);margin:2.5rem calc(var(--gutter)*-1) 0;
    aspect-ratio:3/2;object-fit:cover;object-position:78% 50%
  }
}

/* ---------- Tarjetas de modalidad ---------- */
.mods{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(330px,1fr));margin-top:2.75rem}
.modcard{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.modcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.modcard::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:3}
.modcard--free::before{background:linear-gradient(90deg,var(--gold),#E8C77E)}
.modcard--pro::before{background:linear-gradient(90deg,var(--emerald),var(--mint))}
.modcard__media{aspect-ratio:16/9;overflow:hidden;background:var(--night);position:relative}
.modcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.modcard:hover .modcard__media img{transform:scale(1.04)}
.modcard__tag{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  padding:.3rem .8rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;letter-spacing:.05em;
  backdrop-filter:blur(8px)
}
.modcard--free .modcard__tag{background:rgba(214,168,75,.9);color:var(--night)}
.modcard--pro .modcard__tag{background:rgba(16,163,127,.92);color:#fff}
.modcard__body{padding:1.6rem clamp(1.3rem,2.5vw,1.9rem) 1.2rem;flex:1;display:flex;flex-direction:column}
.modcard__body h3{font-size:var(--step-2);margin-bottom:.2em;line-height:1.08}
.modcard__promo{font-size:.8rem;color:var(--ink-soft);font-style:italic;margin-bottom:.9rem}
.modcard__claim{font-family:var(--font-ui);font-size:var(--step--1);font-weight:600;color:var(--accent-ink);margin-bottom:.9rem}
.modcard__desc{font-size:var(--step--1);color:var(--ink-soft);margin-bottom:1.2rem}
.modcard__precio{
  display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  padding:1rem 0;border-block:1px solid var(--border);margin-bottom:1.1rem
}
.modcard__precio b{font-family:var(--font-display);font-size:clamp(1.9rem,1.3rem+2vw,2.6rem);line-height:1}
.modcard__precio span{font-size:var(--step--1);color:var(--ink-soft)}
.modmeta{display:grid;gap:.55rem;margin-bottom:1.2rem}
.modmeta div{display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem;font-size:.84rem;align-items:start}
.modmeta dt{color:var(--ink-soft);margin:0}
.modmeta dd{margin:0;font-weight:600}
.modcard h4{
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .7rem
}
.modcard ul{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.5rem}
.modcard ul li{position:relative;padding-left:1.6rem;font-size:.86rem;line-height:1.5}
.modcard ul li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%
}
.modcard--free ul li::before{background:var(--gold);box-shadow:0 0 0 3px var(--gold-16)}
.modcard--pro ul li::before{background:var(--emerald);box-shadow:0 0 0 3px var(--emerald-14)}
.modcard__foot{margin-top:auto;padding:0 clamp(1.3rem,2.5vw,1.9rem) 1.6rem}
.modcard__foot .btn{width:100%}
.modcard__foot small{display:block;margin-top:.7rem;font-size:.78rem;color:var(--ink-soft);text-align:center;line-height:1.45}
.modnota{margin-top:1.6rem;font-size:var(--step--1);color:var(--ink-soft);text-align:center}

/* ---------- Conoce a tu tutor ---------- */
.tutorgrid{display:grid;gap:clamp(1.75rem,5vw,3.5rem);align-items:center;grid-template-columns:minmax(280px,.85fr) 1.15fr}
@media(max-width:860px){.tutorgrid{grid-template-columns:1fr}}
.tutorfoto{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);isolation:isolate}
.tutorfoto>img:not(.tutorfoto__logo){width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.tutorfoto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 62%,rgba(8,27,51,.42))
}
.tutorfoto__logo{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:3;height:24px;width:auto;
  max-width:none;aspect-ratio:auto;opacity:.85
}
.tutorrol{
  display:inline-block;font-family:var(--font-ui);font-size:var(--step--1);font-weight:600;
  color:var(--accent-ink);background:var(--emerald-14);padding:.35rem .95rem;border-radius:var(--r-pill);
  margin-bottom:1.1rem
}
.band--dark .tutorrol{color:var(--mint);background:rgba(73,214,178,.14)}

/* ---------- Banda de llamada a la acción con recorte ---------- */
.ctaband{position:relative;overflow:hidden;background:linear-gradient(105deg,var(--night) 0%,#0C2C4A 55%,#0B4B41 100%)}
.ctaband__in{position:relative;z-index:2;display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center;
  grid-template-columns:1.28fr .72fr;padding-block:clamp(3rem,7vw,4.5rem)}
.ctaband__txt{color:#fff}
.ctaband__txt h2{color:#fff;max-width:16ch}
.ctaband__txt p{color:rgba(255,255,255,.78);max-width:44ch}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.75rem}
.ctaband__foto{position:relative}
.ctaband__foto img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:88% 50%;
  border-radius:var(--r-xl);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 60px rgba(0,0,0,.45)
}
.ctaband__glow{
  position:absolute;z-index:1;right:6%;bottom:0;width:min(46vw,560px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(16,163,127,.38),transparent 68%);filter:blur(10px)
}
@media(max-width:860px){
  .ctaband__in{grid-template-columns:1fr}
  .ctaband__foto{order:-1}
  .ctaband__foto img{aspect-ratio:16/9;object-position:80% 50%}
}

/* ---------- Selección de modalidad en el asistente ---------- */
.modpick{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-bottom:1.5rem}
.modpick button{
  position:relative;text-align:left;cursor:pointer;background:var(--surface);
  border:2px solid var(--border);border-radius:var(--r-lg);padding:1.4rem 1.35rem;
  display:flex;flex-direction:column;gap:.45rem;transition:.26s var(--ease)
}
.modpick button:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-2)}
.modpick button[aria-pressed="true"]{border-color:var(--emerald);box-shadow:var(--sh-glow);background:var(--emerald-14)}
.modpick .mp-n{font-family:var(--font-display);font-size:var(--step-1);line-height:1.15}
.modpick .mp-s{font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.modpick .mp-p{
  margin-top:.45rem;font-family:var(--font-display);font-size:var(--step-2);line-height:1;color:var(--accent-ink)
}
.modpick .mp-p small{font-family:var(--font-ui);font-size:.74rem;color:var(--ink-soft);display:block;margin-top:.25rem;font-weight:500}
.modpick .mp-badge{
  align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  padding:.22rem .6rem;border-radius:var(--r-pill);margin-bottom:.15rem
}
.mp-badge--free{background:var(--gold-16);color:#8A6A22}
.mp-badge--pro{background:var(--emerald-14);color:var(--accent-ink)}
.mp-badge--ask{background:var(--navy-06);color:var(--ink-soft)}
[data-theme="dark"] .mp-badge--free{color:var(--gold)}
.modpick .tick{position:absolute;top:.85rem;right:1rem;width:26px;height:26px;border-radius:50%;
  background:var(--emerald);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem;
  opacity:0;transform:scale(.6);transition:.25s var(--ease)}
.modpick button[aria-pressed="true"] .tick{opacity:1;transform:scale(1)}

/* ---------- Diagnóstico ---------- */
.dx{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden;margin-bottom:1.25rem}
.dx__head{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.35rem;border-bottom:1px solid var(--border)}
.dx__head img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 28%;flex-shrink:0}
.dx__head strong{font-family:var(--font-display);font-size:var(--step-1);line-height:1.2}
.dx__body{padding:1.35rem}
.dxq{margin-bottom:1.35rem}
.dxq>p{font-weight:600;font-size:var(--step--1);margin:0 0 .6rem}
.dxq__opts{display:flex;flex-wrap:wrap;gap:.5rem}
.dxq__opts button{
  border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-pill);
  padding:.5rem 1rem;font-size:.83rem;cursor:pointer;transition:.18s
}
.dxq__opts button:hover{border-color:var(--accent)}
.dxq__opts button[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}
.dxrec{
  border-radius:var(--r-md);padding:1.15rem 1.3rem;border:1.5px solid rgba(16,163,127,.4);
  background:var(--emerald-14);display:grid;gap:.7rem
}
.dxrec b{font-family:var(--font-display);font-size:var(--step-1)}
.dxrec p{margin:0;font-size:var(--step--1);color:var(--ink-soft)}
.dxrec__btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.25rem}

/* ---------- Temas de la sesión ---------- */
.temagrupo{margin-bottom:1.9rem}
.temagrupo>h4{
  font-family:var(--font-display);font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin:0 0 .25rem;display:flex;align-items:center;gap:.6rem
}
.temagrupo>h4 .dot{width:.62rem;height:.62rem;border-radius:50%;flex:none}
.temagrupo--free>h4 .dot{background:var(--emerald);box-shadow:0 0 0 4px rgba(16,163,127,.16)}
.temagrupo--pro>h4 .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(214,168,75,.2);
  border-radius:2px;transform:rotate(45deg)}
.temagrupo>p.temagrupo__sub{margin:0 0 .9rem;font-size:var(--step--1);color:var(--ink-soft)}
.temas{display:flex;flex-wrap:wrap;gap:.6rem}

.tema{
  position:relative;border:2px solid var(--border);background:var(--surface);border-radius:14px;
  padding:.6rem .95rem;font-size:.87rem;line-height:1.25;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
  display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);text-align:left
}
.tema:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tema__badge{
  font-family:var(--font-ui);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  padding:.16rem .42rem;border-radius:999px;flex:none;white-space:nowrap
}
.tema__mark{font-size:.72rem;flex:none;line-height:1}
.tema__check{width:1rem;flex:none;opacity:0;font-size:.82rem;margin-left:-.2rem;transition:opacity .18s}
.tema[aria-pressed="true"] .tema__check{opacity:1}

/* — gratuitos — */
.tema--free{border-color:rgba(16,163,127,.55)}
.tema--free .tema__badge{background:rgba(16,163,127,.14);color:#0B6B54}
.tema--free:hover{border-color:var(--emerald);transform:translateY(-1px);box-shadow:0 4px 14px rgba(16,163,127,.18)}
.tema--free[aria-pressed="true"]{
  background:var(--emerald);border-color:#0B6B54;color:#fff;
  box-shadow:0 4px 16px rgba(16,163,127,.34), inset 0 1px 0 rgba(255,255,255,.18)}
.tema--free[aria-pressed="true"] .tema__badge{background:rgba(255,255,255,.24);color:#fff}

/* — premium — */
.tema--pro{border-color:rgba(214,168,75,.7);background:linear-gradient(180deg,rgba(214,168,75,.07),transparent)}
.tema--pro .tema__mark{color:var(--gold)}
.tema--pro .tema__badge{background:rgba(214,168,75,.2);color:#7A5A12}
.tema--pro:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:0 4px 14px rgba(214,168,75,.26)}
.tema--pro[aria-pressed="true"]{
  background:linear-gradient(135deg,#8A6A22,#C9992F);border-color:#6F5416;color:#fff;
  box-shadow:0 4px 16px rgba(160,120,30,.36), inset 0 1px 0 rgba(255,255,255,.22)}
.tema--pro[aria-pressed="true"] .tema__mark,
.tema--pro[aria-pressed="true"] .tema__badge{color:#fff}
.tema--pro[aria-pressed="true"] .tema__badge{background:rgba(255,255,255,.24)}

/* — leyenda — */
.temaleyenda{
  margin:0 0 1.4rem;padding:.85rem 1.05rem;border-radius:var(--r-md);
  background:var(--surface-2);border:1px dashed var(--border);font-size:var(--step--1);line-height:1.5}
.temaleyenda>b{display:block;font-family:var(--font-ui);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
.temaleyenda ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.temaleyenda li{display:flex;gap:.6rem;align-items:flex-start}
.temaleyenda .chip{
  font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:.16rem .42rem;border-radius:999px;
  flex:none;margin-top:.1rem;border:2px solid}
.temaleyenda .chip--g{background:rgba(16,163,127,.14);color:#0B6B54;border-color:rgba(16,163,127,.55)}
.temaleyenda .chip--p{background:rgba(214,168,75,.2);color:#7A5A12;border-color:rgba(214,168,75,.7)}

/* — aviso de cambio a premium — */
.temaconfirm[hidden]{display:none}
.temaconfirm{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.2rem;
  background:rgba(8,27,51,.55);backdrop-filter:blur(3px);animation:tcIn .18s var(--ease)}
@keyframes tcIn{from{opacity:0}to{opacity:1}}
.temaconfirm__box{
  width:min(30rem,100%);background:var(--surface);border-radius:var(--r-lg);padding:1.5rem;
  box-shadow:var(--sh-3);border-top:4px solid var(--gold);display:grid;gap:.9rem}
.temaconfirm__box h3{margin:0;font-family:var(--font-display);font-size:var(--step-2);
  display:flex;align-items:center;gap:.55rem}
.temaconfirm__box h3::before{content:"◆";color:var(--gold);font-size:.85em}
.temaconfirm__box p{margin:0;font-size:var(--step--1);line-height:1.6;color:var(--ink-soft)}
.temaconfirm__box p b{color:var(--ink)}
.temaconfirm__precio{
  display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.75rem;
  border-radius:var(--r-md);background:var(--gold-16);font-family:var(--font-display)}
.temaconfirm__precio .de{text-decoration:line-through;opacity:.6;font-size:var(--step-1)}
.temaconfirm__precio .a{font-size:var(--step-3);line-height:1;color:#7A5A12}
.temaconfirm__btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem}
.temaconfirm__btns .btn{flex:1 1 12rem}

/* — frase de confirmación final — */
.reservando{
  margin:-.6rem 0 1.5rem;padding:.85rem 1.1rem;border-radius:var(--r-md);
  background:var(--surface-2);border-left:4px solid var(--emerald);
  font-size:var(--step-0);line-height:1.5}
.reservando b{font-family:var(--font-display)}
.reservando--pro{border-left-color:var(--gold);background:var(--gold-16)}

/* — resumen permanente de modalidad — */
.modactual[hidden]{display:none}
.modactual{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  margin:1rem clamp(1.25rem,3.5vw,2.5rem) 0;padding:.7rem 1rem;border-radius:var(--r-md);
  background:var(--night);color:#fff;box-shadow:var(--sh-1)}
.modactual__lab{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);display:block}
.modactual__nom{font-family:var(--font-display);font-size:var(--step-0);line-height:1.2}
.modactual__val{font-family:var(--font-display);font-size:var(--step-2);line-height:1;color:var(--mint)}
.modactual--pro{background:linear-gradient(120deg,#0B1B2E,#3B2C08)}
.modactual--pro .modactual__val{color:#F0C868}
.modactual--pro .modactual__nom::after{content:" ◆";color:var(--gold)}

/* — tema oscuro: contraste de insignias y bordes — */
[data-theme="dark"] .tema--free .tema__badge{background:rgba(73,214,178,.18);color:#8FEBD1}
[data-theme="dark"] .tema--free[aria-pressed="true"] .tema__badge{background:rgba(255,255,255,.26);color:#fff}
[data-theme="dark"] .tema--pro .tema__badge{background:rgba(214,168,75,.22);color:#F0C868}
[data-theme="dark"] .tema--pro[aria-pressed="true"] .tema__badge{background:rgba(255,255,255,.26);color:#fff}
[data-theme="dark"] .tema--pro{background:linear-gradient(180deg,rgba(214,168,75,.1),transparent)}
[data-theme="dark"] .temaleyenda .chip--g{background:rgba(73,214,178,.18);color:#8FEBD1;border-color:rgba(73,214,178,.5)}
[data-theme="dark"] .temaleyenda .chip--p{background:rgba(214,168,75,.22);color:#F0C868;border-color:rgba(214,168,75,.6)}
[data-theme="dark"] .temaconfirm__precio .a{color:#F0C868}
[data-theme="dark"] .reservando{background:rgba(255,255,255,.05)}
[data-theme="dark"] .reservando--pro{background:rgba(214,168,75,.14)}
[data-theme="dark"] .modactual,[data-theme="dark"] .preciovivo{border:1px solid rgba(255,255,255,.09)}

@media (max-width:560px){
  .temagrupo>h4{font-size:var(--step-0)}
  .tema{font-size:.82rem;padding:.55rem .8rem}
  .modactual{padding:.6rem .8rem}
  .modactual__val{font-size:var(--step-1)}
}
@media (prefers-reduced-motion:reduce){
  .tema:hover{transform:none}
  .temaconfirm{animation:none}
}
.avisopro{
  display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.2rem;border-radius:var(--r-md);
  background:var(--gold-16);border:1px solid rgba(214,168,75,.45);font-size:var(--step--1);line-height:1.55
}
.avisopro svg{flex-shrink:0;margin-top:3px}
.avisopro--ok{background:rgba(16,163,127,.12);border-color:rgba(16,163,127,.45)}
.avisopro--ok svg{stroke:#0B6B54}
.preciovivo{
  position:sticky;bottom:0;margin:1.25rem -.5rem -.5rem;padding:.9rem 1.1rem;border-radius:var(--r-md);
  background:var(--night);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;box-shadow:var(--sh-2)
}
.preciovivo .lab{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:.15rem}
.preciovivo .nom{font-family:var(--font-display);font-size:var(--step-0);line-height:1.2;color:#fff}
.preciovivo.es-pro{background:linear-gradient(120deg,#0B1B2E,#3B2C08)}
.preciovivo.es-pro b{color:#F0C868}
.preciovivo.es-pro .nom::after{content:" ◆";color:var(--gold)}
.preciovivo b{font-family:var(--font-display);font-size:var(--step-2);line-height:1;color:var(--mint)}

/* ---------- Resumen: totales y descuadre ---------- */
.summary__row--total dd{color:var(--accent-ink)}
.summary__row--temas dd{font-weight:500;font-size:.85rem;max-width:26rem}
.difaviso{
  display:flex;gap:.8rem;align-items:flex-start;margin-top:.9rem;padding:.9rem 1.1rem;
  border-radius:var(--r-md);background:rgba(214,168,75,.16);border:1px solid rgba(214,168,75,.5);
  font-size:.84rem;line-height:1.5
}

/* ---------- Confirmación con fotografía ---------- */
.finish img{width:min(360px,72%);aspect-ratio:3/2;object-fit:cover;object-position:60% 40%}

/* ---------- Pie de página: retrato ---------- */
.footer__persona{display:flex;gap:.85rem;align-items:center;margin-top:1.1rem}
.footer__persona img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 28%;
  border:1.5px solid rgba(73,214,178,.45);flex-shrink:0}
.footer__persona div{font-size:.8rem;line-height:1.4}
.footer__persona b{display:block;color:#fff;font-size:.88rem}

/* ---------- Sello del tutor con fotografía real ---------- */
.seal__photo{padding:0}
.seal__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}

/* ---------- Imágenes: proporción preservada ----------
   Toda fotografía se recorta con object-fit: cover dentro de un
   contenedor de proporción fija. Nunca se estira. */
.split__media img{width:100%;display:block}

/* ---------- Encuadre de las fotografías ----------
   js/app.js escribe --foto-pos desde config.fotos; las reglas de
   contexto (portada en móvil, por ejemplo) pueden imponer el suyo. */
[data-foto]{object-position:var(--foto-pos,50% 40%)}
.hero .hero__photo{object-position:78% 50%}

/* ---------- Recomendación de usar computador ---------- */
.pcnote{
  display:flex;gap:.95rem;align-items:flex-start;text-align:left;
  max-width:48ch;margin:1.75rem auto 0;padding:1.05rem 1.25rem;
  border-radius:var(--r-md);background:var(--navy-06);border:1px solid var(--border);
  color:var(--ink)
}
[data-theme="dark"] .pcnote{background:rgba(255,255,255,.05)}
.pcnote svg{flex-shrink:0;color:var(--accent-ink);margin-top:2px}
.pcnote strong{display:block;font-size:var(--step-0);margin-bottom:.2rem}
.pcnote span{display:block;font-size:.84rem;color:var(--ink-soft);line-height:1.55}

/* ============================================================
   Botón de reserva: la acción principal de toda la página
   ============================================================ */
.btn--reserva{
  position:relative;
  background:linear-gradient(135deg,var(--mint) 0%,var(--emerald) 100%);
  color:var(--night);font-weight:700;letter-spacing:-.005em;
  border:0;padding:.72rem 1.35rem;
  box-shadow:0 4px 14px rgba(16,163,127,.34);
  isolation:isolate
}
.btn--reserva::after{                 /* halo que respira, no parpadea */
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:linear-gradient(135deg,var(--mint),var(--emerald));
  opacity:.55;filter:blur(9px);
  animation:respira 3.6s ease-in-out infinite
}
.btn--reserva:hover{
  background:linear-gradient(135deg,#5FE0C0 0%,#12B48C 100%);
  box-shadow:0 8px 26px rgba(16,163,127,.5);transform:translateY(-2px)
}
.btn--reserva:active{transform:translateY(0)}
.btn--reserva .punto{
  width:7px;height:7px;border-radius:50%;background:var(--night);
  animation:pulsito 3.6s ease-in-out infinite;flex-shrink:0
}
@keyframes respira{
  0%,72%,100%{opacity:.34;transform:scale(1)}
  84%{opacity:.75;transform:scale(1.06)}
}
@keyframes pulsito{
  0%,72%,100%{opacity:.5;transform:scale(1)}
  84%{opacity:1;transform:scale(1.35)}
}
.header .btn--reserva{font-size:.88rem;padding:.62rem 1.15rem}
/* En pantallas estrechas el encabezado se aprieta para que el botón
   de reserva quepa junto al logotipo, el idioma y el menú. */
@media(max-width:560px){
  .header__in{gap:.4rem;min-height:70px}
  .header__tools{gap:.3rem}
  .brand__plate{padding:.34rem .55rem;border-radius:12px}
  .brand img{height:28px}
  .header .btn--reserva{padding:.5rem .8rem;font-size:.8rem;gap:.4rem}
  .header .btn--reserva .txt{display:none}
  .header .btn--reserva .corto{display:inline}
  .header .btn--reserva .punto{width:6px;height:6px}
  .langtog{padding:2px}
  .langtog button{padding:.3rem .48rem;font-size:.72rem}
  .iconbtn{width:32px;height:32px}
  .nav{top:70px}
}
.btn--reserva .corto{display:none}

/* Versión flotante en pantallas pequeñas */
.reservaflota{
  position:fixed;left:50%;bottom:calc(.9rem + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,180%);z-index:70;display:none;
  opacity:0;transition:transform .45s var(--ease),opacity .35s var(--ease)
}
.reservaflota.on{transform:translate(-50%,0);opacity:1}
.reservaflota .btn--reserva{
  padding:.85rem 1.5rem;font-size:var(--step-0);white-space:nowrap;
  box-shadow:0 10px 30px rgba(8,27,51,.35),0 4px 14px rgba(16,163,127,.4)
}
@media(max-width:860px){
  .reservaflota{display:block}
  body.flota-activa .footer{padding-bottom:5.5rem}
}
@media(prefers-reduced-motion:reduce){
  .btn--reserva::after{animation:none;opacity:.4}
  .btn--reserva .punto{animation:none;opacity:.8}
  .reservaflota{transition:none}
}

/* ============================================================
   Perfiles profesionales interactivos
   ============================================================ */
.card--perfil{cursor:pointer;text-align:left;width:100%;padding:0;border:1px solid var(--border);
  background:var(--surface);font:inherit;color:inherit;display:block}
.card--perfil[aria-expanded="true"]{border-color:var(--emerald);box-shadow:var(--sh-glow)}
.card--perfil .card__body{display:flex;flex-direction:column;gap:.35rem}
.perfil__pie{
  display:flex;align-items:center;gap:.45rem;margin-top:.75rem;
  font-size:.82rem;font-weight:700;color:var(--accent-ink)
}
.perfil__pie svg{transition:transform .3s var(--ease)}
.card--perfil[aria-expanded="true"] .perfil__pie svg{transform:rotate(180deg)}
.perfil__chip{
  position:absolute;top:.8rem;right:.8rem;z-index:2;
  background:var(--emerald);color:#fff;font-size:.7rem;font-weight:700;
  padding:.2rem .6rem;border-radius:var(--r-pill);box-shadow:var(--sh-1)
}
.card--perfil{position:relative}

.panelperfil{
  margin-top:1.5rem;background:var(--surface);border:1px solid var(--emerald);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;display:none
}
.panelperfil.on{display:block;animation:fade .35s var(--ease)}
.panelperfil__cab{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:1.2rem clamp(1.15rem,3vw,1.75rem);border-bottom:1px solid var(--border);
  background:var(--surface-2)
}
.panelperfil__cab h3{margin:0;font-size:var(--step-2);line-height:1.15}
.panelperfil__cab p{margin:.2rem 0 0;font-size:var(--step--1);color:var(--ink-soft)}
.panelperfil__body{padding:1.2rem clamp(1.15rem,3vw,1.75rem) 1.5rem}
.panelperfil__body>p.intro{font-size:var(--step--1);color:var(--ink-soft);margin:0 0 1.1rem}
.pregunta{
  display:flex;gap:.9rem;align-items:flex-start;width:100%;text-align:left;
  border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-md);
  padding:.95rem 1.1rem;margin-bottom:.6rem;cursor:pointer;transition:.2s var(--ease);font:inherit;color:inherit
}
.pregunta:hover{border-color:var(--accent);transform:translateX(2px)}
.pregunta[aria-pressed="true"]{border-color:var(--emerald);background:var(--emerald-14)}
.pregunta__box{
  width:22px;height:22px;border-radius:6px;border:2px solid var(--border);
  display:grid;place-items:center;flex-shrink:0;margin-top:1px;transition:.2s;font-size:.72rem;color:#fff
}
.pregunta[aria-pressed="true"] .pregunta__box{background:var(--emerald);border-color:var(--emerald)}
.pregunta__txt{display:block;font-size:var(--step-0);line-height:1.45}
.pregunta__cta{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:.25rem;font-weight:600}
.pregunta[aria-pressed="true"] .pregunta__cta{color:var(--accent-ink)}
.panelperfil__foot{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:1.25rem;padding-top:1.15rem;border-top:1px solid var(--border)
}
.panelperfil__foot .aviso{font-size:.78rem;color:var(--ink-soft);max-width:44ch;line-height:1.5;margin:0}

/* Mis necesidades */
.necesidades{
  margin-top:2rem;border-radius:var(--r-lg);padding:1.35rem clamp(1.15rem,3vw,1.75rem);
  background:var(--night);color:#fff;box-shadow:var(--sh-2);display:none
}
.necesidades.on{display:block;animation:fade .35s var(--ease)}
.necesidades h3{color:#fff;font-size:var(--step-1);margin-bottom:.15em}
.necesidades .d{font-size:var(--step--1);color:rgba(255,255,255,.72);margin:0 0 1rem;max-width:64ch}
.necesidades ul{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.5rem}
.necesidades li{
  display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.45;
  background:rgba(255,255,255,.06);border-radius:var(--r-sm);padding:.6rem .85rem
}
.necesidades li b{color:var(--mint);font-weight:600;white-space:nowrap;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.06em;padding-top:.15rem}
.necesidades li button{
  margin-left:auto;background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;
  font-size:1.1rem;line-height:1;padding:0 .2rem
}
.necesidades li button:hover{color:#fff}
.necesidades__acts{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.necesidades__acts .cuenta{font-size:.82rem;color:rgba(255,255,255,.7);margin-right:auto}

/* Pantallas muy estrechas: el botón de reserva conserva su sitio */
/* Por debajo de 400 px el bloque completo no cabe junto al botón de
   reserva: se muestra solo el símbolo, que es lo que identifica la marca. */
@media(max-width:384px){
  .brand .logo-full{display:none}
  .brand .logo-sim{display:block}
  .brand__plate{padding:.38rem .5rem}
  .brand img{height:32px}
  .header .btn--reserva{padding:.46rem .7rem;font-size:.78rem}
  .langtog button{padding:.28rem .42rem;font-size:.7rem}
  .iconbtn{width:30px;height:30px}
}

/* ============================================================
   AFINADO MÓVIL — añadido al final para ganar la cascada.
   Tres frentes: los anclajes ya no quedan bajo el encabezado,
   las áreas táctiles crecen a 44 px, y el `:hover` —que en un
   teléfono no existe— se sustituye por respuesta al toque.
   ============================================================ */

/* --- 1. Anclajes: que el título no quede bajo el encabezado --- */
html{scroll-padding-top:5.75rem}

/* --- 2. Respuesta al toque: en un teléfono no hay puntero --- */
@media (hover:none){
  .modcard:hover{transform:none;box-shadow:var(--sh-2)}
  .modcard:hover .modcard__media img{transform:none}
  .modcard:active{transform:scale(.995);box-shadow:var(--sh-3)}
  .card--perfil:hover,.modpick button:hover,.tema:hover,.cpy:hover,.abrir:hover,.wabtn:hover{
    transform:none}
  .card--perfil:active,.modpick button:active{transform:scale(.985)}
  .tema:active,.cpy:active,.abrir:active,.wabtn:active,.btn:active{transform:scale(.97)}
  .btn,.tema,.cpy,.abrir,.wabtn,.modpick button,.card--perfil{
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s var(--ease),background .2s var(--ease),
               border-color .2s var(--ease),box-shadow .2s var(--ease)}
}

/* --- 3. Aparición escalonada: la página se arma, no parpadea --- */
@media (prefers-reduced-motion:no-preference){
  .reveal{transform:translateY(20px) scale(.994)}
  .reveal.in{transition:opacity .62s var(--ease),transform .62s var(--ease)}
  .mods .reveal:nth-child(2),
  .grid .reveal:nth-child(2),
  .steps .reveal:nth-child(2){transition-delay:.09s}
  .grid .reveal:nth-child(3),.steps .reveal:nth-child(3){transition-delay:.18s}
  .grid .reveal:nth-child(4),.steps .reveal:nth-child(4){transition-delay:.26s}
  .grid .reveal:nth-child(5){transition-delay:.32s}
  .grid .reveal:nth-child(6){transition-delay:.38s}
}

/* ============================================================
   ≤ 700 px — teléfonos
   ============================================================ */
@media (max-width:700px){

  /* --- Áreas táctiles: 44 px es el mínimo cómodo con el pulgar --- */
  .langtog{padding:2px}
  .langtog button{min-height:38px;min-width:46px;padding:.3rem .7rem;font-size:.8rem}
  .iconbtn{width:42px;height:42px}
  .header .btn--reserva{min-height:44px;padding-inline:1.05rem}
  .footer a{display:inline-flex;align-items:center;min-height:44px}
  .footer nav a,.footer ul a{min-height:44px}

  /* --- Respiro vertical: el móvil no necesita tanto aire --- */
  .section{padding-block:3.25rem}
  .section>.wrap>.lede{margin-bottom:.25rem}

  /* --- Hero: dos botones del mismo ancho, no escalonados --- */
  .hero__in{padding-block:2.25rem 0}
  .hero__cta{display:grid;gap:.7rem;margin-top:1.7rem}
  .hero__cta .btn{width:100%;justify-content:center;min-height:50px}
  .hero__photo{
    /* el `img{max-width:100%}` global impedía el sangrado completo */
    max-width:none;aspect-ratio:4/3;margin-top:2rem;
    -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 76%,transparent 100%)}

  /* --- Ficha de modalidad: etiqueta encima del dato --- */
  .modcard__body{padding:1.35rem 1.2rem 1rem}
  .modcard__foot{padding:0 1.2rem 1.35rem}
  .modmeta{gap:.85rem;margin-bottom:1.1rem}
  .modmeta div{grid-template-columns:1fr;gap:.12rem}
  .modmeta dt{
    font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;opacity:.85}
  .modmeta dd{font-size:.9rem;line-height:1.45}
  .modcard__tag{font-size:.8rem;padding:.4rem .85rem}
  .modcard__foot small{font-size:.8rem}
  .modcard ul li{font-size:.9rem}

  /* --- Legibilidad: nada de cuerpo de texto por debajo de 13 px --- */
  .modcard__promo,.modcard__desc,.pick p,.step p,.dxrec p{font-size:.88rem}

  /* --- Asistente: menos margen, más contenido --- */
  .wizard__body{padding:1.1rem 1.1rem 1.75rem;min-height:0}
  .wizard__head{padding:1.15rem 1.1rem 0}
  .wizard__foot{padding-inline:1.1rem}
  .wizard__foot .btn{min-height:50px;flex:1}
  .modactual{margin-inline:1.1rem}

  /* --- El flotante no debe tapar el pie ni el botón de enviar --- */
  .footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}
}

/* ============================================================
   ≤ 420 px — teléfonos compactos
   ============================================================ */
@media (max-width:420px){
  .section{padding-block:2.75rem}
  .modcard__body{padding:1.2rem 1.05rem .9rem}
  .modcard__foot{padding:0 1.05rem 1.2rem}
  .wizard__body{padding:1rem .95rem 1.5rem}
  .wizard__head{padding:1rem .95rem 0}
  .wizard__foot{padding-inline:.95rem}
  .modactual{margin-inline:.95rem}
  .reservaflota .btn--reserva{padding:.8rem 1.25rem;font-size:var(--step--1)}
}

/* --- Pantallas con muesca: que nada quede bajo el borde curvo --- */
@supports (padding:max(0px)){
  @media (max-width:700px){
    .header__in{padding-left:max(var(--gutter),env(safe-area-inset-left));
                padding-right:max(var(--gutter),env(safe-area-inset-right))}
  }
}