/* base.css — reset, elementos, tipografía, utilidades */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s-lg));
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--canvas);
  color:var(--body);
  font-family:var(--font-sans);
  font-weight:450;
  font-size:16px;
  line-height:1.65;
  padding-top:var(--header-h);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}

/* --- Titulares: serif con tracking negativo creciente --- */
h1,h2,h3{
  font-family:var(--font-serif);
  color:var(--ink);
  font-weight:400;
  text-wrap:balance;
}
h1{font-size:clamp(36px,1.4rem + 3.6vw,60px);line-height:1.08;letter-spacing:-.015em}
/* En teléfono el H1 se comprime para que la CTA del hero entre sin scroll,
   requisito explícito del wireframe. La fórmula fluida no baja de 36px sola. */
@media(max-width:600px){
  h1{font-size:30px;line-height:1.12}
}
h2{font-size:clamp(28px,1.25rem + 2.1vw,40px);line-height:1.15;letter-spacing:-.012em}
h3{font-size:22px;line-height:1.25;letter-spacing:-.008em;font-weight:500}

/* El tratamiento de "título de tarjeta" vive en .cell__title (components.css),
   no en una etiqueta concreta: la jerarquía del documento decide el nivel. */

p{max-width:68ch}
a{color:inherit}

/* --- Utilidades tipográficas --- */
.kicker{
  font-size:11px;font-weight:600;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:var(--s-xs);
}
/* El cuadrado procede del módulo de la "P" del logo */
.kicker::before{
  content:"";width:6px;height:6px;background:var(--accent);flex:none;
}
.lead{font-size:clamp(17px,1rem + .3vw,19px);line-height:1.55;font-weight:400}
.small{font-size:13px;font-weight:500;line-height:1.5;color:var(--muted)}
.quote{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(20px,1rem + 1.1vw,26px);line-height:1.4;
  letter-spacing:-.01em;color:var(--ink);
}
.accent-line{color:var(--accent-deep);font-weight:600;font-size:17px}

/* --- Layout --- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--maxw-prose);margin-inline:auto}
.section{padding-block:var(--s-4xl)}
@media(max-width:900px){.section{padding-block:var(--s-3xl)}}
@media(max-width:600px){.section{padding-block:var(--s-2xl)}}

.section--warm{background:var(--warm)}
.section--accent{background:var(--accent-wash)}
.section--dark{background:var(--ink);color:var(--on-dark-mut)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark)}
.section--dark .kicker{color:var(--on-dark-mut)}
.section--dark .quote{color:var(--on-dark)}
.section--dark .small{color:var(--on-dark-mut)}

/* Bordes de sección que colapsan en una sola hairline */
.section--ruled{border-top:1px solid var(--line)}
.section--ruled + .section--ruled{margin-top:-1px}

.center{text-align:center}
.center p{margin-inline:auto}

/* --- Utilidades de espaciado (evitan style="" en el HTML) --- */
.mt-xs{margin-top:var(--s-xs)}
.mt-sm{margin-top:var(--s-sm)}
.mt-md{margin-top:var(--s-md)}
.mt-lg{margin-top:var(--s-lg)}
.mt-xl{margin-top:var(--s-xl)}
.mt-2xl{margin-top:var(--s-2xl)}
.mb-xl{margin-bottom:var(--s-xl)}
.measure{max-width:60ch;margin-inline:auto}
.measure-tight{max-width:46ch;margin-inline:auto}

/* --- Accesibilidad --- */
.skip-link{
  position:absolute;left:var(--s-md);top:-100px;z-index:100;
  background:var(--ink);color:var(--on-dark);
  padding:var(--s-sm) var(--s-md);border-radius:var(--r);
  font-size:14px;font-weight:600;text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--s-md)}

:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;border-radius:2px}
.section--dark :focus-visible{outline-color:var(--accent)}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Movimiento reducido: solo se desactiva el desplazamiento suave. Windows
   emite esta señal con los "Efectos de animación" apagados (ajuste muy común
   e incluso predeterminado en muchos equipos); matar aquí todos los fundidos
   suaves entregaría una web inerte a media España. Los efectos del sitio son
   gentiles a propósito: opacidad y desplazamientos ≤14px, una sola vez. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}