/* ============================================================
   AGRO PARTES DEMS — Rediseño demo · Dirección A "Industrial OEM"
   Tipografía: Barlow Condensed (600/700, itálica real) + Barlow (400/500/600)
   UI 100% angulosa: radius 0, chaflanes 45°, paralelogramos
   ============================================================ */

:root{
  /* Paleta Dirección A */
  --rojo:        #E01F26;   /* rojo marca en pantalla */
  --rojo-osc:    #C2171D;   /* rojo AA para texto sobre claro */
  --rojo-btn:    #D21E24;   /* rojo AA con texto blanco */
  --grafito:     #322D2D;   /* grafito del logo */
  --negro:       #1A1A1A;   /* footer / CTA secundario */
  --fondo:       #F4F4F2;   /* fondo claro acero */
  --blanco:      #FFFFFF;
  --tinta:       #252525;   /* texto sobre claro */
  --tinta-suave: #5A5452;   /* texto secundario AA sobre claro */
  --amarillo:    #FFB81C;   /* badges STOCK / OEM */
  --borde:       #DEDBD6;   /* bordes tarjetas producto */
  --acero:       #6B6563;   /* detalles técnicos sobre claro (AA 4.9:1) */
  --acero-osc:   #B9B5B1;   /* líneas sobre oscuro */

  /* Tipos */
  --f-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body: "Barlow", Helvetica, Arial, sans-serif;

  /* Métricas */
  --chaflan: 12px;
  --skew: -12deg;
  --max: 1200px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; border-radius:0 !important; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; /* compensa el header sticky en anclas */ }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--tinta);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--rojo-osc); }
/* Hover de texto: rojo oscuro AA (#C2171D, 4.9:1 sobre #F4F4F2) — nunca --rojo (4.33:1) */
a:hover{ color:var(--rojo-osc); text-decoration:underline; }
a.btn:hover, .doc-link:hover, .cat-card__link:hover, .wa-float:hover, .skip:hover{ text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--f-head);
  font-weight:700;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--grafito);
  margin:0 0 .5em;
}
p{ margin:0 0 1em; }

/* Focus visible — accesibilidad */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--amarillo);
  outline-offset:2px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible{ outline-color:var(--amarillo); }

/* Elementos con clip-path: el outline global se recorta FUERA del polígono.
   Anillo INSET (box-shadow) que queda visible dentro del chaflán. */
.btn:focus-visible, .nav-toggle:focus-visible, .doc-link:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 3px var(--amarillo);
}
.wa-float:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 3px var(--negro); /* oscuro: contraste sobre el verde WhatsApp */
}

/* Skip link */
.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--amarillo); color:var(--negro);
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  padding:.6em 1.2em; text-decoration:none;
}
.skip:focus{ left:0; }

/* Utilidades layout */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:clamp(16px, 4vw, 32px); }
.section{ padding-block:clamp(48px, 7vw, 84px); }
.section--blanca{ background:#fff; } /* alternancia de fondos: claro → blanco → oscuro */
.u-m0{ margin:0; }
.on-dark{ color:#E9E6E3; }
.on-dark h2, .on-dark h3{ color:#FFFFFF; }

/* Encabezado de sección con barra-paralelogramo rojo */
.sec-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.sec-head h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); margin:0; position:relative; padding-left:20px; font-style:italic; }
.sec-head h2::before{
  content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:10px;
  background:var(--rojo); transform:skewX(var(--skew));
}
.sec-head .kicker{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.85rem; color:var(--rojo-osc);
  border:1px solid currentColor; padding:.15em .7em; transform:skewX(var(--skew));
}
.sec-head .kicker > span{ display:inline-block; transform:skewX(calc(var(--skew) * -1)); }
.on-dark .sec-head .kicker{ color:var(--amarillo); }
.sec-sub{ max-width:62ch; color:var(--tinta-suave); margin-bottom:2.2em; }
.on-dark .sec-sub{ color:#C9C4C1; }

/* ---------- Botones (chaflán 45° esquina sup-derecha) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:1.05rem; line-height:1;
  text-decoration:none; cursor:pointer;
  padding:.85em 1.5em .8em 1.3em;
  border:0; position:relative;
  clip-path:polygon(0 0, calc(100% - var(--chaflan)) 0, 100% var(--chaflan), 100% 100%, 0 100%);
  transition:transform .12s ease, background-color .2s ease, color .2s ease;
}
.btn--rojo{ background:var(--rojo-btn); color:#fff; }
.btn--rojo:hover{ background:var(--grafito); color:#fff; transform:translateY(-2px); }
.btn--negro{ background:var(--negro); color:#fff; }
.btn--negro:hover{ background:var(--rojo-btn); color:#fff; transform:translateY(-2px); }
.btn--borde{ background:transparent; color:var(--grafito); box-shadow:inset 0 0 0 2px var(--grafito); clip-path:none; }
.btn--borde:hover{ background:var(--grafito); color:#fff; }
.btn--amarillo{ background:var(--amarillo); color:var(--negro); }
.btn--amarillo:hover{ background:#fff; color:var(--negro); transform:translateY(-2px); }
.btn--sm{ font-size:.92rem; padding:.7em 1.1em .65em 1em; }

/* Flecha diagonal en CTAs */
.btn .ico-arrow{ font-style:normal; transform:skewX(var(--skew)); font-family:var(--f-body); }

/* ---------- Badges paralelogramo ---------- */
.tag{
  display:inline-block; font-family:var(--f-head); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; line-height:1;
  padding:.42em .9em .38em; transform:skewX(var(--skew));
  color:var(--negro);
}
.tag > span{ display:inline-block; transform:skewX(calc(var(--skew) * -1)); }
.tag--stock{ background:var(--amarillo); }
.tag--oem{ background:var(--rojo); color:#fff; }
.tag--linea{ background:transparent; color:var(--rojo-osc); box-shadow:inset 0 0 0 1.5px currentColor; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  background:var(--negro); color:#DDD8D5;
  font-size:.85rem; font-weight:500;
}
.topbar .wrap{
  display:flex; flex-wrap:wrap; gap:.4em 1.8em; align-items:center;
  justify-content:center; padding-block:.45em;
}
.topbar a{ color:#FFF; text-decoration:none; display:inline-flex; align-items:center; gap:.45em; }
.topbar a:hover{ color:var(--amarillo); }
.topbar .sep{ color:var(--rojo); font-weight:700; }
.topbar .lbl{ color:var(--acero-osc); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  background:#FFF;
  border-bottom:4px solid var(--rojo);
  position:sticky; top:0; z-index:100;
  box-shadow:0 1px 0 var(--borde);
}
.site-header .wrap{
  display:flex; align-items:center; gap:20px;
  min-height:78px; padding-block:10px;
}
.brand-link{ flex-shrink:0; display:inline-flex; }
.brand-link img{ width:172px; height:auto; }

.nav{ margin-left:auto; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px; }
.nav a{
  display:block; font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:.04em; color:var(--grafito);
  text-decoration:none; padding:.55em .8em; position:relative;
}
.nav a::after{ /* subrayado diagonal al hover */
  content:""; position:absolute; left:.8em; right:.8em; bottom:.28em; height:3px;
  background:var(--rojo); transform:skewX(var(--skew)) scaleX(0);
  transform-origin:left; transition:transform .18s ease;
}
.nav a:hover::after, .nav a[aria-current]::after{ transform:skewX(var(--skew)) scaleX(1); }
.nav a:hover, .nav a[aria-current]{ color:var(--rojo-osc); }

.header-cta{ display:inline-flex; }
.nav-toggle{
  display:none; margin-left:auto; background:var(--grafito); color:#fff;
  border:0; cursor:pointer; padding:10px 14px;
  font-family:var(--f-head); font-weight:700; text-transform:uppercase; font-size:1rem;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.nav-toggle .bars{ display:inline-block; width:22px; height:2px; background:#fff;
  position:relative; margin-right:9px; vertical-align:middle; }
.nav-toggle .bars::before, .nav-toggle .bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; }
.nav-toggle .bars::before{ top:-7px; } .nav-toggle .bars::after{ top:7px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:var(--grafito);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  filter:saturate(.92);
}
.hero__media::after{ /* velo grafito + degradado hacia el contenido */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(26,26,26,.93) 0%, rgba(50,45,45,.78) 46%, rgba(50,45,45,.28) 100%),
    linear-gradient(0deg, rgba(26,26,26,.82) 0%, transparent 38%);
}
.hero .wrap{
  position:relative; z-index:2; padding-block:clamp(64px, 11vw, 132px);
  max-width:var(--max);
}
.hero__kicker{
  display:inline-block; font-family:var(--f-head); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; font-size:.9rem; color:var(--amarillo);
  border-left:4px solid var(--amarillo); padding:.2em .8em .15em .7em;
  margin-bottom:1.4em; background:rgba(26,26,26,.55);
}
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 4.6rem);
  font-style:italic; font-weight:700; color:#fff;
  text-transform:uppercase; max-width:14ch; margin-bottom:.25em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero h1 em{ font-style:italic; color:var(--amarillo); }
.hero__lead{
  font-size:clamp(1rem, 1.6vw, 1.18rem); font-weight:500;
  color:#E4E0DD; max-width:52ch; margin-bottom:1.8em;
}

/* Buscador por marca — componente estrella */
.finder{
  background:rgba(255,255,255,.97);
  max-width:640px; padding:18px 20px;
  border-left:6px solid var(--rojo);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.finder__title{
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  font-size:1.25rem; color:var(--grafito); margin:0 0 .65rem;
  display:flex; align-items:center; gap:.5em;
}
.finder__title::before{
  content:""; width:10px; height:1em; background:var(--rojo); transform:skewX(var(--skew));
}
.finder__form{ display:flex; flex-wrap:wrap; gap:10px; }
.finder__form label{ position:absolute; left:-999px; }
.finder select{
  flex:1 1 240px; appearance:none;
  font-family:var(--f-body); font-weight:600; font-size:1rem; color:var(--tinta);
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9"><path d="M1 1l6 6 6-6" fill="none" stroke="%23322D2D" stroke-width="2"/></svg>') no-repeat right 14px center;
  border:2px solid var(--grafito); padding:.72em 2.4em .68em .9em; cursor:pointer;
}
.finder select:hover{ border-color:var(--rojo); }
.finder__hint{ font-size:.82rem; color:var(--tinta-suave); margin:.7em 0 0; }

/* Resultado de búsqueda por marca */
.finder-result{
  display:none; margin-top:14px; padding:14px 16px;
  background:var(--grafito); color:#fff;
  border-left:6px solid var(--amarillo);
  font-size:.95rem;
}
.finder-result.is-visible{ display:block; }
.finder-result strong{ font-family:var(--f-head); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1.05rem; }
.finder-result a{ color:var(--amarillo); font-weight:600; }

/* Chips de marcas bajo el buscador */
.oem-chips{ margin-top:1.5em; display:flex; flex-wrap:wrap; gap:8px; max-width:760px; }
.oem-chips li{
  list-style:none; font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  font-size:.82rem; letter-spacing:.05em; color:#E9E6E3;
  padding:.34em .8em .3em; background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transform:skewX(var(--skew));
}
.oem-chips li > span{ display:inline-block; transform:skewX(calc(var(--skew) * -1)); }
/* Sin hover: los chips son informativos, no clicables (la acción es el buscador) */

/* ============================================================
   FRANJA DE CONFIANZA
   ============================================================ */
.trust{
  background:var(--rojo); color:#fff;
}
.trust .wrap{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:0; padding-block:0;
}
.trust__item{
  display:flex; flex-direction:column; gap:2px; justify-content:center;
  padding:20px 26px; border-left:1px solid rgba(255,255,255,.28);
}
.trust__item:first-child{ border-left:0; }
.trust__num{
  font-family:var(--f-head); font-weight:700; font-style:italic;
  font-size:1.7rem; line-height:1.05; color:#fff;
}
.trust__num b{ color:var(--amarillo); font-weight:700; }
.trust__lbl{
  font-size:.82rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:#FFFFFF;
}

/* ============================================================
   GRILLA DE CATEGORÍAS (catálogo técnico denso)
   ============================================================ */
.cat-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
}
.cat-card{
  background:#fff; padding:0; display:flex; flex-direction:column;
  position:relative; transition:box-shadow .18s ease;
  /* borde por inset-shadow: queda recortado por el chaflán y no deja
     bloques grises en la última fila incompleta de la grilla */
  box-shadow:inset 0 0 0 1px var(--borde);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
/* La tarjeta entera es clicable: el marco rojo y la barra diagonal son
   affordance del stretched-link de "Consultar" (::after cubre la card) */
.cat-card:hover{ box-shadow:inset 0 0 0 2px var(--rojo); }
.cat-card:focus-within{ box-shadow:inset 0 0 0 2px var(--rojo); }
.cat-card__tags{
  display:flex; gap:6px; padding:12px 14px 0; flex-wrap:wrap;
}
.cat-card__foto{
  margin:14px 14px 0; background:var(--fondo);
  border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center;
  min-height:150px; padding:14px;
}
.cat-card__foto img{
  width:auto; height:auto; max-width:100%; max-height:150px; object-fit:contain;
  image-rendering:auto;
}
.cat-card__body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:.45em; flex:1; }
.cat-card__code{
  font-family:var(--f-head); font-weight:600; font-size:.8rem; letter-spacing:.18em;
  color:var(--acero);
}
.cat-card__title{
  font-size:1.18rem; line-height:1.15; margin:0; min-height:2.3em;
  display:flex; align-items:flex-start; color:var(--grafito);
}
.cat-card__title::after{ /* barra diagonal hover */
  content:""; margin-left:auto; align-self:center; width:26px; height:4px;
  background:var(--rojo); transform:skewX(var(--skew)); opacity:0; transition:opacity .15s;
}
.cat-card:hover .cat-card__title::after{ opacity:1; }
.cat-card__foot{
  margin-top:auto; padding-top:10px; display:flex; align-items:center;
  justify-content:space-between; gap:8px; border-top:1px dashed var(--borde);
}
.cat-card__compat{ font-size:.78rem; color:var(--tinta-suave); font-weight:500; }
.cat-card__link{
  font-family:var(--f-head); font-weight:700; text-transform:uppercase; font-size:.85rem;
  letter-spacing:.06em; color:var(--rojo-osc); text-decoration:none; white-space:nowrap;
}
.cat-card__link::after{ /* stretched-link: toda la tarjeta clickeable */
  content:""; position:absolute; inset:0;
}
.cat-card__link:hover{ color:var(--grafito); }

/* Utilizado cuando el finder resalta tarjetas */
.cat-card.is-dim{ opacity:.35; }
.cat-card.is-hit{ box-shadow:inset 0 0 0 3px var(--amarillo); }

.cat-more{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cat-more p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }

/* ============================================================
   IMPLEMENTOS
   ============================================================ */
.impl-grid{
  display:grid; gap:clamp(18px, 3vw, 34px);
  grid-template-columns:repeat(auto-fit, minmax(min(430px, 100%), 1fr));
}
.impl-card{
  background:#fff; border:1px solid var(--borde);
  display:flex; flex-direction:column;
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.impl-card__media{ background:var(--grafito); position:relative; }
.impl-card__media img{ width:100%; aspect-ratio:16/10; height:auto; object-fit:cover; object-position:center; }
.impl-card__media .tag{ position:absolute; top:14px; left:14px; }
.impl-card__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.impl-card h3{ font-size:clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom:.2em; }
.impl-card__claim{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--rojo-osc); font-size:.88rem; margin-bottom:1em;
}
.impl-card ul{ margin:0 0 1.4em; padding:0; list-style:none; }
.impl-card ul li{
  padding:.42em 0 .42em 1.5em; border-bottom:1px solid var(--fondo); position:relative;
  font-size:.97rem; font-weight:500;
}
.impl-card ul li::before{
  content:""; position:absolute; left:.2em; top:.85em; width:9px; height:9px;
  background:var(--rojo); transform:skewX(var(--skew));
}
/* Tabla de especificaciones — lenguaje de catálogo técnico industrial */
.impl-specs{
  width:100%; border-collapse:collapse; margin:0 0 1.4em;
  font-size:.9rem; border-top:2px solid var(--grafito);
}
.impl-specs caption{
  text-align:left; font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.78rem; color:var(--acero); padding:.5em 0 .3em;
}
.impl-specs th, .impl-specs td{
  padding:.45em .6em .45em 0; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--borde);
}
.impl-specs th{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.08em; color:var(--tinta-suave); width:44%;
}
.impl-specs td{ font-weight:600; color:var(--grafito); font-variant-numeric:tabular-nums; }
.impl-card__docs{
  margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.doc-link{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  font-family:var(--f-head); font-weight:700; text-transform:uppercase; font-size:.92rem;
  letter-spacing:.05em; color:var(--grafito); padding:.6em 1em;
  border:2px solid var(--grafito); background:#fff;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.doc-link:hover{ background:var(--grafito); color:#fff; }
.doc-link .pdf{
  background:var(--rojo); color:#fff; font-size:.72rem; font-weight:700;
  padding:.25em .5em; letter-spacing:.08em;
}

/* ============================================================
   FÁBRICA / PLANTA + CAMPO
   ============================================================ */
.fabrica{
  background:var(--grafito); color:#E9E6E3;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.fabrica__grid{
  display:grid; gap:clamp(24px, 4vw, 48px);
  grid-template-columns:minmax(min(520px,100%), 1.15fr) minmax(280px, 1fr);
  align-items:center;
}
.fabrica__media{ position:relative; }
.fabrica__media img{
  width:100%; height:clamp(300px, 42vw, 460px); object-fit:cover;
  border-left:8px solid var(--rojo);
}
.fabrica__media .tag{ position:absolute; bottom:14px; left:22px; }
.plantel{ list-style:none; margin:0 0 1.6em; padding:0; display:grid; gap:1px; background:var(--acero-osc); }
.plantel li{
  background:var(--grafito); padding:.6em .9em; display:flex; gap:.7em; align-items:baseline;
  font-size:.97rem; color:#DDD8D5;
}
.plantel li::before{
  content:""; width:9px; height:9px; background:var(--amarillo);
  transform:skewX(var(--skew)) translateY(-1px); flex-shrink:0;
}
.plantel b{ color:#fff; font-weight:600; }
.fabrica .note{ font-size:.9rem; color:#B9B4B1; margin:0; }

/* Banda dron full-bleed */
.banda{
  position:relative; background:var(--negro); color:#fff; overflow:hidden;
}
.banda img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.banda::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(26,26,26,.92) 0%, rgba(26,26,26,.55) 55%, rgba(224,31,38,.25) 100%);
}
.banda .wrap{ position:relative; z-index:2; padding-block:clamp(56px, 8vw, 96px); }
.banda h2{
  font-style:italic; font-size:clamp(1.9rem, 4.4vw, 3.2rem); color:#fff;
  max-width:22ch; text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.banda h2 b{ color:var(--amarillo); }
.banda p{ max-width:56ch; color:#E4E0DD; font-size:1.05rem; }

/* Campo: dos fotos stock */
.campo-grid{
  display:grid; gap:1px; background:var(--borde); border:1px solid var(--borde);
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.campo-card{ position:relative; background:var(--negro); overflow:hidden; min-height:280px; display:flex; }
.campo-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.campo-card:hover img{ transform:scale(1.04); }
.campo-card figcaption{
  margin-top:auto; position:relative; z-index:2;
  background:linear-gradient(0deg, rgba(26,26,26,.92), rgba(26,26,26,0));
  color:#fff; padding:64px 22px 18px; width:100%;
  align-self:flex-end;
}
.campo-card figcaption b{
  display:block; font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  font-size:1.2rem; letter-spacing:.02em;
}
.campo-card figcaption span{ font-size:.88rem; color:#DDDDDD; }

/* Servicios (postventa) con fotos services-* */
.serv-grid{
  display:grid; gap:clamp(14px, 2vw, 22px);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  margin-top:34px;
}
.serv-card{
  background:#fff; border:1px solid var(--borde); overflow:hidden;
  display:flex; flex-direction:column;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.serv-card__media img{ width:100%; height:190px; object-fit:cover; }
.serv-card__body{ padding:16px 18px 20px; }
.serv-card h3{ font-size:1.25rem; margin-bottom:.3em; }
.serv-card p{ font-size:.93rem; color:var(--tinta-suave); margin:0; }

/* ============================================================
   FINANCIACIÓN
   ============================================================ */
.fin{
  background:#fff; border-block:1px solid var(--borde);
}
.fin__grid{
  display:grid; gap:clamp(24px, 4vw, 48px);
  grid-template-columns:minmax(280px, 1.2fr) minmax(280px, 1fr); align-items:start;
}
.fin__bancos{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  margin-top:6px;
}
.banco{
  border:2px solid var(--grafito); background:var(--fondo);
  padding:18px 16px 16px; text-align:center;
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  font-size:1.05rem; color:var(--grafito); letter-spacing:.03em;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.banco img{
  display:block; height:44px; width:auto; max-width:82%;
  object-fit:contain; margin-bottom:.45em;
}
.banco small{
  display:block; font-family:var(--f-body); font-weight:500; text-transform:none;
  letter-spacing:0; font-size:.78rem; color:var(--tinta-suave); margin-top:.3em;
}
.banco::before{
  content:""; position:absolute; left:0; bottom:0; height:5px; width:100%;
  background:var(--rojo); transform:skewX(var(--skew)) scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.banco:hover::before{ transform:skewX(var(--skew)) scaleX(1); }
.fin .legal{ font-size:.82rem; color:var(--acero); margin-top:14px; }

/* ============================================================
   CONCESIONARIOS — mapa esquemático SVG (sin JS de mapa)
   ============================================================ */
.conc-layout{
  display:grid; gap:clamp(24px, 4vw, 48px); align-items:start;
  grid-template-columns:minmax(280px, 1fr) minmax(300px, 1.2fr);
}
.conc-mapa{
  margin:0; background:#fff; border:1px solid var(--borde);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.conc-mapa svg{ display:block; width:100%; height:auto; }
.conc-mapa figcaption{
  padding:12px 16px; font-size:.78rem; color:var(--tinta-suave);
  border-top:1px dashed var(--borde);
}
.conc-lista{
  list-style:none; margin:0 0 1.4em; padding:0;
  display:grid; gap:1px; background:var(--borde); border:1px solid var(--borde);
}
.conc-lista li{
  background:#fff; padding:.7em 1em; display:flex; align-items:baseline; gap:.8em;
}
.conc-lista .prov{
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  font-size:1.05rem; color:var(--grafito); min-width:9.5ch;
}
.conc-lista .prov::before{
  content:""; display:inline-block; width:9px; height:9px; margin-right:.5em;
  background:var(--rojo); transform:skewX(var(--skew));
}
.conc-lista .zona{ font-size:.86rem; color:var(--tinta-suave); }
.conc-cta{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--negro); color:#C9C4C1; }
.footer-top{
  display:grid; gap:clamp(24px, 4vw, 56px);
  grid-template-columns:minmax(260px, 1.3fr) repeat(auto-fit, minmax(200px, 1fr));
  padding-block:clamp(40px, 6vw, 72px);
}
.footer-brand img{ width:200px; height:auto; margin-bottom:1.2em; }
.footer-brand p{ font-size:.92rem; max-width:34ch; }
.site-footer h3{
  color:#fff; font-size:1.05rem; letter-spacing:.1em;
  border-bottom:3px solid var(--rojo); display:inline-block; padding-bottom:.18em;
  margin-bottom:1em;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55em; }
.site-footer a{ color:#E4E0DD; text-decoration:none; font-size:.93rem; }
.site-footer a:hover{ color:var(--amarillo); }
.footer-mails a{ display:flex; flex-direction:column; }
.footer-mails .area{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--acero-osc); }
.footer-mails .mail{ font-weight:600; color:#fff; }
.footer-datos li{ font-size:.93rem; display:flex; gap:.6em; }
.footer-datos li::before{ content:"▪"; color:var(--rojo); }
.footer-bottom{
  border-top:1px solid #333; padding-block:18px;
  display:flex; flex-wrap:wrap; gap:.5em 2em; align-items:center; justify-content:space-between;
  font-size:.82rem; color:#8C8886;
}
.footer-bottom .redes{ display:flex; gap:14px; }
.footer-bottom .redes a{ font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:150;
  display:inline-flex; align-items:center; gap:.6em;
  background:#25D366; color:var(--negro); text-decoration:none; /* verde WhatsApp oficial + texto oscuro AA */
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  font-size:1rem; letter-spacing:.04em;
  padding:.8em 1.3em .75em 1.1em;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.wa-float:hover{ background:#1DA851; color:var(--negro); }
.wa-float svg{ width:20px; height:20px; fill:currentColor; }

/* ============================================================
   CATALOGO.HTML
   ============================================================ */
.page-hero{
  position:relative; background:var(--grafito); color:#fff; overflow:hidden;
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; }
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(26,26,26,.9), rgba(50,45,45,.45));
}
.page-hero .wrap{ position:relative; z-index:2; padding-block:clamp(48px, 8vw, 96px); }
.page-hero h1{ color:#fff; font-size:clamp(2.2rem, 5vw, 3.6rem); margin-bottom:.15em; }
.page-hero p{ color:#E4E0DD; max-width:60ch; margin:0; }

/* Tabs de familia */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.tab{
  font-family:var(--f-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:.95rem; color:var(--grafito); background:#fff;
  border:2px solid var(--borde); cursor:pointer; padding:.55em 1.1em .5em;
  transform:skewX(var(--skew));
}
.tab > span{ display:inline-block; transform:skewX(calc(var(--skew) * -1)); }
.tab:hover{ border-color:var(--grafito); }
.tab[aria-pressed="true"]{ background:var(--rojo); border-color:var(--rojo); color:#fff; }
.tab .n{ font-family:var(--f-body); font-weight:600; font-size:.75em; opacity:.75; margin-left:.4em; }

/* Buscador de catálogo */
.cat-search{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; max-width:560px;
}
.cat-search label{ font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; align-self:center; color:var(--grafito); }
.cat-search input{
  flex:1 1 220px; font-family:var(--f-body); font-size:1rem;
  border:2px solid var(--grafito); padding:.68em .9em; background:#fff; color:var(--tinta);
}
.cat-search input:hover{ border-color:var(--rojo); }
.empty-msg{
  display:none; border:1px dashed var(--acero); padding:22px; text-align:center;
  color:var(--tinta-suave); font-weight:500; background:#fff;
}
.empty-msg.is-visible{ display:block; }

/* Fichas SKU densas */
.sku-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
}
.sku-card{
  background:#fff; padding:14px; display:flex; flex-direction:column; gap:10px;
  position:relative; align-items:flex-start;
  box-shadow:inset 0 0 0 1px var(--borde);
}
/* Sin hover de marco: la ficha SKU es informativa, la acción está en el CTA final */
.sku-card__foto{
  background:var(--fondo); border:1px solid var(--borde); padding:10px;
  display:flex; align-items:center; justify-content:center; width:100%; min-height:112px;
}
.sku-card__foto img{ max-width:100%; max-height:110px; object-fit:contain; }
.sku-card__code{
  font-family:var(--f-head); font-weight:600; letter-spacing:.14em; font-size:.82rem; color:var(--tinta);
}
.sku-card__fam{ font-size:.76rem; color:var(--acero); text-transform:uppercase; letter-spacing:.06em; }
.sku-card .tag{ font-size:.68rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .fabrica__grid{ grid-template-columns:1fr; }
  .fin__grid{ grid-template-columns:1fr; }
  .conc-layout{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; align-items:center; }
  .nav{
    position:absolute; top:100%; left:0; right:0; margin:0;
    background:#fff; border-bottom:4px solid var(--rojo);
    box-shadow:0 18px 30px rgba(0,0,0,.18);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .nav.is-open{ max-height:100vh; }
  .nav ul{ flex-direction:column; gap:0; padding:8px 0; }
  .nav a{ padding:.8em 24px; font-size:1.15rem; border-left:6px solid transparent; }
  .nav a::after{ display:none; }
  .nav a:hover, .nav a[aria-current]{ border-left-color:var(--rojo); background:var(--fondo); }
  /* CTA siempre visible: versión compacta a la izquierda del toggle */
  .header-cta{ font-size:.85rem; padding:.6em .95em .55em .85em; order:-1; margin-left:auto; }
  .nav-toggle{ margin-left:0; }
  .site-header .wrap{ min-height:66px; gap:12px; }
  .brand-link img{ width:138px; }
  .trust__item{ padding:16px 18px; }
  .finder__form .btn{ flex:1 1 100%; justify-content:center; }
  .hero .wrap{ padding-block:clamp(56px, 14vw, 96px); }
}
@media (max-width: 480px){
  .topbar .hide-xs{ display:none; }
  .cat-grid{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
  .wa-float span{ display:none; }
  .wa-float{ padding:12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* Print mínimo */
@media print{
  .nav, .topbar, .wa-float, .site-header .header-cta{ display:none; }
  body{ background:#fff; }
}