/* ZEVRA — hoja de estilos del sitio
   Se escribe primero para celular (el 95 % de las visitas) y después se amplía.
   Colores y reglas: Manual de Imagen Corporativo de Zevra.
   Antes de cambiar algo, ver el documento "Zevra · Decisiones del sitio web". */

@font-face{font-family:'Krona One';src:url('../fonts/krona-one.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}

:root{
  /* Manual de marca */
  --negro:#0C0E14;
  --verde:#79C956;
  --turquesa:#23AD98;
  --gris:#BFBDBD;
  --blanco:#FFFFFF;
  /* Derivados del negro de marca, solo para superficies */
  --panel:#141821;
  --panel-2:#1B202B;
  --linea:rgba(191,189,189,.16);
  --linea-fuerte:rgba(191,189,189,.32);
  --degradado:linear-gradient(45deg,var(--verde) 12%,var(--turquesa) 88%);

  --titulos:'Krona One','Arial Black',sans-serif;
  --texto:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ancho:1180px;
  --margen:20px;
  --r-s:12px;
  --r-m:20px;
  --r-pastilla:999px;
  --alto-acciones:72px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--texto);font-size:16px;line-height:1.6;color:var(--gris);background:var(--negro);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(var(--alto-acciones) + env(safe-area-inset-bottom))}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:6px}
.salto{position:absolute;left:12px;top:-60px;background:var(--verde);color:var(--negro);padding:10px 16px;border-radius:var(--r-s);z-index:100;font-weight:700}
.salto:focus{top:12px}
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--titulos);font-weight:400;letter-spacing:-.01em;color:var(--blanco);line-height:1.14;text-wrap:balance}
h1{font-size:clamp(1.62rem,7.4vw,3.35rem)}
h2{font-size:clamp(1.3rem,5.6vw,2.2rem)}
h3{font-size:1rem;line-height:1.3}
p{max-width:62ch}
strong{color:var(--blanco);font-weight:600}
.entrada{font-size:1.03rem}

.contenedor{width:100%;max-width:calc(var(--ancho) + 2*var(--margen));margin-inline:auto;padding-inline:var(--margen)}
.seccion{padding-block:52px}
.seccion--panel{background:var(--panel)}
.cabecera-seccion{margin-bottom:26px}
.cabecera-seccion p{margin-top:10px}

/* ── Botones: mínimo 48 px de alto para el dedo ── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:var(--r-pastilla);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .15s ease,border-color .15s ease}
.boton--principal{background:var(--verde);color:var(--negro)}
.boton--principal:hover{background:#8bd66a}
.boton--linea{border:1.5px solid var(--linea-fuerte);color:var(--blanco)}
.boton--linea:hover{border-color:var(--turquesa)}
.boton--ancho{width:100%}
.botones{display:flex;flex-direction:column;gap:12px}
.portada__fila .botones{margin-top:16px}
.portada__fila .botones .boton--linea{display:none}
.portada > .contenedor > .botones .boton--linea{display:inline-flex}
.cta{margin-top:26px}
.enlace-texto{color:var(--verde);font-weight:600}
.enlace{display:inline-block;padding:12px 0;font-weight:700;color:var(--verde);text-decoration:none}
.enlace:hover{text-decoration:underline}

/* ── Barra superior ── */
.barra{position:sticky;top:0;z-index:50;background:rgba(12,14,20,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.barra.con-borde{border-bottom-color:var(--linea)}
.barra__fila{display:flex;align-items:center;gap:6px;min-height:60px}
.barra__marca{display:flex;align-items:center;flex:none;padding:6px;margin:0 auto 0 -6px}
.barra__marca img{width:34px;height:34px}
.barra .boton{display:none}
.idioma{display:grid;place-items:center;min-width:48px;height:48px;font-weight:700;font-size:.9rem;color:var(--blanco);text-decoration:none;border-radius:var(--r-s)}
.idioma svg{width:28px;height:20px;border-radius:4px;box-shadow:0 0 0 1px var(--linea-fuerte)}
.menu-boton{display:flex;margin-right:-10px;width:48px;height:48px;border-radius:var(--r-s);align-items:center;justify-content:center}
.menu-boton span{display:block;width:22px;height:2px;background:var(--blanco);border-radius:2px;box-shadow:0 7px 0 var(--blanco),0 -7px 0 var(--blanco)}
.menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;list-style:none;padding:6px var(--margen) 18px;background:var(--negro);border-bottom:1px solid var(--linea)}
.menu.abierto{display:flex}
.menu a{display:block;padding:15px 8px;font-size:1.08rem;font-weight:500;text-decoration:none;color:var(--blanco);border-bottom:1px solid var(--linea)}
.menu li:last-child a{border-bottom:0}

/* ── Portada ── */
.portada{padding-block:18px 40px}
.portada h1{margin:6px 0 10px}
.miga{font-size:.85rem;margin-bottom:8px}
.miga a{color:var(--gris)}

/* Foto con rótulo */
.foto{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--panel)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:var(--r-pastilla);background:rgba(12,14,20,.78);color:var(--blanco);font-size:.74rem}
.foto--portada{margin-top:16px;aspect-ratio:16/10}
.foto--equipo{aspect-ratio:auto;height:300px;margin-top:18px;background:var(--panel);display:grid;place-items:end center}
.foto--equipo::before{content:"";position:absolute;left:-10%;bottom:-30%;width:130%;height:52%;border-radius:var(--r-pastilla);background:var(--degradado);transform-origin:left center;transform:rotate(-24deg)}
.foto--equipo img{position:relative;width:auto;height:94%;object-fit:contain}

/* ── Datos rápidos ── */
.datos{display:grid;grid-template-columns:1fr 1fr;margin-top:8px;border-bottom:1px solid var(--linea)}
.datos div{padding:14px 0}
.datos div:nth-child(even){padding-left:14px;border-left:1px solid var(--linea)}
.datos dt{font-size:.82rem;margin-bottom:2px}
.datos dd{font-family:var(--titulos);color:var(--blanco);font-size:1.05rem;line-height:1.25}
.datos dd small{display:block;font-family:var(--texto);font-size:.8rem;color:var(--gris);margin-top:3px;line-height:1.35}

/* Preguntas respondidas dentro de la portada */
.respuestas{display:grid;gap:16px;padding:18px 0 4px}
.respuestas h2{font-family:var(--texto);font-weight:700;font-size:1.02rem;letter-spacing:0;line-height:1.35;margin-bottom:2px}
.respuestas p{font-size:.97rem}
.portada .boton--ancho{margin-top:16px}

/* ── Pasos: línea de tiempo vertical en celular ── */
.pasos{list-style:none;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative;padding:0 0 26px 54px}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:-4px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--verde);color:var(--negro);font-weight:800;font-size:.95rem;z-index:1}
.pasos li::after{content:"";position:absolute;left:17px;top:0;bottom:0;width:2px;background:var(--linea-fuerte)}
.pasos li:last-child{padding-bottom:0}
.pasos li:last-child::after{display:none}
.pasos h3{margin-bottom:4px}
.pasos p{font-size:.96rem}
.nota{margin-top:28px;padding:18px 20px;border-radius:var(--r-m);background:var(--negro);border:1px solid var(--linea)}
.seccion:not(.seccion--panel) .nota{background:var(--panel)}

/* ── Estaciones ── */
.estaciones{display:grid;gap:16px}
.estacion{display:flex;flex-direction:column;border-radius:var(--r-m);border:1px solid var(--linea);background:var(--panel);text-decoration:none;overflow:hidden}
.seccion--panel .estacion{background:var(--negro)}
.estacion .foto{border-radius:0;aspect-ratio:16/10}
.estacion__cuerpo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px}
.estacion__pie{margin-top:6px;font-weight:700;color:var(--verde)}
.estacion--pronto{border-style:dashed}
.estacion ul,.fichas{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.estacion ul li,.fichas li{padding:5px 12px;border-radius:var(--r-pastilla);background:var(--panel-2);font-size:.84rem;color:var(--blanco)}
.estado{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pastilla);font-size:.82rem;font-weight:600;color:var(--blanco);background:var(--panel-2);border:1px solid var(--linea)}
.estado::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:2px solid var(--gris)}
.estado--cerca{background:var(--verde);color:var(--negro);border-color:var(--verde)}
.estado--cerca::before{border-color:var(--negro);background:var(--negro)}

/* ── Mapa de sedes ── */
.mapa{margin-top:22px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--linea);padding:10px}
.mapa svg{width:100%;max-height:62vh;margin-inline:auto}
.mapa__pais{fill:var(--panel-2);stroke:var(--linea-fuerte);stroke-width:1.2;stroke-linejoin:round}
.mapa__punto{fill:var(--verde);stroke:var(--negro);stroke-width:3}
.mapa__punto--pronto{fill:var(--negro);stroke:var(--gris);stroke-width:3}
.mapa__halo{fill:var(--verde);opacity:.22}
.mapa__yo{fill:var(--blanco);stroke:var(--turquesa);stroke-width:4}
.mapa text{font-family:var(--texto);font-size:23px;font-weight:600;fill:var(--blanco)}
.mapa text.suave{font-weight:400;font-size:18px;fill:var(--gris)}
.aviso{min-height:1.6em;margin-top:12px;font-size:.95rem;color:var(--blanco)}
.sedes{display:grid;gap:16px;margin-top:22px}
.sede{padding:20px;border-radius:var(--r-m);border:1px solid var(--linea);background:var(--panel);display:grid;gap:10px}
.sede--cerca{border-color:var(--verde)}
.sede__dist{font-weight:600;color:var(--verde)}
.sede .botones{margin-top:6px}

/* ── Aliados ── */
.aliados__fila,.dos{display:grid;gap:36px}
.lista{list-style:none;display:grid;gap:14px;margin:20px 0 24px}
.lista li{position:relative;padding-left:30px}
.lista li::before{content:"";position:absolute;left:0;top:.5em;width:16px;height:8px;border-radius:var(--r-pastilla);background:var(--degradado);transform:rotate(-45deg)}
.reparto{display:grid;gap:16px}
.reparto > div{padding:22px 20px;border-radius:var(--r-m);border:1px solid var(--linea);background:var(--negro)}
.reparto > div:last-child{border-color:var(--turquesa)}
.reparto h3{margin-bottom:6px}
.reparto .lista{margin:14px 0 0}
.cifras{border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;background:var(--panel)}
.seccion--panel .cifras{background:var(--negro)}
.cifras div{padding:18px;border-bottom:1px solid var(--linea)}
.cifras div:last-child{border-bottom:0}
.cifras b{display:block;font-family:var(--titulos);font-weight:400;font-size:1.5rem;line-height:1.1;background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.cifras span{display:block;font-size:.95rem;color:var(--blanco);line-height:1.45}
.cifras small{display:block;margin-top:6px;font-size:.78rem}

/* ── Preguntas ── */
.preguntas{max-width:820px}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;cursor:pointer;list-style:none;font-weight:600;color:var(--blanco);font-size:1.02rem}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(45deg);margin-right:6px}
.pregunta[open] summary::after{transform:rotate(-135deg)}
.pregunta p{padding:0 0 20px}

/* ── Tabla de la estación y textos legales ── */
.tabla{width:100%;border-collapse:collapse}
.tabla th,.tabla td{text-align:left;padding:14px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{width:40%;font-weight:500;padding-right:14px}
.tabla td{color:var(--blanco);font-weight:500}
.tabla td small{display:block;font-weight:400;color:var(--gris);font-size:.86rem;margin-top:2px}
.dos .foto{aspect-ratio:3/2}
.legal{max-width:760px}
.legal h2{font-family:var(--texto);font-weight:700;letter-spacing:0;font-size:1.15rem;margin:30px 0 8px}
.legal p,.legal li{margin-bottom:10px}
.legal ul,.legal ol{padding-left:20px}
.legal .tabla{margin:14px 0 18px}
.legal .tabla th{width:auto}
.tabla thead th{color:var(--blanco);font-weight:600}
.legal .boton{margin-top:8px}
.legal a:not(.boton):not(.enlace){color:var(--verde)}

/* ── Llamado final y pie ── */
.cierre{background:var(--degradado);color:var(--negro)}
.cierre h2{color:var(--negro)}
.cierre p{color:var(--negro);margin:12px 0 22px;font-weight:500;max-width:none}
.cierre .boton{background:var(--negro);color:var(--blanco);width:100%}
.pie{padding-block:40px 28px;border-top:1px solid var(--linea);font-size:.93rem}
.pie__fila{display:grid;gap:28px}
.pie__logo{width:168px;margin:0 0 10px -16px;padding:16px}
.pie h3{font-family:var(--texto);font-weight:700;letter-spacing:0;font-size:.95rem;margin-bottom:6px}
.pie ul{list-style:none}
.pie li a{display:block;padding:9px 0;text-decoration:none}
.pie__legal{max-width:none;margin-top:28px;padding-top:18px;border-top:1px solid var(--linea);font-size:.84rem}
.pie__legal a{display:inline-block;padding:8px 0}

/* ── Barra fija de acciones: siempre al alcance del pulgar ── */
.acciones{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1.25fr 1fr;gap:10px;padding:10px var(--margen) calc(10px + env(safe-area-inset-bottom));background:rgba(12,14,20,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linea)}
.acciones--una{grid-template-columns:1fr}
.acciones .boton{min-height:52px;padding:10px 12px}

/* ════ Pantallas más anchas ════ */
@media (min-width:700px){
  :root{--margen:32px}
  body{font-size:17px}
  .seccion{padding-block:72px}
  .botones{flex-direction:row;flex-wrap:wrap}
  .estaciones,.sedes,.reparto{grid-template-columns:1fr 1fr;align-items:start}
  .respuestas{grid-template-columns:1fr 1fr;gap:28px}
  .pasos{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px}
  .pasos li{padding-bottom:0}
  .pasos li::after{display:none}
  .cifras{display:grid;grid-template-columns:1fr 1fr}
  .cifras div{border-right:1px solid var(--linea)}
  .cifras div:nth-child(even){border-right:0}
  .cifras div:nth-last-child(-n+2){border-bottom:0}
  .pie__fila{grid-template-columns:1.3fr 1fr 1fr}
  .cierre .boton,.boton--ancho{width:auto}
  .foto--equipo{height:380px}
}
@media (min-width:1000px){
  :root{--margen:48px;--alto-acciones:0px}
  html{scroll-padding-top:90px}
  .acciones{display:none}
  .seccion{padding-block:104px}
  .cabecera-seccion{margin-bottom:44px}
  h3{font-size:1.1rem}
  .entrada{font-size:1.18rem}
  .barra__fila{min-height:72px;gap:16px}
  .barra__marca{margin-right:0}
  .barra__marca img{width:38px;height:38px}
  .menu-boton{display:none}
  .menu{display:flex;position:static;flex-direction:row;align-items:center;gap:4px;margin-left:auto;padding:0;background:none;border:0;order:2}
  .menu a{padding:10px 14px;border:0;border-radius:var(--r-pastilla);font-size:.95rem;color:var(--gris)}
  .menu a:hover,.menu a[aria-current="page"]{color:var(--blanco);background:var(--panel-2)}
  .idioma{order:3}
  .barra .boton{display:inline-flex;order:4;min-height:44px;padding:10px 20px;font-size:.95rem}
  .portada{padding-block:56px 72px}
  .portada__fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .portada h1{margin:0 0 20px}
  .portada__fila .botones{margin-top:26px}
  .portada__fila .botones .boton--linea{display:inline-flex}
  .foto--portada,.foto--equipo{margin-top:0}
  .foto--equipo{height:460px}
  .datos{margin-top:44px}
  .datos div{padding:22px 0}
  .datos div:nth-child(even){padding-left:28px}
  .datos dd{font-size:1.3rem}
  .respuestas{padding-top:28px}
  .pasos{grid-template-columns:repeat(4,1fr);gap:0}
  .pasos li{padding:30px 24px 0 0;border-top:2px solid var(--linea-fuerte)}
  .pasos li::before{top:-19px}
  .aliados__fila{grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .dos{grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
  .mapa__fila{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
  .sedes{grid-template-columns:1fr;margin-top:0}
  .mapa{margin-top:0}
  .tabla th,.tabla td{padding:16px 0}
  .pie{padding-block:56px 40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}