/* =========================================================================
   Hemmel — hoja de estilos compartida
   Tokens de marca + reset + componentes de estructura (header/nav/footer).
   Sin build, sin frameworks — se sirve tal cual a producción.
   ========================================================================= */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-800.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/montserrat-900.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}

:root {
  /* --- Color de marca ---
     Negro + Rojo + Blanco es la base única de las 7 líneas; el Verde es
     la única excepción deliberada, exclusiva de Energías Renovables. */
  --color-ink: #0d0d0d;
  --color-paper: #ffffff;
  --color-red: #ab1110;
  --color-green: #8ec95b;

  /* Neutrales de soporte para UI (bordes, superficies, texto secundario) —
     no son color de marca, son grises con un leve sesgo cálido hacia el
     rojo para no leer como gris "de sistema" sin elegir. */
  --color-surface: #ffffff;
  --color-surface-alt: #f6f5f4;
  --color-border: #e2e0dd;
  --color-ink-soft: #3a3836;
  --color-ink-faint: #74716d;

  /* --- Tipografía ---
     Montserrat (800/900) para títulos, Inter para texto — autohospedadas
     en assets/fonts/, licencia libre (Google Fonts / SIL OFL). Provisorias
     hasta confirmar si Codec Pro / Crave Sans tienen licencia de webfont. */
  --font-display: "Montserrat", "Segoe UI Semibold", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Escala tipográfica --- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --text-4xl: clamp(3rem, 2.2rem + 4vw, 5.5rem);

  /* --- Espaciado --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius: 2px;
  --radius-btn: 6px;
  --header-height: 84px;
  --content-width: 1440px;
}

@media (min-width: 1800px) {
  :root {
    --content-width: 1680px;
  }
}

/* =========================================================================
   Reset
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-4);
  max-width: 66ch;
}

ul, ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visible siempre — accesibilidad de teclado */
:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* =========================================================================
   Utilidades de layout
   ========================================================================= */
.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.overflow-x {
  overflow-x: auto;
}

/* =========================================================================
   Header / navegación principal
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--color-ink);
  color: var(--color-paper);
  border-bottom: 3px solid var(--color-red);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-header__logo-link {
  display: block;
  line-height: 0;
}

.site-header__logo {
  display: block;
  height: 30px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__link {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-paper);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  border-color: var(--color-red);
}

.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-paper);
  padding: var(--space-2);
}

/* --- Item de nav con submenú ("Productos") --- */
.site-nav__item--has-dropdown {
  position: relative;
}

.site-nav__link--caret::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

.nav-dropdown {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 260px;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-nav__item--has-dropdown:hover .nav-dropdown,
.site-nav__item--has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 4px);
}

.nav-dropdown a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-ink);
  text-decoration: none;
}

.nav-dropdown a:hover {
  background: var(--color-surface-alt);
  color: var(--color-red);
}

@media (max-width: 900px) {
  .site-nav__toggle {
    display: block;
  }

  .site-nav__list {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--color-ink);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .site-nav__list[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* El separador vive en el <li>, no en el <a> — así nunca cruza texto
     (antes el border-bottom estaba en el link y en "Soporte" terminaba
     pisando la letra final; acá separa items completos, y en
     "Productos" separa recién después de todo el desplegable de
     líneas, no pegado a "Profesional"). */
  .site-nav__list > li {
    width: 100%;
    border-bottom: 1px solid var(--color-ink-soft);
  }

  .site-nav__list > li:last-child {
    border-bottom: none;
  }

  .site-nav__link {
    width: 100%;
    padding: var(--space-4) 0;
    border-bottom: none;
  }

  /* "Página actual" en mobile: color, no línea — una línea puede
     terminar cruzando el texto según el alto real de la fuente, un
     color no tiene ese problema. */
  .site-nav__link[aria-current="page"] {
    color: var(--color-red);
    border-color: transparent;
  }

  .site-nav__link--caret::after {
    display: none;
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0 0 var(--space-3) var(--space-4);
    margin-top: var(--space-1);
  }

  .nav-dropdown a {
    color: var(--color-surface-alt);
    padding: var(--space-3) 0;
    font-weight: 500;
  }
}

/* =========================================================================
   Botón flotante de WhatsApp
   ========================================================================= */
.whatsapp-float {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 50;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--color-ink);
  color: var(--color-surface-alt);
  padding-block: var(--space-16) var(--space-8);
  border-top: 3px solid var(--color-red);
  position: relative;
  overflow: hidden;
}

/* Degradé rojo suave que se apaga hacia abajo, mismo recurso que usa
   fnirsi-ar en su footer (ahí es azul) — acá en rojo de marca. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: radial-gradient(60% 100% at 18% 0%, rgba(171, 17, 16, 0.22), transparent 70%);
  pointer-events: none;
}

.site-footer__top {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-ink-soft);
}

.site-footer__logo-link {
  display: inline-block;
  line-height: 0;
}

.site-footer__logo {
  display: block;
  height: 40px;
  width: auto;
}

.site-footer__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-ink-faint);
  max-width: 38ch;
  margin: var(--space-4) 0 0;
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

.site-footer__list li {
  margin-bottom: var(--space-2);
}

.site-footer__list a {
  color: var(--color-surface-alt);
  text-decoration: none;
  font-size: var(--text-sm);
}

.site-footer__list a:hover {
  color: var(--color-red);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

@media (max-width: 800px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* =========================================================================
   Accento por línea — solo Energías Renovables usa un color propio.
   El resto de las líneas se identifican por texto (wordmark), no por color.
   ========================================================================= */
[data-linea="energias-renovables"] {
  --linea-accent: var(--color-green);
}

.linea-accent-bar {
  height: 4px;
  background: var(--linea-accent, var(--color-red));
}

/* =========================================================================
   Hero — banner real a sangre completa (foto ancha de fondo + texto
   superpuesto con capa oscura), mismo recurso que usa fnirsi.com.ar.
   Reemplazó al layout anterior (texto a la izquierda, foto chica
   flotando a la derecha) — el cliente lo pidió más "zarpado"/inmersivo
   después de comparar con el hero de FNIRSI (2026-08-05).
   ========================================================================= */
.hero {
  position: relative;
  /* Escala con el ancho de pantalla: en monitores ultra anchos la caja
     del hero es mucho más "panorámica" que la foto (2544x1256, ~2:1),
     así que si la altura queda fija se recorta muchísimo verticalmente.
     Dejarla crecer un poco en pantallas grandes reduce ese recorte. */
  min-height: clamp(560px, 38vw, 1000px);
  display: flex;
  align-items: center;
  color: var(--color-paper);
  border-bottom: 1px solid var(--color-ink-soft);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Punto medio: el aparejo está arriba y el proyector abajo, los dos
     importan. "top" puro tapaba el proyector; "center" puro tapaba el
     aparejo. 30% desde arriba reparte el recorte (que en pantallas
     ultra anchas es inevitable, ver min-height de .hero) priorizando
     un poco más lo de arriba sin perder lo de abajo. */
  object-position: center 30%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Oscurece de abajo hacia arriba y de izquierda a derecha — el texto
     vive abajo a la izquierda, tiene que leerse bien ahí sin tapar toda
     la foto. */
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.96) 0%, rgba(13, 13, 13, 0.55) 45%, rgba(13, 13, 13, 0.1) 78%),
    linear-gradient(90deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0) 55%);
}

.hero__content {
  position: relative;
  max-width: 640px;
  /* A propósito NO usa .wrap: .wrap se centra con un ancho máximo, y en
     pantallas muy anchas (>1680px) eso deja el texto flotando lejos del
     borde real de la ventana en vez de pegado a la izquierda — justo lo
     que hace que la foto (con el producto compuesto a la derecha) se
     lea mal. Este padding-left escala con el viewport pero siempre
     arranca cerca del borde real. */
  padding-left: clamp(24px, 6vw, 100px);
  padding-right: var(--space-6);
  padding-block: var(--space-24) var(--space-16);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--text-4xl);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--color-paper);
  max-width: 14ch;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--color-red);
}

.hero__lead {
  font-size: var(--text-lg);
  color: var(--color-surface-alt);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (max-width: 900px) {
  .hero {
    min-height: 520px;
  }
  .hero__scrim {
    background: linear-gradient(0deg, rgba(13, 13, 13, 0.97) 0%, rgba(13, 13, 13, 0.65) 55%, rgba(13, 13, 13, 0.25) 100%);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-paper);
}

.btn--primary:hover {
  background: #d41918;
}

.btn--ghost {
  border-color: var(--color-ink-soft);
  color: var(--color-paper);
}

.btn--ghost:hover {
  border-color: var(--color-paper);
}

/* Igual que .btn--ghost pero para usar sobre fondo claro (texto oscuro en
   vez de blanco) — ej. tarjetas de tienda, que van sobre superficie
   clara aunque el resto de la página sea oscura. */
.btn--ghost-dark {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}

.btn--ghost-dark:hover {
  border-color: var(--color-ink);
}

/* =========================================================================
   Franja de credibilidad — delgada, oscura, con acento rojo, no un bloque
   de texto sobre blanco.
   ========================================================================= */
.credibilidad {
  background: var(--color-surface-alt);
  padding-block: var(--space-8);
}

.credibilidad__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

.credibilidad__item {
  border-left: 3px solid var(--color-red);
  padding-left: var(--space-4);
}

.credibilidad__item h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.credibilidad__item p {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0;
}

/* =========================================================================
   Grilla de líneas de producto — el momento visual fuerte del home. Fotos
   a sangre, sin recuadros blancos, etiqueta sobre degradé como en el
   catálogo de referencia (Hamilton).
   ========================================================================= */
.lineas {
  background: var(--color-ink);
  padding-block: var(--space-16) var(--space-16);
}

.lineas__head {
  max-width: 60ch;
  margin-bottom: var(--space-8);
  color: var(--color-paper);
}

.lineas__head .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-2);
  display: block;
}

.lineas__head h2 {
  font-size: var(--text-2xl);
  color: var(--color-paper);
}

.lineas__head p {
  color: var(--color-ink-faint);
}

/* Flex en vez de grid a propósito: con 7 tarjetas en filas de 4, la
   segunda fila (3 tarjetas) quedaba pegada a la izquierda con un hueco
   negro al costado. Con flex + justify-content:center, esa fila corta
   queda centrada sola. */
.lineas__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}

.linea-card {
  position: relative;
  display: block;
  flex: 1 1 calc(25% - var(--space-5) * 3 / 4);
  min-width: 260px;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-ink-soft);
  border-radius: 14px;
}

.linea-card__media {
  position: absolute;
  inset: 0;
}

.linea-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%) contrast(1.05);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.linea-card:hover .linea-card__media img {
  transform: scale(1.06);
  filter: grayscale(0%) contrast(1.05);
}

/* Footer semitransparente sobre la foto — se sigue viendo la imagen
   detrás, nombre centrado y grande para que pegue fuerte. */
.linea-card__name {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 76px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--color-paper);
  background: rgba(171, 17, 16, 0.72);
  backdrop-filter: blur(1px);
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 900px) {
  .linea-card { flex-basis: calc(50% - var(--space-3) / 2); max-width: 420px; }
  .lineas__grid { gap: var(--space-3); }
}

@media (max-width: 520px) {
  .linea-card { flex-basis: 100%; max-width: 480px; }
  .lineas__grid { gap: var(--space-3); }
}

/* =========================================================================
   Quiénes somos — banda de marca, una sola afirmación fuerte + texto de
   apoyo. Sin inventar historia/fechas, solo lo que es real.
   ========================================================================= */
.marca {
  background: var(--color-surface);
  color: var(--color-ink);
  padding-block: var(--space-24);
}

.marca__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.marca__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-4);
  display: block;
}

.marca__title {
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

.marca__body p {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 52ch;
}

.marca__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .marca__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* =========================================================================
   Franja "Hemmel cerca tuyo" — banda roja compacta entre Quiénes somos
   (blanco) y Contacto (negro), con un único CTA a /donde-comprar/. No es
   una sección larga a propósito, solo corta el blanco-negro-blanco-negro
   y da una acción comercial concreta.
   ========================================================================= */
.cerca-tuyo {
  background: var(--color-red);
  padding-block: var(--space-8);
}

.cerca-tuyo__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.cerca-tuyo__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-paper);
  margin: 0 0 var(--space-1);
}

.cerca-tuyo__lead {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 56ch;
}

.cerca-tuyo .btn {
  flex: none;
  background: var(--color-ink);
  color: var(--color-paper);
}

.cerca-tuyo .btn:hover {
  background: #000000;
}

/* =========================================================================
   Contacto
   ========================================================================= */
.contacto {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-16);
}

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.contacto__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-4);
  display: block;
}

.contacto__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.contacto__lead {
  color: var(--color-ink-faint);
  max-width: 44ch;
}

.contacto__canales {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.canal {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-ink-soft);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-paper);
  transition: border-color 0.15s ease;
}

.canal:hover {
  border-color: var(--color-red);
}

.canal__icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--color-red);
}

.canal__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9894;
  display: block;
}

.canal__valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
}

@media (max-width: 800px) {
  .contacto__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* =========================================================================
   Redes sociales — footer
   ========================================================================= */
.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-ink-soft);
  color: var(--color-surface-alt);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.social-icon:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

/* =========================================================================
   Soporte — grilla de temas dentro de una sección clara (.marca), para no
   encadenar 3 secciones negras seguidas (hero + contacto + footer).
   ========================================================================= */
.soporte-temas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-12);
}

.soporte-tema__titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.soporte-tema__texto {
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 800px) {
  .soporte-temas { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* =========================================================================
   Manuales y Software (/soporte/manuales/) — página armada pero todavía
   sin link desde el nav/footer (ver CLAUDE.md). Las fichas no tienen
   descarga real todavía, solo anuncian qué va a estar disponible.
   ========================================================================= */
.manuales-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-12);
}

.manuales-aviso svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--color-red);
  margin-top: 2px;
}

.manuales-aviso p {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: 1.6;
}

.manuales-aviso a {
  color: var(--color-ink);
  font-weight: 700;
}

.manuales-grupo {
  margin-bottom: var(--space-12);
}

.manuales-grupo:last-child {
  margin-bottom: 0;
}

.manuales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.manual-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-5);
}

.manual-card__modelo {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-1);
}

.manual-card__nombre {
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 var(--space-3);
}

.manual-card__tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  border: 1px solid var(--color-ink-soft);
  border-radius: 4px;
  padding: 3px 8px;
}

.manual-card__estado {
  font-size: var(--text-xs);
  color: var(--color-red);
  margin: 0;
}

/* =========================================================================
   Hero de página interior (línea, dónde comprar, empresa, soporte) — más
   corto que el del home. Con foto de fondo (líneas) o sin ella (el resto).
   ========================================================================= */
.page-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background: var(--color-ink);
  overflow: hidden;
}

.page-hero--sin-foto {
  min-height: 220px;
  align-items: center;
  border-bottom: 1px solid var(--color-ink-soft);
}

.page-hero__media {
  position: absolute;
  inset: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(25%) brightness(0.85);
}

.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.15) 0%, rgba(13, 13, 13, 0.9) 100%);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-12);
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-paper);
  margin-bottom: var(--space-3);
}

.page-hero__lead {
  color: var(--color-surface-alt);
  max-width: 56ch;
  margin: 0;
}

/* =========================================================================
   Listado de productos de una línea — texto, sin fotos individuales
   todavía (ver CLAUDE.md, pendiente de resolver fichas por SKU vs. familia).
   ========================================================================= */
.productos-linea {
  padding-block: var(--space-16);
}

.productos-linea__head {
  margin-bottom: var(--space-8);
}

.productos-linea__head .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-2);
  display: block;
}

.product-list__group-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: var(--space-8) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-red);
}

/* Grilla de fichas de producto — foto real si el crawl la encontró
   (scripts/crawl-imagenes.js), si no un placeholder neutro con el
   wordmark, nunca una foto que no sea la del producto real. */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.prod-card {
  display: flex;
  flex-direction: column;
}

.prod-card__media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-surface-alt);
  margin-bottom: var(--space-2);
}

.prod-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.prod-card:hover .prod-card__media img {
  transform: scale(1.05);
}

.prod-card__media--sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
}

.prod-card__placeholder {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}

.prod-card__nombre {
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-ink);
  margin: 0;
}

.prod-card__colores {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin: var(--space-1) 0 0;
}

/* Cuando una ficha agrupa varias variantes (tamaños, voltajes, colores)
   de la misma familia, se listan debajo del nombre. Sin límite de alto
   ni scroll — tienen que poder leerse todas para poder editarlas. */
.prod-card__variantes {
  margin: var(--space-1) 0 0;
  padding: 0;
}

.prod-card__variantes li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-faint);
  list-style: none;
  padding: 1px 0;
  border-bottom: 1px dotted var(--color-border);
}

.prod-card__variantes li:last-child {
  border-bottom: none;
}

/* =========================================================================
   Dónde comprar — página propia (/donde-comprar/). Tarjetas por punto de
   venta, pensado para crecer: sumar un <article class="tienda-card"> es
   todo lo que hace falta.
   ========================================================================= */
.donde-comprar {
  padding-block: var(--space-16);
}

/* Agrupado por provincia — "Puntos de venta" crece agregando objetos a
   scripts/data/puntos-de-venta.json, nunca tocando este CSS/HTML. */
.tiendas__grupo {
  margin-bottom: var(--space-12);
}

.tiendas__grupo:last-child {
  margin-bottom: 0;
}

.tiendas__provincia {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.tiendas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.tienda-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface-alt);
  border-radius: 8px;
}

.tienda-card__logo {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-1);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tienda-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tienda-card__tipo {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
}

.tienda-card__nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.tienda-card__ubicacion {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: 0;
}

.tienda-card__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.tienda-card__acciones .btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

/* =========================================================================
   /productos/ — una fila por familia (foto + descripción completa), no
   la grilla chica de tarjetas que ya está en el home. Acá sí se puede
   explicar todo lo que tiene la línea, la foto sola no alcanza.
   ========================================================================= */
.familias-lista {
  background: var(--color-surface);
  padding-block: var(--space-8) var(--space-16);
}

.familia-fila {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-ink);
}

.familia-fila:first-child {
  padding-top: var(--space-4);
}

.familia-fila:last-child {
  border-bottom: none;
}

.familia-fila__media {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.familia-fila__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.familia-fila:hover .familia-fila__media img {
  transform: scale(1.04);
}

.familia-fila__nombre {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.familia-fila__desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 68ch;
  margin-bottom: var(--space-3);
}

.familia-fila__link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-red);
}

@media (max-width: 700px) {
  .familia-fila {
    grid-template-columns: 1fr;
  }
  .familia-fila__media {
    max-width: 220px;
  }
}