/* =============================================================================
   WaterProof WEB — Componentes del design system.
   Se puebla POR LOTES a medida que se portan del Figma "WaterProof WEB":
   átomos (button, input, badge, pill, radio, check…) → moléculas (dropdown,
   nav-bar, tabs, accordion, pagination) → cards y layout (footer, sponsors…).
   Cada componente referencia tokens de tokens.css.
   ========================================================================== */

/* --- data-list-inline -------------------------------------------------------
   Primer componente confirmado (barra de estadísticas sobre navy). */
.wp-datalist {
  display:flex;
  align-items:center;
  gap:60px;
  padding:var(--sp-4);
  background:var(--primary-900);
  border-radius:var(--rounded-xl);
  flex-wrap:wrap;
}
.wp-datalist__item { display:flex; flex-direction:column; gap:var(--sp-1); color:var(--primary-50); }
.wp-datalist__num { font-size:var(--fs-4xl); font-weight:700; line-height:1.2; }
.wp-datalist__label { font-size:var(--fs-xs); font-weight:400; }

/* =============================================================================
   CHROME COMPARTIDO DEL SITIO PÚBLICO (usado por todas las páginas vía base.html)
   Layout base, helpers de sección, botones, navbar y footer canónicos.
   ========================================================================== */

/* --- Layout base ---------------------------------------------------------- */
.wpw { --nav-h: 72px; }
.wpw__container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.wpw section { scroll-margin-top: var(--nav-h); }

/* --- Helpers de sección (eyebrow + título + lead + cabecera centrada) ------ */
.wpw__eyebrow { display:inline-block; font-size:var(--fs-sm); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color: var(--neutral-400);
    margin-bottom: 12px; background-color: var(--primary-200); padding: 6px 12px; border-radius: var(--rounded-full); }
.wpw__title { font-size:var(--fs-3xl); color:var(--primary-900); }
/* título a dos tonos: la parte con .accent va en azul */
.wpw__title .accent { color:var(--blue); }
.wpw__title_2 { font-size:var(--fs-3xl); color:var(--primary-900); margin-bottom:16px; }
.wpw__lead { font-size:var(--fs-lg); max-width:90ch; margin-top:14px; color:var(--neutral-400); font-weight:600;}
.wpw__what_is_lead { font-size:var(--fs-sm); max-width:90ch; margin-top:14px; color:var(--primary-900); }
.wpw__section-head { text-align:center; max-width:720px; margin:0 auto 48px; }
.wpw__section-head .wpw__lead { margin-left:auto; margin-right:auto; }
@media (min-width:900px){ .wpw__title { font-size:var(--fs-4xl); } }

/* --- Botones -------------------------------------------------------------- */
.wpw-btn { display:inline-flex; align-items:center; gap:8px; font-weight:500;
  font-size:var(--fs-md); line-height:1; padding:6px 12px; border-radius:var(--rounded-full);
  border:1.5px solid transparent; transition:.16s ease; text-decoration:none; cursor:pointer; }
.wpw-btn:hover { text-decoration:none; transform:translateY(-1px); }
.wpw-btn--primary { background:var(--blue); color:#fff; }
.wpw-btn--primary:hover { background:var(--blue-dark); color:#fff; }
.wpw-btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.wpw-btn--ghost:hover { background:rgba(255,255,255,.12); color:#fff; }
.wpw-btn--outline { background:#fff; color:var(--primary-900); border-color:var(--border); }
.wpw-btn--outline:hover { border-color:var(--blue); color:var(--blue); }
.wpw-btn--navy { background:var(--primary-900); color:#fff; }
.wpw-btn--navy:hover { background:#062b41; color:#fff; }

/* --- Navbar canónico (compartido; incluye _navbar.html) ------------------- */
.wpw-nav { position:sticky; top:0; z-index:50; height:var(--nav-h); background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px); /* border-bottom:1px solid var(--border); */}
.wpw-nav__inner { position:relative; height:100%; display:flex; align-items:center; gap:28px; }
/* Móvil/tablet: la hamburguesa va a la izquierda y el logo se centra (absoluto).
   En desktop (≥1040px) el logo vuelve al flujo normal (a la izquierda). */
.wpw-nav__brand { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; }
.wpw-nav__logo { height:46px; width:auto; display:block; }
/* legado (por si algún template aún usa el wordmark de texto) */
.wpw-nav__brand span { font-weight:800; font-size:var(--fs-xl); color:var(--primary-900); }
.wpw-nav__brand span b { color:var(--blue); }
.wpw-nav__links { display:flex; flex-direction:column; gap:6px; margin-left:0; }
.wpw-nav__links a { position:relative; white-space:nowrap; color:var(--primary-900); font-weight:500; font-size:var(--fs-md); padding:8px 0; }
.wpw-nav__links a:hover { color:var(--blue); text-decoration:none; }
.wpw-nav__links a.is-active { color:var(--primary-900); font-weight:700; }
/* En el menú hamburguesa cada opción lleva una línea inferior: la activa es de
   2px en azul intenso; las demás, 1px en un azul más claro. */
.wpw-nav__links a::after { content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--primary-300); border-radius:2px; }
.wpw-nav__links a.is-active::after { height:2px; background:var(--blue); }
/* Móvil: Sign up y el selector de idioma apilados (cada uno en su línea) */
.wpw-nav__actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-left:0; }

/* Botón hamburguesa: visible por defecto (móvil/tablet) a la izquierda, oculto en desktop */
.wpw-nav__toggle { display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; background: var(--primary-100);
  color:var(--primary-900); cursor:pointer; border-radius: var(--rounded-md);}
.wpw-nav__toggle svg { width:26px; height:26px; }
.wpw-nav__toggle-close { display:none; }
.wpw-nav__toggle[aria-expanded="true"] .wpw-nav__toggle-open { display:none; }
.wpw-nav__toggle[aria-expanded="true"] .wpw-nav__toggle-close { display:inline-flex; }

/* Panel desplegable en móvil/tablet; en desktop es una fila normal (ver más abajo) */
.wpw-nav__menu { display:none; position:absolute; top:var(--nav-h); left:0; right:0;
  flex-direction:column; align-items:stretch; gap:14px; padding:18px 20px 22px;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.08); }
.wpw-nav__menu.is-open { display:flex; }

@media (min-width:1040px){
  .wpw-nav__toggle { display:none; }
  .wpw-nav__brand { position:static; transform:none; }
  .wpw-nav__menu { display:flex; position:static; flex:1; flex-direction:row;
    align-items:center; gap:28px; padding:0; background:none; border:0; box-shadow:none; }
  .wpw-nav__links { flex-direction:row; align-items:center; gap:22px; }
  .wpw-nav__links a { padding:4px 0; }
  /* desktop: solo el enlace activo lleva subrayado (las demás sin línea) */
  .wpw-nav__links a:not(.is-active)::after { content:none; }
  .wpw-nav__actions { flex-direction:row; align-items:center; margin-left:auto; }
}
.wpw-lang { display:inline-flex; align-items:center; border-radius:var(--rounded-sm); overflow:hidden; }
.wpw-lang button { background:transparent; border:0; padding:6px 12px; font-size:var(--fs-sm);
  font-weight:600; color:var(--text-3); }
.wpw-lang button.is-active { background:var(--primary-500); color:#fff; }

/* --- Volver arriba (compartido): botón flotante --------------------------- */
/* Aparece pasado un tercio del desplazamiento de la página y sube con animación;
   quien decide cuándo mostrarlo es js/totop.js (UMBRAL), que añade .is-visible.

   Antes era un enlace al final del contenido. Ahí «aparecer a mitad de página»
   no significaba nada: a esa altura el final todavía no se ve. Al flotar, el
   botón está donde se necesita en cuanto hay recorrido que deshacer.

   Sin JS se queda oculto, pero el href="#top" del enlace sigue siendo válido y
   `visibility:hidden` lo saca del recorrido de tabulación mientras no toca. */
.wpw-totop { position:fixed; right:24px; bottom:24px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s; }
.wpw-totop.is-visible { opacity:1; visibility:visible; transform:none; }
/* Superficie propia: flotando sobre el contenido, la etiqueta sin fondo no se
   leería. El desenfoque es el mismo recurso que usa el navbar. */
.wpw-totop a { display:inline-flex; align-items:center; gap:12px; color:var(--primary-900);
  font-weight:600; font-size:var(--fs-sm);
  background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(8px);
  border:1px solid var(--border-blue); border-radius:var(--rounded-full);
  padding:5px 7px 5px 18px; box-shadow:var(--shadow-md); }
.wpw-totop a:hover { color:var(--blue); text-decoration:none; }
.wpw-totop a span { flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--primary-900); color:#fff; display:grid; place-items:center; transition:.15s; }
.wpw-totop a:hover span { background:var(--primary-800); }
.wpw-totop a span svg { width:18px; height:18px; }
@media (max-width:599px){ .wpw-totop { right:14px; bottom:14px; } }
/* Quien pide menos movimiento recibe la aparición sin transición; el salto al
   inicio lo resuelve totop.js con el mismo criterio. */
@media (prefers-reduced-motion: reduce){
  .wpw-totop { transition:none; }
  .wpw-totop a span { transition:none; }
}

/* --- Footer canónico (compartido; incluye _footer.html) ------------------- */
.wpw-footer { background:var(--primary-900); color:rgba(255,255,255,.72); padding:64px 0 28px;
  border-radius:30px 30px 0 0; }
.wpw-footer__top { display:grid; gap:40px; }
/* Apilado (móvil/tablet): los enlaces van primero; el resto (marca/dirección) después */
.wpw-footer__links { order:-1; }
@media (min-width:800px){
  .wpw-footer__top { grid-template-columns:1.7fr 1fr; }
  .wpw-footer__links { order:0; }
}
.wpw-footer__brand { color:#fff; font-weight:800; font-size:var(--fs-4xl); }
.wpw-footer__rule { height:2px; background:#fff; margin:18px 0 20px; max-width:440px; }
.wpw-footer__addr { font-size:var(--fs-sm); line-height:1.25; color:#fff; font-style: normal;}
.wpw-footer__addr a { color:rgba(255,255,255,.8); }
.wpw-footer__links { display:grid; gap:14px; align-content:start; }
.wpw-footer__links a { display:inline-flex; gap:10px; align-items:center; color:rgba(255,255,255,.82); font-size:var(--fs-md); }
.wpw-footer__links a::before { content:"\203A"; color:#fff; font-weight:700; }
.wpw-footer__links a:hover { color:#fff; text-decoration:none; }
.wpw-footer__legal { display:flex; flex-wrap:wrap; gap:24px; margin-top:48px; padding-top:22px; font-size:var(--fs-md); }
.wpw-footer__legal a { color:rgba(255,255,255,.6); }
.wpw-footer__legal a:hover { color:#fff; text-decoration:none; }