/* WS Cover · Colección de producto editorial · 2026-08-24
   Capa propia de las páginas comerciales; conserva la base compartida. */
.ws-product{--ed-navy:#06131f;--ed-navy-2:#0a2231;--ed-aqua:#69ddd7;--ed-aqua-dark:#159e99;--ed-cream:#f2f0e9;--ed-ink:#102633;--ed-line:rgba(9,34,49,.14);background:#f5f7f4;color:var(--ed-ink)}
.ws-product header.sitio{position:absolute;z-index:20;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(2,13,21,.84),transparent);border:0;box-shadow:none;color:#fff}
.ws-product header.sitio.scrolled{position:fixed;background:rgba(5,20,31,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.1)}
.ws-product header.sitio .nav{min-height:86px}
.ws-product header.sitio .txt,.ws-product header.sitio nav a{color:#fff}
.ws-product header.sitio .txt small{color:rgba(255,255,255,.58)}
.ws-product header.sitio .mark{padding:6px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.1)}
.ws-product header.sitio .mark img{filter:brightness(0) invert(1)}
.ws-product header.sitio .nav-burger span{background:#fff}

.ws-product .hero{position:relative;min-height:720px;padding:140px 0 58px;overflow:hidden;background:var(--ed-navy);color:#fff}
.ws-product .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 13% 26%,rgba(105,221,215,.2),transparent 33%),linear-gradient(120deg,#06131f 0%,#082032 60%,#092637 100%)}
.ws-product .hero::after{content:"WS / COVER";position:absolute;z-index:1;right:-.08em;bottom:-.18em;color:rgba(255,255,255,.025);font:800 clamp(76px,14vw,212px)/.8 var(--sans);letter-spacing:-.09em;white-space:nowrap;pointer-events:none}
.ws-product .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(400px,1.08fr);gap:clamp(36px,6vw,88px);align-items:center;max-width:1440px;margin:auto;padding-inline:clamp(22px,5vw,76px)}
.ws-product .hero .tag{display:inline-flex;align-items:center;border:1px solid rgba(105,221,215,.33);border-radius:999px;padding:8px 12px;color:#b9eeeb;background:rgba(105,221,215,.08);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.ws-product .hero h1{margin:23px 0;color:#fff;font:700 clamp(54px,6.4vw,98px)/.86 var(--sans);letter-spacing:-.07em}
.ws-product .hero h1 em{font-family:inherit;font-weight:400;color:var(--ed-aqua)}
.ws-product .hero .sub{max-width:640px;color:#b2c2c9;font-size:17px;line-height:1.62}
.ws-product .hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.ws-product .hero .btn{min-height:50px;padding:13px 18px;border-radius:8px}
.ws-product .hero .btn-p{background:var(--ed-aqua);border-color:var(--ed-aqua);color:#06212a;box-shadow:0 14px 36px rgba(35,189,181,.2)}
.ws-product .hero .btn-w{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.ws-product .hero-foto{position:relative;min-height:520px;margin:0;border:1px solid rgba(255,255,255,.15);border-radius:220px 220px 18px 18px;overflow:hidden;box-shadow:0 35px 84px rgba(0,0,0,.32)}
.ws-product .hero-foto::after{content:"Instalación real · WS Cover";position:absolute;left:18px;bottom:17px;padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:99px;color:#fff;background:rgba(3,16,26,.5);backdrop-filter:blur(10px);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ws-product .hero-foto img{width:100%;height:100%;min-height:520px;object-fit:cover}
.ws-product .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:35px;border-block:1px solid rgba(255,255,255,.13)}
/* Mismo fallo que en la portada: sistema.css da a .badge aspecto de tarjeta
   (fondo blanco, borde, radio 14, sombra) y aquí los cuatro deben leerse como
   UNA tira de datos. Sin este reset se veían tarjetas pegadas unas a otras. */
.ws-product .badge{min-width:0;padding:15px 11px;border:0;border-right:1px solid rgba(255,255,255,.13);border-radius:0;box-shadow:none;background:transparent;color:#c3d2da}
.ws-product .badge:hover{box-shadow:none;transform:none;border-color:rgba(255,255,255,.13)}
/* sistema.css colorea el <span> directamente con --gris, y una regla directa
   gana siempre a la herencia: sin esto quedaba gris oscuro sobre el hero. */
.ws-product .badge span{color:#c3d2da}
.ws-product a.badge:hover b{color:var(--ed-aqua)}
/* El aqua de marca con texto blanco no pasa el contraste (§13, pendiente de
   Florin). En sección clara se usa el patrón del hero: fondo aqua, tinta
   oscura — sin tocar el token global. */
.ws-product .problema .btn-p{background:var(--ed-aqua);border-color:var(--ed-aqua);color:#052028}
/* Estrellas de reseña: heredaban un dorado claro que daba 1,77:1 sobre la
   tarjeta. Mismo arreglo que en la portada. */
.ws-product .rev .st{color:#b45309}
.ws-product .badge:last-child{border-right:0}.ws-product .badge b{color:#fff;font-size:15px}.ws-product .badge span{font-size:9px;line-height:1.32;letter-spacing:.08em;text-transform:uppercase}

.ws-product section:not(.hero):not(.problema):not(.cta){padding-block:clamp(72px,8vw,120px)}
/* Misma anchura que la portada — ver la nota en editorial-2026.css */
.ws-product .wrap{width:min(1860px,100%);max-width:none;padding-inline:clamp(18px,3vw,54px)}
.ws-product .eyebrow{color:#1e716d;font-size:10px;letter-spacing:.18em}
.ws-product section h2{font-family:var(--sans);font-size:clamp(37px,4.8vw,69px);line-height:.98;letter-spacing:-.055em}.ws-product section h2 em{font-family:inherit;font-weight:400;color:#1e837d}
.ws-product .problema{background:var(--ed-cream);color:var(--ed-ink)}
/* El <h2> se quedaba en blanco puro sobre el crema (1,14:1, ilegible): la
   portada sí tenía esta regla y las fichas no. Los titulares con <em> dentro
   son el punto ciego clásico — el color del <h2> no se hereda del <em>. */
.ws-product .problema h2{color:#0d2431}
.ws-product .problema .wrap{gap:clamp(42px,7vw,105px)}.ws-product .problema p{color:#596d77;font-size:16px}.ws-product .problema .foto{overflow:hidden;border-radius:18px 160px 18px 18px;box-shadow:0 26px 65px rgba(7,21,34,.15)}
.ws-product .tienda{background:linear-gradient(145deg,#0b2332,#06131f);color:#fff}.ws-product .tienda h2{color:#fff}.ws-product .tienda .sub{color:#aabdc5}.ws-product .tienda-grid{gap:15px;margin-top:40px}
.ws-product .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-product .tcard .med{color:var(--ed-aqua);font-family:var(--sans);font-size:27px;line-height:1.05}.ws-product .tcard .li{border-color:rgba(255,255,255,.1);color:#b8c8ce}.ws-product .tcard .li b{color:#fff}.ws-product .tcard .env{color:#8fa6b1}.ws-product .tcard .btn{border-radius:9px;background:var(--ed-aqua);border-color:var(--ed-aqua);color:#06212a}
/* Estas tarjetas viven en DOS contextos dentro de la misma página: la sección
   oscura (.tienda, "Cada piscina, su sistema") y las claras (#colores, "PVC o
   policarbonato"). Estaban estilizadas solo para la oscura, y de ahí los dos
   fallos que se veían: en la sección clara, borde y fondo blancos sobre blanco
   con el rótulo aqua a 1,5:1; y en la oscura, el <h3> heredaba el azul oscuro
   de sistema.css sobre fondo oscuro. Se separan los dos contextos. */
.ws-product .tarjetas-familia{gap:16px}
.ws-product .tarjeta-familia{border:1px solid var(--ed-line);border-radius:15px;background:#fff;box-shadow:none}
.ws-product .tarjeta-familia .bd{padding:27px}
.ws-product .tarjeta-familia h3{font-family:var(--sans);font-size:27px;letter-spacing:-.04em;color:#0c2230}
.ws-product .tarjeta-familia .num,.ws-product .tarjeta-familia .go{color:#1e716d}
.ws-product .tienda .tarjeta-familia{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.05)}
.ws-product .tienda .tarjeta-familia h3{color:#fff}
.ws-product .tienda .tarjeta-familia p{color:#b8c8ce}
.ws-product .tienda .tarjeta-familia .num,.ws-product .tienda .tarjeta-familia .go{color:var(--ed-aqua)}
.ws-product #galeria,.ws-product .social{background:#f4f7f5}.ws-product .galeria-filtros{gap:8px}.ws-product .galeria-filtro{border-radius:999px}.ws-product .galeria-filtro.activo{background:#0b2634;color:#fff;border-color:#0b2634}.ws-product .galeria-item{border-radius:15px;overflow:hidden}.ws-product .galeria-item img{transition:transform .5s ease}.ws-product .galeria-item:hover img{transform:scale(1.04)}
.ws-product .proceso,.ws-product .zona{background:#fff}.ws-product .paso{border-color:var(--ed-line);border-radius:16px}.ws-product .paso .n{color:#d5efed}.ws-product .cta{background:linear-gradient(135deg,#0a2636,#06131f)}.ws-product footer.sitio{background:#04101a}
.ws-product--trabajos .trabajos-hero{max-width:none;margin:0;padding:150px clamp(22px,7vw,110px) 72px;background:radial-gradient(circle at 15% 20%,rgba(105,221,215,.18),transparent 30%),linear-gradient(130deg,#071927,#0a2938);color:#fff}.ws-product--trabajos .trabajos-hero h1{font-family:var(--sans);font-size:clamp(48px,6vw,90px);line-height:.9;letter-spacing:-.065em}.ws-product--trabajos .trabajos-hero p{max-width:670px;color:#b3c5cc;font-size:17px;line-height:1.6}.ws-product--trabajos .trabajos-grid{padding-block:70px}.ws-product--trabajos .trabajo-card{border-radius:16px;overflow:hidden;border:1px solid var(--ed-line);box-shadow:0 12px 35px rgba(7,21,34,.08)}
.ws-product--contacto main>section:not(.hero):not(.cta){background:#f5f7f4}.ws-product--contacto .form-contacto,.ws-product--contacto .contacto-form{border:1px solid var(--ed-line);border-radius:18px;box-shadow:0 18px 48px rgba(7,21,34,.08)}

@media(max-width:1060px){.ws-product .hero-inner{grid-template-columns:1fr 1fr;gap:34px}.ws-product .hero-foto,.ws-product .hero-foto img{min-height:470px}.ws-product .hero h1{font-size:clamp(48px,6vw,76px)}}
@media(max-width:780px){.ws-product header.sitio .nav{min-height:67px}.ws-product .hero{min-height:auto;padding:104px 0 40px}.ws-product .hero-inner{grid-template-columns:1fr;padding-inline:18px}.ws-product .hero h1{font-size:clamp(50px,15vw,74px)}.ws-product .hero .sub{font-size:15px}.ws-product .hero-foto{grid-row:1;min-height:380px;border-radius:165px 165px 16px 16px}.ws-product .hero-foto img{min-height:380px}.ws-product .badges{grid-template-columns:repeat(2,1fr)}.ws-product .badge:nth-child(2){border-right:0}.ws-product .badge:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}.ws-product .hero-cta .btn{min-width:0}.ws-product section h2{font-size:clamp(36px,11vw,55px)}}
@media(max-width:440px){.ws-product .hero-foto,.ws-product .hero-foto img{min-height:325px}.ws-product .hero-cta .btn{width:100%;justify-content:center}.ws-product .tcard .med{font-size:24px}}

/* Aviso de fallo al enviar el formulario. sistema.js inyecta este <p
   role="alert"> cuando el envío NO llega a Supabase. Antes no existía: se
   redirigía a /gracias/ como si hubiera llegado. Sin estilo se veía como un
   párrafo suelto, así que se marca como lo que es: un error recuperable. */
.ws-product [data-form-status]{margin-top:14px;padding:12px 14px;border:1px solid #e6b7b0;border-left:4px solid #c0503f;border-radius:10px;background:#fdf3f1;color:#8f3122;font-size:14px;line-height:1.45}
.ws-product [data-form-status]:empty{display: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}}