/* ==========================================================================
   ACERMEC-style — Metalúrgica & Inyección plástica · Piñeyro, Avellaneda
   Paleta: BLANCO base · ROJO protagonista · NEGRO estructural (sin tintes azules)
   Estética: industrial, fabricación para terceros. Cortes diagonales,
   grilla tipo plano. Animaciones livianas (respetan prefers-reduced-motion).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Neutrales */
  --white:   #ffffff;
  --paper:   #f5f6f7;   /* fondo de secciones (gris neutro) */
  --paper-2: #eeeeef;
  --ink:     #141414;   /* títulos (negro) */
  --ink-2:   #333333;   /* cuerpo fuerte */
  --muted:   #6b6b6b;   /* texto secundario */
  --line:    #e4e4e4;   /* bordes */
  --line-2:  #cfcfcf;

  /* Rojo (protagonista) */
  --red-050:#fdecec;
  --red-100:#f9d2d3;
  --red:     #dc1e28;   /* CTA / acento */
  --red-600: #bb1620;
  --red-700: #97121a;

  /* Azul marino (estructural / secciones oscuras) — PRUEBA en reemplazo del negro */
  --navy-900:#2E5E8A;   /* footer / hero oscuro */
  --navy-800:#42729E;
  --blue:    #dc1e28;   /* alias: detalle en grillas/glows ahora es ROJO, no azul */
  --blue-050:#f5f5f5;

  /* Metal */
  --steel-1:#eef2f7;
  --steel-2:#c9d4e2;

  /* Tipografía */
  --font-display:"Archivo", system-ui, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala tipográfica fluida */
  --fs-eyebrow: 0.78rem;
  --fs-small:   0.875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.05rem, 0.9rem + 0.7vw, 1.3rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h2:      clamp(1.8rem, 1.35rem + 2vw, 2.9rem);
  --fs-h1:      clamp(2.3rem, 1.6rem + 3.2vw, 4rem);

  /* Espaciado (ritmo 4/8) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;

  /* Radios y sombras */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(12,24,38,.06), 0 1px 3px rgba(12,24,38,.09);
  --shadow:    0 12px 34px -14px rgba(12,24,38,.30);
  --shadow-lg: 0 34px 70px -22px rgba(12,24,38,.40);

  --container: 1240px;
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--red); text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
p { max-width: 66ch; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--navy-900); color: #cfcfcf; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.grid { display: grid; gap: var(--space-5); }
.center { text-align: center; }

/* ---------- Eyebrow / encabezado técnico ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--red); display:inline-block; }
.eyebrow--plain::before { display:none; }
.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: var(--space-2); }
.section-head p { color: var(--muted); font-size: var(--fs-lead); margin-top: var(--space-3); margin-inline: auto; }
.section--dark .section-head p { color: #b3b3b3; }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--red); --btn-fg:#fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.7rem;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--btn-bg); border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur);
  box-shadow: 0 10px 22px -12px rgba(220,30,40,.85);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); background: var(--red-600); box-shadow: 0 16px 30px -12px rgba(220,30,40,.9); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border: 1.5px solid var(--line-2); box-shadow: none; }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none; transform: translateY(-2px); }
.btn--ondark { --btn-fg:#fff; border-color: rgba(255,255,255,.4); }
.btn--ondark.btn--ghost:hover { border-color:#fff; color:#fff; background: rgba(255,255,255,.08); }
.btn--red { --btn-bg: var(--red); }   /* alias, por compatibilidad */
.btn--lg { min-height: 56px; padding: 0 2rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Barra superior ---------- */
.topbar { background: var(--navy-900); color: #c9c9c9f2; font-size: .85rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 42px; }
.topbar__contact { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.topbar a { color: #d6d6d6; display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color:#fff; }
.topbar svg { width: 16px; height: 16px; color: var(--red); }
.topbar__sep { color: rgba(255,255,255,.2); }
.topbar__social { display:flex; align-items:center; gap: var(--space-4); }
.topbar__social a svg { color:#d6d6d6; width:17px; height:17px; }
.topbar__social a:hover svg { color:#fff; }

/* ---------- Header / navegación ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; gap: var(--space-5); height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand__logo { height: 68px; width: auto; max-width: 260px; object-fit: contain; display: block; }
.brand__mark {
  width: 46px; height: 46px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--red) 0%, var(--red-700) 100%);
  color:#fff; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-sm);
}
.brand__text { display:flex; flex-direction:column; line-height:1.02; }
.brand__kicker { font-family: var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color: var(--muted); }
.brand__name { font-family: var(--font-display); font-weight:800; font-size:1.2rem; color: var(--ink); letter-spacing:-.01em; }
.brand__tag { font-family: var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }

.nav__links { display:flex; align-items:center; gap: var(--space-5); }
.nav__link { position:relative; color: var(--ink); font-weight:600; font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; padding:.4rem 0; }
.nav__link::after { content:""; position:absolute; left:0; bottom:-3px; height:2.5px; width:0; background: var(--red); transition: width var(--dur) var(--ease); }
.nav__link:hover { color: var(--red); }
.nav__link:hover::after, .nav__link.is-active::after { width:100%; }
.nav__link.is-active { color: var(--red); }
.nav__cta { display:flex; align-items:center; gap: var(--space-3); }

/* ---------- Dropdown de navegación ---------- */
.nav__item { position:relative; }
.nav__item .nav__link { display:inline-flex; align-items:center; gap:.3rem; }
.nav__item .nav__link::before {
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease);
}
.nav__item:hover .nav__link::before, .nav__item:focus-within .nav__link::before { transform: translateY(-4px) rotate(225deg); }
.nav__dropdown-toggle { display:none; }
.nav__dropdown {
  position:absolute; top:100%; left:0; right:auto; margin-top:0;
  padding: calc(var(--space-3) + 10px) var(--space-3) var(--space-3);
  background:transparent; border:0; box-shadow:none; border-radius: var(--radius-sm);
  min-width:230px; display:grid; gap:1px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  z-index:60;
}
.nav__dropdown::after {
  content:""; position:absolute; top:10px; left:0; right:0; bottom:0;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index:-1;
}
.nav__dropdown a { position:relative; }
.nav__item::before {
  content:""; position:absolute; top:100%; left:0; right:0; height:14px; z-index:59;
}
.nav__dropdown--right { left:auto; right:0; }
.nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.nav__dropdown a {
  display:block; padding:.55rem .7rem; border-radius:8px; font-size:.85rem; font-weight:500;
  color: var(--ink); text-transform:none; letter-spacing:normal; white-space:nowrap; transition: background var(--dur), color var(--dur);
}
.nav__dropdown a:hover { background: var(--red-050); color: var(--red); }

.nav__toggle { display:none; width:48px; height:48px; border-radius:10px; border:1px solid var(--line-2); }
.nav__toggle span { display:block; width:22px; height:2px; background: var(--ink); margin:4px auto; transition: transform var(--dur), opacity var(--dur); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero HOME (claro, con imagen + tarjeta capacidades) ---------- */
.hero-home { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-home__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.hero-home__scrim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 32%, rgba(245,246,247,.82) 44%, rgba(245,246,247,0) 60%); }
.hero-home__inner { position: relative; z-index: 2; padding-block: clamp(1rem, .5rem + 2vw, 2rem); }
.hero-home__text { max-width: 640px; }
.hero-home h1 { font-size: var(--fs-h1); margin-top: var(--space-4); max-width: 14ch; }
.hero-home h1 .hl { color: var(--red); }
.hero-home__lead { font-size: var(--fs-lead); color: var(--muted); max-width: 46ch; margin-top: var(--space-4); }
.hero-home .btn-row { margin-top: var(--space-6); }

/* Estadísticas del hero (ícono + número + etiqueta) */
.hstats { display:grid; grid-template-columns: repeat(4,auto); gap: var(--space-6); margin-top: var(--space-7); }
.hstat { display:flex; align-items:center; gap: .8rem; }
.hstat__ico { width:40px; height:40px; flex:none; color: var(--red); display:grid; place-items:center; }
.hstat__ico svg { width:34px; height:34px; }
.hstat__num { font-family: var(--font-display); font-weight:800; font-size:1.4rem; color: var(--ink); line-height:1; }
.hstat__label { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); margin-top:.2rem; }


/* ---------- Hero PÁGINAS (oscuro navy con corte diagonal) ---------- */
.hero { position: relative; background: var(--navy-900); color:#d6d6d6; overflow:hidden; isolation:isolate; }
.hero--page { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.hero__grid {
  position:absolute; inset:0; z-index:-1;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 75% 15%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 100% at 75% 15%, #000 40%, transparent 85%);
}
.hero__diag { position:absolute; z-index:-1; right:0; top:0; bottom:0; width:38%; background: linear-gradient(120deg, transparent 0 42%, rgba(220,30,40,.22) 42% 100%); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.hero__glow { position:absolute; z-index:-1; border-radius:50%; filter: blur(70px); }
.hero__glow--red { width:420px; height:420px; background: radial-gradient(circle,#dc1e28,transparent 65%); top:-140px; right:-60px; opacity:.35; }
.hero__glow--blue{ width:420px; height:420px; background: radial-gradient(circle,#dc1e28,transparent 65%); bottom:-160px; left:-80px; opacity:.4; }
.hero__inner { position:relative; z-index:1; }
.hero--page h1 { color:#fff; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); margin-top: var(--space-3); }
.hero__lead { font-size: var(--fs-lead); color:#bdbdbd; max-width:56ch; margin-top: var(--space-4); }
.breadcrumb { font-family: var(--font-mono); font-size:.75rem; letter-spacing:.08em; color:#9a9a9a; text-transform:uppercase; }
.breadcrumb a { color:#9a9a9a; } .breadcrumb a:hover { color:#fff; }

/* ---------- Franja de confianza (bajo hero home) ---------- */
.trust { border-bottom:1px solid var(--line); background: var(--white); }
.trust__inner { display:flex; align-items:center; gap: var(--space-6); flex-wrap:wrap; padding-block: var(--space-4); }
.trust__label { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.trust__items { display:flex; flex-wrap:wrap; gap: var(--space-5) var(--space-6); align-items:center; }
.trust__item { display:flex; align-items:center; gap:.5rem; color: var(--ink); font-weight:600; font-size:.92rem; }
.trust__item svg { width:20px; height:20px; color: var(--red); }

/* ---------- Servicios (tarjetas con imagen) ---------- */
.svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.svc {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.svc:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--red-100); }
.svc__media { position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--navy-900); }
.svc__media img, .svc__media .ph { width:100%; height:100%; object-fit:cover; transition: transform 600ms var(--ease); }
.svc:hover .svc__media img, .svc:hover .svc__media .ph { transform: scale(1.06); }
.svc__media::after { content:""; position:absolute; left:0; bottom:0; width:0; height:4px; background: var(--red); transition: width var(--dur) var(--ease); }
.svc:hover .svc__media::after { width:100%; }
.svc__body { padding: var(--space-5); display:flex; flex-direction:column; flex:1; }
.svc__body h3 { font-size:1.15rem; }
.svc__body p { color: var(--muted); font-size:.95rem; margin-top:.5rem; flex:1; }
.svc__more { margin-top: var(--space-4); font-family: var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color: var(--red); display:inline-flex; align-items:center; gap:.4rem; }
.svc__more svg { width:16px; height:16px; transition: transform var(--dur) var(--ease); }
.svc:hover .svc__more svg { transform: translateX(4px); }

/* ---------- Industrias / sectores (íconos) ---------- */
.ind { display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items:center; }
.ind-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
.ind-tile {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: var(--space-5) var(--space-3);
  display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.ind-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--red-100); }
.ind-tile svg { width:38px; height:38px; color: var(--red); }
.ind-tile span { font-weight:600; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; color: var(--ink); }

/* ---------- Franja de diferenciales + CTA WhatsApp ---------- */
.feature-band { border-top:1px solid var(--line); background: var(--white); }
.feature-band__inner { display:grid; grid-template-columns: repeat(4,1fr) 1.3fr; gap: var(--space-5); align-items:center; padding-block: var(--space-7); }
.feat { display:flex; gap: var(--space-4); }
.feat__ico { flex:none; width:52px; height:52px; border-radius:50%; border:2px solid var(--red-100); color: var(--red); display:grid; place-items:center; }
.feat__ico svg { width:26px; height:26px; }
.feat h4 { font-family: var(--font-display); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink); }
.feat p { font-size:.85rem; color: var(--muted); margin-top:.25rem; }
.wsp-box { background: var(--red-050); border:1px solid var(--red-100); border-radius: var(--radius); padding: var(--space-5); display:flex; gap: var(--space-4); align-items:center; }
.wsp-box__ico { flex:none; width:48px; height:48px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; }
.wsp-box__ico svg { width:26px; height:26px; }
.wsp-box h4 { font-family: var(--font-display); color: var(--ink); font-size:1rem; }
.wsp-box p { font-size:.85rem; color: var(--ink-2); margin-top:.15rem; }
.wsp-box a { font-weight:700; color: var(--red); }

/* ---------- Tarjetas genéricas (páginas internas) ---------- */
.card { position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--red-100); }
.card__num { font-family: var(--font-mono); font-size:.8rem; letter-spacing:.14em; color: var(--red); }
.card__icon { width:56px; height:56px; border-radius:12px; display:grid; place-items:center; margin-bottom: var(--space-4); background: var(--red-050); color: var(--red); transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease); }
.card__icon svg { width:28px; height:28px; }
.card:hover .card__icon { background: var(--red); color:#fff; transform: rotate(-4deg); }
.card h3 { margin-top: var(--space-1); }
.card p { color: var(--muted); font-size:.98rem; margin-top: var(--space-3); }
.card__list { margin-top: var(--space-4); display:grid; gap:.5rem; }
.card__list li { position:relative; padding-left:1.5rem; font-size:.94rem; color: var(--ink-2); }
.card__list li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:2px; background: var(--red); transform: rotate(45deg); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

/* ---------- Sector cards con imagen (productos) ---------- */
.sector { position:relative; border-radius: var(--radius); overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; border:1px solid var(--line); background: var(--navy-900); }
.sector__img { position:absolute; inset:0; z-index:0; object-fit:cover; width:100%; height:100%; transition: transform 600ms var(--ease); }
.sector::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(12,24,38,.05) 0%, rgba(12,24,38,.55) 55%, rgba(12,24,38,.92) 100%); }
.sector:hover .sector__img { transform: scale(1.06); }
.sector__body { position:relative; z-index:2; padding: var(--space-6); }
.sector__body h3 { color:#fff; }
.sector__body p { color: rgba(255,255,255,.82); font-size:.95rem; margin-top: var(--space-2); }
.sector__tag { font-family: var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#ff8a8f; }

/* Placeholder de imagen */
.ph { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px), linear-gradient(135deg, #262626, #0d0d0d); display:grid; place-items:center; color: rgba(255,255,255,.45); }
.ph[data-ph]::after { content: attr(data-ph); font-family: var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.5rem; text-align:center; }

/* ---------- Split imagen + texto ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem); align-items:center; }
.split__media { position:relative; }
.split__media .frame { border-radius: var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow: var(--shadow); clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%); }
.split__media .frame img, .split__media .frame .ph { width:100%; height:100%; object-fit:cover; }
.split__media .badge { position:absolute; bottom:-22px; left:-22px; background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow); display:flex; align-items:center; gap: var(--space-4); }
.split__media .badge .n { font-family: var(--font-display); font-weight:800; font-size:2rem; color: var(--red); line-height:1; }
.split__media .badge .t { font-size:.85rem; color: var(--muted); }
.feature-list { display:grid; gap: var(--space-4); margin-top: var(--space-5); }
.feature { display:flex; gap: var(--space-4); }
.feature__ico { flex:none; width:44px; height:44px; border-radius:10px; background: var(--red-050); color: var(--red); display:grid; place-items:center; }
.feature__ico svg { width:24px; height:24px; }
.feature h4 { font-family: var(--font-display); font-size:1.05rem; color: var(--ink); }
.feature p { font-size:.95rem; color: var(--muted); margin-top:.15rem; }

/* ---------- Proceso (pasos) ---------- */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); }
.step { position:relative; padding-top: var(--space-6); }
.step::before { content:""; position:absolute; top:6px; left:0; width:40px; height:3px; background: var(--red); }
.step__n { font-family: var(--font-display); font-weight:800; font-size:2.4rem; color: var(--steel-2); line-height:1; }
.step h4 { font-family: var(--font-display); margin-top: var(--space-3); color: var(--ink); font-size:1.1rem; }
.step p { font-size:.94rem; color: var(--muted); margin-top: var(--space-2); }

/* ---------- Franja CTA ---------- */
.cta-band { position:relative; background: linear-gradient(120deg, var(--navy-800), var(--navy-900)); color:#fff; overflow:hidden; }
.cta-band .hero__grid { mask-image: radial-gradient(120% 120% at 20% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 120% at 20% 30%, #000 30%, transparent 80%); }
.cta-band__inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap: var(--space-6); flex-wrap:wrap; }
.cta-band h2 { color:#fff; max-width:20ch; }
.cta-band p { color:#aebfd2; margin-top: var(--space-3); }

/* ---------- Timeline / valores ---------- */
.timeline { position:relative; display:grid; gap: var(--space-6); padding-left: var(--space-6); }
.timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background: var(--line-2); }
.tl-item { position:relative; }
.tl-item::before { content:""; position:absolute; left:-26px; top:5px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--red); }
.tl-item .yr { font-family: var(--font-mono); font-size:.8rem; letter-spacing:.1em; color: var(--red); font-weight:600; }
.tl-item h4 { font-family: var(--font-display); color: var(--ink); margin-top:.15rem; }
.tl-item p { color: var(--muted); font-size:.96rem; margin-top:.35rem; }
.value__ico { width:52px; height:52px; border-radius:12px; background:#fff; border:1px solid var(--line); color: var(--red); display:grid; place-items:center; margin-bottom: var(--space-3); }
.value__ico svg { width:26px; height:26px; }
.value h4 { font-family: var(--font-display); color: var(--ink); }
.value p { color: var(--muted); font-size:.95rem; margin-top:.35rem; }

/* Estadísticas (sección oscura, empresa) */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
.stat { padding: var(--space-4) var(--space-3); border-left:2px solid rgba(220,30,40,.5); }
.stat__num { font-family: var(--font-display); font-weight:800; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); color:#fff; line-height:1; }
.stat__num .unit { color: var(--red); }
.stat__label { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#9a9a9a; margin-top: var(--space-2); }

/* ---------- Galería ---------- */
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.gallery .tile { aspect-ratio:1/1; border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); }
.gallery .tile img, .gallery .tile .ph { width:100%; height:100%; object-fit:cover; }

/* ---------- Tarjeta de producto ---------- */
.product-grid { display:grid; grid-template-columns: repeat(5,1fr); gap: var(--space-3); }
.product-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-card__media { aspect-ratio:1/1; display:grid; place-items:center; background:#f7f7f7; padding: var(--space-2); }
.product-card__media img { width:100%; height:100%; object-fit:contain; }
.product-card__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.product-card__name { font-size:.82rem; line-height:1.25; }
.product-card__specs { margin-top: var(--space-1); border-top:1px solid var(--line); }
.product-card__specs summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; padding-top: var(--space-2); font-family: var(--font-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color: var(--red); font-weight:600; }
.product-card__specs summary::-webkit-details-marker { display:none; }
.product-card__specs summary::after { content:"+"; font-size:.92rem; line-height:1; transition: transform var(--dur) var(--ease); }
.product-card__specs[open] summary::after { transform: rotate(45deg); }
.product-card__table { width:100%; border-collapse:collapse; margin-top: var(--space-1); font-size:.72rem; }
.product-card__table tr { border-top:1px solid var(--line); }
.product-card__table tr:first-child { border-top:0; }
.product-card__table th, .product-card__table td { text-align:left; padding: .32rem 0; font-weight:400; }
.product-card__table th { color: var(--muted); font-weight:500; width:42%; }
.product-card__table td { color: var(--ink); font-weight:600; }

.product-card__media img.is-zoomable { cursor: zoom-in; transition: transform var(--dur) var(--ease); }
.product-card__media:hover img.is-zoomable { transform: scale(1.04); }

/* ---------- Carrusel dentro de tarjeta de producto ---------- */
.product-card__media--carousel, .product-card__media:has(.product-carousel) { padding:0; }
.product-carousel { position:relative; width:100%; height:100%; overflow:hidden; }
.product-carousel__track { display:flex; width:100%; height:100%; touch-action:pan-y; cursor:grab; transition: transform .32s var(--ease); }
.product-carousel__track.is-dragging { transition:none; cursor:grabbing; }
.product-carousel__slide { flex:0 0 100%; display:grid; place-items:center; padding: var(--space-2); }
.product-carousel__slide img { width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; }
.product-carousel__btn {
  position:absolute; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.92); border:1px solid var(--line); color: var(--ink);
  cursor:pointer; opacity:0; transition:opacity var(--dur), background var(--dur); z-index:2;
}
.product-carousel__btn svg { width:14px; height:14px; }
.product-carousel:hover .product-carousel__btn { opacity:1; }
.product-carousel__btn:hover { background:#fff; }
.product-carousel__btn--prev { left:6px; }
.product-carousel__btn--next { right:6px; }
.product-carousel__dots { position:absolute; bottom:6px; left:0; right:0; display:flex; justify-content:center; gap:5px; z-index:2; }
.product-carousel__dots button { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#d8d8d8; cursor:pointer; transition: width var(--dur), background var(--dur); }
.product-carousel__dots button.is-active { width:15px; border-radius:3px; background: var(--red); }
@media (max-width: 640px) {
  .product-carousel__btn { opacity:1; }
}

/* ---------- Lightbox ---------- */
body.no-scroll { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(10,10,10,.92); padding: var(--space-6);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: min(90vw, 720px); max-height: 85vh; object-fit: contain; border-radius: var(--radius-sm); background:#fff; transform: scale(.96); transition: transform var(--dur) var(--ease); }
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close {
  position: absolute; top: var(--space-5); right: var(--space-5); width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  cursor:pointer; transition: background var(--dur);
}
.lightbox__close:hover { background: rgba(255,255,255,.22); }
.lightbox__close svg { width:20px; height:20px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img, .product-card__media img.is-zoomable { transition:none; }
}

/* ---------- Formulario ---------- */
.form { display:grid; gap: var(--space-4); }
.field { display:grid; gap:.4rem; }
.field label { font-weight:600; font-size:.92rem; color: var(--ink); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea { width:100%; font:inherit; font-size:1rem; color: var(--ink); padding:.8rem .95rem; min-height:50px; background:#fff; border:1.5px solid var(--line-2); border-radius: var(--radius-sm); transition: border-color var(--dur), box-shadow var(--dur); }
.field textarea { min-height:130px; resize:vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--red); box-shadow: 0 0 0 4px var(--red-050); }
.field .hint { font-size:.82rem; color: var(--muted); }
.field .error-msg { font-size:.82rem; color: var(--red-600); display:none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field.has-error .error-msg { display:block; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4); }
.hp-field { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.form__status { font-size:.95rem; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); display:none; }
.form__status.ok { display:block; background: var(--red-050); color: var(--red-700); border:1px solid var(--red-100); }

.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items:start; }
.info-list { display:grid; gap: var(--space-5); }
.info { display:flex; gap: var(--space-4); }
.info__ico { flex:none; width:48px; height:48px; border-radius:12px; background: var(--red-050); color: var(--red); display:grid; place-items:center; }
.info__ico svg { width:24px; height:24px; }
.info h4 { font-family: var(--font-display); color: var(--ink); font-size:1.02rem; }
.info a, .info p { color: var(--muted); font-size:.98rem; }
.info a:hover { color: var(--red); }
.map { margin-top: var(--space-5); border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; }
.map iframe { width:100%; height:100%; border:0; display:block; }

/* ---------- WhatsApp flotante ---------- */
.wsp-float { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); z-index:90; width:60px; height:60px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(37,211,102,.6); transition: transform var(--dur) var(--ease); }
.wsp-float svg { width:32px; height:32px; }
.wsp-float:hover { transform: scale(1.08) translateY(-2px); }
.wsp-float::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25d366; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%{ transform:scale(1); opacity:.7 } 70%{ transform:scale(1.5); opacity:0 } 100%{ opacity:0 } }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color:#d6d6d6; padding-block: var(--space-8) var(--space-6); }
.footer a { color:#d6d6d6; } .footer a:hover { color:#fff; }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.footer .brand__name, .footer .brand__kicker { color:#fff; } .footer .brand__tag { color:#8a8a8a; }
.footer .brand__logo { height: 64px; }
.footer h5 { font-family: var(--font-display); color:#fff; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom: var(--space-4); }
.footer ul { display:grid; gap:.6rem; font-size:.95rem; }
.footer__about { font-size:.95rem; color:#d6d6d6; max-width:34ch; margin-top: var(--space-4); }
.footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap: var(--space-4); flex-wrap:wrap; font-size:.85rem; color:#d6d6d6; }
.footer__contact { display:grid; gap:.5rem; font-size:.95rem; }
.footer__contact a { display:flex; align-items:center; gap:.5rem; }
.footer__contact svg { width:18px; height:18px; color: var(--red); flex:none; }

/* ---------- Reveal ---------- */
.js .reveal { opacity:0; transform: translateY(24px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); will-change: opacity, transform; }
.js .reveal.is-in { opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:70ms; } [data-delay="2"]{ transition-delay:140ms; }
[data-delay="3"]{ transition-delay:210ms; } [data-delay="4"]{ transition-delay:280ms; }
[data-delay="5"]{ transition-delay:350ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .wsp-float::after { animation:none; }
  .svc__media img, .svc__media .ph, .sector__img { transition:none; }
  * { scroll-behavior:auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .feature-band__inner { grid-template-columns: repeat(2,1fr); row-gap: var(--space-6); }
  .feature-band__inner .wsp-box { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); row-gap: var(--space-6); }
  .footer__grid { grid-template-columns:1fr 1fr; gap: var(--space-7); }
  .ind { grid-template-columns: 1fr; }
  .hstats { grid-template-columns: repeat(2,auto); gap: var(--space-5); justify-content:start; }
}
@media (max-width: 900px) {
  .hero-home__text { max-width: none; }
  /* Textos más chicos y compactos en mobile/tablet: la composición queda
     más proporcionada y ocupa menos alto de pantalla. */
  .hero-home h1 { font-size: clamp(1.7rem, 1.3rem + 2.4vw, 2.4rem); }
  .hero-home__lead { font-size: clamp(.92rem, .85rem + .4vw, 1rem); }
  .hero-home__inner { padding-block: clamp(1.75rem, 1.2rem + 3vw, 2.75rem); }
  .hstats { margin-top: var(--space-6); gap: var(--space-4); }
  /* La foto no puede estirarse a toda la altura (la sección es muy alta y angosta
     en mobile/tablet): se ancla arriba y mantiene su proporción real, un poco
     más achicada, como banda decorativa detrás del encabezado. El resto del
     texto sigue sobre --paper. */
  .hero-home__bg, .hero-home__scrim {
    height: auto; aspect-ratio: 1.5 / 1;
  }
  /* Doble degradado: vertical para que la banda se disuelva contra el fondo
     en vez de cortar en seco, y horizontal (más ancho que en desktop, porque
     el texto ocupa casi todo el ancho) para que la máquina quede como un
     guiño decorativo a la derecha sin cruzarse nunca con el texto. */
  .hero-home__scrim {
    background:
      linear-gradient(180deg, rgba(245,246,247,0) 62%, var(--paper) 96%),
      linear-gradient(90deg, var(--paper) 0%, var(--paper) 46%, rgba(245,246,247,.85) 62%, rgba(245,246,247,0) 88%);
  }
}
@media (max-width: 480px) {
  /* En celulares chicos el texto es aún más ancho en proporción a la pantalla:
     se angosta un poco más la porción visible de la foto. */
  .hero-home__bg, .hero-home__scrim { aspect-ratio: 1.25 / 1; }
  .hero-home__scrim {
    background:
      linear-gradient(180deg, rgba(245,246,247,0) 58%, var(--paper) 96%),
      linear-gradient(90deg, var(--paper) 0%, var(--paper) 52%, rgba(245,246,247,.85) 68%, rgba(245,246,247,0) 92%);
  }
}
@media (max-width: 860px) {
  .nav__links, .nav__cta .btn { display:none; }
  .nav__toggle { display:block; }
  .nav__links {
    position:absolute; top: calc(var(--nav-h) - 1px); left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow: var(--shadow);
    padding: var(--space-3) var(--space-5) var(--space-5);
    transform-origin:top; transform: scaleY(.6); opacity:0; pointer-events:none;
    transition: transform var(--dur) var(--ease), opacity var(--dur);
  }
  .nav.is-open .nav__links { display:flex; transform:none; opacity:1; pointer-events:auto; }
  .nav__link { display:block; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__link:last-child { border-bottom:0; }
  .nav__item.has-dropdown { display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); }
  .nav__item.has-dropdown:last-child { border-bottom:0; }
  .nav__item.has-dropdown .nav__link { flex:1; border-bottom:0; }
  .nav__item .nav__link::before { display:none; }
  .nav__dropdown-toggle {
    display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
    border-radius:8px; border:0; background:transparent; color: var(--ink);
  }
  .nav__dropdown-toggle svg { width:18px; height:18px; transition: transform var(--dur) var(--ease); }
  .nav__item.is-open .nav__dropdown-toggle svg { transform: rotate(180deg); }
  .nav__dropdown {
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    background:transparent; border:0; box-shadow:none; border-radius:0; margin-top:0;
    min-width:0; gap:0; width:100%; order:3;
    max-height:0; overflow:hidden; padding:0 0 0 1rem;
    transition: max-height var(--dur) var(--ease), padding-bottom var(--dur) var(--ease);
  }
  .nav__item.is-open .nav__dropdown { max-height:600px; padding-bottom:.6rem; }
  .nav__dropdown::after { display:none; }
  .nav__item::before { display:none; }
  .nav__dropdown a { padding:.6rem 0; font-size:.92rem; color: var(--muted); }
  .nav__dropdown a:hover { background:transparent; }
  .split { grid-template-columns:1fr; } .split__media { order:-1; }
  .contact-grid { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .topbar { font-size:.72rem; }
  .topbar__inner { min-height:0; padding-block:.5rem; }
  .topbar__contact { flex-wrap:nowrap; gap: var(--space-3); }
  .topbar svg { width:14px; height:14px; }
}
@media (max-width: 620px) {
  .svc-grid, .grid-2, .grid-3, .grid-4, .ind-grid { grid-template-columns:1fr; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .ind-grid { grid-template-columns:1fr 1fr; }
  .feature-band__inner { grid-template-columns:1fr; }
  .form__row { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr 1fr; }
  .cta-band__inner { flex-direction:column; align-items:flex-start; }
  .split__media .badge { left:0; }
  .stats { grid-template-columns:1fr 1fr; }
  .topbar__social { display:none; }
  .hstats { grid-template-columns:1fr 1fr; }
  .footer__grid { grid-template-columns:1fr; gap: var(--space-6); }
  .footer__about { max-width:none; }
  .footer__bottom { flex-direction:column; align-items:flex-start; gap: var(--space-2); }
}