/* =============================================================================
   WaterProof WEB — Landing / Inicio. Homologada al Figma (screen-inicio).
   Depende de tokens.css + base.css + components.css (chrome).
   ========================================================================== */

/* --- Helpers ------------------------------------------------------------- */
.wpw__title--center { text-align:center; }
.wpw__section-head--center { text-align:center; max-width:760px; margin:0 auto 40px; }
.wpw-btn__ico { display:inline-flex; align-items:center; margin-right:8px; }
.wpw-btn__ico svg { width:18px; height:18px; }

.wpw-sec { padding:80px 0; }
.wpw-sec--alt { background:var(--primary-50); }

/* --- Hero (overlay claro, foto visible) ----------------------------------- */
.wpw-hero { position:relative; color:var(--primary-900);
  background-image:url('../img/landing/hero-mountains.jpg');
  background-image:-webkit-image-set(url('../img/landing/hero-mountains.webp') type('image/webp'), url('../img/landing/hero-mountains.jpg') type('image/jpeg'));
  background-image:image-set(url('../img/landing/hero-mountains.webp') type('image/webp'), url('../img/landing/hero-mountains.jpg') type('image/jpeg'));
  background-repeat:no-repeat; background-position:center right; background-size:cover; }
.wpw-hero::before { content:""; position:absolute; inset:0;
  /* Overlay del Figma (section-banner 3820:2362): casi vertical, transparente arriba
     -> blanco sólido abajo, cubriendo toda la imagen de forma pareja. */
  background:linear-gradient(191.67deg, rgba(255,255,255,0) 11.24%, #ffffff 68.34%); }
.wpw-hero__inner { position:relative; padding:88px 0 72px; max-width:620px; }

/* --- Nav superpuesto sobre el hero (solo landing, como Figma) -------------
   El navbar se fija y arranca transparente sobre la foto (que ocupa desde el
   borde superior); al hacer scroll se vuelve barra blanca (JS toggle .is-solid). */
.wpw--hero-overlap { position:relative; }
.wpw--hero-overlap .wpw-nav { position:fixed; left:0; right:0; top:0;
  background:transparent; box-shadow:none;
  transition:background .25s ease, box-shadow .25s ease; }
.wpw--hero-overlap .wpw-nav.is-solid { background:rgba(255,255,255,.94);
  box-shadow:0 2px 12px rgba(8,33,77,.08); }
/* el titular no debe quedar bajo el navbar transparente */
.wpw--hero-overlap .wpw-hero__inner { padding-top:clamp(112px, 12vw, 168px); }
.wpw-hero h1 { color:var(--primary-900); font-size:clamp(32px, 4.2vw, 46px); line-height:1.12; }
.wpw-hero h1 em { color:var(--blue); font-style:normal; }
.wpw-hero p { font-size:var(--fs-lg); color:var(--secondary-900); margin-top:18px; max-width:46ch; }
.wpw-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.wpw-hero__by { display:flex; align-items:center; gap:14px; margin-top:40px; }
.wpw-hero__by-badge { flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  background:var(--primary-50); display:grid; place-items:center; color:var(--primary-700); }
.wpw-hero__by-badge svg { width:24px; height:24px; }
.wpw-hero__by-txt { display:flex; flex-direction:column; gap:5px; }
.wpw-hero__by-txt span { font-size:var(--fs-sm); color:var(--primary-500); font-weight:600; }
.wpw-hero__by-txt img { height:30px; width:auto; }

/* --- ¿Qué es? (imagen izq / texto der + métricas navy) -------------------- */
.wpw-about { padding:80px 0; }
.wpw-about__grid { display:grid; gap:56px; align-items:center; }
@media (min-width:900px){ .wpw-about__grid { grid-template-columns:1.05fr 1fr; } }
/* composición con círculos navy + dashboard (PNG transparente): sin recorte ni sombra */
.wpw-about__media img { width:100%; height:auto; position:relative; z-index:9; }
/* En móvil se oculta la composición gráfica para ganar espacio vertical */
/* @media (max-width:599.98px){ .wpw-about__media { display:none; } } */
/* párrafo "¿Qué es?" = body1 14px (Figma), no el lead de 18px */
.wpw-about .wpw__lead { font-size:var(--fs-sm); line-height:1.6; }
.wpw-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  background:var(--primary-900); border-radius:var(--rounded-2xl); padding:24px 28px; margin-top:28px; }
.wpw-metric__n { display:block; font-family:var(--wp-font); font-size:var(--fs-4xl); font-weight:800; color:#fff; line-height:1; }
.wpw-metric__l { font-size:var(--fs-sm); color:rgba(255,255,255,.82); }
/* Móvil: la barra de métricas (4 columnas) se aprieta —menos padding/gap y
   números/etiquetas más pequeños— para que quepa sin desbordar. */
@media (max-width:599.98px){
  .wpw-metrics { gap:8px; padding:18px 14px; }
  .wpw-metric__n { font-size:var(--fs-2xl); }
  .wpw-metric__l { font-size:var(--fs-xs); line-height:1.2; }
}

/* --- Camino decorativo punteado (separador ¿Qué es? → ¿Qué debes saber?) --- */
/* En móvil/tablet el camino punteado se solapa hacia abajo (margen inferior
   negativo) para quedar DETRÁS del título «What should you know…»: al ser anterior
   en el DOM y con z-index:0, el título del carrusel (posterior) se pinta encima. */
.wpw-pathdeco { position:relative; z-index:0; margin:-140px 0 -120px; pointer-events:none; overflow:hidden; }
@media (min-width:900px){ .wpw-pathdeco { margin:-310px 0 -120px; } }
.wpw-pathdeco img { width:100%; height:auto; display:block; }
/* la sección del carrusel fluye por encima del camino en responsive */
.wpw-pathdeco + .wpw-sec { position:relative; z-index:1; }
/* En móvil se oculta el camino punteado decorativo */
@media (max-width:599.98px){ .wpw-pathdeco { display:none; } }

/* --- ¿Qué debes saber? — carrusel (título + nav ‹ › a la derecha; slides) -- */
/* Reserva de altura SOLO EN DESKTOP: allí los cinco slides comparten una misma
   celda de rejilla, así que la altura de la sección la fija el más alto y deja de
   cambiar al pasar de uno a otro (la siguiente, «¿Por qué usar?», no parece moverse
   de sitio). Ese más alto es el primer slide, el de las dos tarjetas con imagen de
   180px, frente a los otros cuatro que son un párrafo o dos en una caja; se reserva
   por el alto para que un slide que algún día crezca se siga viendo entero. Se usa
   `visibility` en vez de `display` para que el slide inactivo siga ocupando la celda
   y cuente en la altura, sin recibir foco ni clics.

   En móvil/tablet esa reserva desperdiciaría mucho alto (el slide de las tarjetas
   con imagen es bastante más alto que los de texto), así que ahí solo el slide
   activo ocupa espacio: la altura sigue al contenido con display:none. */
.wpw-carousel { position:relative; }
.wpw-slide { display:none; }
.wpw-slide.is-active { display:block; }
@media (min-width:900px){
  .wpw-carousel { display:grid; }
  .wpw-slide { display:block; grid-area:1 / 1; visibility:hidden; opacity:0; }
  .wpw-slide.is-active { visibility:visible; opacity:1; }
}
.wpw-slide__head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:32px; }
.wpw-slide__titles { flex:1; min-width:0; }
.wpw-slide__titles .wpw__lead { margin-top:10px; }
.wpw-carousel__nav { display:flex; gap:12px; flex:0 0 auto; }
.wpw-carousel__nav button { width:44px; height:44px; border-radius:50%; background:var(--primary-900);
  color:#fff; border:0; display:grid; place-items:center; cursor:pointer; transition:.15s; }
.wpw-carousel__nav button:hover { background:#062b41; }
.wpw-carousel__nav button svg { width:18px; height:18px; }
.wpw-slide__textbox { border:1px solid var(--border-blue); border-radius:var(--rounded-2xl);
  background:var(--neutral-50); padding:28px 32px; }
.wpw-slide__textbox p { color:var(--primary-900); font-size:var(--fs-md); line-height:1.7; }
.wpw-slide__textbox p + p { margin-top:14px; }
.wpw-slide__textbox a { color:var(--blue); font-weight:600; }

/* --- ¿Qué debes saber? (2 cards imagen izq + checklist) ------------------- */
.wpw-knowcards { display:grid; gap:28px; }
@media (min-width:860px){ .wpw-knowcards { grid-template-columns:1fr 1fr; } }
.wpw-knowcard { display:grid; grid-template-columns:180px 1fr; gap:24px; align-items:center;
  border:1px solid var(--border-blue); border-radius:var(--rounded-2xl); padding:24px; background:var(--neutral-50); }
.wpw-knowcard__img { border-radius:var(--rounded-lg); overflow:hidden; aspect-ratio:1/1; }
.wpw-knowcard__img img { width:100%; height:100%; object-fit:cover; }
.wpw-knowcard__body h3 { font-size:var(--fs-2xl); color:var(--primary-900); margin-bottom:16px; }
.wpw-checklist { display:grid; gap:12px; }
.wpw-checklist li { display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--primary-900); }
.wpw-checklist li svg { width:18px; height:18px; color:var(--blue); flex:0 0 auto; }
/* Móvil: la tarjeta se apila en vertical —imagen arriba (formato cabecera),
   luego título y viñetas— en vez de imagen a la izquierda y texto a la derecha. */
@media (max-width:599.98px){
  .wpw-knowcard { grid-template-columns:1fr; align-items:start; }
  .wpw-knowcard__img { aspect-ratio:16/10; }
}

/* --- ¿Por qué usar? — 6 banderas "clavadas" sobre el montaje isométrico ----
   Móvil: apiladas. Desktop: posiciones absolutas (según Figma) + pin (línea+punto). */
/* Móvil/tablet: fondo a todo el ancho de la sección + columna de contenido
   (título + banderas apiladas) centrada a máx. 50% del ancho, encima del fondo. */
.wpw-why .wpw__title { text-align:center; position:relative; z-index:1; }
.wpw-why__stage { position:relative; margin-top:32px; padding:24px 0; }
.wpw-why__bg { display:block; position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.18; pointer-events:none; }
.wpw-flags { position:relative; z-index:1; display:grid; gap:28px; margin-inline:auto; }
/* tablet: columna centrada al 50% del ancho; en móvil ocupa el 100% */
@media (min-width:600px){ .wpw-flags { max-width:50%; } }
.wpw-flag__ico { width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary-200); color:var(--primary-700); margin-bottom:14px; }
.wpw-flag__ico svg { width:22px; height:22px; }
.wpw-flag h4 { font-size:var(--fs-lg); color:var(--primary-900); margin-bottom:6px; }
.wpw-flag p { font-size:var(--fs-sm); color:var(--primary-900); line-height:1.5; }

@media (min-width:900px){
  /* desktop recupera el layout «clavado»: título a la izquierda y banderas absolutas */
  .wpw-why .wpw__title { text-align:left; }
  .wpw-why__stage { aspect-ratio:1420 / 1240; padding:0; }
  .wpw-why__bg { display:block; position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center top; opacity:.4; filter:saturate(.5); pointer-events:none; }
  .wpw-flags { position:absolute; inset:0; display:block; max-width:none; margin-inline:0; }
  /* cada bandera con rail vertical a la izquierda (icono→fin del párrafo) + punto abajo */
  .wpw-flag { position:absolute; width:360px; padding-left:30px; }
  .wpw-flag::before { content:""; position:absolute; left:0; top:6px; bottom:9px; width:1.5px; background:var(--primary-300); }
  .wpw-flag::after { content:""; position:absolute; left:-4px; bottom:0; width:11px; height:7px;
    border-radius:50%; background:var(--primary-200); }
  /* posiciones (left/top %) según metadata de Figma (BanderasRazones) */
  .wpw-flag--efic { left:18%; top:15%; }
  .wpw-flag--conf { left:67%; top:4%;  }
  .wpw-flag--pers { left:44%; top:42%; }
  .wpw-flag--comp { left:8%;  top:54%; }
  .wpw-flag--eval { left:70%; top:63%; }
  .wpw-flag--estr { left:34%; top:78%; }
}

/* --- ¿Cómo se configura? (2 módulos con pasos + video) -------------------- */
.wpw-setup { display:grid; gap:32px; margin-top:40px; }
.wpw-setupcard { display:grid; gap:36px; align-items:center;
  border:1px solid var(--border-blue); border-radius:var(--rounded-2xl); padding:40px; background:#fff; }
@media (min-width:900px){ .wpw-setupcard { grid-template-columns:1fr 1fr; } }
.wpw-setupcard__badge { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.wpw-setupcard__ico { width:40px; height:40px; border-radius:50%; background:var(--primary-900);
  color:var(--primary-300); display:grid; place-items:center; }
.wpw-setupcard__ico svg { width:20px; height:20px; }
.wpw-setupcard__n { font-family:var(--wp-font); font-size:var(--fs-3xl); font-weight:800; color:var(--blue); line-height:1; }
.wpw-setupcard__body h3 { font-size:var(--fs-2xl); color:var(--primary-900); }
.wpw-setupcard__lead { color:var(--text-2); font-size:var(--fs-sm); margin-top:8px; }
.wpw-setupcard__hint { color:var(--primary-900); font-weight:700; font-size:var(--fs-sm); margin:14px 0 10px; }
.wpw-setuplist { display:grid; gap:6px; margin-bottom:24px; padding: 12px 0px 12px 0px;}
.wpw-setuplist li { display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--primary-900); padding:7px 12px; border-radius:var(--rounded-md); }
.wpw-setuplist li:hover { background:var(--overlay-blue-09); }
.wpw-setuplist li.is-current { background:var(--primary-100); }
.wpw-setuplist li svg { width:14px; height:14px; color:var(--primary-900); flex:0 0 auto; }
.wpw-setupcard__media { position:relative; border-radius:var(--rounded-2xl); overflow:hidden; box-shadow:var(--shadow-md); }
.wpw-setupcard__media img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.wpw-play { position:absolute; inset:0; display:grid; place-items:center; background:var(--overlay-dark-20);
  border:0; width:100%; cursor:pointer; transition:.16s; }
.wpw-play:hover { background:rgba(4,49,76,.42); }
.wpw-play span { width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; box-shadow:var(--shadow-md); }
.wpw-play span svg { width:24px; height:24px; margin-left:4px; color:var(--blue); }

/* --- Conceptos clave (banda cabecera + botón) ----------------------------- */
.wpw-concepts-band { background:var(--primary-50); padding:52px 0; }
.wpw-concepts-band__grid { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.wpw-concepts-band__grid > div { max-width:820px; }
.wpw-concepts-band .wpw__lead { margin-top:8px; }

/* --- Testimonios (cita + nombre + cargo, SIN foto) ------------------------ */
.wpw-testis { display:grid; gap:28px; margin-top:40px; }
@media (min-width:840px){ .wpw-testis { grid-template-columns:1fr 1fr; } }
.wpw-testi { border:1px solid var(--border-blue); border-radius:var(--rounded-2xl); padding:36px; background:var(--neutral-50); }
.wpw-testi__quote { font-size:var(--fs-sm); color:var(--neutral-400); line-height:1.6; font-weight: 600;}
.wpw-testi__quote::before { content:"\201C"; }
.wpw-testi__quote::after { content:"\201D"; }
.wpw-testi__who { margin-top:28px; }
.wpw-testi__who b { display:block; color:var(--primary-900); font-size:var(--fs-2xl); }
.wpw-testi__who span { font-size:var(--fs-xs); font-weight:700; color:var(--blue); }

/* --- Herramientas (4 cards; la 1.ª destacada navy) ------------------------ */
.wpw-tools { display:grid; gap:24px; }
@media (min-width:640px){ .wpw-tools { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .wpw-tools { grid-template-columns:repeat(4,1fr); } }
.wpw-tool { display:flex; flex-direction:column; gap:14px; background:#fff;
  border:1px solid var(--border-blue); border-radius:var(--rounded-lg); padding:28px 24px; transition:.2s ease; }
/* por defecto: icono con fondo navy e icono claro */
.wpw-tool__ico { width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary-900); color:var(--primary-300); transition:.2s ease; }
.wpw-tool__ico svg { width:24px; height:24px; }
.wpw-tool h4 { font-size:var(--fs-2xl); color:var(--primary-900); }
.wpw-tool p { font-size:var(--fs-sm); color:var(--primary-900); flex:1; }
.wpw-tool__link { display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-weight:600; font-size:var(--fs-sm); }
.wpw-tool__link svg { width:14px; height:14px; }
/* flip a navy al pasar el cursor (icono se invierte a fondo claro) */
.wpw-tool:hover { background:var(--primary-900); border-color:var(--primary-900); }
.wpw-tool:hover .wpw-tool__ico { background:#fff; color:var(--primary-900); }
.wpw-tool:hover h4 { color:#fff; }
.wpw-tool:hover p { color:rgba(255,255,255,.82); }
.wpw-tool:hover .wpw-tool__link { color:var(--primary-300); }

/* --- Banda de patrocinadores (fondo claro; logos a color) ----------------- */
/* Alturas un 20% por encima de las originales (44 y 34 px), redondeadas:
   los logos se veian pequenos frente al resto de la portada. `width:auto`
   mantiene la proporcion de cada imagen. */
.wpw-sponsorband { background:#fff; padding:40px 0 8px; }
.wpw-sponsorband__grid { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:32px 48px; }
.wpw-sponsorband__col { display:flex; flex-direction:column; gap:14px; }
.wpw-sponsorband__label { font-size:var(--fs-sm); font-weight:600; color:var(--primary-900); }
.wpw-sponsorband__tnc { height:53px; width:auto; }
.wpw-sponsorband__row { display:flex; flex-wrap:wrap; align-items:center; gap:32px; }
.wpw-sponsorband__row img { height:41px; width:auto; object-fit:contain; }
/* Tablet (<900px): TNC solo, centrado arriba; los tres logos de apoyo debajo (en fila) */
@media (max-width:899.98px){
  .wpw-sponsorband__grid { flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; }
  .wpw-sponsorband__col { align-items:center; }
  .wpw-sponsorband__row { justify-content:center; }
}
/* Móvil (<600px): todos los logos apilados verticalmente */
@media (max-width:599.98px){
  .wpw-sponsorband__row { flex-direction:column; }
}