:root{
  --basalto:#221F20;
  --basalto-2:#2D292A;
  --gila:#C9694E;
  --gila-claro:#DB7A5E;
  --gila-boton:#A9532F;
  --hielo:#E1F9F9;
  --piedra:#F2F1EE;
  --texto:#221F20;
  --texto-2:#5E5A57;
  --linea:#DEDBD6;
  --display:"Coolvetica","Archivo Narrow","Arial Narrow",sans-serif;
  --cuerpo:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1240px;
  --pad:clamp(20px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;font-family:var(--cuerpo);font-size:17px;line-height:1.55;color:var(--texto);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--gila-boton)}
a:hover{color:var(--basalto)}
:focus-visible{outline:3px solid var(--gila);outline-offset:3px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;z-index:99}
.saltar:focus{left:8px}

/* Tipografía */
h1,h2,h3,.display{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0}
h1{font-size:clamp(48px,7.4vw,96px)}
h2{font-size:clamp(38px,5vw,64px)}
h3{font-size:clamp(24px,2.4vw,30px);line-height:1}
.antetitulo{font-weight:600;font-size:15px;color:var(--gila-boton);margin:0 0 14px}
.sobre-oscuro .antetitulo{color:var(--gila-claro)}
p{margin:0 0 1em;max-width:68ch}

/* Botones */
.boton{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit}
.boton svg{width:20px;height:20px;flex:none}
.boton--primario{background:var(--gila-boton);color:#fff}
.boton--primario:hover{background:var(--basalto);color:#fff}
.boton--contorno{border-color:currentColor;color:#fff;background:transparent}
.boton--contorno:hover{background:#fff;color:var(--basalto)}
.boton--oscuro{background:var(--basalto);color:#fff}
.boton--oscuro:hover{background:var(--gila-boton);color:#fff}
.boton--claro{border-color:var(--basalto);color:var(--basalto);background:#fff}
.boton--claro:hover{background:var(--basalto);color:#fff}

/* Barra superior y encabezado */
.barra-sup{background:var(--basalto);color:#CFCBC7;font-size:14px;border-bottom:1px solid #3A3536}
.barra-sup .contenedor{display:flex;justify-content:space-between;gap:16px;min-height:36px;align-items:center;flex-wrap:wrap}
.barra-sup a{color:#CFCBC7;text-decoration:none}
.barra-sup a:hover{color:#fff}
.barra-sup span+span::before{content:"|";margin:0 10px;color:#5E5859}
.encabezado{background:#141213;position:sticky;top:0;z-index:50}
.encabezado .contenedor{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:24px}
.logo img{width:170px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:34px}
.nav a{color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--gila)}
.nav .nav-cta{background:var(--gila-boton);padding:12px 20px;border:0}
.nav .nav-cta:hover{background:var(--gila);color:var(--basalto)}
.menu-boton{display:none;background:none;border:0;color:#fff;width:48px;height:48px;cursor:pointer}
@media (max-width:860px){
  .menu-boton{display:inline-flex;align-items:center;justify-content:center}
  .nav{position:absolute;left:0;right:0;top:100%;background:#141213;display:none;border-top:1px solid #333}
  .nav.abierto{display:block}
  .nav ul{flex-direction:column;gap:0;padding:8px var(--pad) 20px}
  .nav a{display:block;padding:14px 0;border-bottom:1px solid #2E2A2B}
  .nav .nav-cta{margin-top:12px;text-align:center}
  .barra-sup .solo-escritorio{display:none}
}

/* Hero */
.hero{position:relative;background:#141213 url("../img/hero.jpg") center/cover no-repeat;color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,19,.92) 0%,rgba(20,18,19,.72) 45%,rgba(20,18,19,.35) 100%)}
.hero::after{content:"";position:absolute;right:-40px;top:-60px;width:520px;height:1100px;background:url("../img/marca/comb-gila.png") no-repeat;background-size:contain;opacity:.55;pointer-events:none}
.hero .contenedor{position:relative;z-index:1;padding-top:clamp(80px,12vw,150px);padding-bottom:clamp(80px,12vw,150px)}
.hero h1{max-width:12ch}
.hero .sub{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);margin:18px 0 34px;color:var(--hielo)}
.hero .acciones{display:flex;gap:14px;flex-wrap:wrap}

/* Categorías destacadas */
.categorias{background:var(--piedra);padding:20px 0}
.categorias .rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cat-tarjeta{display:grid;grid-template-columns:1fr 128px;align-items:center;gap:16px;background:#fff;padding:22px 22px 22px 28px;text-decoration:none;color:var(--texto);min-height:150px}
.cat-tarjeta h3{font-size:30px}
.cat-tarjeta .ver{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-weight:600;color:var(--texto)}
.cat-tarjeta .ver svg{color:var(--gila-boton);width:20px;height:20px}
.cat-tarjeta img{width:128px;height:110px;object-fit:cover}
.cat-tarjeta:hover h3{color:var(--gila-boton)}
@media (max-width:860px){.categorias .rejilla{grid-template-columns:1fr}}

/* Franja gila */
.franja{background:var(--gila) url("../img/marca/gila-banner-dots.png") right bottom/auto 100% no-repeat;min-height:300px;display:flex;align-items:center}
.franja h2{color:var(--basalto);font-size:clamp(44px,6.4vw,84px);max-width:9ch}
@media (max-width:860px){.franja{background-size:auto 55%;min-height:340px;align-items:flex-start;padding-top:56px}}

/* Secciones */
.seccion{padding:clamp(64px,9vw,110px) 0}
.seccion--piedra{background:var(--piedra)}
.seccion-cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}

/* Tarjetas de producto */
.productos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.productos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.productos{grid-template-columns:1fr}}
.producto{background:var(--piedra);display:flex;flex-direction:column;text-decoration:none;color:var(--texto)}
.seccion--piedra .producto{background:#fff}
.producto .foto{aspect-ratio:4/3;overflow:hidden;background:#fff}
.producto .foto img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.producto:hover .foto img{transform:scale(1.04)}
.producto .info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.producto .tipo{font-size:14px;color:var(--texto-2)}
.producto h3{font-size:26px}
.producto .cotizar{margin-top:auto;padding-top:14px;font-weight:600;color:var(--gila-boton);display:inline-flex;gap:8px;align-items:center}
.producto .cotizar svg{width:18px;height:18px}
.producto:hover h3{color:var(--gila-boton)}

/* Llamada */
.llamada{position:relative;padding:20px 0 0}
.llamada::before{content:"";position:absolute;left:0;bottom:-30px;width:min(40vw,520px);height:200px;background:url("../img/marca/gila-left-tail.png") left bottom/contain no-repeat;z-index:0}
.llamada .caja{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--basalto);background:#fff}
.llamada .texto{padding:clamp(28px,4vw,52px)}
.llamada h2{font-size:clamp(34px,3.6vw,48px)}
.llamada .tel{display:inline-block;margin-top:14px;font-family:var(--display);font-size:clamp(24px,2.4vw,30px);color:var(--gila-boton);text-decoration:none;text-transform:uppercase}
.llamada .tel:hover{color:var(--basalto)}
.llamada .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.llamada .imagen{background:url("../img/nosotros.jpg") center/cover;min-height:260px;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
@media (max-width:860px){.llamada .caja{grid-template-columns:1fr}.llamada .imagen{clip-path:none;min-height:200px}}

/* Pie */
.pie-banda{background:#000;color:#fff;margin-top:80px}
.pie-banda .contenedor{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:56px;padding-bottom:56px;flex-wrap:wrap}
.pie-banda h2{font-size:clamp(38px,4.4vw,58px);max-width:11ch}
.pie-banda img{width:190px}
.pie{background:var(--basalto);color:#CFCBC7;font-size:15px;padding:56px 0 30px}
.pie .columnas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
@media (max-width:860px){.pie .columnas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pie h4{color:#fff;font-size:14px;font-weight:600;margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie a{color:#CFCBC7;text-decoration:none}
.pie a:hover{color:#fff}
.pie .legal{border-top:1px solid #3A3536;margin-top:44px;padding-top:22px;font-size:14px;color:#9C9692}

/* Encabezado de página interna */
.cabecera-pagina{background:#141213;color:#fff;position:relative;overflow:hidden}
.cabecera-pagina::after{content:"";position:absolute;right:-60px;top:-80px;width:360px;height:760px;background:url("../img/marca/comb-gila.png") no-repeat;background-size:contain;opacity:.4}
.cabecera-pagina .contenedor{position:relative;z-index:1;padding-top:64px;padding-bottom:64px}
.cabecera-pagina p{color:#CFCBC7;margin:16px 0 0;font-size:18px}
.migas{font-size:14px;color:#9C9692;margin-bottom:18px}
.migas a{color:#CFCBC7}

/* Catálogo */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.filtro{min-height:44px;padding:0 18px;border:1px solid var(--linea);background:#fff;font:inherit;font-size:15px;font-weight:500;cursor:pointer;color:var(--texto)}
.filtro span{color:var(--texto-2);margin-left:4px}
.filtro:hover{border-color:var(--basalto)}
.filtro[aria-pressed="true"]{background:var(--basalto);color:#fff;border-color:var(--basalto)}
.filtro[aria-pressed="true"] span{color:#CFCBC7}
.buscador{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:34px}
.buscador label{font-weight:600;font-size:15px;display:block;margin-bottom:6px}
.buscador input{min-height:48px;width:min(380px,100%);padding:0 16px;border:1px solid var(--linea);font:inherit;background:#fff}
.buscador input:focus{border-color:var(--basalto)}
.conteo{color:var(--texto-2);font-size:15px}
.vacio{padding:48px;text-align:center;background:var(--piedra)}

/* Detalle de producto */
.detalle{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:start}
@media (max-width:900px){.detalle{grid-template-columns:1fr}}
.galeria .principal{aspect-ratio:4/3;background:var(--piedra);overflow:hidden}
.galeria .principal img{width:100%;height:100%;object-fit:contain;background:#fff}
.miniaturas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px}
.miniaturas button{padding:0;border:2px solid transparent;background:#fff;cursor:pointer;aspect-ratio:1}
.miniaturas button img{width:100%;height:100%;object-fit:cover}
.miniaturas button[aria-current="true"]{border-color:var(--gila)}
.ficha h1{font-size:clamp(40px,4.6vw,62px);margin-bottom:18px}
.etiquetas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.etiquetas a{font-size:14px;font-weight:600;background:var(--piedra);color:var(--texto);padding:6px 12px;text-decoration:none}
.etiquetas a:hover{background:var(--basalto);color:#fff}
.descripcion h3{font-family:var(--cuerpo);text-transform:none;font-size:18px;font-weight:700;line-height:1.3;margin:22px 0 10px}
.descripcion ul{margin:0 0 1em;padding-left:20px;display:grid;gap:4px}
.descripcion .lista-partes{list-style:none;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.descripcion .lista-partes li{padding:8px 0;border-bottom:1px solid var(--linea)}
.cotizacion{background:var(--basalto);color:#fff;padding:28px;margin-top:30px}
.cotizacion h2{font-size:34px;margin-bottom:10px}
.cotizacion p{color:#CFCBC7;margin-bottom:20px}
.cotizacion .acciones{display:flex;gap:12px;flex-wrap:wrap}

/* Servicios */
.servicio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start;padding:56px 0;border-top:1px solid var(--linea)}
.servicio:first-child{border-top:0;padding-top:0}
.servicio:nth-child(even) .servicio-foto{order:2}
.servicio-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--piedra)}
.servicio h2{font-size:clamp(32px,3.4vw,46px);margin-bottom:18px}
@media (max-width:860px){.servicio{grid-template-columns:1fr}.servicio:nth-child(even) .servicio-foto{order:0}}

/* Nosotros */
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:860px){.dos-col{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips li{list-style:none;background:#fff;border:1px solid var(--linea);padding:8px 14px;font-weight:500;font-size:15px}
.chips{padding:0}

/* Contacto */
.contacto-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:860px){.contacto-rejilla{grid-template-columns:1fr}}
.contacto-tarjeta{background:var(--piedra);padding:30px}
.contacto-tarjeta h2{font-size:30px;margin-bottom:14px}
.contacto-tarjeta .dato{font-size:20px;font-weight:600;color:var(--texto);text-decoration:none;display:block;margin-bottom:18px;word-break:break-word}
.horario{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.horario li{display:flex;justify-content:space-between;border-bottom:1px solid var(--linea);padding-bottom:6px}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;background:#1F7A45;color:#fff;text-decoration:none;font-weight:600;padding:0 20px 0 16px;min-height:52px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wa-flotante:hover{background:var(--basalto);color:#fff}
.wa-flotante svg{width:24px;height:24px}
@media (max-width:600px){.wa-flotante span{display:none}.wa-flotante{padding:0 14px}}

/* Utilidades */
.seccion--ajustada{padding-top:40px}
.migas--claro,.migas--claro a{color:var(--texto-2)}
.mb-24{margin-bottom:24px}.mb-18{margin-bottom:18px}.mb-6{margin-bottom:6px}.mt-28{margin-top:28px}
.foto-4x3{width:100%;aspect-ratio:4/3;object-fit:cover}
[hidden]{display:none!important}
.hero h1{max-width:15ch}
.franja .contenedor{width:100%}
.producto h3{font-size:31px}
.cat-tarjeta h3{font-size:36px}
.antetitulo{font-size:16px}
.pie-banda{margin-top:0}
.llamada{margin-bottom:90px}

/* ===== Diseño final (aprobado en el lienzo) ===== */
:root{
  --display:"Archivo Black",Archivo,"Arial Black",sans-serif;
  --sub:Archivo,"Helvetica Neue",Arial,sans-serif;
  --cuerpo:Barlow,"Helvetica Neue",Arial,sans-serif;
}
h1,h2{font-family:var(--display);font-weight:800;line-height:1}
h3{font-family:var(--sub);font-weight:800;line-height:1.1}
.boton,.nav a,.filtro,.producto .cotizar,.cat-tarjeta .ver,.etiquetas a{font-family:var(--sub)}
h1{font-size:clamp(32px,3.89vw,56px)}
h2{font-size:clamp(27px,3.19vw,46px)}

.hero{background-image:url("../img/hero.jpg")}
.hero::before{background:linear-gradient(90deg,rgba(20,18,19,.55) 0%,rgba(20,18,19,.2) 50%,rgba(20,18,19,0) 100%)}
.hero::after{display:none}
.hero h1{font-size:clamp(39px,4.72vw,68px);max-width:14ch}
.hero .sub{font-family:var(--sub);font-weight:800;font-size:clamp(17px,1.53vw,22px)}

.cat-tarjeta h3{font-size:26px;line-height:1}
.franja h2{font-size:clamp(24px,4.17vw,60px);max-width:none;width:clamp(70%,calc((100vw - 760px)*100),100%)}
.producto h3{font-size:21px}
.llamada h2{font-size:clamp(22px,2.5vw,36px);line-height:1.05}
.llamada .tel{font-family:var(--sub);font-weight:800;font-size:clamp(17px,1.53vw,22px)}
.llamada .imagen{background-image:url("../img/engrane.jpg")}
.pie-banda h2{font-size:clamp(26px,3.06vw,44px);line-height:1.05;max-width:820px;flex:1 1 520px}
.ficha h1{font-size:clamp(26px,3.06vw,44px);line-height:1.05}
.cotizacion h2{font-size:clamp(22px,2.08vw,30px)}

/* Catálogo: 3 columnas también en celular */
#catalogo.productos{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.5vw,22px)}
#catalogo .producto .info{padding:clamp(8px,1.4vw,20px) clamp(8px,1.5vw,22px) clamp(10px,1.7vw,24px);gap:clamp(3px,.4vw,6px)}
#catalogo .producto .tipo{font-size:clamp(11px,.97vw,14px);line-height:1.3}
#catalogo .producto h3{font-size:clamp(10px,1.46vw,21px);line-height:1.2;overflow-wrap:anywhere}
#catalogo .producto .cotizar{font-size:clamp(12px,1.1vw,17px);padding-top:clamp(6px,1vw,14px)}
#catalogo .producto .cotizar svg{display:none}
.filtros{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(104px,100%),1fr));gap:8px}
.filtro{width:100%;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:clamp(13px,1vw,15px)}