/* ==========================================================================
   tokens.css · Sistema de diseño v16 (CONGELADO)
   Paleta B1 "Ámbar", textura de papel, tres papeles tipográficos y clases base.
   Se enlaza SIEMPRE antes que estilo.css.
   Fuente de verdad visual: maquetas/home-v16.html · reglas: CLAUDE.md
   ========================================================================== */

/* ── Fuentes autoalojadas (cero peticiones a terceros) ───────────────────── */

@font-face{
  font-family:'Playfair Display';
  src:url('/fuentes/playfair.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026;
}
@font-face{
  font-family:'Montserrat';
  src:url('/fuentes/montserrat.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026;
}
@font-face{
  font-family:'Montserrat';
  src:url('/fuentes/montserrat-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026;
}
/* No existe Playfair italic: las cursivas serif están prohibidas. */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root{
  /* Paleta B1 "Ámbar" */
  --papel:#FBF5EC;
  --arena:#F5E9D7;
  --rosa:#F7DFC4;
  --texto:#3A3A3A;
  --texto-suave:#6B6461;
  --negro:#221F1E;
  --primario:#A9662B;
  --primario-osc:#82491A;
  --acento:#A9662B;
  --boton:#46331B;
  --boton-osc:#332409;
  --borde:rgba(120,73,26,.16);

  /* Familias */
  --display:'Montserrat',sans-serif;
  --cuerpo:'Montserrat',sans-serif;
  --titulos:'Playfair Display',serif;

  /* Grano de papel: va sobre el color de cada superficie, nunca liso */
  --textura:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.82%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.52%200%200%200%200%200.40%200%200%200%200%200.26%200%200%200%200.055%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");
}

/* ── Base ────────────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--cuerpo);font-weight:400;font-size:15px;
  color:var(--texto);
  background-color:var(--papel);background-image:var(--textura);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}

/* ── Los tres papeles tipográficos ───────────────────────────────────────── */

/* Papel 1 · Títulos ("BLANCA ESTRÁN"): Playfair 500, versalitas */
.papel1{
  font-family:var(--titulos);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--negro);line-height:1.6;
}
.papel1.ancho{letter-spacing:.12em}   /* h1 del hero */

/* Papel 2 · Etiquetas ("PSICÓLOGA"): Montserrat 500, mayúsculas pequeñas */
.papel2{
  font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.26em;
  font-size:.78rem;color:var(--negro);
}

/* Papel 3 · Cuerpo: Montserrat 400. La itálica es la ÚNICA voz de énfasis */
.papel3{font-family:var(--cuerpo);font-weight:400;font-size:.97rem;line-height:1.8}
.enfasis{font-style:italic;font-weight:600;color:var(--negro)}
.frase-grande{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.55;color:var(--negro);
}
.frase-grande strong{font-weight:600}

/* Aplicaciones fijas del papel 2 */
.kicker{
  font-family:var(--display);font-size:.64rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--texto-suave);
}
/* A 1.05rem el tracking se relaja a .2em: a mayor tamaño, menos aire hace falta */
.titulin{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:1.05rem;color:var(--negro);margin-bottom:26px;
}

/* Fragmentos que no deben partirse (colegiación, teléfono, códigos) */
.nb{white-space:nowrap}

/* ── Sección ─────────────────────────────────────────────────────────────── */

.seccion{max-width:1240px;margin:0 auto;padding:100px 28px}
@media(max-width:920px){.seccion{padding:72px 24px}}

/* ── Botón espresso (todos los CTA) ──────────────────────────────────────── */

.btn{
  display:inline-block;background:var(--boton);color:#FBF5EC;text-decoration:none;
  font-family:var(--display);
  font-size:.82rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:14px 28px;border-radius:4px;transition:background .25s;
}
.btn:hover,.btn:focus-visible{background:var(--boton-osc)}

/* Pastilla de navegación */
.pill{
  background:var(--boton);color:#FBF5EC !important;
  padding:7px 20px;border-radius:6px;text-decoration:none;
  font-family:var(--display);font-size:.7rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;
}
.pill:hover,.pill:focus-visible{background:var(--boton-osc)}

/* ── Reveal al scroll ────────────────────────────────────────────────────── */

.rev{opacity:0;transform:translateY(12px);transition:opacity .55s ease-out,transform .55s ease-out}
.rev.vis{opacity:1;transform:none}

/* ── Marquesina ──────────────────────────────────────────────────────────── */

.marquee{
  background-color:var(--rosa);background-image:var(--textura);
  overflow:hidden;padding:15px 0;
}
.marquee-track{
  display:flex;white-space:nowrap;width:max-content;
  animation:desliza 40s linear infinite;
  font-family:var(--display);font-size:.66rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:#6B4A28;
}
.marquee-track span{padding:0 18px}
.marquee-track .pto{color:var(--primario)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Accesibilidad ───────────────────────────────────────────────────────── */

.saltar{position:absolute;left:-9999px}
.saltar:focus{
  left:16px;top:16px;z-index:99;
  background:var(--boton);color:var(--papel);padding:10px 18px;
  font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
}
:focus-visible{outline:2px solid var(--primario);outline-offset:3px}

/* ── Cabecera común ──────────────────────────────────────────────────────── */

header{
  background-color:var(--papel);background-image:var(--textura);
  position:relative;z-index:20;
}
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  max-width:1240px;margin:0 auto;padding:22px 28px;gap:20px;
}
.nav-izq,.nav-der{
  display:flex;gap:24px;align-items:center;
  font-family:var(--display);font-size:.7rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
}
.nav-der{justify-content:flex-end}
.nav a{text-decoration:none;color:var(--negro)}
.nav-izq a,.nav-der a{white-space:nowrap}
.nav a:hover,.nav a:focus-visible{color:var(--primario)}
.nav a[aria-current="page"]{color:var(--primario)}

.logo{text-align:center;text-decoration:none;display:block}
.logo .nombre{
  font-family:var(--titulos);font-weight:500;letter-spacing:.22em;
  font-size:1.22rem;color:var(--negro);text-transform:uppercase;display:block;
}
.logo .rol{
  font-family:var(--display);letter-spacing:.42em;font-size:.66rem;
  color:var(--negro);text-transform:uppercase;margin-top:2px;display:block;
}

/* Menú móvil: desplegable nativo, sin JavaScript */
.menu{display:none}
.menu-boton{
  font-family:var(--display);font-size:.7rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--negro);
  cursor:pointer;list-style:none;display:inline-block;padding:6px 0;
}
.menu-boton::-webkit-details-marker{display:none}
.menu-boton::marker{content:""}
.menu-boton:hover,.menu[open] .menu-boton{color:var(--primario)}
.menu .cerrar,.menu[open] .abrir{display:none}
.menu[open] .cerrar{display:inline}
.menu-panel{
  position:absolute;left:0;right:0;top:100%;
  background-color:var(--papel);background-image:var(--textura);
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
  padding:18px 24px 26px;display:flex;flex-direction:column;gap:4px;text-align:center;
}
.menu-panel a{
  font-family:var(--titulos);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:.92rem;color:var(--negro);
  text-decoration:none;padding:12px 0;
}
.menu-panel a:hover,.menu-panel a:focus-visible{color:var(--primario)}
.menu-panel a[aria-current="page"]{color:var(--primario)}

/* Por debajo de 1024px la navegación completa no cabe en una línea: entra el menú */
@media(max-width:1024px){
  .nav{grid-template-columns:auto 1fr auto;padding:16px 20px;gap:12px}
  .nav-izq,.nav-der{display:none}
  .menu{display:block;justify-self:start}
  .pill-movil{display:inline-block;justify-self:end}
  .logo .nombre{font-size:1.02rem;letter-spacing:.18em}
  .logo .rol{font-size:.58rem;letter-spacing:.34em}
}
/* El logotipo se mantiene en dos líneas (nombre + rol) también en pantallas estrechas */
@media(max-width:480px){
  .nav{padding:14px 16px;gap:8px}
  .menu-boton{font-size:.62rem;letter-spacing:.18em}
  .pill{padding:6px 13px;font-size:.62rem;letter-spacing:.18em}
  .logo .nombre{font-size:.8rem;letter-spacing:.08em}
  .logo .rol{font-size:.5rem;letter-spacing:.26em}
}
@media(min-width:1025px){
  .pill-movil{display:none}
}
@media(max-width:1200px){
  .nav-izq,.nav-der{gap:18px}
}

/* ── Pie común ───────────────────────────────────────────────────────────── */

footer{
  background-color:#F4E6D1;background-image:var(--textura);
  padding:76px 28px 40px;
}
.foot{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:start;
  font-family:var(--display);font-size:.84rem;
}
.foot a{display:block;text-decoration:none;color:var(--texto);margin-bottom:10px}
.foot a:hover,.foot a:focus-visible{color:var(--primario)}
.foot-der{text-align:right}
.foot-centro{
  font-family:var(--titulos);font-weight:500;font-size:1.12rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--negro);
  text-align:center;line-height:1.3;
}
.foot-centro small{
  display:block;font-family:var(--cuerpo);font-style:normal;font-size:.58rem;
  letter-spacing:.3em;text-transform:uppercase;margin-top:10px;color:var(--texto-suave);
}
.copy{
  max-width:1100px;margin:52px auto 0;text-align:center;
  font-size:.74rem;color:var(--texto-suave);font-family:var(--cuerpo);line-height:2;
}
.copy a{color:var(--texto-suave);text-decoration:none;border-bottom:1px solid var(--borde)}
.copy a:hover{color:var(--primario)}
@media(max-width:920px){
  footer{padding:56px 24px 32px}
  .foot{grid-template-columns:1fr;text-align:center;gap:32px}
  .foot-der{text-align:center}
}

/* ── Dato pendiente: se marca visible, nunca se inventa ──────────────────── */

.pendiente{
  color:var(--primario);
  border-bottom:1px dashed var(--primario);
  opacity:.85;
}

/* ── Movimiento reducido ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none !important;justify-content:center;width:auto !important}
}