.cst{--ink:#0E1A1F;--mut:#5B6B72;--line:#E2E8E9;--acc:#128059;--btn:#0E7A57;--deep:#0A3B4A;--brand:#19B37C;--bg:#F5F7F7;
 font-family:Archivo,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
 font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.cst *,.cst *::before,.cst *::after{box-sizing:border-box}
.cst img{max-width:100%;display:block}
.cst .w{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.cst h1,.cst h2,.cst h3,.cst h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.08}
/* El Kit de Elementor declara h1..h6{color:#54595F} y a{color:#1FB9A8}. Son reglas
   directas, asi que ganan a cualquier color heredado: hay que fijarlo explicitamente
   en cada contexto. Ver feedback_design_into_elementor_page. */
.cst h1,.cst h2,.cst h3{color:var(--ink)}
.cst .cap h2,.cst .cap h3,.cst .cta h2,.cst .hero h1{color:#fff}
.cst .ft h4{color:#fff}
.cst .pc h3,.cst .gc h3{color:var(--ink)}
.cst p{margin:0}
.cst a{color:var(--ink)}
.cst .hero-rail a,.cst .cc,.cst .cta a.btn-a{color:#fff}
.cst .ft a{color:#9FB0B6}
.cst .ft a:hover{color:#5FE3A8}
.cst .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.cst .lead{font-size:clamp(17px,1.5vw,20px);color:var(--mut);max-width:62ch}
.cst .btn{display:inline-flex;align-items:center;gap:.6em;padding:15px 26px;font-weight:700;font-size:15px;
 text-decoration:none;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.cst .btn-a{background:var(--btn);color:#fff}
.cst .btn-a:hover{background:#0B5F44}
.cst .btn-b{border-color:rgba(255,255,255,.55);color:#fff}
.cst .btn-b:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.cst .btn-c{border-color:var(--ink);color:var(--ink)}
.cst .btn-c:hover{background:var(--ink);color:#fff}

/* ---- cabecera ---- */
.cst .hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.cst .hd-in{display:flex;align-items:center;gap:32px;height:84px}
.cst .hd-logo img{width:232px}
.cst .hd-nav{margin-left:auto;display:flex;gap:30px;align-items:center}
.cst .hd-nav a{font-size:15px;font-weight:600;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.cst .hd-nav a:hover{border-bottom-color:var(--brand)}
.cst .hd .btn{padding:12px 22px}

/* ---- hero ---- */
.cst .hero{position:relative;background:var(--deep);overflow:hidden;isolation:isolate}
.cst .hero video,.cst .hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cst .hero::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(95deg,rgba(7,26,33,.93) 0%,rgba(7,26,33,.78) 46%,rgba(7,26,33,.35) 100%)}
.cst .hero-in{padding:118px 0 0}
.cst .hero h1{font-size:clamp(38px,5.1vw,68px);color:#fff;max-width:17ch;margin:18px 0 22px}
.cst .hero .lead{color:#C9D6D9;max-width:52ch}
.cst .hero .eyebrow{color:#5FE3A8}
.cst .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.cst .hero-rail{display:grid;grid-template-columns:repeat(4,1fr);margin-top:92px;
 border-top:1px solid rgba(255,255,255,.22)}
.cst .hero-rail a{padding:22px 22px 26px 0;text-decoration:none;color:#fff;
 border-right:1px solid rgba(255,255,255,.14)}
.cst .hero-rail a:last-child{border-right:0}
.cst .hero-rail a:hover .rn{color:#5FE3A8}
.cst .rk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FA8AE}
.cst .rn{font-size:19px;font-weight:700;margin-top:6px;transition:color .15s}

/* ---- secciones ---- */
.cst .sec{padding:104px 0}
.cst .sec-h{display:flex;align-items:end;justify-content:space-between;gap:32px;
 border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:54px}
.cst .sec-h h2{font-size:clamp(29px,3.2vw,44px);max-width:20ch}
.cst .sec-h .lead{font-size:16px;max-width:40ch}

/* ---- productos ---- */
.cst .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line)}
.cst .pc{background:#fff;padding:0 0 30px;text-decoration:none;display:flex;flex-direction:column;
 transition:background .18s}
.cst .pc:hover{background:#FAFCFC}
.cst .pc-img{aspect-ratio:4/3;background:var(--bg);display:flex;align-items:center;justify-content:center;
 overflow:hidden;margin-bottom:24px}
.cst .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.cst .pc:hover .pc-img img{transform:scale(1.045)}
.cst .pc-b{padding:0 26px}
.cst .pc h3{font-size:21px;margin-bottom:9px}
.cst .pc p{font-size:15px;color:var(--mut);line-height:1.55}
.cst .pc .go{margin-top:16px;font-size:14px;font-weight:700;color:var(--acc);display:inline-flex;gap:.45em}
.cst .pc:hover .go span{transform:translateX(4px)}
.cst .go span{transition:transform .2s}

/* ---- aplicacion ---- */
.cst .app{background:var(--bg)}
.cst .app-g>div:first-child{padding-top:6px}
.cst .app-g{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.cst .app-ph{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cst .app-ph img{aspect-ratio:3/4.2;object-fit:cover;width:100%}

.cst .ul{list-style:none;padding:0;margin:26px 0 32px}
.cst .ul li{padding:14px 0 14px 30px;border-top:1px solid var(--line);position:relative;font-size:16px}
.cst .ul li:last-child{border-bottom:1px solid var(--line)}
.cst .ul li::before{content:"";position:absolute;left:2px;top:22px;width:11px;height:2px;background:var(--brand)}

/* ---- capacidades ---- */
.cst .cap{background:var(--deep);color:#fff}
.cst .cap .sec-h{border-bottom-color:rgba(255,255,255,.2)}
.cst .cap .lead{color:#A9C0C6}
.cst .cap .eyebrow{color:#5FE3A8}
.cst .caps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cst .cc{text-decoration:none;color:#fff;display:block}
.cst .cc-img{aspect-ratio:16/10;overflow:hidden;margin-bottom:16px}
.cst .cc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .4s ease,filter .3s}
.cst .cc:hover .cc-img img{transform:scale(1.06);filter:saturate(1)}
.cst .cc h3{font-size:18px;margin-bottom:6px}
.cst .cc p{font-size:14px;color:#A9C0C6;line-height:1.5}

/* ---- grupo ---- */
.cst .grp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cst .gc{background:#fff;padding:40px 32px 36px;text-decoration:none;display:block;transition:background .18s}
.cst .gc:hover{background:#FAFCFC}
.cst .gc .n{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.cst .gc h3{font-size:24px;margin:10px 0 12px}
.cst .gc p{font-size:15px;color:var(--mut)}
.cst .gc .go{margin-top:18px;font-size:14px;font-weight:700;color:var(--acc);display:inline-flex;gap:.45em}

/* ---- cta ---- */
.cst .cta{background:var(--ink);color:#fff;padding:86px 0}
.cst .cta-g{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.cst .cta h2{font-size:clamp(27px,3vw,38px);max-width:22ch}
.cst .cta p{color:#9FB0B6;margin-top:14px;max-width:48ch}

/* ---- pie ---- */
.cst .ft{background:#08161B;color:#9FB0B6;padding:72px 0 0;font-size:15px}
.cst .ft-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.cst .ft img{width:216px;margin-bottom:22px}
.cst .ft h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
.cst .ft ul{list-style:none;padding:0;margin:0}
.cst .ft li{margin-bottom:10px}
.cst .ft a{text-decoration:none}
.cst .ft a:hover{color:#5FE3A8}
.cst .ft-b{margin-top:56px;border-top:1px solid rgba(255,255,255,.12);padding:22px 0 26px;
 display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}

@media(max-width:1080px){
 .cst .prods,.cst .caps{grid-template-columns:repeat(2,1fr)}
 .cst .app-g{grid-template-columns:1fr;gap:42px}
 .cst .hero-rail{grid-template-columns:repeat(2,1fr)}
 .cst .ft-g{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .cst .hd-nav{display:none}
 .cst .hd-in{height:70px}
 .cst .hd-logo img{width:186px}
 .cst .sec{padding:64px 0}
 .cst .hero-in{padding:76px 0 0}
 .cst .hero-rail{margin-top:54px;grid-template-columns:1fr}
 .cst .hero-rail a{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:16px 0}
 .cst .prods,.cst .caps,.cst .grp{grid-template-columns:1fr}
 .cst .sec-h{flex-direction:column;align-items:start;gap:16px}
 .cst .ft-g{grid-template-columns:1fr}
}

/* --- menu movil: <details>, sin JS. Un <input> no vale: kses lo elimina --- */
.cst .hd-m{display:none;margin-left:auto;position:relative}
.cst .hd-m>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;
 flex-direction:column;justify-content:center;gap:5px;padding:0 9px}
.cst .hd-m>summary::-webkit-details-marker{display:none}
.cst .hd-m>summary span{display:block;height:2px;background:var(--ink);border-radius:1px}
.cst .hd-mp{position:absolute;right:0;top:calc(100% + 10px);min-width:216px;background:#fff;
 border:1px solid var(--line);padding:8px 0;box-shadow:0 14px 34px rgba(10,26,31,.13)}
.cst .hd-mp a{display:block;padding:13px 22px;font-size:16px;font-weight:600;
 text-decoration:none;color:var(--ink)}
.cst .hd-mp a:hover{background:var(--bg)}
@media(max-width:760px){.cst .hd-m{display:block}}

/* ===================== PÁGINAS INTERIORES ===================== */
.cst .phero{background:var(--deep);color:#fff;padding:74px 0 66px;position:relative;overflow:hidden}
.cst .phero::after{content:"";position:absolute;right:-90px;top:-70px;width:420px;height:420px;
 border:1px solid rgba(255,255,255,.07);transform:rotate(45deg)}
.cst .phero .bc{font-size:13px;color:#8FA8AE;margin-bottom:16px}
.cst .phero .bc a{color:#8FA8AE;text-decoration:none}
.cst .phero .bc a:hover{color:#5FE3A8}
.cst .phero h1{color:#fff;font-size:clamp(30px,3.9vw,50px);max-width:19ch}
.cst .phero .lead{color:#C9D6D9;margin-top:18px;max-width:58ch}

.cst .body{padding:78px 0 92px}
.cst .cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.cst .prose{max-width:74ch}
.cst .prose h2{font-size:clamp(23px,2.3vw,31px);margin:44px 0 16px}
.cst .prose h2:first-child{margin-top:0}
.cst .prose h3{font-size:19px;margin:30px 0 10px}
.cst .prose p{margin:0 0 15px;color:#33434A}
.cst .prose ul{margin:0 0 20px;padding:0;list-style:none}
.cst .prose ul li{padding:11px 0 11px 26px;border-top:1px solid var(--line);position:relative;color:#33434A;font-size:16px}
.cst .prose ul li:last-child{border-bottom:1px solid var(--line)}
.cst .prose ul li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:2px;background:var(--brand)}
.cst .prose strong{color:var(--ink)}

.cst .aside{border:1px solid var(--line);padding:28px 26px;background:var(--bg);position:sticky;top:104px}
.cst .aside h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.cst .aside ul{list-style:none;margin:0 0 22px;padding:0}
.cst .aside li{border-top:1px solid var(--line)}
.cst .aside li:last-child{border-bottom:1px solid var(--line)}
.cst .aside ul a{display:block;padding:11px 0;font-size:15px;font-weight:600;text-decoration:none;color:var(--ink)}
.cst .aside ul a:hover{color:var(--acc)}
.cst .aside ul a.on{color:var(--acc)}
.cst .aside .btn{display:flex;width:100%;justify-content:center;text-align:center;
 color:#fff;text-decoration:none;padding:15px 20px}
.cst .aside .btn.btn-a{background:var(--btn);color:#fff}

.cst .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:34px 0 8px}
.cst .gal img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--bg)}
.cst .gal.g2{grid-template-columns:repeat(2,1fr)}
.cst .figc{font-size:13px;color:var(--mut);margin-top:10px}

.cst .idx{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cst .idx .pc-img{aspect-ratio:3/2}
.cst .band{background:var(--bg);padding:74px 0}
.cst .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cst .kpi{background:#fff;padding:30px 26px}
.cst .kpi .v{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.cst .kpi .k{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.45}
.cst .certs{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.cst .cert{border:1px solid var(--line);padding:11px 17px;font-size:14px;font-weight:600;background:#fff}

.cst .cinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cst .ci{background:#fff;padding:32px 28px}
.cst .ci h3{font-size:19px;margin-bottom:14px}
.cst .ci p{font-size:15px;color:var(--mut);margin-bottom:8px}
.cst .ci a{color:var(--acc);font-weight:600;text-decoration:none}

@media(max-width:1080px){
 .cst .cols{grid-template-columns:1fr;gap:44px}
 .cst .aside{position:static}
 .cst .idx,.cst .cinfo{grid-template-columns:repeat(2,1fr)}
 .cst .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 .cst .body{padding:52px 0 64px}
 .cst .phero{padding:48px 0 44px}
 .cst .gal,.cst .idx,.cst .cinfo,.cst .kpis{grid-template-columns:1fr}
 .cst .gal.g2{grid-template-columns:1fr}
}

/* ===================== FORMULARIO (widget de Elementor) ===================== */
/* La maquetacion la hace Elementor con .elementor-col-50/100 sobre flex.
   Meter aqui un display:grid convierte etiquetas y campos en celdas sueltas
   y descoloca todo: aqui SOLO se toca lo visual. */
.cst .elementor-form-fields-wrapper{row-gap:6px}
.cst .elementor-field-group{margin-bottom:16px}
.cst .elementor-field-label{font-size:13px!important;font-weight:700;letter-spacing:.03em;
 color:var(--ink)!important;margin-bottom:7px}
.cst .elementor-field-textual{border:1px solid var(--line);background:#fff;border-radius:0;
 padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink);line-height:1.5;
 box-shadow:none;transition:border-color .15s,box-shadow .15s;min-height:50px}
.cst .elementor-field-textual:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(18,128,89,.13)}
.cst .elementor-field-textual::placeholder{color:#93A3A9;opacity:1}
.cst textarea.elementor-field-textual{min-height:152px;resize:vertical}
.cst .elementor-field-type-acceptance .elementor-field-option label{font-size:14px;color:var(--mut);
 line-height:1.55;font-weight:400}
.cst .elementor-field-type-acceptance input[type=checkbox]{width:17px;height:17px;accent-color:var(--btn)}
.cst .elementor-field-type-acceptance a{color:var(--acc);font-weight:600}
.cst .elementor-mark-required .elementor-field-label:after{content:" *";color:var(--acc)}
.cst .elementor-button[type=submit],.cst .e-form__buttons button{background:var(--btn)!important;color:#fff!important;
 border:0;border-radius:0;padding:16px 32px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
 transition:background .15s}
.cst .elementor-button[type=submit]:hover,.cst .e-form__buttons button:hover{background:#0B5F44!important}
.cst .elementor-message{font-size:15px;margin-top:12px}
.cst .elementor-message.elementor-message-success{color:var(--acc)}
.cst .cst-formbox{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.cst .cst-formbox>.e-con-inner{max-width:none;padding:0}
.cst .elementor-field-group-website{position:absolute!important;left:-9999px!important;
 width:1px!important;height:1px!important;overflow:hidden}

/* ===================== FICHA DE PRODUCTO: aire y jerarquía ===================== */
.cst .prose{font-size:16.5px;line-height:1.72}
.cst .prose>p{margin:0 0 20px}
.cst .prose .lede{font-size:19px;line-height:1.62;color:var(--ink);font-weight:500;
 padding-bottom:26px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.cst .prose h2{margin:52px 0 18px;padding-top:4px}
.cst .prose h2:first-child{margin-top:0}

/* lista numerada de componentes: "1. Gripalón: perfil en C..." */
.cst .numlist{list-style:none;margin:8px 0 30px;padding:0;counter-reset:cst}
.cst .numlist li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
 padding:20px 0;border-top:1px solid var(--line)}
.cst .numlist li:last-child{border-bottom:1px solid var(--line)}
.cst .numlist .n{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
 background:var(--deep);color:#fff;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.cst .numlist .t{font-weight:700;color:var(--ink);display:block;margin-bottom:5px;font-size:17px}
.cst .numlist .d{color:#33434A;font-size:16px;line-height:1.66}

/* caja de dato/acento dentro del texto */
.cst .note{border-left:3px solid var(--brand);background:var(--bg);padding:20px 24px;
 margin:0 0 26px;font-size:16px;color:#2A3A41}
.cst .note strong{color:var(--ink)}

/* lista de comprobación con marca verde */
.cst .checks{list-style:none;margin:6px 0 28px;padding:0}
.cst .checks li{position:relative;padding:11px 0 11px 32px;border-top:1px solid var(--line);
 color:#33434A;font-size:16px}
.cst .checks li:last-child{border-bottom:1px solid var(--line)}
.cst .checks li::before{content:"";position:absolute;left:4px;top:18px;width:9px;height:5px;
 border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}

/* pares clave/valor para especificaciones */
.cst .specs{display:grid;grid-template-columns:auto 1fr;gap:0 26px;margin:0 0 28px;
 border-top:1px solid var(--line)}
.cst .specs dt{font-weight:700;color:var(--ink);padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.cst .specs dd{margin:0;padding:13px 0;border-bottom:1px solid var(--line);color:#33434A;font-size:15.5px}
@media(max-width:620px){.cst .specs{grid-template-columns:1fr;gap:0}
 .cst .specs dt{border-bottom:0;padding-bottom:2px}
 .cst .numlist li{grid-template-columns:34px 1fr;gap:14px}}

/* ===================== MEGAMENÚ (sin JS: hover + focus-within) ===================== */
.cst .hd-in{position:relative}
.cst .hd-nav{gap:2px}
.cst .mm{position:static}
.cst .mm>a{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;
 text-decoration:none;padding:30px 14px;color:var(--ink);border-bottom:2px solid transparent}
.cst .mm>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
 border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}
.cst .mm:hover>a,.cst .mm:focus-within>a{color:var(--acc)}
.cst .mm-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);box-shadow:0 22px 44px rgba(10,26,31,.10);
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;
 z-index:60}
.cst .mm:hover .mm-panel,.cst .mm:focus-within .mm-panel{opacity:1;visibility:visible;transform:none}
.cst .mm-in{width:min(1240px,calc(100% - 48px));margin-inline:auto;display:grid;
 grid-template-columns:270px 1fr;gap:44px;padding:34px 0 38px}
.cst .mm-lead .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.cst .mm-lead h4{font-size:21px;margin:9px 0 10px;color:var(--ink);letter-spacing:-.02em}
.cst .mm-lead p{font-size:14px;color:var(--mut);line-height:1.55;margin-bottom:16px}
.cst .mm-lead .go{font-size:14px;font-weight:700;color:var(--acc);text-decoration:none}
.cst .mm-links{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px;align-content:start}
.cst .mm-links a{display:block;padding:13px 14px;text-decoration:none;border-left:2px solid transparent}
.cst .mm-links a:hover{background:var(--bg);border-left-color:var(--brand)}
.cst .mm-links .t{display:block;font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.cst .mm-links .d{display:block;font-size:13.5px;color:var(--mut);line-height:1.5}
.cst .hd-nav>a.simple{font-size:15px;font-weight:600;text-decoration:none;padding:30px 14px;color:var(--ink)}
.cst .hd-nav>a.simple:hover{color:var(--acc)}
@media(max-width:1100px){.cst .mm-links{grid-template-columns:1fr}
 .cst .mm-in{grid-template-columns:1fr;gap:24px;padding:26px 0 30px}}
@media(max-width:900px){.cst .hd-nav{display:none}}
/* menú móvil: las mismas secciones, en acordeón */
.cst .hd-mp{min-width:280px;max-height:74vh;overflow:auto}
.cst .hd-mp .sec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
 padding:14px 22px 6px}
.cst .hd-mp a{padding:11px 22px;font-size:15px}

/* ===================== HERO CON FOTO (páginas de empresa/sección) ============ */
.cst .fhero{position:relative;background:var(--deep);overflow:hidden;isolation:isolate}
.cst .fhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cst .fhero::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(92deg,rgba(7,26,33,.90) 0%,rgba(7,26,33,.72) 52%,rgba(7,26,33,.40) 100%)}
.cst .fhero-in{padding:96px 0 90px}
.cst .fhero .bc{font-size:13px;color:#9FB8BE;margin-bottom:16px}
.cst .fhero .bc a{color:#9FB8BE;text-decoration:none}
.cst .fhero .bc a:hover{color:#5FE3A8}
.cst .fhero h1{color:#fff;font-size:clamp(32px,4.2vw,54px);max-width:18ch}
.cst .fhero .lead{color:#C9D6D9;margin-top:18px;max-width:56ch}

/* ---- imagen con marco desplazado (patrón de su web) ---- */
.cst .framed{position:relative;padding:0 0 26px 26px}
.cst .framed::before{content:"";position:absolute;left:0;bottom:0;width:58%;height:78%;
 background:var(--brand);z-index:0}
.cst .framed img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover}
.cst .framed .cap{position:relative;z-index:1;background:var(--brand);color:#06201A;
 font-size:14px;font-weight:600;padding:14px 18px;margin-right:22%}

/* ---- bloque de dos columnas texto/imagen ---- */
.cst .split{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
.cst .split.rev>div:first-child{order:2}

/* ---- lista de valores con icono cuadrado ---- */
.cst .vals{display:grid;gap:0;margin-top:26px}
.cst .val{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:22px 0;
 border-top:1px solid var(--line)}
.cst .val:last-child{border-bottom:1px solid var(--line)}
.cst .val .ic{width:46px;height:46px;background:var(--deep);display:flex;align-items:center;
 justify-content:center}
.cst .val .ic svg{width:22px;height:22px;stroke:#5FE3A8;fill:none;stroke-width:1.7}
.cst .val h3{font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:7px}
.cst .val p{font-size:15.5px;color:#33434A;line-height:1.62}

/* ---- tarjetas de sector ---- */
.cst .secs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line)}
.cst .sc{background:#fff;padding:32px 26px 30px;text-decoration:none;display:block;transition:background .18s}
.cst .sc:hover{background:var(--bg)}
.cst .sc .ic{width:40px;height:40px;background:var(--bg);display:flex;align-items:center;
 justify-content:center;margin-bottom:18px}
.cst .sc .ic svg{width:21px;height:21px;stroke:var(--acc);fill:none;stroke-width:1.7}
.cst .sc h3{font-size:18px;margin-bottom:9px;color:var(--ink)}
.cst .sc p{font-size:14.5px;color:var(--mut);line-height:1.55}

/* ---- tira de empresas sobre fondo oscuro ---- */
.cst .comp{background:var(--ink);padding:78px 0}
.cst .comp h2{color:#fff;text-align:center;font-size:clamp(25px,2.8vw,36px);margin-bottom:44px}
.cst .comp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cst .cmp{background:#132B33;border:1px solid rgba(95,227,168,.22);padding:34px 28px;
 text-decoration:none;display:block;transition:background .18s,border-color .18s}
.cst .cmp:hover{background:#17343E;border-color:rgba(95,227,168,.5)}
.cst .cmp .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#5FE3A8}
.cst .cmp h3{color:#fff;font-size:22px;margin:11px 0 12px}
.cst .cmp p{color:#A9C0C6;font-size:15px;line-height:1.6}
.cst .cmp .go{margin-top:18px;font-size:14px;font-weight:700;color:#5FE3A8;display:inline-flex;gap:.45em}

@media(max-width:1080px){.cst .split{grid-template-columns:1fr;gap:40px}
 .cst .split.rev>div:first-child{order:0}
 .cst .secs{grid-template-columns:repeat(2,1fr)}
 .cst .comp-g{grid-template-columns:1fr}}
@media(max-width:700px){.cst .secs{grid-template-columns:1fr}
 .cst .fhero-in{padding:60px 0 56px}}

/* ═════════════════════════════════════════════════════════════════════════
   CAPA "MODERNIST" — sistema visual de Claude Design.
   Se adopta el LENGUAJE (filetes de 2px, rejilla con separadores, antetítulo
   con guion verde, titulares grandes, tablas técnicas, banda de cifras,
   fotografía en gris). Los DATOS del diseño eran de ejemplo y no se usan:
   todas las cifras del sitio salen de la web del cliente.
   ═════════════════════════════════════════════════════════════════════════ */
.cst{--rule:#0E1A1F}

/* antetítulo: ETIQUETA — guion verde — dato */
.cst .kick{display:flex;align-items:baseline;gap:16px;font-size:13.5px;letter-spacing:.06em;
 text-transform:uppercase;color:var(--deep);flex-wrap:wrap}
.cst .kick .dash{width:24px;height:2px;background:var(--brand);align-self:center;flex:0 0 auto}
.cst .kick .alt{color:var(--mut)}

/* titulares del sistema */
.cst .t-xl{font-family:Archivo,system-ui,sans-serif;font-size:clamp(38px,4.6vw,64px);font-weight:800;
 line-height:1.02;letter-spacing:-.01em;margin:16px 0 10px;color:var(--ink)}
.cst .t-lg{font-size:clamp(30px,3.6vw,50px);font-weight:800;line-height:1.04;letter-spacing:-.01em;margin:0}
.cst .t-sec{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em;
 text-transform:uppercase;display:block;border-bottom:2px solid var(--rule);padding-bottom:8px;
 margin-bottom:0;color:var(--ink)}
.cst .sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:62ch;margin:0 0 36px;color:#2A3A41}

/* rejilla con separadores (lenguaje de catálogo técnico) */
.cst .rule2{border-top:2px solid var(--rule)}
.cst .gridcols{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--rule)}
.cst .gridcols>*:first-child{padding:38px 48px 38px 0;border-right:1px solid var(--rule)}
.cst .gridcols>*:last-child{padding:38px 0 38px 48px}

/* tabla técnica */
.cst .table{width:100%;border-collapse:collapse;font-size:15px;margin-top:0}
.cst .table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--mut);padding:10px 8px 10px 0;border-bottom:2px solid var(--rule);font-weight:700}
.cst .table td{padding:11px 8px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cst .table td.k{color:var(--deep);width:42%}
.cst .table tbody tr:hover{background:rgba(14,26,31,.03)}

/* banda de cifras */
.cst .statband{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);
 display:grid;grid-template-columns:repeat(4,1fr)}
.cst .statband>div{padding:26px 24px;border-right:1px solid var(--line)}
.cst .statband>div:first-child{padding-left:0}
.cst .statband>div:last-child{border-right:0}
.cst .statband .v{font-family:Archivo,system-ui,sans-serif;font-size:clamp(30px,3.2vw,44px);
 font-weight:800;display:block;line-height:1;letter-spacing:-.02em}
.cst .statband .k{font-size:13.5px;color:var(--deep);display:block;margin-top:9px;line-height:1.45}

/* chip numerado de familia */
.cst .fam{display:flex;align-items:baseline;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.cst .fam .no{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:15px;color:#fff;
 background:var(--ink);padding:3px 9px}
.cst .fam h2{font-size:26px;font-weight:700;margin:0}
.cst .fam .desc{font-size:14px;color:var(--deep)}

/* rejilla de catálogo con filetes */
.cst .famgrid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line)}
.cst .famgrid>a{border-right:1px solid var(--line);padding:0 24px 20px;text-decoration:none;display:block}
.cst .famgrid>a:hover{background:var(--bg)}
.cst .famgrid .ph{height:180px;margin:0 -24px 16px 0;overflow:hidden;background:var(--bg)}
.cst .famgrid .ph img{width:100%;height:100%;object-fit:cover}
.cst .famgrid .ref{font-size:13px;color:var(--deep)}
.cst .famgrid h3{font-size:19px;font-weight:700;margin:4px 0 6px;color:var(--ink)}
.cst .famgrid p{font-size:14px;margin:0;line-height:1.5;color:var(--mut)}
.cst .famcell-dark{background:var(--deep);color:#fff;padding:26px 24px;display:flex;
 flex-direction:column;justify-content:space-between;min-height:290px;text-decoration:none}
.cst .famcell-dark h3{color:#fff;font-size:19px;margin:5px 0 7px}
.cst .famcell-dark .ref{color:#9fc4ce}
.cst .famcell-dark p{color:#dbe7ea;font-size:14px}
.cst .famcell-dark .go{color:#fff;font-weight:700;font-size:14px;border-bottom:2px solid var(--brand);
 align-self:flex-start;padding-bottom:2px;margin-top:18px}

/* banda oscura con lista de dos columnas */
.cst .dband{background:var(--deep);color:#fff;padding:52px 0}
.cst .dband-g{display:grid;grid-template-columns:5fr 7fr;gap:48px}
.cst .dband h2{color:#fff;font-size:clamp(26px,2.9vw,36px);font-weight:800;line-height:1.1;margin:12px 0 16px}
.cst .dband .k{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:#9fc4ce}
.cst .dband p{font-size:16px;line-height:1.55;margin:0;color:#dbe7ea}
.cst .dlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
 gap:0 28px;font-size:15px}
.cst .dlist li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.3);display:flex;gap:12px;
 line-height:1.5}
.cst .dlist li .sq{width:10px;height:10px;background:var(--brand);margin-top:6px;flex:0 0 auto}

/* banda de pie con contacto */
.cst .contactband{background:var(--deep);color:#fff;padding:22px 0;font-size:14px}
.cst .contactband .w{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cst .contactband a{color:#fff;text-decoration:none}
.cst .contactband a:hover{color:#5FE3A8}

/* fotografía unificada en gris (resuelve el mosaico de orígenes distintos) */
.cst .gray img{filter:grayscale(1) contrast(1.06)}
.cst .gray:hover img{filter:grayscale(0) contrast(1)}

@media(max-width:1080px){
 .cst .gridcols{grid-template-columns:1fr}
 .cst .gridcols>*:first-child{padding:32px 0;border-right:0;border-bottom:1px solid var(--rule)}
 .cst .gridcols>*:last-child{padding:32px 0}
 .cst .famgrid{grid-template-columns:repeat(2,1fr)}
 .cst .statband{grid-template-columns:repeat(2,1fr)}
 .cst .dband-g{grid-template-columns:1fr;gap:28px}
 .cst .dlist{grid-template-columns:1fr}}
@media(max-width:700px){
 .cst .famgrid{grid-template-columns:1fr}
 .cst .statband{grid-template-columns:1fr}
 .cst .statband>div{padding-left:0;border-right:0;border-bottom:1px solid var(--line)}}