/* ==========================================================================
   Europax Alfasur — hoja de estilos única
   Diseño: Oballe Studio Web · oballestudio.com
   Concepto: "la banda térmica" (de −18 °C a la mesa)
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  --camara:#0B1B26;      /* azul cámara, casi negro */
  --acero:#16303F;       /* superficie oscura secundaria */
  --escarcha:#8FBCD1;    /* azul frío de acento */
  --hielo:#EDF3F6;       /* fondo claro */
  --nieve:#FFFFFF;
  --linea:#D3DFE6;
  --texto:#12242E;
  --texto-suave:#4F6672;
  --horno:#E85B14;       /* naranja señal: CTA y extremo caliente */
  --horno-osc:#C24509;

  --f-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --f-texto:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-dato:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --ancho:1180px;
  --r:4px;
  --paso:clamp(3.5rem,7vw,6.5rem);
  --alto-cab:67px;
}

/* --- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--nieve);color:var(--texto);
  font-family:var(--f-texto);font-size:1.0625rem;line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--texto);text-decoration-color:var(--escarcha);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--horno)}
:focus-visible{outline:3px solid var(--horno);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.6vw,4.2rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.015em}
p{margin:0 0 1.1em;max-width:68ch}
ul,ol{max-width:68ch}
.env{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:1rem;top:1rem;z-index:99;background:var(--horno);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r)}

/* --- 3. Etiqueta mono (vernáculo del sector) ---------------------------- */
.dato{font-family:var(--f-dato);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.rotulo{display:inline-flex;align-items:center;gap:.55rem;color:var(--texto-suave);margin-bottom:1.1rem}
.rotulo::before{content:"";width:26px;height:2px;background:var(--horno)}
section.oscuro .rotulo{color:var(--escarcha)}

/* --- 4. Banda térmica: el elemento firma -------------------------------- */
.banda{position:relative;height:3px;width:100%;
  background:linear-gradient(90deg,#2E6E8E 0%,#6FA8C2 22%,#D9E4EA 46%,#F2B47A 70%,var(--horno) 100%)}
.banda--escala{height:auto;background:none;display:flex;align-items:center;gap:0;margin:2.2rem 0 0}
.banda--escala .riel{flex:1;height:3px;
  background:linear-gradient(90deg,#2E6E8E 0%,#6FA8C2 22%,#D9E4EA 46%,#F2B47A 70%,var(--horno) 100%)}
.escala{display:flex;justify-content:space-between;margin-top:.55rem;color:var(--escarcha)}
.escala span:last-child{color:#F2B47A}

/* --- 5. Cabecera -------------------------------------------------------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(11,27,38,.97);backdrop-filter:blur(8px);color:#fff}
.cabecera a{color:#fff;text-decoration:none}
.cab-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.marca{display:flex;align-items:center;gap:.75rem;font-family:var(--f-display);font-weight:800;
  font-size:1.15rem;letter-spacing:-.03em;line-height:1.05}
.marca img{height:42px;width:auto;flex:none}
.marca small{display:block;font-family:var(--f-dato);font-size:.6rem;font-weight:400;letter-spacing:.16em;color:var(--escarcha);text-transform:uppercase;margin-top:.2rem}
@media(max-width:420px){
  .marca .marca-texto{display:none}
  .marca img{height:38px}
}
.pie-logo{height:56px;width:auto;margin-bottom:1rem}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-size:.95rem;opacity:.88}
.nav a:hover,.nav a[aria-current]{opacity:1;color:var(--escarcha)}
.desplegable{position:relative}
.disparador{display:inline-flex;gap:.35rem;align-items:center;font-size:.95rem;opacity:.88;
  cursor:pointer;text-decoration:none;background:none;border:0;font-family:var(--f-texto);color:inherit;padding:0}
.disparador:hover,.disparador:focus-visible{opacity:1;color:var(--escarcha)}
.disparador .flecha{transition:transform .18s ease;font-size:.75em}
.desplegable:hover .flecha,.desplegable:focus-within .flecha{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + .8rem);left:-1rem;min-width:250px;background:var(--nieve);
  border:1px solid var(--linea);border-radius:var(--r);padding:.5rem;display:none;box-shadow:0 18px 40px rgba(11,27,38,.22)}
/* Puente invisible: cubre el hueco entre el enlace y el panel para que el menú
   no se cierre al bajar el ratón. Era la causa de que no se pudiera pinchar. */
.menu::before{content:"";position:absolute;left:0;right:0;top:-1rem;height:1rem}
.desplegable:hover>.menu,
.desplegable:focus-within>.menu,
.menu[data-abierto]{display:block}
.menu a{display:block;color:var(--texto);padding:.5rem .7rem;font-size:.93rem;border-radius:3px}
.menu a:hover{background:var(--hielo);color:var(--horno)}
.btn-menu{all:unset;display:none;cursor:pointer;padding:.5rem;color:#fff;-webkit-tap-highlight-color:transparent}
.btn-menu svg{display:block}

/* --- 6. Botones --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-texto);font-weight:600;font-size:.98rem;
  padding:.85rem 1.5rem;border-radius:var(--r);text-decoration:none;border:2px solid transparent;transition:.18s}
.btn--fuego{background:var(--horno);color:#fff}
.btn--fuego:hover{background:var(--horno-osc);color:#fff}
.btn--linea{color:inherit;border-color:currentColor;background:transparent}
.btn--linea:hover,.btn--linea:focus-visible{border-color:var(--horno);color:var(--horno)}
.portada .btn--linea:hover,section.oscuro .btn--linea:hover{background:rgba(255,255,255,.06)}
.btn--oscuro{background:var(--camara);color:#fff}
.btn--oscuro:hover{background:var(--acero);color:#fff}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* --- 7. Secciones ------------------------------------------------------- */
section{padding:var(--paso) 0}
section.claro{background:var(--hielo)}
section.oscuro{background:var(--camara);color:#fff}
section.oscuro a{color:#fff}
section.oscuro p{color:#C9D8E0}
.compacta{padding-block:calc(var(--paso) * .6)}

/* --- 8. Portada --------------------------------------------------------- */
.portada{background:var(--camara);color:#fff;padding:clamp(3.5rem,8vw,6rem) 0 0;position:relative;overflow:hidden}
.portada::after{content:"";position:absolute;inset:auto -10% -30% auto;width:60vw;height:60vw;max-width:620px;max-height:620px;
  background:radial-gradient(circle,rgba(143,188,209,.16),transparent 65%);pointer-events:none}
.portada-rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:end;position:relative;z-index:1}
.portada h1{margin-bottom:1rem}
.portada h1 em{font-style:normal;color:var(--escarcha)}
.entradilla{font-size:clamp(1.05rem,1.6vw,1.22rem);color:#C9D8E0;max-width:52ch}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;border-top:1px solid rgba(143,188,209,.28);padding-top:1.6rem;margin-top:2.6rem}
.cifra b{display:block;font-family:var(--f-display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.cifra span{color:var(--escarcha);display:block;margin-top:.45rem}
.ficha-frio{background:var(--acero);border:1px solid rgba(143,188,209,.22);border-radius:var(--r);padding:1.6rem 1.5rem}
.ficha-frio dl{margin:0;display:grid;gap:.9rem}
.ficha-frio dt{color:var(--escarcha);margin-bottom:.15rem}
.ficha-frio dd{margin:0;font-weight:600;font-size:1.02rem}
.portada-pie{margin-top:clamp(2.5rem,5vw,3.5rem);padding-bottom:2rem}

/* --- 9. Rejillas y tarjetas -------------------------------------------- */
.rejilla{display:grid;gap:1.4rem}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.encabezado-seccion{max-width:60ch;margin-bottom:2.6rem}
.encabezado-seccion p{color:var(--texto-suave)}

.tarjeta{background:var(--nieve);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;position:relative}
.tarjeta:hover{border-color:var(--camara);transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,27,38,.09)}
.tarjeta img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--hielo)}
.tarjeta-cuerpo{padding:1.15rem 1.25rem 1.4rem;display:flex;flex-direction:column;flex:1}
.tarjeta h3{margin-bottom:.4rem}
.tarjeta p{font-size:.95rem;color:var(--texto-suave);margin-bottom:1rem}
.tarjeta-pie{margin-top:auto}
.tarjeta a.cubre::after{content:"";position:absolute;inset:0}
.enlace-flecha{font-weight:600;font-size:.95rem;text-decoration:none;display:inline-flex;gap:.4rem;color:var(--horno)}
.enlace-flecha:hover{gap:.7rem}

.marca-tarjeta{background:var(--nieve);border:1px solid var(--linea);border-radius:var(--r);padding:1.2rem;display:flex;
  flex-direction:column;gap:.5rem}
.marca-tarjeta img{height:56px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:.2s}
.marca-tarjeta:hover img{filter:none;opacity:1}
.marca-tarjeta strong{font-size:.95rem}
.marca-tarjeta span{font-size:.85rem;color:var(--texto-suave)}

/* --- 10. Proceso (secuencia real, por eso va numerado) ------------------ */
.proceso{counter-reset:paso;display:grid;gap:1.4rem;grid-template-columns:repeat(4,1fr)}
.proceso li{list-style:none;border-top:2px solid var(--camara);padding-top:1rem}
.proceso li::before{counter-increment:paso;content:"0" counter(paso);display:block;
  font-family:var(--f-dato);font-size:.72rem;letter-spacing:.14em;color:var(--horno);margin-bottom:.6rem}
section.oscuro .proceso li{border-top-color:var(--escarcha)}
.proceso h3{font-size:1.08rem;margin-bottom:.35rem}
.proceso p{font-size:.95rem;margin:0}

/* --- 11. Tablas de datos ------------------------------------------------ */
.tabla-envoltorio{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--nieve)}
caption{text-align:left;padding:.9rem 1rem;font-family:var(--f-dato);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-suave);border-bottom:1px solid var(--linea)}
th,td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{background:var(--hielo);font-family:var(--f-dato);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
tbody tr:last-child td{border-bottom:0}

/* --- 12. Preguntas frecuentes ------------------------------------------ */
.faq{border-top:1px solid var(--linea);max-width:80ch}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;font-family:var(--f-display);font-weight:700;
  font-size:1.08rem;letter-spacing:-.015em;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--f-dato);font-size:1.3rem;color:var(--horno)}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding-bottom:1.2rem}
.faq p{margin-bottom:.7rem}

/* --- 13. Zonas de reparto ---------------------------------------------- */
.zonas{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;max-width:none}
.zonas li a,.zonas li span{display:inline-block;border:1px solid var(--linea);border-radius:100px;
  padding:.35rem .9rem;font-size:.9rem;text-decoration:none;background:var(--nieve)}
.zonas li a:hover{border-color:var(--horno);color:var(--horno)}

/* --- 14. Formulario ----------------------------------------------------- */
form{max-width:640px}
.campo{margin-bottom:1.1rem}
label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.35rem}
input,select,textarea{width:100%;font-family:inherit;font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--nieve);color:var(--texto)}
input:focus,select:focus,textarea:focus{border-color:var(--camara)}
.ayuda{font-size:.85rem;color:var(--texto-suave)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem}
.consent input{width:auto;margin-top:.25rem}
button.btn{cursor:pointer;font-size:1rem}

/* --- 15. Miga de pan ---------------------------------------------------- */
.miga{padding:.9rem 0;border-bottom:1px solid var(--linea);background:var(--nieve)}
.miga ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;font-size:.85rem;color:var(--texto-suave);max-width:none}
.miga li+li::before{content:"/";margin-right:.5rem;color:var(--linea)}
.miga a{text-decoration:none;color:var(--texto-suave)}
.miga a:hover{color:var(--horno)}

/* --- 16. Llamada final -------------------------------------------------- */
.cta-final{background:var(--camara);color:#fff;border-radius:var(--r);padding:clamp(2rem,5vw,3.4rem);
  display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.cta-final h2{margin-bottom:.6rem}
.cta-final p{color:#C9D8E0;margin:0}
.cta-final .acciones{margin-top:0;justify-content:flex-end}

/* --- 17. Pie ------------------------------------------------------------ */
.pie{background:var(--camara);color:#C9D8E0;padding:var(--paso) 0 2rem;font-size:.94rem}
.pie a{color:#C9D8E0;text-decoration:none}
.pie a:hover{color:var(--horno)}
.pie h3{color:#fff;font-size:.95rem;font-family:var(--f-dato);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.5rem}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.pie-legal{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(143,188,209,.2);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem}
.pie-legal nav{display:flex;flex-wrap:wrap;gap:1.2rem}

/* --- 18. Movimiento ----------------------------------------------------- */
.aparece{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .aparece{opacity:1;transform:none}
}

/* --- 19. Adaptación ----------------------------------------------------- */
@media(max-width:960px){
  .portada-rejilla{grid-template-columns:1fr}
  .r4{grid-template-columns:repeat(2,1fr)}
  .proceso{grid-template-columns:repeat(2,1fr)}
  .pie-rejilla{grid-template-columns:repeat(2,1fr)}
  .cta-final{grid-template-columns:1fr}
  .cta-final .acciones{justify-content:flex-start}
}
@media(max-width:760px){
  .btn-menu{display:block}
  .nav{position:fixed;inset:var(--alto-cab) 0 auto 0;background:var(--camara);flex-direction:column;align-items:flex-start;
    gap:.2rem;padding:1.2rem 1.25rem 2rem;border-top:1px solid rgba(143,188,209,.2);
    transform:translateX(-102%);transition:transform .28s ease;
    height:calc(100dvh - var(--alto-cab));overflow-y:auto}
  .nav[data-abierto]{transform:translateX(0)}
  .nav>*{width:100%;padding:.6rem 0}
  .desplegable{width:100%}
  .disparador{width:100%;justify-content:space-between;padding:.6rem 0}
  .menu{position:static;background:transparent;border:0;box-shadow:none;
    padding:.2rem 0 .6rem .9rem;min-width:0;border-left:2px solid rgba(143,188,209,.3);margin-left:.1rem}
  .menu::before{display:none}
  .menu a{color:#C9D8E0;padding:.45rem 0}
  .menu a:hover{background:none}
  /* En táctil el hover no existe: el panel solo se abre al pulsar */
  .desplegable:hover>.menu,.desplegable:focus-within>.menu{display:none}
  .menu[data-abierto]{display:block}
  .r2,.r3,.r4{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr;gap:1.1rem}
  .proceso{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr}
}
@media print{.cabecera,.pie,.acciones{display:none}}