/* ============================================================
   BASE — reset mínimo y primitivas de layout.
   Lee todo de tokens.css. Aquí no hay ni un color ni un tamaño
   escrito a mano: si necesitas uno nuevo, va en tokens.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;   /* Safari iOS no agranda el texto al girar */
  scroll-behavior:smooth;
  scroll-padding-top:6rem;          /* que el nav fijo no tape el ancla */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* nada empuja la página de lado */
}

h1,h2,h3,h4{
  margin:0;
  font-weight:var(--w-bold);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  text-wrap:balance;   /* los títulos parten en líneas parejas */
}
p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}

img,video{max-width:100%;height:auto;display:block}

/* Los links de texto llevan subrayado Y color. Nunca solo color:
   quien no distingue rojo de verde tiene que poder ver que es un link. */
a{color:inherit}
a.inline{
  color:var(--link,var(--coral-text));
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
/* el color del link lo pone --link de cada banda, no .on-dark */

/* Foco visible SIEMPRE. El cursor circular es decorativo y no
   sustituye esto: quien navega con teclado depende de este anillo. */
:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Saltar al contenido — primer elemento tabulable de cada página */
.skip{
  position:absolute;left:var(--space-md);top:var(--space-md);
  transform:translateY(-160%);
  background:var(--ink);color:var(--paper);
  padding:.7rem 1.2rem;border-radius:var(--r-pill);
  text-decoration:none;font-weight:var(--w-medium);
  z-index:calc(var(--z-cursor) + 1);
  transition:transform var(--dur-fast) var(--ease);
}
.skip:focus{transform:translateY(0)}

/* ---------- Layout ---------- */
/* La barra es fija: la primera banda de cada página tiene que esquivarla.
   El hero la maneja aparte, por eso el :not(). */
main > .band:first-child:not(.hero){padding-block-start:calc(var(--section-y) + var(--nav-h))}

.wrap{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}

/* Bloque de color a sangre completa. El color y su texto se ponen
   con las clases de abajo — siempre en par, nunca sueltos.
   Cada banda trae además su propio --dim: el color del texto secundario
   que SÍ pasa contraste sobre ese fondo. */
.band{padding-block:var(--section-y)}
.band--paper {background:var(--paper); color:var(--ink);       --dim:var(--muted);      --link:var(--coral-text)}
.band--cobalt{background:var(--cobalt);color:var(--on-cobalt); --dim:var(--on-cobalt);  --link:var(--on-cobalt)}
.band--mint  {background:var(--mint);  color:var(--on-mint);   --dim:var(--dim-mint);   --link:var(--coral-mint)}
.band--lilac {background:var(--lilac); color:var(--on-lilac);  --dim:var(--dim-lilac);  --link:var(--coral-lilac)}
.band--slate {background:var(--slate); color:var(--on-slate);  --dim:var(--muted-alt);  --link:var(--coral-bright)}

/* ---------- Tipografía de utilidad ----------
   El texto secundario usa --dim, no un gris fijo. Antes usaba --muted
   siempre y sobre lila daba 3.15:1 y sobre cobalto 2.68:1. */
.eyebrow{
  display:block;font-size:var(--step--1);font-weight:var(--w-medium);
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--dim,var(--muted));margin-bottom:var(--space-md);
}
.lede{
  font-size:var(--step-1);line-height:var(--lh-snug);
  font-weight:var(--w-medium);color:var(--dim,var(--muted));
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;font:inherit;font-weight:var(--w-medium);
  padding:.7rem 1.5rem;border-radius:var(--r-pill);
  border:1.5px solid currentColor;background:transparent;color:inherit;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-dark .btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--coral{background:var(--coral);color:var(--ink);border-color:var(--coral)}
/* ⚠️ .btn--coral NO se usa dentro de .band--cobalt: coral sobre cobalto
   es 1.86:1. Ahí va .btn a secas, que hereda el borde papel. */

/* ---------- Solo para lectores de pantalla ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Entrada al hacer scroll ----------
   Empieza oculto solo si JS está vivo (html.js). Si JS falla,
   nunca se aplica y el contenido se ve normal. */
.js [data-reveal]{
  opacity:0;transform:translateY(1.5rem);
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-reveal) var(--ease);
}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Cortina de transición entre páginas ----------
   El estado por defecto es ABIERTA (fuera de pantalla). Solo se cierra
   mientras <html> tenga una de las dos clases, y las dos las quita un
   temporizador pase lo que pase. Así, si una animación se congela (los
   navegadores lo hacen en pestañas de segundo plano), lo peor que pasa
   es que no haya efecto: nunca que la página quede tapada.

   Se anima con @keyframes y no con transition porque una transición
   necesita que el navegador haya pintado el estado anterior para poder
   interpolar. Al llegar a una página eso todavía no ha pasado, y el
   resultado era un parpadeo: se veía la cortina y desaparecía de golpe
   en vez de subir. */
.curtain{
  position:fixed;inset:0;z-index:calc(var(--z-menu) + 10);
  background:var(--slate);
  pointer-events:none;
  transform:translateY(-100%);
  will-change:transform;
}
html.is-entering .curtain{animation:curtain-up   var(--dur-slow) var(--ease) forwards}
html.is-leaving  .curtain{animation:curtain-down var(--dur-slow) var(--ease) forwards}

@keyframes curtain-up  {from{transform:translateY(0)}    to{transform:translateY(-100%)}}
@keyframes curtain-down{from{transform:translateY(-100%)} to{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* ---------- Páginas legales ----------
   Texto largo que se lee, no se escanea: una sola columna angosta,
   jerarquía clara y nada más. */
.legal-hero{padding-block-start:calc(var(--section-y) + var(--nav-h));padding-block-end:var(--space-lg)}
.legal-hero + .band{padding-block-start:var(--space-lg)}
.legal__fecha{font-size:var(--step--1);color:var(--dim);margin-block-start:var(--space-md)}
.legal__nota{
  border-inline-start:3px solid var(--link,var(--coral-text));
  padding:var(--space-sm) 0 var(--space-sm) var(--space-md);
  margin-block-start:var(--space-lg);color:var(--dim);font-size:var(--step--1);
}
/* margin-inline:0 es necesario: .wrap trae margin-inline:auto, y al
   reducir el ancho a 64ch la columna se centraba en la pantalla en vez
   de alinearse con el título de arriba. */
/* Cabecera y cuerpo comparten ancho y van centrados, así sus bordes
   izquierdos coinciden. Centrar solo el cuerpo dejaba el título pegado
   al margen y el texto al centro, que es el desfase de la primera versión. */
.legal-cabeza,.legal-doc{max-width:68ch;margin-inline:auto}
.legal-doc section + section{margin-block-start:var(--space-2xl)}
.legal-doc h2{font-size:var(--step-2);margin-block-end:var(--space-md)}
.legal-doc p + p{margin-block-start:var(--space-md)}
.legal-doc ul{margin-block-start:var(--space-md);display:grid;gap:var(--space-sm)}
.legal-doc li{position:relative;padding-inline-start:var(--space-md);color:var(--dim)}
.legal-doc li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:.35rem;block-size:.35rem;border-radius:var(--r-pill);
  background:var(--link,var(--coral-text));
}

/* Puente al sitio freelance. Discreto pero no escondido: separado del
   bloque legal para que no se lea como letra chica. */
.foot__cruce{margin-block:var(--space-xl) var(--space-lg)}
.foot__cruce a{color:var(--dim);text-decoration:none;
  border-block-end:1px solid currentColor;padding-block-end:.15em;
  transition:color var(--dur-fast) var(--ease)}
.foot__cruce a:hover{color:var(--on-slate)}

/* ---------- Legales ----------
   La cláusula de transferencia va destacada porque el artículo 35 pide
   que la persona pueda ver que ahí se le está pidiendo algo, no que
   quede enterrada en un párrafo más. */
.legal-nota{max-width:68ch;margin-block-start:var(--space-lg);
  font-size:var(--step--1);color:var(--dim)}
.legal-fecha{margin-block-start:var(--space-md);font-size:var(--step--1);color:var(--dim)}
.legal-clausula{border-inline-start:3px solid var(--link,var(--coral-text));
  padding:var(--space-sm) 0 var(--space-sm) var(--space-md);
  font-weight:var(--w-medium)}


/* Aviso simplificado en dos renglones, bajo los botones de contacto.
   Gris y chico: tiene que estar y poder leerse, no competir con el CTA. */
/* --step--1 y no --step--2: a 12px el aviso queda por debajo de lo que
   se lee con comodidad, y este tiene que poder leerse de verdad, no solo
   estar. Contraste medido sobre la banda oscura: 8.72:1. */
.simplificado{margin-block-start:var(--space-lg);max-width:62ch;
  font-size:var(--step--1);line-height:var(--lh-snug);color:var(--dim)}
.simplificado a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.simplificado a:hover{color:var(--link,var(--coral-text))}