/* WS Cover · Dirección editorial A · 2026-08-23
   Capa exclusiva de la portada. No altera el sistema compartido con Toldobox. */

.ws-home{
  --ed-navy:#06131f;
  --ed-navy-2:#0a2231;
  --ed-ink:#102633;
  --ed-aqua:#69ddd7;
  --ed-aqua-2:#23bdb5;
  --ed-cream:#f2f0e9;
  --ed-line:rgba(11,34,49,.14);
  background:#f4f6f3;
  color:var(--ed-ink);
}
.ws-home header.sitio{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(2,12,20,.86),rgba(2,12,20,.15));border:0;box-shadow:none;color:#fff}
.ws-home header.sitio.scrolled{position:fixed;background:rgba(5,20,31,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1)}
.ws-home header.sitio .nav{min-height:88px}
.ws-home header.sitio .txt,.ws-home header.sitio nav a{color:#fff}
.ws-home header.sitio .txt small{color:rgba(255,255,255,.58)}
.ws-home header.sitio .mark{padding:6px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.ws-home header.sitio .mark img{filter:brightness(0) invert(1)}
.ws-home header.sitio .nav-burger span{background:#fff}

.ws-home .hero{position:relative;padding:112px 0 52px;overflow:hidden;background:var(--ed-navy);color:#fff}
.ws-home .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 20%,rgba(105,221,215,.18),transparent 34%),linear-gradient(120deg,#06131f 0%,#071927 62%,#0a2635 100%)}
.ws-home .hero::after{content:"WS / COVER";position:absolute;left:-12px;bottom:-.2em;color:rgba(255,255,255,.025);font:800 clamp(84px,15vw,240px)/.8 var(--sans);letter-spacing:-.08em;white-space:nowrap;pointer-events:none}
.ws-home .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);gap:clamp(38px,6vw,92px);align-items:center;max-width:1480px;margin:auto;padding-block:0;padding-inline:clamp(22px,5vw,78px)}
.ws-home .hero .tag{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(105,221,215,.34);border-radius:999px;padding:8px 12px;color:#b9eeeb;background:rgba(105,221,215,.08);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ws-home .hero .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ed-aqua);box-shadow:0 0 0 5px rgba(105,221,215,.12)}
.ws-home .hero h1{max-width:760px;margin:18px 0 20px;color:#fff;font:700 clamp(54px,6.2vw,96px)/.85 var(--sans);letter-spacing:-.06em}
.ws-home .hero h1 em{display:inline-block;color:var(--ed-aqua);font-family:inherit;font-weight:400;letter-spacing:-.07em}
.ws-home .hero .sub{max-width:650px;color:#aebfc8;font-size:clamp(16px,1.3vw,19px);line-height:1.65}
.ws-home .hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.ws-home .hero .btn{min-height:51px;padding:14px 19px;border-radius:8px}
.ws-home .hero .btn-p{background:var(--ed-aqua);border-color:var(--ed-aqua);color:#052028;box-shadow:0 14px 38px rgba(35,189,181,.22)}
.ws-home .hero .btn-p:hover{background:#8ce9e4;transform:translateY(-2px)}
.ws-home .hero .btn-w{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
/* sistema.css impone aspect-ratio a la foto del hero (el vídeo salía a 960px
   de alto y desbordaba la sección). Altura propia y proporción libre. */
.ws-home .hero-foto{position:relative;height:clamp(480px,60vh,580px);min-height:0;aspect-ratio:auto;border-radius:240px 240px 22px 22px;overflow:hidden;box-shadow:0 38px 90px rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.16)}
.ws-home .hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,18,29,.03) 50%,rgba(5,18,29,.62));pointer-events:none}
.ws-home .hero-foto video{width:100%;height:100%;min-height:0;display:block;object-fit:cover;object-position:center}
.ws-home .hero-media-label{position:absolute;z-index:2;left:22px;bottom:20px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;background:rgba(4,16,26,.48);backdrop-filter:blur(12px);font-size:11px;font-weight:700;letter-spacing:.04em}
.ws-home .hero-media-label i{width:7px;height:7px;border-radius:50%;background:#6fe28f;box-shadow:0 0 0 5px rgba(111,226,143,.14)}
.ws-home .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:28px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
/* sistema.css da a .badge aspecto de tarjeta suelta (fondo blanco, borde,
   radio 14, sombra). Aquí los cuatro forman UNA tira de datos continua entre
   dos líneas: se anula la tarjeta y queda solo el separador vertical. */
.ws-home .badge{min-width:0;padding:17px 12px;border:0;border-right:1px solid rgba(255,255,255,.12);border-radius:0;box-shadow:none;color:#839aa5;background:transparent;text-decoration:none}
.ws-home .badge:hover{box-shadow:none;transform:none;border-color:rgba(255,255,255,.12)}
.ws-home a.badge:hover b{color:var(--ed-aqua)}
.ws-home .badge:last-child{border-right:0}
.ws-home .badge b{color:#fff;font-size:17px}
.ws-home .badge span{font-size:9px;line-height:1.3;text-transform:uppercase;letter-spacing:.08em}

/* El vídeo pasa a ser la escena completa del hero. La capa oscura se concentra
   a la izquierda para preservar la lectura del titular y los CTA en cualquier
   fotograma, dejando visible la instalación real al fondo. */
.ws-home .hero{isolation:isolate;background:#06131f}
.ws-home .hero::before{z-index:1;background:linear-gradient(90deg,rgba(3,15,24,.95) 0%,rgba(3,15,24,.86) 35%,rgba(3,15,24,.38) 68%,rgba(3,15,24,.18) 100%),linear-gradient(0deg,rgba(3,15,24,.55),transparent 42%)}
.ws-home .hero::after{z-index:1}
.ws-home .hero-inner{z-index:auto;display:block;min-height:640px}
/* padding-top era 92px: sumado al padding del hero dejaba ~190px de vacío
   entre el menú y la primera línea. 32px mantiene el aire sin descolgar. */
.ws-home .hero-inner>div:first-child{position:relative;z-index:2;max-width:690px;padding-top:32px}
/* los offsets negativos deben calcar el padding del hero (112/52) para que
   el vídeo llegue justo a los bordes de la sección, ni corto ni salido */
.ws-home .hero-foto{position:absolute;z-index:0;top:-112px;bottom:-52px;left:50%;width:100vw;height:auto;min-height:0;transform:translateX(-50%);border:0;border-radius:0;box-shadow:none}
.ws-home .hero-foto::after{background:linear-gradient(0deg,rgba(3,15,24,.42),transparent 38%)}
.ws-home .hero-foto video{min-height:0;height:100%;object-position:center}
.ws-home .hero-media-label{left:auto;right:max(22px,calc((100vw - 1380px) / 2));bottom:24px}

.ws-home section:not(.hero):not(.problema):not(.cta){padding-block:clamp(75px,9vw,132px)}
/* ANCHURA (dictado de Florin 2026-08-29): "no quiero espacios en los
   laterales, estamos perdiendo calidad y detalles". La base de sistema.css son
   1180px y el editorial subía a 1380: en un monitor de 1920 eso deja 270px
   muertos por lado, y en uno de 2560 casi 600. Se pasa a ocupar el ancho real
   con un margen que crece con la pantalla, no un tope fijo.
   No se va a 100% a secas a propósito: una línea de texto de 2000px no se lee.
   Las FOTOS sí van a sangre (ver .hero-foto y las galerías). */
.ws-home .wrap{width:min(1860px,100%);max-width:none;padding-inline:clamp(18px,3vw,54px)}
/* #278f8b daba 3.4:1 sobre crema con letra de 10px (mínimo 4.5). */
.ws-home .eyebrow{color:#1e716d;font-size:10px;letter-spacing:.18em}
.ws-home section h2{font-family:var(--sans);font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.055em}
.ws-home section h2 em{font-family:inherit;font-weight:400;color:#1e837d}

.ws-home .problema{position:relative;background:var(--ed-cream);color:var(--ed-ink)}
.ws-home .problema .wrap{gap:clamp(40px,7vw,110px)}
.ws-home .problema h2{color:#0d2431}
.ws-home .problema p{font-size:17px;color:#596d77}
.ws-home .problema .foto{border-radius:18px 180px 18px 18px;overflow:hidden;box-shadow:0 28px 70px rgba(7,21,34,.15)}

.ws-home #soluciones{background:#f7f8f5}
.ws-home .sol-head{align-items:end;margin-bottom:42px}
.ws-home .tarjetas-familia{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.ws-home .tarjeta-familia{grid-column:span 6;display:grid;grid-template-columns:1.05fr .95fr;min-height:410px;margin:0;border:1px solid var(--ed-line);border-radius:17px;overflow:hidden;background:#fff;box-shadow:none;transition:transform .35s ease,box-shadow .35s ease}
.ws-home .tarjeta-familia:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(7,21,34,.12)}
.ws-home .tarjeta-familia .ph{height:100%;min-height:410px;aspect-ratio:auto}
.ws-home .tarjeta-familia .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ws-home .tarjeta-familia:hover .ph img{transform:scale(1.035)}
.ws-home .tarjeta-familia .bd{display:flex;flex-direction:column;padding:30px 28px}
.ws-home .tarjeta-familia .num{color:#298f8b;font-size:9px;letter-spacing:.13em}
.ws-home .tarjeta-familia h3{margin:26px 0 15px;color:#0c2230;font-family:var(--sans);font-size:28px;line-height:1.02;letter-spacing:-.04em}
.ws-home .tarjeta-familia p{color:#667781;font-size:13px;line-height:1.6}
.ws-home .tarjeta-familia .precio{margin-top:auto;color:#172e3a;font-weight:800}
.ws-home .tarjeta-familia .go{margin-top:16px;color:#178e89;font-weight:800}

.ws-home .tienda{background:linear-gradient(145deg,#0a2231,#06131f);color:#fff}
.ws-home .tienda h2,.ws-home .tienda .sub{color:#fff}
.ws-home .tienda .sub{max-width:850px;color:#9db1bb}
.ws-home .tienda-grid{gap:15px;margin-top:42px}
.ws-home .tcard{border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(255,255,255,.055);box-shadow:none;backdrop-filter:blur(10px)}
.ws-home .tcard .med{color:var(--ed-aqua);font-family:var(--sans);font-size:37px}
.ws-home .tcard .li{border-color:rgba(255,255,255,.1);color:#b7c6cd}
.ws-home .tcard .li b{color:#fff}

.ws-home .social{background:#eef3f1}
.ws-home .social-stats{border-block:1px solid var(--ed-line)}
.ws-home .stat{border-right:1px solid var(--ed-line)}
.ws-home .stat b{color:#0c2633;font-family:var(--sans)}
.ws-home .reviews{gap:14px}
.ws-home .rev{border:1px solid var(--ed-line);border-radius:15px;background:rgba(255,255,255,.7);box-shadow:none}
/* las estrellas heredaban un dorado claro que daba 1.85:1 sobre la tarjeta */
.ws-home .rev .st{color:#b45309}
/* botón primario en secciones claras: el aqua de marca con texto blanco no
   pasa el contraste (§13 pendiente de Florin); aquí el patrón del hero —
   fondo aqua claro y tinta oscura — sí lo pasa, sin tocar el token global */
.ws-home .problema .btn-p{background:var(--ed-aqua);border-color:var(--ed-aqua);color:#052028}
.ws-home .fabricante{background:#fff}
/* La zona pasa de la base oscura (sistema.css, colores --inverso-*) a crema:
   hay que re-declarar TODOS los colores de texto o quedan claros sobre claro.
   El disco del radar sigue siendo azul marino y funciona como contraste. */
.ws-home .zona{background:var(--ed-cream);color:var(--ed-ink)}
.ws-home .zona h2{color:#0d2431}
.ws-home .zona h2 em{color:#178e89}
.ws-home .zona .eyebrow{color:#278f8b}
.ws-home .zona p{color:#596d77;margin-top:12px}
.ws-home .zona .zona-list{color:#44565f}
/* Los rótulos del radar venían a 8px: con los nombres en su sitio real se
   solapaban entre sí. A 6,6px caben los 8 municipios sin pisarse. */
.ws-home .zona .town text{font-size:6.6px}
.ws-home .cta{background:linear-gradient(135deg,#0a2636,#06131f)}
.ws-home footer{background:#04101a}

@media(max-width:1100px){
  .ws-home .hero-inner{grid-template-columns:1fr 1fr;gap:35px}
  .ws-home .hero-foto,.ws-home .hero-foto video{min-height:540px}
  .ws-home .tarjeta-familia{grid-template-columns:1fr}
  .ws-home .tarjeta-familia .ph{min-height:280px;height:280px}
}

@media(max-width:780px){
  .ws-home header.sitio .nav{min-height:68px}
  .ws-home .hero{min-height:auto;padding:104px 0 42px}
  .ws-home .hero-inner{display:block;min-height:690px;padding-inline:18px}
  .ws-home .hero-inner>div:first-child{padding-top:26px}
  .ws-home .hero h1{font-size:clamp(52px,16vw,78px);margin-top:20px}
  .ws-home .hero .sub{font-size:15px}
  .ws-home .hero-foto{top:-104px;bottom:-42px;min-height:0;border-radius:0}
  .ws-home .hero-foto video{min-height:0;height:100%;object-position:58% center}
  .ws-home .hero::before{background:linear-gradient(180deg,rgba(3,15,24,.7) 0%,rgba(3,15,24,.8) 62%,rgba(3,15,24,.93) 100%)}
  .ws-home .hero-media-label{right:18px;bottom:17px}
  .ws-home .badges{grid-template-columns:repeat(2,1fr)}
  .ws-home .badge:nth-child(2){border-right:0}
  .ws-home .badge:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .ws-home .tarjeta-familia{grid-column:1/-1}
  .ws-home section h2{font-size:clamp(36px,11vw,58px)}
}

@media(max-width:440px){
  .ws-home .hero-inner{min-height:720px}
  .ws-home .hero-foto,.ws-home .hero-foto video{min-height:0}
  .ws-home .hero-cta .btn{width:100%;justify-content:center}
  .ws-home .tarjeta-familia .bd{padding:24px 22px}
  .ws-home .tarjeta-familia .ph{min-height:235px;height:235px}
}

@media(prefers-reduced-motion:reduce){
  .ws-home .tarjeta-familia,.ws-home .tarjeta-familia .ph img{transition:none}
}

/* El menú de escritorio partía "PVC invierno" y "Medidas estándar" en dos
   líneas (43px de alto frente a 17px del resto), lo que descuadraba la
   cabecera. Viene de sistema.css, que es compartido con Toldobox y no se
   toca; se corrige aquí, acotado. Acotado a >=1240px: por debajo de esa anchura
   el menú NO cabe en una línea y forzarlo desbordaba la página 5px en
   horizontal, que es peor que el corte de línea. Verificado en navegador. */
@media(min-width:1240px){header.sitio nav ul li > a{white-space:nowrap}}