/* ============================================================
   SMYLE-FLOOR · Sistema de diseño
   Suelos técnicos elevados — identidad técnica europea
   ============================================================ */

:root{
  --azul:#0B7CC2;
  --azul-osc:#065C92;
  --azul-claro:#E7F2FA;
  --antracita:#1C2126;
  --carbon:#2B3238;
  --gris-900:#3A4046;
  --gris-700:#4E565D;
  --gris-600:#616A72;
  --gris-400:#9AA3AB;
  --gris-200:#D9DEE3;
  --gris-100:#EDF0F3;
  --gris-50:#F6F8FA;
  --blanco:#FFFFFF;
  --max:1240px;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --radius:2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--gris-900);
  background:var(--blanco);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-osc)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{color:var(--antracita);line-height:1.18;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.2vw,3.35rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.15rem}
.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--azul);margin-bottom:14px;display:block
}
.eyebrow.light{color:#7FC2EC}
.lead{font-size:1.075rem;color:var(--gris-600);max-width:70ch}
.small{font-size:.83rem;color:var(--gris-600)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Barra superior ---------- */
.topbar{background:var(--antracita);color:var(--gris-400);font-size:.76rem;letter-spacing:.04em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.topbar a{color:var(--gris-400)}
.topbar a:hover{color:#fff}
.topbar .sep{opacity:.35;margin:0 10px}

/* ---------- Cabecera ---------- */
header.site{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--gris-200)
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:38px;width:auto}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{
  color:var(--carbon);font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent
}
nav.main a:hover{color:var(--azul);border-color:var(--azul)}
nav.main a.active{color:var(--azul);border-color:var(--azul)}
.btn{
  display:inline-block;padding:13px 26px;border-radius:var(--radius);
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid transparent;transition:.18s;cursor:pointer
}
.btn-primary{background:var(--azul);color:#fff}
.btn-primary:hover{background:var(--azul-osc);color:#fff}
.btn-ghost{border-color:var(--gris-200);color:var(--carbon);background:transparent}
.btn-ghost:hover{border-color:var(--azul);color:var(--azul)}
.btn-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn-light:hover{background:#fff;color:var(--antracita)}
.btn-sm{padding:9px 18px;font-size:.72rem}
.menu-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--antracita)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(120deg,var(--antracita) 0%,#232C34 55%,#173042 100%);
  color:#fff;position:relative;overflow:hidden
}
.hero::after{
  content:'';position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(circle at 78% 45%,#000 5%,transparent 62%);
  mask-image:radial-gradient(circle at 78% 45%,#000 5%,transparent 62%)
}
.hero .wrap{position:relative;z-index:2;padding-top:84px;padding-bottom:84px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{color:#fff}
.hero p{color:#C3CCD4;font-size:1.1rem;margin-top:20px;max-width:52ch}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-stats{display:flex;gap:38px;margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hero-stats div strong{display:block;font-size:1.55rem;color:#fff}
.hero-stats div span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-400)}

/* ---------- Cabecera de página interior ---------- */
.pagehead{background:var(--antracita);color:#fff;padding:66px 0 58px}
.pagehead h1{color:#fff;max-width:22ch}
.pagehead p{color:#C3CCD4;margin-top:16px;max-width:64ch}
.crumbs{font-size:.76rem;color:var(--gris-400);margin-bottom:18px;letter-spacing:.05em}
.crumbs a{color:var(--gris-400)}
.crumbs a:hover{color:#fff}

/* ---------- Secciones ---------- */
section{padding:78px 0}
section.tight{padding:52px 0}
section.gris{background:var(--gris-50);border-block:1px solid var(--gris-200)}
section.oscuro{background:var(--antracita);color:#C3CCD4}
section.oscuro h2,section.oscuro h3{color:#fff}
.sec-head{max-width:70ch;margin-bottom:44px}

/* ---------- Rejillas ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* ---------- Tarjetas ---------- */
.card{
  background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius);
  padding:30px;transition:.2s;display:flex;flex-direction:column
}
.card:hover{border-color:var(--azul);box-shadow:0 12px 34px rgba(11,124,194,.10);transform:translateY(-2px)}
.card h3{margin-bottom:10px}
.card p{font-size:.93rem;color:var(--gris-600)}
.card .card-foot{margin-top:auto;padding-top:18px}
.card-link{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.card-link::after{content:' →'}

.syscard{background:#fff;border:1px solid var(--gris-200);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.syscard:hover{border-color:var(--azul);box-shadow:0 14px 38px rgba(28,33,38,.10)}
.syscard .fig{background:var(--gris-100);padding:24px;border-bottom:1px solid var(--gris-200)}
.syscard .body{padding:26px;display:flex;flex-direction:column;flex:1}
.syscard .specs{list-style:none;margin:16px 0 0;font-size:.85rem}
.syscard .specs li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--gris-200)}
.syscard .specs li span:first-child{color:var(--gris-600)}
.syscard .specs li span:last-child{font-weight:600;color:var(--antracita);text-align:right}

/* ---------- Píldoras / etiquetas ---------- */
.pill{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:var(--azul-claro);color:var(--azul-osc)
}
.pill.dark{background:rgba(255,255,255,.1);color:#9CCBE8}
.pill.grey{background:var(--gris-100);color:var(--gris-600)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* ---------- Tablas técnicas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff}
.tabla caption{text-align:left;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-600);padding-bottom:12px;font-weight:700}
.tabla th{
  background:var(--antracita);color:#fff;text-align:left;padding:13px 14px;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;vertical-align:bottom
}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--gris-200);vertical-align:top}
.tabla tr:nth-child(even) td{background:var(--gris-50)}
.tabla td:first-child{font-weight:600;color:var(--antracita)}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-wrap{overflow-x:auto;border:1px solid var(--gris-200)}

/* ---------- Bloques de datos ---------- */
.datagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--gris-200);border:1px solid var(--gris-200)}
.datagrid div{background:#fff;padding:22px}
.datagrid strong{display:block;font-size:1.5rem;color:var(--azul);font-variant-numeric:tabular-nums}
.datagrid span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-600)}

/* ---------- Nota / aviso ---------- */
.nota{border-left:3px solid var(--azul);background:var(--azul-claro);padding:18px 22px;font-size:.88rem;color:var(--gris-900)}
.nota.warn{border-color:#C9A227;background:#FCF7E8}

/* ---------- Certificaciones ---------- */
.certs{display:flex;flex-wrap:wrap;gap:12px}
.cert{border:1px solid var(--gris-200);padding:12px 18px;font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--carbon);background:#fff}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(115deg,var(--azul-osc),var(--azul));color:#fff;padding:66px 0}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.86);margin-top:12px}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}

/* ---------- Formulario ---------- */
.form{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-600);margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--gris-200);border-radius:var(--radius);
  font-family:inherit;font-size:.94rem;background:#fff;color:var(--gris-900)
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
.form textarea{min-height:130px;resize:vertical}

/* ---------- Pie ---------- */
footer.site{background:var(--antracita);color:var(--gris-400);padding:62px 0 0;font-size:.88rem}
footer.site h4{color:#fff;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
footer.site a{color:var(--gris-400);display:block;padding:4px 0}
footer.site a:hover{color:#fff}
footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}
footer .logo-f{background:#fff;padding:12px 16px;display:inline-block;margin-bottom:18px}
footer .logo-f img{height:34px}
footer .legal{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.78rem}
footer .legal a{display:inline-block;margin-left:18px}

/* ---------- Utilidades ---------- */
.mt0{margin-top:0}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.center{text-align:center}
.divider{height:1px;background:var(--gris-200);margin:44px 0}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .split{grid-template-columns:1fr;gap:34px}
  .g4{grid-template-columns:repeat(2,1fr)}
  footer .fgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  nav.main{
    display:none;position:absolute;top:78px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;gap:0;padding:12px 28px 20px;
    border-bottom:1px solid var(--gris-200);box-shadow:0 16px 30px rgba(0,0,0,.07)
  }
  nav.main.open{display:flex}
  nav.main a{width:100%;padding:12px 0;border-bottom:1px solid var(--gris-100)}
  .menu-toggle{display:block}
  header.site .btn{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center}
  .topbar .hide-m{display:none}
  section{padding:56px 0}
  .hero-stats{gap:24px;flex-wrap:wrap}
}
@media print{
  header.site,footer.site,.topbar,.cta,.menu-toggle{display:none}
  body{font-size:11pt}
}

/* ============================================================
   v2 — bloques de home tipo fabricante
   ============================================================ */

/* --- Menu desplegable --- */
.has-sub{position:relative}
.has-sub>.sub{
  display:none;position:absolute;top:100%;left:-18px;min-width:322px;background:#fff;
  border:1px solid var(--gris-200);box-shadow:0 22px 46px rgba(28,33,38,.13);padding:10px 0;z-index:80
}
.has-sub:hover>.sub{display:block}
.sub a{
  display:block;padding:10px 22px;font-size:.84rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--carbon);border:0
}
.sub a:hover{background:var(--gris-50);color:var(--azul);border:0}
.sub .sub-head{padding:8px 22px 4px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-400);font-weight:700}

/* --- Franja USP --- */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gris-200);border:1px solid var(--gris-200)}
.usp .u{background:#fff;padding:30px 26px}
.usp .ico{width:42px;height:42px;margin-bottom:16px}
.usp h3{font-size:1rem;margin-bottom:6px}
.usp p{font-size:.87rem;color:var(--gris-600)}

/* --- Tarjeta de familia de producto --- */
.prod{background:#fff;border:1px solid var(--gris-200);display:flex;flex-direction:column;transition:.2s}
.prod:hover{border-color:var(--azul);box-shadow:0 16px 40px rgba(28,33,38,.10)}
.prod .fig{background:var(--gris-100);border-bottom:1px solid var(--gris-200);padding:18px}
.prod .body{padding:24px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:1.05rem;margin-bottom:8px}
.prod p{font-size:.88rem;color:var(--gris-600)}
.prod .kv{margin:16px 0;font-size:.8rem;border-top:1px solid var(--gris-200)}
.prod .kv div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--gris-100)}
.prod .kv span:last-child{font-weight:600;color:var(--antracita)}
.prod .acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}

/* --- Casos con pestanas --- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--gris-200);margin-bottom:34px}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;padding:13px 20px;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-600)
}
.tabs button:hover{color:var(--azul)}
.tabs button.on{color:var(--azul);border-color:var(--azul)}
.tabpane{display:none}
.tabpane.on{display:block}
.caso{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.rel{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.rel a{
  border:1px solid var(--gris-200);padding:10px 16px;font-size:.78rem;font-weight:600;
  color:var(--carbon);background:#fff
}
.rel a:hover{border-color:var(--azul);color:var(--azul)}

/* --- Ventajas con imagen --- */
.adv{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.adv article{border:1px solid var(--gris-200);background:#fff}
.adv .top{background:var(--gris-100);padding:26px;border-bottom:1px solid var(--gris-200)}
.adv .top svg{height:78px;width:auto;margin:0 auto;display:block}
.adv .txt{padding:24px}
.adv h3{font-size:1rem;margin-bottom:8px}
.adv p{font-size:.87rem;color:var(--gris-600)}

/* --- Proceso en pasos --- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.pasos .p{background:var(--antracita);padding:26px 22px}
.pasos .n{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:100px;
  background:var(--azul);color:#fff;font-weight:800;font-size:.9rem;margin-bottom:14px
}
.pasos h3{font-size:.95rem;color:#fff;margin-bottom:6px}
.pasos p{font-size:.83rem;color:#9AA3AB}

/* --- Sectores / alcance --- */
.sect{display:flex;flex-wrap:wrap;gap:10px}
.sect span{border:1px solid var(--gris-200);background:#fff;padding:11px 18px;font-size:.83rem;color:var(--carbon)}

/* --- Blog --- */
.post{border:1px solid var(--gris-200);background:#fff;display:flex;flex-direction:column}
.post .fig{background:var(--gris-100);padding:22px;border-bottom:1px solid var(--gris-200)}
.post .body{padding:24px}
.post .fecha{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);font-weight:700}
.post h3{font-size:1rem;margin:10px 0 8px}
.post p{font-size:.87rem;color:var(--gris-600)}

@media(max-width:1000px){
  .usp{grid-template-columns:repeat(2,1fr)}
  .adv{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .caso{grid-template-columns:1fr;gap:30px}
}
@media(max-width:760px){
  .usp,.adv,.pasos{grid-template-columns:1fr}
  .has-sub>.sub{display:block;position:static;border:0;box-shadow:none;min-width:0;padding:0 0 0 14px}
  .sub a{padding:8px 0}
}

/* --- Selector de producto de la home --- */
.minis{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.minis .mini{
  background:#fff;border:1px solid var(--gris-200);padding:16px;display:block;text-align:center;transition:.18s
}
.minis .mini:hover{border-color:var(--azul);box-shadow:0 12px 30px rgba(28,33,38,.10)}
.minis .fig{display:block;background:var(--gris-50);padding:10px;margin-bottom:12px}
.minis .fig svg{height:104px;width:100%}
.minis .t{display:block;font-size:.85rem;font-weight:700;color:var(--antracita);line-height:1.35}
.minis .mini:nth-last-child(-n+3){grid-column:auto}
@media(min-width:1001px){.minis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.minis{grid-template-columns:1fr}}

/* --- Muestrario de acabados --- */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.swatch{border:1px solid var(--gris-200);background:#fff}
.swatch .c{height:74px}
.swatch .n{padding:10px 12px;font-size:.78rem;font-weight:600;color:var(--antracita)}
@media(max-width:900px){.swatches{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.swatches{grid-template-columns:repeat(2,1fr)}}

/* --- Carrusel de ficha de modelo --- */
.carousel{border:1px solid var(--gris-200);background:#fff}
.carousel .main{position:relative;background:#fff}
.carousel .slide{display:none}
.carousel .slide.on{display:block}
.carousel .slide svg{width:100%;height:auto;display:block}
.carousel .thumbs{display:flex;gap:10px;padding:14px;border-top:1px solid var(--gris-200);background:var(--gris-50);flex-wrap:wrap}
.carousel .thumbs button{
  width:88px;padding:4px;background:#fff;border:1.5px solid var(--gris-200);cursor:pointer;line-height:0
}
.carousel .thumbs button.on{border-color:var(--antracita)}
.carousel .thumbs button:hover{border-color:var(--azul)}
.carousel .thumbs svg{width:100%;height:auto;display:block}
.carousel .cap{padding:12px 16px;font-size:.8rem;color:var(--gris-600);border-top:1px solid var(--gris-200)}
.carousel .nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(28,33,38,.55);
  color:#fff;width:36px;height:52px;cursor:pointer;font-size:1.1rem}
.carousel .nav.prev{left:0}
.carousel .nav.next{right:0}
.carousel .nav:hover{background:var(--azul)}

.modelo-head{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:start}
.modelo-head h1{font-size:clamp(1.7rem,3.1vw,2.6rem)}
@media(max-width:1000px){.modelo-head{grid-template-columns:1fr;gap:32px}}

/* --- Fotografia de producto --- */
.foto{margin:0;background:#fff;overflow:hidden}
.foto img{width:100%;height:auto;display:block}
.hero-foto{background:transparent;border-radius:2px;box-shadow:0 30px 60px rgba(0,0,0,.28)}
.prod .fig .foto img,.minis .fig .foto img{background:#fff}
.minis .fig .foto{padding:0}
.carousel .slide .foto img{width:100%;height:auto}
.carousel .thumbs .foto img{width:100%;height:auto}
.syscard .fig .foto img{width:100%;height:auto}

/* ============================================================
   v3 — direccion "premium industrial"
   ============================================================ */

/* --- Barra superior --- */
.topbar.v3{background:#0E1418;color:#8B959D;font-size:.78rem}
.topbar.v3 .wrap{height:42px}
.topbar.v3 a{color:#B8C1C8}
.topbar.v3 a:hover{color:#fff}
.topbar.v3 .claim{color:var(--azul);letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-size:.7rem}

/* --- Cabecera con megamenu --- */
header.v3{border-bottom:1px solid var(--gris-200);background:#fff}
header.v3 .wrap{height:84px}
nav.v3{display:flex;gap:34px;align-items:center;height:100%}
nav.v3 > .item{position:relative;height:100%;display:flex;align-items:center}
nav.v3 > .item > a{
  color:var(--antracita);font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border:0;padding:0;display:flex;align-items:center;gap:6px;height:100%
}
nav.v3 > .item > a::after{content:'';display:block;height:2px;background:var(--azul);
  position:absolute;left:0;right:0;bottom:0;transform:scaleX(0);transition:.2s}
nav.v3 > .item:hover > a{color:var(--azul)}
nav.v3 > .item:hover > a::after{transform:scaleX(1)}
.caret{font-size:.6rem;opacity:.55}

.mega{
  display:none;position:absolute;top:84px;left:50%;transform:translateX(-50%);
  width:min(1180px,96vw);background:#fff;border:1px solid var(--gris-200);
  box-shadow:0 30px 60px rgba(16,22,28,.16);z-index:90;padding:30px
}
nav.v3 > .item:hover .mega{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mega-card{display:block;border:1px solid var(--gris-200);background:#fff;transition:.18s}
.mega-card:hover{border-color:var(--azul);box-shadow:0 10px 26px rgba(11,124,194,.12)}
.mega-card .thumb{background:var(--gris-50);aspect-ratio:16/10;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mega-card .thumb img,.mega-card .thumb svg{width:100%;height:100%;object-fit:cover}
.mega-card .t{display:block;padding:12px 14px;font-size:.86rem;font-weight:700;color:var(--antracita);line-height:1.3}
.mega-card .s{display:block;padding:0 14px 12px;font-size:.76rem;color:var(--gris-600)}
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mega-cols h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-400);margin-bottom:12px}
.mega-cols a{display:block;padding:7px 0;font-size:.9rem;color:var(--carbon);font-weight:500}
.mega-cols a:hover{color:var(--azul)}
.mega-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--gris-200);
  display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.85rem;color:var(--gris-600)}

/* --- Hero a sangre --- */
.hero-v3{position:relative;background:#0B1116;color:#fff;overflow:hidden}
.hero-v3 .bg{position:absolute;inset:0}
.hero-v3 .bg img{width:100%;height:100%;object-fit:cover;opacity:.62}
.hero-v3::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,17,22,.95) 0%,rgba(11,17,22,.80) 42%,rgba(11,17,22,.25) 100%)
}
.hero-v3 .wrap{position:relative;z-index:3;padding-top:104px;padding-bottom:0}
.hero-v3 .eyebrow{color:#5FB3E8}
.hero-v3 h1{
  color:#fff;font-size:clamp(2.4rem,5vw,4.15rem);line-height:1.04;
  letter-spacing:-.025em;max-width:15ch
}
.hero-v3 p.sub{color:#C7D1D9;font-size:clamp(1rem,1.35vw,1.18rem);margin-top:24px;max-width:56ch;line-height:1.6}
.hero-v3 .hero-cta{margin-top:36px}
.hero-v3 .fam-line{
  margin-top:30px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#8FA0AC
}
.hero-v3 .fam-line span{color:#5FB3E8}
.hero-datos{
  position:relative;z-index:3;margin-top:72px;border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:repeat(4,1fr)
}
.hero-datos .d{padding:26px 30px 30px;border-right:1px solid rgba(255,255,255,.10)}
.hero-datos .d:last-child{border-right:0}
.hero-datos .k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7C8B96}
.hero-datos .v{font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:800;color:#fff;line-height:1.15;margin-top:6px;letter-spacing:-.02em}
.hero-datos .n{font-size:.8rem;color:#93A2AC;margin-top:4px}

/* --- Fila de familias --- */
.fam-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.fam-card{display:block;background:#fff;border:1px solid var(--gris-200);transition:.2s}
.fam-card:hover{border-color:var(--azul);transform:translateY(-3px);box-shadow:0 16px 34px rgba(16,22,28,.10)}
.fam-card .fig{background:var(--gris-50);aspect-ratio:4/3;overflow:hidden}
.fam-card .fig img,.fam-card .fig svg{width:100%;height:100%;object-fit:cover;display:block}
.fam-card .body{padding:16px 16px 18px}
.fam-card .t{font-size:.82rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--antracita)}
.fam-card .s{font-size:.8rem;color:var(--gris-600);margin-top:6px;line-height:1.45}
.fam-card .go{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1.5px solid var(--gris-200);border-radius:100px;color:var(--azul);margin-top:14px;font-size:.85rem}
.fam-card:hover .go{border-color:var(--azul);background:var(--azul);color:#fff}

/* --- Banda oscura de cifras --- */
.banda{background:var(--antracita);color:#C3CCD4;padding:44px 0}
.banda .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.banda .b{display:flex;gap:16px;align-items:flex-start}
.banda svg{width:34px;height:34px;flex:0 0 34px;stroke:var(--azul);fill:none;stroke-width:1.6}
.banda strong{display:block;font-size:1.65rem;color:#fff;line-height:1.1;letter-spacing:-.02em}
.banda span{font-size:.83rem;color:#93A2AC}

/* --- Soluciones por entorno (tarjetas verticales) --- */
.sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sol-card{position:relative;display:block;overflow:hidden;min-height:340px;background:#1C2126}
.sol-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:.5s}
.sol-card:hover img{transform:scale(1.05);opacity:.85}
.sol-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,17,21,.94) 8%,rgba(12,17,21,.35) 55%,rgba(12,17,21,.12) 100%)}
.sol-card .c{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.sol-card h3{color:#fff;font-size:1.02rem;letter-spacing:.02em}
.sol-card p{color:#B9C5CE;font-size:.83rem;margin-top:8px;line-height:1.45}
.sol-card .go{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:100px;background:var(--azul);color:#fff;margin-top:16px;font-size:.9rem}

/* --- Recursos tecnicos --- */
.rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rec{border:1px solid var(--gris-200);padding:26px;background:#fff;display:flex;flex-direction:column;transition:.2s}
.rec:hover{border-color:var(--azul);box-shadow:0 12px 30px rgba(16,22,28,.08)}
.rec svg{width:30px;height:30px;stroke:var(--azul);fill:none;stroke-width:1.6;margin-bottom:16px}
.rec h3{font-size:.98rem}
.rec p{font-size:.85rem;color:var(--gris-600);margin-top:8px}
.rec .card-foot{margin-top:auto;padding-top:16px}

/* --- CTA final --- */
.cta-final{background:var(--antracita);color:#C3CCD4;padding:64px 0}
.cta-final .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.cta-final h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.cta-final .args{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:0}
.cta-final .args div{font-size:.85rem;color:#A9B6BF}
.cta-final .args strong{display:block;color:#fff;font-size:.9rem;margin-bottom:5px}

@media(max-width:1100px){
  .fam-row{grid-template-columns:repeat(3,1fr)}
  .sol-grid{grid-template-columns:repeat(2,1fr)}
  .banda .wrap{grid-template-columns:repeat(2,1fr)}
  .rec-grid{grid-template-columns:repeat(2,1fr)}
  .hero-datos{grid-template-columns:repeat(2,1fr)}
  .hero-datos .d{border-bottom:1px solid rgba(255,255,255,.10)}
  .cta-final .wrap{grid-template-columns:1fr;gap:32px}
  .mega{display:none !important}
}
@media(max-width:700px){
  .fam-row{grid-template-columns:repeat(2,1fr)}
  .sol-grid{grid-template-columns:1fr}
  .banda .wrap,.rec-grid,.hero-datos{grid-template-columns:1fr}
  .cta-final .args{grid-template-columns:1fr}
  nav.v3{display:none}
  nav.v3.open{display:flex;position:absolute;top:84px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:flex-start;gap:0;height:auto;padding:10px 28px 20px;border-bottom:1px solid var(--gris-200);z-index:80}
  nav.v3.open > .item{height:auto;width:100%}
  nav.v3.open > .item > a{padding:13px 0;height:auto;border-bottom:1px solid var(--gris-100);width:100%}
  .hero-v3 .wrap{padding-top:64px}
}
.hero-v3 .bg picture{display:block;width:100%;height:100%}
.hero-v3 .bg figure{margin:0;width:100%;height:100%}
.hero-v3 .hero-datos .d:nth-child(4){border-right:0}
.topbar.v3 .sep{margin:0 8px}

/* --- correccion tarjetas de familia (spans en bloque) --- */
.fam-card .fig,.fam-card .body,.fam-card .t,.fam-card .s{display:block}
.fam-card{display:flex;flex-direction:column}
.fam-card .body{flex:1;display:flex;flex-direction:column}
.fam-card .go{margin-top:auto;align-self:flex-start}
.fam-card .fig svg{object-fit:cover;display:block}
/* --- megamenu: spans en bloque --- */
.mega-card{display:flex;flex-direction:column}
.mega-card .thumb,.mega-card .t,.mega-card .s{display:block}
.mega-card .thumb svg{display:block}
.mega-cols > span{display:block}

/* --- correccion: megamenu alineado al contenedor, no al enlace --- */
header.site.v3 .wrap{position:relative}
nav.v3 > .item{position:static}
nav.v3 > .item > a{position:relative}
nav.v3 > .item > a::after{bottom:-1px}
.mega{
  left:0;right:0;width:auto;max-width:none;transform:none;top:100%;
  border-top:0;border-radius:0 0 2px 2px
}
.mega-grid{grid-template-columns:repeat(4,1fr)}
.mega-card .thumb{aspect-ratio:16/10;background:var(--gris-50)}
.mega-card .thumb img,.mega-card .thumb svg{width:100%;height:100%;object-fit:cover;display:block}
.mega-card .thumb figure,.mega-card .thumb picture{display:block;width:100%;height:100%;margin:0}
@media(max-width:1100px){.mega{display:none !important}}