/* ==========================================================================
   EJERCICIO ES SALUD  ·  Sistema  —  dirección «Crema»
   Nacho Hemmerling — Hipertensión, fuerza y hábitos

   Idea: toda la página vive sobre un crema cálido; el navy pasa de fondo a
   tinta (titulares, pie, y algún panel puntual como el clasificador) y el
   coral marca lo que hay que mirar: la frase clave de cada titular, los
   botones y los iconos. Las secciones se separan con cejas numeradas y
   tarjetas beige planas, no con bandas de color.

   Reglas del sistema:
     · Texto blanco solo sobre --coral-btn (4,7:1) o sobre navy. El coral de
       marca --coral es relleno decorativo, y --coral-deep (3,8:1 con blanco)
       NO vale como fondo de texto blanco: solo como texto grande sobre crema.
     · El coral como texto usa --coral-deep en titulares grandes (3,4:1 sobre
       crema, AA para texto grande) y --coral-ink en texto pequeño (5,3:1).
     · Radio contenido: 14px; tarjetas 18px. Sombra solo donde algo flota.
   ========================================================================== */

/* ── Tipografía autoalojada ────────────────────────────────────────────── */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root{
  /* Superficies */
  --paper:      #FBF3EA;   /* crema cálido: el suelo de toda la web */
  --paper-2:    #F4E8DA;   /* tarjetas beige */
  --peach:      #F8DECC;   /* círculos de icono */
  --white:      #FFFFFF;
  --navy:       #132C50;
  --navy-2:     #1E3A63;
  --navy-3:     #28466F;

  /* Tinta */
  --ink:        #132C50;
  --text:       #4A5A6E;
  --muted:      #596678;   /* 4,8:1 también sobre las tarjetas beige */
  --on-navy:    rgba(255,255,255,.94);
  --on-navy-2:  rgba(255,255,255,.70);
  --line:       #EBDECB;
  --line-navy:  rgba(255,255,255,.16);

  /* Coral corporativo */
  --coral:      #E0764F;   /* marca: rellenos, iconos, adornos */
  --coral-deep: #D4603A;   /* frases coral de los titulares (texto grande) */
  --coral-btn:  #BE5230;   /* relleno de botón: 4,7:1 con texto blanco */
  --coral-btn-hi: #B04A2B; /* hover de botón: 5,4:1 */
  --coral-ink:  #A8462A;   /* coral como texto pequeño sobre crema */

  /* Escala de bandas del clasificador (sobre navy) */
  --b1:#7FB894; --b2:#6FA886; --b3:#D9BE72; --b4:#D98A76; --b5:#C46A57; --b6:#A94A38;
  --ok:#4F9D69; --warn:#D9A441; --alert:#C54E4E;

  /* Retícula */
  --maxw: 1280px;
  --gut:  clamp(20px, 3.4vw, 36px);

  /* Espacio */
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sec: clamp(58px, 6.6vw, 100px);

  --r:  14px;
  --r-lg: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --sh: 0 2px 6px rgba(19,44,80,.05), 0 24px 50px -26px rgba(19,44,80,.28);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ background:var(--paper); overflow-x:clip; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:17px; line-height:1.62; color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
summary::-webkit-details-marker{ display:none; }
sup{ font-size:.6em; line-height:0; vertical-align:super; }

h1,h2,h3,h4{
  font-weight:700; color:var(--ink); line-height:1.06;
  letter-spacing:-.035em; text-wrap:balance;
}
h3,h4{ letter-spacing:-.025em; line-height:1.2; }
p{ text-wrap:pretty; }

/* La frase clave de un titular va en coral */
h1 em,h2 em{ font-style:normal; color:var(--coral-deep); }

::selection{ background:var(--coral); color:var(--navy); }
:focus-visible{ outline:2.5px solid var(--coral-deep); outline-offset:3px; border-radius:4px; }

/* ── Retícula madre: sangrado sin 100vw ────────────────────────────────── */
main{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [content-start] minmax(0,var(--maxw)) [content-end]
    minmax(var(--gut),1fr) [full-end];
}
main > *{ grid-column:content; }
main > .bleed{ grid-column:full; }

.wrap,
.bleed__in{
  width:100%; max-width:calc(var(--maxw) + 2 * var(--gut));
  margin-inline:auto; padding-inline:var(--gut);
}

.sec{ padding-block:var(--sec); }
.sec--tight{ padding-block:clamp(44px,5vw,72px); }

/* ── Tipografía de apoyo ───────────────────────────────────────────────── */
.kick{
  display:inline-block; font-size:13px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--coral-ink);
}
/* La ceja de sección lleva una regla corta debajo */
.kick::after{
  content:""; display:block; width:34px; height:2px; border-radius:2px;
  background:var(--coral); margin-top:9px;
}
.kick--navy{ color:var(--coral-ink); }

.h-xl{ font-size:clamp(40px,6vw,78px); }
.h-lg{ font-size:clamp(31px,4.2vw,54px); }
.h-md{ font-size:clamp(25px,2.7vw,36px); }

.lead{ font-size:clamp(18px,1.5vw,20px); line-height:1.6; max-width:46ch; }
.body{ font-size:16.5px; line-height:1.68; max-width:62ch; }
.fine{ font-size:14.5px; line-height:1.6; color:var(--muted); }
.safety{ font-size:16px; line-height:1.62; }
.num{ font-variant-numeric:tabular-nums; }

.head{ max-width:900px; margin-bottom:clamp(32px,3.8vw,54px); }
.head h2{ margin-top:14px; }
.head .lead{ margin-top:18px; color:var(--text); }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:16px; line-height:1; text-align:center;
  height:56px; padding:0 30px; border-radius:var(--r); border:1.5px solid transparent;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn svg{ flex:none; }
/* Coral de botón con texto blanco: 4,7:1 (el coral de titulares se queda corto) */
.btn--primary{ background:var(--coral-btn); border-color:var(--coral-btn); color:#fff; }
.btn--primary:hover{ background:var(--coral-btn-hi); border-color:var(--coral-btn-hi); }
.btn--dark{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn--dark:hover{ background:var(--navy-2); border-color:var(--navy-2); }
.btn--line{ background:var(--white); border-color:var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:#fff; }
/* Contorno coral sobre crema (el botón del menú) */
.btn--line-navy{ background:transparent; border-color:var(--coral-deep); color:var(--coral-ink); }
.btn--line-navy:hover{ background:var(--coral-btn); border-color:var(--coral-btn); color:#fff; }
.btn--sm{ height:46px; padding:0 22px; font-size:15px; }
.btn--block{ width:100%; }

.dot{ width:8px; height:8px; border-radius:50%; background:var(--coral); flex:none; }

/* ── Revelado ──────────────────────────────────────────────────────────── */
.js [data-reveal]{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ── Accesibilidad ─────────────────────────────────────────────────────── */
.skip{
  position:fixed; left:16px; top:-100px; z-index:200;
  background:var(--navy); color:#fff;
  padding:13px 22px; font-weight:700; border-radius:var(--r);
  transition:top .18s var(--ease);
}
.skip:focus{ top:14px; }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}