/* Salud Vial · saludvial.es
   Hoja de estilos del sitio. Tipografías autoalojadas en /fonts.
   Los tokens de color y tipografía están en :root, al principio. */

/* ---------- tipografías ---------- */

/* Baloo 2 · del kit del cliente (Baloo2-SemiBold/Bold/ExtraBold.ttf, v1.700),
   subconjunto latin + latin-ext. Anchos idénticos a la Baloo 2 v23 de Google. */
@font-face{
  font-family:"Baloo 2";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/baloo2-600.woff2") format("woff2");
}
@font-face{
  font-family:"Baloo 2";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/baloo2-700.woff2") format("woff2");
}
@font-face{
  font-family:"Baloo 2";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("../fonts/baloo2-800.woff2") format("woff2");
}

/* Manrope · descargada de Google Fonts (v20, variable 200–800),
   los mismos ficheros que servía el original. */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/manrope-variable-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/manrope-variable-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */

:root{
  --ink:#23283B;
  --ink-soft:#5B6280;
  /* Azul y turquesa de marca. Solo sobre fondo oscuro: sobre claro no llegan
     al contraste mínimo (el turquesa se queda en 1,9:1 sobre el gris del cuerpo). */
  --blue:#6E93E7;
  --teal:#00C9C6;
  --blue-deep:#1C6CDD;
  --cyan-deep:#007A99;
  --icono-a:#549DE1;
  --icono-b:#1BD1D4;
  --bg:#F3F5F9;
  --white:#FFFFFF;
  --line:#E3E7F1;
  --card:#FFFFFF;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Baloo 2","Manrope",sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
}
p{margin:0; text-wrap:pretty}   /* evita el renglón suelto al final del párrafo */
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
.eyebrow{
  font-family:"Manrope",sans-serif;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-deep);
}

/* header */
header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.headbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.headbar img{height:30px;width:auto}
.call-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cyan-deep); color:#fff;
  font-weight:700; font-size:.92rem;
  padding:10px 18px; border-radius:999px;
  text-decoration:none; white-space:nowrap;
}
/* En pantallas estrechas el logo y el botón no caben juntos en la cabecera:
   desbordaba 39 px a 320, y entre 381 y 384 se tocaban. El corte va en 400 para
   que quede holgura. Va DESPUÉS de .call-btn, que si no, no gana. */
@media (max-width:400px){
  .headbar{gap:10px}
  .headbar img{height:22px}
  .call-btn{font-size:.8rem; padding:9px 12px; gap:6px}
  .call-btn svg{width:14px; height:14px}
}

/* hero */
.hero{
  position:relative;
  display:grid;
  min-height:min(640px,92vh);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(20,26,52,.94) 0%, rgba(20,26,52,.82) 34%, rgba(20,26,52,.32) 62%, rgba(20,26,52,.08) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width:1120px; width:100%; margin:0 auto;
  padding:96px 24px 64px;
  display:flex; flex-direction:column; gap:26px;
  color:#fff;
}
.hero-inner img.logo-hero{height:52px; width:auto; margin-bottom:6px; align-self:flex-start}
.hero-inner h1{
  font-size:clamp(2.1rem, 5.4vw, 3.6rem);
  line-height:1.04;
  max-width:12ch;
}
.hero-inner h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:1.08rem; color:#DCE2F5; max-width:46ch; line-height:1.55;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  font-weight:800; font-size:.98rem; text-decoration:none;
  border:1.5px solid transparent;
}
.btn-primary{background:linear-gradient(90deg,var(--blue),var(--teal)); color:#0b1220}
.btn-ghost{border-color:rgba(255,255,255,.55); color:#fff}
.hero-strip{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:18px;
  font-size:.86rem; color:#C7CFEA;
}

@media (max-width:640px){
  /* 12 px entre filas, 28 a lo ancho: entre 440 y 640 la tira va en dos filas y
     los de la misma fila tienen que seguir separados. */
  .hero-strip{gap:12px 28px}
  .hero-inner{padding-bottom:102px}
}
.hero-strip b{color:#fff; font-family:"Baloo 2"; font-size:1rem}

/* sections */
section{padding-block:84px}
.section-head{max-width:640px; margin-bottom:44px}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.35rem); margin-top:10px}

@media (max-width:700px){
  .section-head h2, #cobertura h2{line-height:1.15}
}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:1.02rem; line-height:1.6}

/* value grid */
.value-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}

@media (max-width:1024px){ .value-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .value-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .value-grid{grid-template-columns:1fr} }
.value-card{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:24px 20px; display:flex; flex-direction:column; gap:14px;
}
.icon-badge{
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), color-mix(in srgb, var(--teal) 10%, transparent));
}

.icon-badge svg{width:24px; height:24px; stroke:url(#degradado-icono)}
.value-card h3{font-size:1.05rem}
.value-card p{color:var(--ink-soft); font-size:.92rem; line-height:1.55}

/* specialization */
.spec-alt{background:var(--card)}
.spec-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
@media (max-width:880px){ .spec-grid{grid-template-columns:1fr} }

.spec-photo{border-radius:24px; align-self:stretch; object-fit:cover; width:100%; height:100%; max-height:460px}
.spec-list{display:flex; flex-direction:column; gap:18px}
.spec-row{
  display:flex; gap:18px; align-items:flex-start;
  padding:20px; border:1px solid var(--line); border-radius:18px;
}
.spec-row .icon-badge{flex:none}

@media (max-width:420px){
  .spec-row{flex-direction:column; gap:12px}
}
.spec-row h3{font-size:1.08rem; margin-bottom:6px}
.spec-row p{color:var(--ink-soft); font-size:.95rem; line-height:1.55}

/* process */
.process-track{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  position:relative;
}
.proc-step{
  position:relative; padding:0 14px 0 0; display:flex; flex-direction:column; gap:10px;
}
.proc-step:not(:last-child)::after{
  content:""; position:absolute; top:23px; left:44px; right:-10px; height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.proc-num{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--icono-a),var(--icono-b)); color:#0B1220;
  font-family:"Baloo 2"; font-weight:800; font-size:1.05rem;
  z-index:1;
}
.proc-step h3{font-size:1rem; margin-top:2px}
.proc-step p{color:var(--ink-soft); font-size:.88rem; line-height:1.5}

.proc-photo{width:100%; border-radius:24px; margin-bottom:44px; max-height:340px; object-fit:cover}

@media (max-width:640px){
  /* El techo de 340 px evita que entre 480 y 640, donde la caja aún es ancha,
     la proporción 4:3 dispare la foto hasta 444 px de alto. */
  .proc-photo, .spec-photo{aspect-ratio:4/3; height:auto; max-height:340px; object-fit:cover}
  .proc-photo{margin-bottom:36px}
}

@media (max-width:880px){
  .process-track{grid-template-columns:repeat(2,1fr); gap:26px 32px}
  .process-track .proc-step:not(:last-child)::after{display:none}
  .proc-step{padding-right:0}
}
@media (max-width:560px){
  .process-track{grid-template-columns:1fr; gap:30px}
  .proc-step{
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:16px; row-gap:6px;
    align-items:start;
  }
  .proc-num{grid-column:1; grid-row:1}
  .proc-step h3{grid-column:2; grid-row:1; align-self:center; margin-top:0}
  .proc-step p{grid-column:2; grid-row:2}
  .process-track .proc-step:not(:last-child)::after{
    display:block; content:"";
    top:54px; left:21px; right:auto; bottom:-36px;
    width:2px; height:auto;
    background:repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
  }
}

/* coverage */
.coverage{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
@media (max-width:820px){ .coverage{grid-template-columns:1fr} }

.mapa{position:relative; width:100%}
/* Con una sola columna el mapa se comía la pantalla (772 px de ancho a 820).
   Se le pone techo y se centra. */
@media (max-width:820px){
  .mapa{max-width:440px; margin-inline:auto}
}
.mapa-base{display:block; width:100%; height:auto}
/* Las marcas se recortan con la silueta del propio mapa, como en el original:
   las que caen sobre la costa quedan cortadas por ella y no sobresalen al mar. */
.mapa-pins{
  position:absolute; inset:0;
  -webkit-mask-image:url("../img/mapa-espana.png"); mask-image:url("../img/mapa-espana.png");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.pin{
  position:absolute;
  width:7.46%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:url("../img/marca-mapa.png") center/contain no-repeat;
}
.stat-tile{
  display:inline-flex; align-items:baseline; gap:14px;
  background:var(--card); border:1px solid var(--line);
  padding:10px 28px 28px; border-radius:20px; margin-top:22px;
}
.stat-tile .num{font-family:"Baloo 2"; font-weight:800; font-size:2.6rem; color:var(--blue-deep); font-variant-numeric:tabular-nums}
.stat-tile .lbl{font-weight:700; font-size:.98rem; line-height:1.25}

/* footer */
footer{
  background:linear-gradient(135deg,var(--blue-deep) 0%, var(--cyan-deep) 100%);
  color:#fff; padding-block:64px 40px;
}
.foot-top{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.28);
}
.foot-top img{height:36px}
.foot-cta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.foot-phone{font-family:"Baloo 2"; font-weight:800; font-size:1.4rem; text-decoration:none; color:#fff}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:26px; font-size:.88rem; color:rgba(255,255,255,.95);
}
.foot-bottom a{text-decoration:none}
.socials{display:flex; gap:12px}
.socials a{
  width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
}
/* En pantalla táctil, todo lo que se pulsa llega a 44 px de alto. El botón de
   teléfono es la conversión de esta web: es el primero que tiene que cumplirlo. */
@media (pointer:coarse){
  .call-btn{min-height:44px}
  .foot-phone{display:inline-flex; align-items:center; min-height:44px}
  .foot-bottom > a{display:inline-flex; align-items:center; min-height:44px}
  .socials a{width:44px; height:44px}
  .socials svg{width:18px; height:18px}
}
.socials svg{width:16px; height:16px; stroke:#fff}

.brand-sub{font-size:.82rem; color:rgba(255,255,255,.95); margin-top:4px}

/* ---------- entradas al hacer scroll ---------- */

html.anim .sube{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
html.anim .sube.dentro{opacity:1; transform:none}

/* Los imagotipos del mapa entran uno detrás de otro, de norte a sur.
   El retardo `--t` lo lleva cada uno en su atributo style. */
html.anim .pin{
  opacity:0;
  transform:translate(-50%,-50%) scale(.55);
  transition:opacity .4s ease-out, transform .45s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--t,0ms);
}
html.anim .pin.dentro{opacity:1; transform:translate(-50%,-50%) scale(1)}

@media (prefers-reduced-motion:reduce){
  html.anim .sube{opacity:1; transform:none; transition:none}
  html.anim .pin{opacity:1; transform:translate(-50%,-50%); transition:none}
}