/* fallbacks calibrados anti-CLS (21-08-2026) */
@font-face{font-family:'Barlow Fallback';src:local('Arial');size-adjust:94%;ascent-override:96%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:'Barlow Condensed Fallback';src:local('Arial Narrow'),local('Arial');size-adjust:79%;ascent-override:96%;descent-override:25%;line-gap-override:0%}
/* ICONTAINER — base Propuesta A (Acero Industrial) */
:root{--bg:#101418;--panel:#1A2027;--line:#2A323C;--naranja:#ff2d3e;--naranja2:#DB2735;--azul:#0095CF;--azul2:#0077AD;--txt:#EDF1F5;--gris:#97A3B0;}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Barlow','Barlow Fallback',sans-serif;background:var(--bg);color:var(--txt);line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;text-transform:uppercase;line-height:1.08}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
em{color:var(--naranja);font-style:normal}
.btn{display:inline-block;padding:13px 26px;font-weight:600;letter-spacing:.03em;cursor:pointer;border:0;font-size:.95rem}
.btn-o{background:var(--naranja);color:#0B0D10;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.btn-o:hover{background:var(--naranja2)}
.btn-ghost{border:1.5px solid var(--line);color:var(--txt);background:transparent}
.btn-ghost:hover{border-color:var(--naranja);color:var(--naranja)}
.btn-sm{padding:9px 16px;font-size:.85rem}
/* barra de contacto sobre el header (22-08-2026: teléfono y WhatsApp a la vista) */
.barra-contacto{background:#0B0E12;border-bottom:1px solid #1d232b;font-size:.86rem}
.barra-contacto .container{display:flex;justify-content:flex-end;align-items:center;gap:22px;padding-top:6px;padding-bottom:6px}
.barra-contacto a{color:var(--naranja);font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.barra-contacto a:hover{color:#fff}
.barra-contacto svg{flex:none}
@media(max-width:640px){
  .barra-contacto .container{justify-content:center;gap:14px;padding-left:8px;padding-right:8px}
  .barra-contacto{font-size:.92rem}
}
/* header */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(16,20,24,.96);backdrop-filter:blur(8px);z-index:50}
.head{display:flex;justify-content:space-between;align-items:center;height:68px;gap:16px}
.logo{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:800;font-size:1.5rem}
.logo span{color:var(--naranja)}
nav.principal{display:flex;gap:24px;font-size:.92rem;color:var(--gris)}
nav.principal a:hover,nav.principal a.activo{color:#fff}
.carrito-btn{position:relative;border:1.5px solid var(--line);padding:9px 16px;font-weight:600;font-size:.9rem;background:transparent;color:var(--txt);cursor:pointer}
.carrito-btn:hover{border-color:var(--naranja)}
.carrito-btn b{position:absolute;top:-9px;right:-9px;background:var(--naranja);color:#0B0D10;font-size:.72rem;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}
/* hero */
.hero{padding:88px 0 66px;background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,255,255,.018) 42px 84px),linear-gradient(150deg,#101418 40%,#171d24 100%)}
.hero .kicker{color:var(--naranja);font-weight:600;letter-spacing:.25em;text-transform:uppercase;font-size:.8rem;margin-bottom:14px}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:800;max-width:820px}
.hero p.lead{color:var(--gris);max-width:580px;font-size:1.1rem;margin:20px 0 34px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-top:64px}
.strip>div{padding:20px;border-right:1px solid var(--line);font-size:.9rem;color:var(--gris)}
.strip>div:last-child{border-right:0}
.strip b{display:block;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-size:1.6rem;color:var(--naranja);text-transform:uppercase}
/* secciones */
section{padding:76px 0}
.sec-title{font-size:clamp(1.9rem,3.5vw,2.7rem);margin-bottom:34px}
/* categorías home */
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat{background:var(--panel);border:1px solid var(--line);padding:24px 18px;transition:.2s;position:relative;overflow:hidden}
.cat:hover{border-color:var(--naranja);transform:translateY(-4px)}
.cat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--naranja);transform:scaleX(0);transition:.25s;transform-origin:left}
.cat:hover::before{transform:scaleX(1)}
.cat .ico{font-size:1.7rem;margin-bottom:10px}
.cat h3{font-size:1.12rem;margin-bottom:5px}
.cat p{font-size:.82rem;color:var(--gris)}
/* proceso */
.proceso{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pasos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.paso{padding:18px 12px;border-left:2px solid var(--line)}
.paso b{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-size:2.1rem;color:var(--naranja);display:block;line-height:1}
.paso span{font-size:.82rem;color:var(--gris)}
.experiencia{margin-top:26px;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-size:1.5rem;text-transform:uppercase;letter-spacing:.06em}
/* catálogo */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filtro{font-size:.88rem;font-weight:600;padding:9px 18px;border:1.5px solid var(--line);background:transparent;color:var(--gris);cursor:pointer}
.filtro:hover{border-color:var(--naranja);color:var(--naranja)}
.filtro.activo{background:var(--naranja);border-color:var(--naranja);color:#0B0D10}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prod{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:.2s}
.prod:hover{border-color:var(--naranja);transform:translateY(-3px)}
.prod-img{aspect-ratio:4/3;overflow:hidden;background:#0C0F13}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:.3s}
.prod:hover .prod-img img{transform:scale(1.04)}
.prod-body{padding:16px;display:flex;flex-direction:column;flex:1}
.prod-body .catlabel{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);margin-bottom:5px}
.prod-body h3{font-size:1.05rem;margin-bottom:4px}
.prod-body .sku{font-size:.75rem;color:var(--gris);margin-bottom:14px}
.prod-acciones{display:flex;gap:8px;margin-top:auto}
.prod-acciones .btn{flex:1;text-align:center}
/* modal producto */
.modal{position:fixed;inset:0;z-index:120;display:none}
.modal.abierto{display:block}
.modal-fondo{position:absolute;inset:0;background:rgba(8,10,13,.8)}
.modal-caja{position:relative;max-width:860px;margin:5vh auto;background:var(--panel);border:1px solid var(--line);max-height:88vh;overflow-y:auto}
.modal-cerrar{position:absolute;top:10px;right:12px;z-index:2;background:var(--naranja);color:#0B0D10;border:0;width:34px;height:34px;font-size:1.2rem;cursor:pointer;font-weight:700}
.modal-grid{display:grid;grid-template-columns:1fr 1fr}
.modal-info{padding:28px}
.modal-info h3{font-size:1.5rem;margin-bottom:6px}
.modal-info .sku{color:var(--gris);font-size:.8rem;margin-bottom:14px}
.modal-info p{color:var(--gris);font-size:.92rem;margin-bottom:20px}
/* carrito lateral */
.panel-carrito{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--panel);border-left:1px solid var(--line);z-index:130;transform:translateX(100%);transition:.28s;display:flex;flex-direction:column}
.panel-carrito.abierto{transform:none}
.pc-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.pc-head h3{font-size:1.3rem}
.pc-lista{flex:1;overflow-y:auto;padding:14px 20px}
.pc-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.pc-item img{width:64px;height:48px;object-fit:cover}
.pc-item .t{flex:1;font-size:.88rem}
.pc-item .cant{width:52px;background:#0C0F13;border:1px solid var(--line);color:#fff;padding:6px;text-align:center}
.pc-item .quitar{background:none;border:0;color:var(--gris);cursor:pointer;font-size:1.1rem}
.pc-item .quitar:hover{color:var(--naranja)}
.pc-pie{padding:18px 20px;border-top:1px solid var(--line)}
.pc-pie .btn{width:100%;text-align:center}
.vacio{color:var(--gris);text-align:center;padding:40px 0;font-size:.92rem}
/* formulario cotización */
.form-cot{background:var(--panel);border:1px solid var(--line);padding:30px;max-width:760px}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-cot label{display:block;font-size:.85rem;font-weight:600;margin-bottom:14px}
.form-cot input,.form-cot select,.form-cot textarea{width:100%;margin-top:6px;padding:11px 13px;background:#0C0F13;border:1.5px solid var(--line);color:#fff;font-family:'Barlow','Barlow Fallback',sans-serif;font-size:.95rem}
.form-cot input:focus,.form-cot select:focus,.form-cot textarea:focus{outline:none;border-color:var(--naranja)}
.nota{font-size:.8rem;color:var(--gris);margin-top:12px}
/* dual + footer */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.big{padding:44px 36px}
.big.venta{background:linear-gradient(135deg,var(--azul) 0%,var(--azul2) 100%);color:#0B0D10}
.big.arriendo{background:var(--panel);border:1px solid var(--line)}
.big h3{font-size:1.9rem;margin-bottom:8px}
.big p{font-size:.95rem;margin-bottom:22px;opacity:.85}
.big .btn{background:#0B0D10;color:#fff}
.big.arriendo .btn{background:var(--naranja);color:#0B0D10}
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--gris);font-size:.85rem}
.sucs{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.sucs span{border:1px solid var(--line);padding:5px 14px;font-size:.8rem}
/* páginas de texto */
.pagina-texto{max-width:820px}
.pagina-texto h2{margin:34px 0 12px;font-size:1.5rem}
.pagina-texto p{color:var(--gris);margin-bottom:14px}
.faq-item{border:1px solid var(--line);margin-bottom:10px;background:var(--panel)}
.faq-item summary{padding:16px 20px;cursor:pointer;font-weight:600;list-style:none}
.faq-item summary::before{content:"+ ";color:var(--naranja);font-weight:800}
.faq-item[open] summary::before{content:"– "}
.faq-item p{padding:0 20px 16px;color:var(--gris);font-size:.92rem}
/* aviso toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--naranja);color:#0B0D10;font-weight:600;padding:12px 22px;z-index:140;transition:.3s;opacity:0}
.toast.ver{transform:translateX(-50%);opacity:1}
@media(max-width:960px){.grid5{grid-template-columns:repeat(2,1fr)}.prod-grid{grid-template-columns:repeat(2,1fr)}.strip{grid-template-columns:repeat(2,1fr)}.pasos{grid-template-columns:repeat(3,1fr)}.dual,.modal-grid,.form-fila{grid-template-columns:1fr}nav.principal{display:none}}
@media(max-width:600px){.prod-grid{grid-template-columns:1fr}}

/* boton flotante de WhatsApp */
.wsp-flotante{position:fixed;right:22px;bottom:22px;z-index:150;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:.2s}
.wsp-flotante:hover{transform:scale(1.08)}

/* ===== Accesibilidad (paquete 2026-08-18) ===== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--naranja);color:#0B0D10;padding:10px 18px;font-weight:700}
.skip-link:focus{left:0}
footer a{color:var(--gris)}
footer a:hover{color:var(--naranja)}
