/* ZeelandFix — CSS base (todas las páginas). Paleta fija, sin excepciones. */
/* Variables de marca CANÓNICAS — definidas aquí porque zf-base.css carga en TODAS las páginas
   sin excepción. Antes estaban dispersas (un :root{} vacío en zf-home.css, duplicadas en
   zf-reparatie.css) — eso provocaba que secciones como Kit/Stand "tomaran prestadas" las
   variables de reparatie.css solo porque casualmente cargaba en portada, y se rompían en
   cualquier contexto donde ese archivo no estuviera presente (como en un preview aislado). */
:root{
  --navy:#1A2E5A; --navy2:#243B73; --lime:#39C700; --lime2:#2EA800;
  --cyan:#0095FF; --white:#fff; --offwhite:#F5F8FF;
  --gray:#5A6475; --ink:#5A6475; --border:#D8E3F0; --line:#D8E3F0;
  --red:#CC0000; --orange:#FF6B00; --gold:#FFD600;
  --shadow:0 8px 32px rgba(26,46,90,.12);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Nunito',sans-serif;background:#ffffff;color:#1A2E5A;
  /* Regla del proyecto: "no se puede copiar y pegar nada de la web". Aplicada aquí, en el
     body de zf-base.css (que carga en TODAS las páginas sin excepción, presentes y futuras),
     en vez de repetirla sección por sección — así ninguna página nueva puede quedarse sin
     esta protección por descuido. Los campos de formulario (input/textarea) se excluyen
     abajo para que el cliente pueda seguir escribiendo su nombre, dirección, etc. */
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
}
input, textarea, select, [contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text;}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* ── Header ── */
/* La cabecera (logo, menú, banner de club) se gestiona íntegramente en assets/css/zf-header.css.
   Aquí ya no quedan reglas de .zf-site-header/.zf-logo/.zf-nav para evitar conflictos de cascada
   como el que forzaba el logo a 40px con !important. */

/* ── Contenido ── */
.zf-main{max-width:1180px;margin:0 auto;padding:24px 20px 40px;min-height:50vh;}
/* En la portada, cada sección ya gestiona su propio espaciado (80px arriba/abajo) con la
   técnica de ancho completo — el padding de .zf-main aquí sobra y dejaba un hueco de 40px
   justo antes del footer. Se quita SOLO en portada; el resto de páginas (FAQ, Legal, Over...)
   sí lo siguen necesitando, así que no se toca ahí. */
body.home .zf-main{padding:0;max-width:100%;min-height:0;}
.zf-page-article h1{font-family:'Righteous',cursive;font-size:28px;color:#1A2E5A;margin-bottom:16px;}

/* ── Footer — todo centrado dentro de cada columna, en cualquier tamaño de pantalla ── */
.zf-site-footer{background:linear-gradient(120deg,#ffffff 0%,#B8ECA0 50%,#B3DFFF 100%);color:rgba(26,46,90,.85);margin-top:0;}

/* Banda de silueta de Zeeland — sin fondo propio (transparente), así el degradado del
   footer se ve directamente detrás; el SVG trae su propio blanco solo para el "cielo",
   hasta la línea de suelo. Ningún hueco de color entre la silueta y el resto del footer. */
.footer-skyline{width:100%;height:100px;overflow:hidden;display:block;line-height:0;background:#ffffff;}
.footer-skyline svg{width:100%;height:100%;display:block;}

.zf-footer-main{max-width:1280px;margin:0 auto;padding:40px 24px 40px;display:grid;grid-template-columns:1.15fr .85fr 1.15fr .95fr;gap:32px;border-bottom:1px solid rgba(26,46,90,.18);align-items:start;}
/* Las columnas 2, 3 y 4 bajan su contenido para que el título quede aprox. a la altura
   del cuerpo del logo (mucho más grande ahora, 260x192px), no pegado arriba del todo. */
.zf-footer-col:not(.zf-footer-brand){padding-top:58px;}
.zf-footer-col{display:flex;flex-direction:column;align-items:center;text-align:center;}
.zf-footer-col:not(.zf-footer-brand){padding-top:58px;}
.zf-footer-col h3{font-size:12px;color:#1A2E5A;font-weight:900;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px;}
.zf-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:10px;}
.zf-footer-col ul li{text-align:center;}
.zf-footer-col ul li a{color:rgba(26,46,90,.85);text-decoration:none;font-size:13px;font-weight:700;transition:color .2s;}
.zf-footer-col ul li a:hover{color:#fff;}
.zf-footer-contact li{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;color:rgba(26,46,90,.85);text-align:left;}
.zf-footer-contact li i{color:#1A2E5A;font-size:14px;flex-shrink:0;}
.zf-footer-contact li a{color:inherit;text-decoration:none;}
.zf-footer-contact li a:hover{color:#fff;}

/* Logo: bien grande, sin franja redundante (el fondo del footer ya es el azul claro) */
.zf-site-footer .zf-footer-brand .zf-footer-logo{display:block;height:140px!important;max-height:140px!important;width:189px!important;max-width:189px!important;margin:0 auto 14px;-webkit-user-drag:none;object-fit:contain;}
.zf-footer-tagline{font-size:13px;line-height:1.6;color:rgba(26,46,90,.7);font-weight:700;max-width:280px;margin:0 auto 18px;text-align:center;}
.zf-footer-social{display:flex;justify-content:center;gap:10px;}
.zf-footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(26,46,90,.1);border:1px solid rgba(26,46,90,.25);color:#1A2E5A;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:.2s;flex-shrink:0;}
.zf-footer-social a:hover{background:#1A2E5A;border-color:#1A2E5A;color:#fff;}

@media(max-width:860px){
  .zf-footer-main{grid-template-columns:1fr 1fr;}
  .zf-footer-col:not(.zf-footer-brand){padding-top:0;}
}
@media(max-width:560px){
  .zf-footer-main{grid-template-columns:1fr;}
}

.zf-site-footer-inner{max-width:1180px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;font-weight:700;color:rgba(26,46,90,.7);}
.zf-footer-list{list-style:none;display:flex;gap:14px;margin:0;padding:0;}
.zf-footer-list a{color:rgba(26,46,90,.7);text-decoration:none;}
.zf-footer-list a:hover{color:#39C700;}

/* ── Responsive del footer (mobile-first, exigido en el proyecto) ── */
@media(max-width:768px){
  .zf-site-footer-inner{text-align:center;justify-content:center;}
}

/* ── Título de sección compartido (usado por Servicios, Reparatie y futuras secciones) ── */
.sec-intro{max-width:640px;margin:0 0 32px;padding:0 0 0 28px;text-align:left;}
.sec-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:#2EA800;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
.sec-eyebrow::before{content:'';width:24px;height:2px;background:#39C700;}
.sec-title{font-family:'Righteous',cursive;font-size:clamp(26px,3.6vw,40px);color:#1A2E5A;margin:0 0 12px;line-height:1.1;}
.sec-sub{font-size:15px;color:#5A6475;font-weight:700;line-height:1.6;margin:0;}