/* ==========================================================================
   SYSTRONIC — Hoja de estilos principal
   --------------------------------------------------------------------------
   Estructura de este archivo (usa Ctrl+F con las etiquetas [SECCION]):
   [1] VARIABLES Y RESET
   [2] TIPOGRAFIA Y UTILIDADES
   [3] BOTONES
   [4] BARRA SUPERIOR (topbar) Y ENCABEZADO / NAV
   [5] MENU MOVIL (hamburguesa)
   [6] HERO (portada)
   [7] SECCIONES GENERALES / TITULOS DE SECCION
   [8] AREAS DE SERVICIO (5 tarjetas principales)
   [9] TARJETAS DE PROYECTOS / BANCOS / GALERIA
   [10] CARACTERISTICAS REALES (reemplaza estadisticas infladas)
   [11] PROCESO "DE LA IDEA AL EQUIPO TERMINADO"
   [12] FORMULARIO DE CONTACTO
   [13] BOTON FLOTANTE DE WHATSAPP
   [14] FOOTER
   [15] ANIMACIONES (scroll reveal)
   [16] PISTAS PCB (motivo grafico decorativo)
   [17] RESPONSIVE (tablet y movil)
   ========================================================================== */

/* ==========================================================================
   [1] VARIABLES Y RESET
   ========================================================================== */
:root {
  /* Colores base — negro / grafito / aluminio (identidad industrial real) */
  --bg: #0a0a0b;
  --bg-alt: #121314;
  --surface: #18191b;
  --surface-2: #1e2022;
  --border: #2a2c2f;
  --border-soft: #212325;

  /* Acento tecnologico — cian, usado con moderacion (NO como color dominante) */
  --primary: #1ab8cc;
  --primary-dim: #0f3339;
  --primary-glow: rgba(26, 184, 204, 0.25);

  /* Grises aluminio */
  --alum: #9aa0a6;
  --alum-soft: #c9cdd2;

  /* Pilotos / pulsadores — detalles minimos inspirados en los bancos didacticos */
  --pilot-green: #33c25a;   /* pilotos de marcha / bancos educativos */
  --pilot-amber: #f2b705;   /* aviso / automatizacion y control */
  --pilot-red: #e5484d;     /* peligro / laser-CNC (fabricacion digital) */
  --pilot-blue: #4d8dff;    /* logistica / importaciones */
  --pilot-green-dim: rgba(51, 194, 90, 0.14);
  --pilot-amber-dim: rgba(242, 183, 5, 0.14);
  --pilot-red-dim: rgba(229, 72, 77, 0.14);
  --pilot-blue-dim: rgba(77, 141, 255, 0.14);

  /* Texto */
  --text: #f4f5f6;
  --text-dim: #aeb3b8;
  --text-dimmer: #6d7278;

  /* Tipografia */
  --font-base: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  /* Layout */
  --max-width: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 88px;

  /* Sombras / transiciones */
  --shadow-soft: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  --transition: 0.25s ease;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Oculta visualmente un elemento sin quitarlo del arbol de accesibilidad
   (para encabezados u otros textos que solo necesita un lector de pantalla,
   sin cambiar nada de lo que se ve en pantalla). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Fondo general — negro/grafito solido, con un toque de acento muy sutil.
   A proposito NO se usa un lavado grande de cian: el acento tecnologico se
   reserva para detalles puntuales (botones, iconos, bordes), no para pintar
   toda la pagina de azul. */
body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(26, 184, 204, 0.05), transparent 32%),
    linear-gradient(var(--bg), var(--bg));
  background-attachment: fixed;
}

::selection { background: var(--primary); color: #04121a; }

/* Barra de scroll (estetica, navegadores WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dim); }

/* ==========================================================================
   [2] TIPOGRAFIA Y UTILIDADES
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--text-dim); }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
  position: relative;
}

.section--alt {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015) 20%, rgba(255,255,255,0.015) 80%, transparent);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.section--tight { padding: 60px 0; }

.text-center { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--primary);
}

.section-head {
  max-width: 720px;
  margin: 0 0 56px;
}

.section-head.text-center { margin-left: auto; margin-right: auto; }

.section-head p { font-size: 1.05rem; }

.text-accent { color: var(--primary); }

.muted { color: var(--text-dimmer); }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 60px 0;
  border: none;
}

.badge {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.02);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--alum);
  letter-spacing: 0.3px;
}

.tag-row span { display: inline-flex; align-items: center; }
.tag-row span:not(:last-child)::after {
  content: '\2022';
  margin-left: 22px;
  color: var(--primary);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* Placeholder de imagen (cuando aun no se usa una foto real) */
.img-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

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

/* ==========================================================================
   [3] BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--primary);
  color: #04141a;
  box-shadow: 0 10px 30px -12px var(--primary-glow);
}

.btn--primary:hover {
  background: #22c9de;
  box-shadow: 0 14px 36px -10px var(--primary-glow);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

.btn--whatsapp {
  background: #1fae5c;
  color: #fff;
}

.btn--whatsapp:hover { background: #189150; transform: translateY(-2px); }

.btn--block { width: 100%; }
.btn--sm { padding: 10px 18px; font-size: 0.85rem; }

.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   [4] BARRA SUPERIOR (topbar) Y ENCABEZADO / NAV
   ========================================================================== */
.topbar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dimmer);
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar a { color: var(--text-dim); transition: color var(--transition); }
.topbar a:hover { color: var(--primary); }
.topbar__item { display: inline-flex; align-items: center; gap: 6px; }
.topbar__item svg { flex: none; opacity: 0.85; }
.topbar__group { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar__social { display: flex; gap: 12px; }
.topbar__social a { display: flex; }
.topbar__social svg { width: 15px; height: 15px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Nota: se evita "backdrop-filter" aqui a proposito. Si se aplica sobre
     .site-header, crea un "containing block" para los elementos con
     position:fixed que esten dentro (como el menu movil), y el menu
     movil queda atrapado dentro de los 78px de alto del header en vez
     de cubrir toda la pantalla. Se usa un fondo casi solido en su lugar. */
  background: rgba(10, 10, 11, 0.97);
  border-bottom: 1px solid var(--border-soft);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ---- Logo / marca -------------------------------------------------------
   El logo se muestra como IMAGEN (assets/logo.svg), no como texto, para
   que sea el logo oficial de SYSTRONIC el que aparezca en el menu. Mientras
   se agrega el archivo definitivo, "assets/logo.svg" contiene una version
   provisional. Para reemplazarlo: sustituye ese archivo (mismo nombre) por
   el logo oficial exportado en SVG (ideal) o PNG con fondo transparente. */
.brand { display: flex; align-items: center; }
.brand img {
  height: 56px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

.main-nav { display: flex; align-items: center; gap: 4px; }

.main-nav > ul { display: flex; align-items: center; gap: 2px; }

.main-nav a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.main-nav a.nav-link:hover,
.main-nav li.is-active > a.nav-link {
  color: var(--primary);
  background: rgba(26, 184, 204, 0.07);
}

.main-nav li.has-dropdown { position: relative; }

.main-nav .dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.main-nav li.has-dropdown:hover .dropdown,
.main-nav li.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav .dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.main-nav .dropdown a:hover { background: rgba(26,184,204,0.08); color: var(--primary); }

.header-cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   [5] MENU MOVIL (hamburguesa)
   ========================================================================== */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-alt);
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-top: 1px solid var(--border-soft);
  }

  .main-nav.is-open { transform: translateX(0); }

  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }

  .main-nav a.nav-link { padding: 14px 12px; width: 100%; font-size: 1rem; }

  .main-nav .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,0.02);
    margin: 0 0 6px 12px;
  }

  .main-nav li.has-dropdown.is-open .dropdown { display: block; }

  .main-nav li.has-dropdown > a.nav-link { justify-content: space-between; }

  .header-cta .btn span.btn-text-full { display: none; }

  .brand img { height: 42px; max-width: 210px; }
}

/* ==========================================================================
   [6] HERO (portada)
   ========================================================================== */
.hero {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.hero__kicker .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pilot-green);
  box-shadow: 0 0 8px var(--pilot-green);
}

.hero h1 {
  margin-bottom: 20px;
}

.hero__tagline {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: var(--primary);
  margin-bottom: 18px;
}

.hero__lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: 28px;
}

.hero__tags {
  margin-bottom: 40px;
}

/* ---- Foto real del hero --------------------------------------------------
   Aqui va la fotografia panoramica real de los bancos didacticos (o el
   equipo destacado del momento). NO es un elemento decorativo: debe verse
   como una fotografia de producto grande y con presencia. Mientras se
   agrega la foto definitiva, se muestra un marcador claro para reemplazar. */
.hero__photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-soft);
}

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

.hero__photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(6,7,8,0.92), transparent);
  padding: 40px 22px 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--alum-soft);
}

/* ---- Mosaico de Inicio: 4 fotografias reales, una por linea de servicio --
   Sustituye a .hero__photo en la portada. Mismo peso visual para las 4
   lineas (Electronica y PCB / Fabricacion digital / Automatizacion /
   Bancos didacticos): ninguna debe dominar sobre las demas. */
.hero__mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  aspect-ratio: 16 / 10.5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.mosaic-tile:hover img { transform: scale(1.04); }

.mosaic-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 12px 9px;
  background: linear-gradient(0deg, rgba(6,7,8,0.92), transparent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3px;
  color: var(--alum-soft);
}

.mosaic-tile__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
}

.mosaic-tile--electronica .mosaic-tile__dot { background: var(--primary); }
.mosaic-tile--fabricacion .mosaic-tile__dot { background: var(--pilot-red); }
.mosaic-tile--automatizacion .mosaic-tile__dot { background: var(--pilot-amber); }
.mosaic-tile--bancos .mosaic-tile__dot { background: var(--pilot-green); }

/* ==========================================================================
   [7] SECCIONES GENERALES / TITULOS
   ========================================================================== */
.page-hero {
  padding: 150px 0 70px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}

.page-hero .container { position: relative; }

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dimmer);
  margin-bottom: 18px;
}

.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--primary); }

.page-hero h1 { max-width: 780px; }
.page-hero p.lead { font-size: 1.1rem; max-width: 700px; }

/* ==========================================================================
   [8] AREAS DE SERVICIO (5 tarjetas principales)
   --------------------------------------------------------------------------
   Cada area tiene un color de "piloto" propio (igual que los pulsadores e
   indicadores de un tablero real), no como decoracion sino como codigo de
   color consistente que se repite en tarjetas de proyectos y filtros.
   .area-card--bancos   -> verde   (educacion / marcha)
   .area-card--automatizacion -> ambar (proceso / control)
   .area-card--electronica    -> cian  (acento tecnologico principal)
   .area-card--fabricacion    -> rojo  (laser / advertencia real de equipo)
   .area-card--importaciones  -> azul  (logistica / comercio exterior)
   ========================================================================== */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.area-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pilot-color, var(--primary));
  border-radius: var(--radius);
  padding: 32px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.area-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.area-card--bancos { --pilot-color: var(--pilot-green); }
.area-card--automatizacion { --pilot-color: var(--pilot-amber); }
.area-card--electronica { --pilot-color: var(--primary); }
.area-card--fabricacion { --pilot-color: var(--pilot-red); }
.area-card--importaciones { --pilot-color: var(--pilot-blue); }

.area-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.area-card__pilot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pilot-color, var(--primary));
  box-shadow: 0 0 10px var(--pilot-color, var(--primary));
  flex: none;
}

.area-card__head h3 { margin: 0; font-size: 1.25rem; }

.area-card > p { font-size: 0.95rem; }

.area-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.area-card__list span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg-alt);
}

.area-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--pilot-color, var(--primary));
}

/* Tarjeta de capacidad individual (icono + titulo + texto corto), usada en
   paginas de detalle como Fabricacion digital para desglosar procesos */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.services-grid--4 { grid-template-columns: repeat(4, 1fr); }

.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-dim);
  box-shadow: var(--shadow-soft);
}

.service-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-dim);
  color: var(--primary);
  margin-bottom: 18px;
}

.service-card__icon svg { width: 22px; height: 22px; }
.service-card h3 { margin-bottom: 8px; font-size: 1.02rem; }
.service-card p { font-size: 0.86rem; margin-bottom: 0; }

/* Version compacta para paginas internas (icono + texto en una fila) */
.service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.service-list li .check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  margin-top: 2px;
}

.service-list li strong { display: block; color: var(--text); font-size: 0.95rem; }
.service-list li small { color: var(--text-dimmer); font-size: 0.82rem; }

/* ==========================================================================
   [9] TARJETAS DE PROYECTOS / BANCOS / GALERIA
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card-grid.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }

.project-card__img {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.project-card:hover .project-card__img img { transform: scale(1.05); }

.project-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  background: rgba(6,7,8,0.8);
  border: 1px solid var(--tag-color, var(--primary));
  color: var(--tag-color, var(--primary));
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-card__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tag-color, var(--primary));
}

/* Codigo de color por area tecnologica, igual que las tarjetas de servicio */
.project-card__tag--bancos { --tag-color: var(--pilot-green); }
.project-card__tag--automatizacion { --tag-color: var(--pilot-amber); }
.project-card__tag--electronica { --tag-color: var(--primary); }
.project-card__tag--fabricacion { --tag-color: var(--pilot-red); }

.project-card__body { padding: 22px; }
.project-card__body h3 { margin-bottom: 8px; }
.project-card__body p { font-size: 0.9rem; margin-bottom: 0; }

.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.project-card__meta span {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dimmer);
}

/* Aviso "sin proyectos cargados todavia" (proyectos.html y vista previa del
   home). Mismo lenguaje visual que los bloques de CTA (fondo var(--surface),
   borde, radio), pero en una sola columna centrada — para que ocupe un
   espacio deliberado y profesional en vez de una cuadricula vacia. */
.empty-state {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 40px;
}

.empty-state h3 { margin-bottom: 14px; font-size: 1.3rem; }
.empty-state p { margin-bottom: 28px; }

/* Galeria en mosaico */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: zoom-in;
}

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter var(--transition), opacity var(--transition); }
.gallery-item:hover img { transform: scale(1.08); }

/* Las fotos reales se muestran a maxima nitidez; los marcadores/placeholder
   se atenuan levemente para que no compitan visualmente con el material
   real (sin ocultarlos: siguen siendo utiles mientras no hay foto real). */
.gallery-item.is-placeholder img { opacity: 0.78; }
.gallery-item.is-placeholder:hover img { opacity: 0.92; }

/* Foco por teclado (las tarjetas son focuseables: tabindex="0") */
.gallery-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Etiqueta de categoria, discreta y siempre visible (no depende del hover) */
.gallery-item__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(4, 20, 26, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  opacity: 0;
  transition: opacity var(--transition);
}

.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
.gallery-item__overlay span { font-size: 0.78rem; font-weight: 600; }

/* Filtros de galeria / proyectos */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.85rem;
  transition: all var(--transition);
}

.filter-btn:hover { color: var(--primary); border-color: var(--primary-dim); }
.filter-btn.is-active { background: var(--primary); color: #04141a; border-color: var(--primary); font-weight: 600; }

/* Lightbox simple para galeria */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(3,4,5,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 40px 20px;
}

.lightbox.is-open { display: flex; }

.lightbox__content { max-width: 900px; width: 100%; text-align: center; }
.lightbox__content img { border-radius: var(--radius); border: 1px solid var(--border); max-height: 78vh; margin: 0 auto; }
.lightbox__caption { margin-top: 16px; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.85rem; }

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   [10] CARACTERISTICAS REALES (reemplaza la franja de estadisticas)
   --------------------------------------------------------------------------
   No usamos cifras infladas o inventadas ("+150 proyectos"): en su lugar,
   caracteristicas reales y verificables sobre como trabajamos.
   ========================================================================== */
.features-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature-box {
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}

.feature-box .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-box .icon svg { width: 20px; height: 20px; }
.feature-box strong { display: block; font-size: 1rem; color: var(--text); margin-bottom: 4px; }
.feature-box span { font-size: 0.85rem; color: var(--text-dimmer); }

/* Grid de valores (usado en Quienes somos) — mismo lenguaje visual que .feature-box */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.value-card {
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.value-card svg { width: 28px; height: 28px; color: var(--primary); margin-bottom: 14px; }
.value-card h3 { font-size: 1rem; }
.value-card p { font-size: 0.85rem; margin: 0; }

/* ==========================================================================
   [10b] INSTITUCIONES / CLIENTES (portada, solo si INSTITUCIONES tiene datos)
   --------------------------------------------------------------------------
   Fila de logos sobria, sin carrusel. Cada logo va sobre una tarjeta clara
   (fondo casi blanco) para que se distingan tanto logos claros como oscuros
   sobre el tema oscuro del sitio, con altura uniforme y sin deformar
   proporciones (object-fit: contain). Las instituciones sin logo muestran
   solo su nombre, en una tarjeta oscura acorde al resto del sitio.
   ========================================================================== */
.instituciones-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.institucion-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  min-width: 150px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  background: #f4f5f7;
  transition: transform var(--transition);
}

a.institucion-item:hover { transform: translateY(-3px); }

.institucion-item img {
  max-width: 150px;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.institucion-item--sin-logo {
  background: var(--surface);
  border: 1px solid var(--border);
}

.institucion-item--sin-logo span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  text-align: center;
}

/* ==========================================================================
   [11] PROCESO "DE LA IDEA AL EQUIPO TERMINADO"
   --------------------------------------------------------------------------
   Cadena horizontal de 8 etapas (en movil se apila vertical). Se dibuja
   como una "pista" continua para reforzar la identidad de circuito impreso.
   ========================================================================== */
.process-flow {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  position: relative;
  counter-reset: flow;
}

.process-flow::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px);
  z-index: 0;
}

.process-flow__step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 6px;
}

.process-flow__step .node {
  counter-increment: flow;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dim);
  transition: border-color var(--transition), color var(--transition);
}

.process-flow__step .node::before { content: counter(flow); }

.process-flow__step:hover .node {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-dim);
}

.process-flow__step span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.process-flow__note {
  max-width: 760px;
  margin: 46px auto 0;
  text-align: center;
  font-size: 1.02rem;
  color: var(--text-dim);
}

/* ==========================================================================
   [11b] PASOS "DISEÑAMOS EL BANCO SEGUN SU NECESIDAD" (portada)
   --------------------------------------------------------------------------
   Grid de tarjetas numeradas — a proposito con un lenguaje visual distinto
   al de .process-flow (sin linea conectora), para no duplicar esa seccion.
   ========================================================================== */
.need-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Variante de 4 columnas en desktop, usada cuando hay 8 pasos (bancos-didacticos.html).
   En tablet/movil sigue las mismas reglas responsive que .need-steps (ver [17]). */
.need-steps--wide { grid-template-columns: repeat(4, 1fr); }

.need-step {
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.need-step:hover {
  transform: translateY(-4px);
  border-color: var(--primary-dim);
  box-shadow: var(--shadow-soft);
}

.need-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
}

.need-step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.need-step p { font-size: 0.88rem; margin: 0; color: var(--text-dim); }

/* ==========================================================================
   [11c] "FORMULA" DE DISCIPLINAS COMBINABLES (servicios.html)
   --------------------------------------------------------------------------
   Fila de disciplinas unidas por "+", para comunicar que un mismo proyecto
   puede combinarlas — a proposito distinta del .process-flow (que muestra
   una secuencia de pasos) y de .need-steps (pasos numerados): aqui no hay
   orden, es una combinacion.
   ========================================================================== */
.discipline-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 28px 0;
}

.discipline-stack span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
}

.discipline-stack .plus {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
}

/* Tarjeta de capacidad con detalle (icono + titulo + texto + chips de
   tecnologias). Extiende .service-card sin modificarla, para no afectar
   las paginas que ya usan .service-card en su forma simple. */
.capability-card p {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.capability-card .tag-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.capability-card .tag-row-chips span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg-alt);
}

/* ==========================================================================
   [12] FORMULARIO DE CONTACTO
   ========================================================================== */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 20px;
}

.contact-info-list { display: flex; flex-direction: column; gap: 22px; }

.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }

.contact-info-item .icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--primary-dim);
  border: 1px solid var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-item .icon svg { width: 20px; height: 20px; }
.contact-info-item h3 { font-size: 0.95rem; margin-bottom: 4px; }
.contact-info-item p { font-size: 0.88rem; margin: 0; }

.social-row { display: flex; gap: 12px; margin-top: 10px; }

.social-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.social-row a:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }
.social-row svg { width: 18px; height: 18px; }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-group { margin-bottom: 20px; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group textarea { resize: vertical; min-height: 130px; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.form-error {
  display: none;
  color: var(--pilot-red);
  font-size: 0.76rem;
  margin-top: 6px;
  font-family: var(--font-mono);
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select { border-color: var(--pilot-red); }

.form-group.has-error .form-error { display: block; }

.form-note {
  font-size: 0.78rem;
  color: var(--text-dimmer);
  margin-top: 14px;
}

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  display: none;
}

.form-status.is-visible { display: block; }
.form-status.is-success { background: var(--pilot-green-dim); border: 1px solid rgba(51,194,90,0.4); color: var(--pilot-green); }
.form-status.is-error { background: var(--pilot-red-dim); border: 1px solid rgba(229,72,77,0.4); color: var(--pilot-red); }

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16/9;
}

.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   [13] BOTON FLOTANTE DE WHATSAPP
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 200;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(37, 211, 102, 0.6);
  animation: wa-pulse 2.6s infinite;
}

.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }

.whatsapp-float:hover { animation: none; transform: scale(1.08); }

.whatsapp-float__tooltip {
  position: absolute;
  right: 74px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; visibility: visible; }

@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ==========================================================================
   [14] FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  padding: 70px 0 0;
  margin-top: 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
}

.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { font-size: 0.9rem; max-width: 320px; }

.footer-col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 18px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.88rem; color: var(--text-dim); transition: color var(--transition); }
.footer-col a:hover { color: var(--primary); }

.footer-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--primary); }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }

.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}

.footer-social a:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-dimmer);
}

.footer-bottom a { color: var(--text-dimmer); }
.footer-bottom a:hover { color: var(--primary); }

/* ==========================================================================
   [15] ANIMACIONES (scroll reveal)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Si el usuario prefiere menos movimiento, se respeta */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .whatsapp-float { animation: none; }
}

/* ==========================================================================
   [16] PISTAS PCB (motivo grafico decorativo)
   --------------------------------------------------------------------------
   Lineas tipo circuito impreso, muy discretas (opacidad baja), inspiradas
   en las pistas del logo de SYSTRONIC. Se usan como fondo de ciertas
   secciones o como divisores, nunca como protagonistas del diseno.
   ========================================================================== */
.pcb-divider {
  height: 64px;
  width: 100%;
  opacity: 0.35;
  pointer-events: none;
  color: var(--primary);
}

.pcb-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

.pcb-bg svg { width: 100%; height: 100%; }

/* Asegura que el contenido de secciones con .pcb-bg quede por encima */
.section > .pcb-bg + .container,
.hero > .pcb-bg + .container { position: relative; z-index: 1; }

/* ==========================================================================
   [17] RESPONSIVE (tablet y movil)
   ========================================================================== */
@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid, .services-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .areas-grid { grid-template-columns: 1fr; }
  .features-strip { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .process-flow { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
  .process-flow::before { display: none; }
  .need-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__photo { order: -1; aspect-ratio: 16/9; }
  .hero__mosaic { order: -1; aspect-ratio: 16/10.5; margin-bottom: 8px; }
  .grid-2 { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .section { padding: 70px 0; }
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
  .services-grid, .services-grid--4 { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; }
  .features-strip { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .service-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .whatsapp-float { width: 56px; height: 56px; bottom: 18px; right: 18px; }
  .whatsapp-float__tooltip { display: none; }
  .page-hero { padding: 130px 0 50px; }
  .topbar__group { display: none; }
  .process-flow { grid-template-columns: repeat(2, 1fr); }
  .need-steps { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .features-strip { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 18px; }
  .process-flow { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   [18] PAGINA DE ERROR 404
   --------------------------------------------------------------------------
   Reutiliza .empty-state (misma tarjeta centrada que el aviso de "sin
   proyectos" en proyectos.html/index.html) y .eyebrow/.btn-row ya existentes.
   Lo unico nuevo es el numero grande "404": marcado aria-hidden porque el
   texto que realmente debe leer un lector de pantalla es el <h1> "Página no
   encontrada" que va justo despues.
   ========================================================================== */
.error-404 { padding: 170px 0 90px; }

.error-404__code {
  font-family: var(--font-mono);
  font-size: clamp(3.4rem, 12vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .error-404 { padding: 130px 0 60px; }
}

/* ==========================================================================
   [19] SUBIDA DE ARCHIVOS (uploader integrado, Paso 4 de contacto.html)
   --------------------------------------------------------------------------
   Unico bloque de CSS nuevo agregado para la integracion con el backend de
   subida de archivos (upload-api/): no existia ningun patron de "zona de
   arrastrar y soltar" ni de listado de archivos con progreso en el resto
   del sitio, asi que no habia nada existente que reutilizar para esto en
   particular. Reutiliza las mismas variables de color/espaciado/radio que
   el resto del sitio (var(--border), var(--primary), var(--radius-sm),
   var(--surface), var(--bg-alt), colores piloto verde/rojo) para mantener
   la identidad visual exacta.
   ========================================================================== */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 32px 20px;
  margin-top: 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.file-drop:hover,
.file-drop:focus-visible {
  border-color: var(--primary);
  outline: none;
}

.file-drop.is-dragover {
  border-color: var(--primary);
  background: var(--primary-dim);
}

.file-drop__icon { color: var(--primary); }
.file-drop strong { font-size: 0.95rem; color: var(--text); }
.file-drop .muted { font-size: 0.78rem; }

.file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.file-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface);
}

.file-item__info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.file-item__nombre { color: var(--text); word-break: break-all; }

.file-item__tamano {
  color: var(--text-dimmer);
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.file-item__progress {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 8px;
}

.file-item__bar {
  height: 100%;
  background: var(--primary);
  width: 0%;
  transition: width 0.2s ease;
}

.file-item__estado {
  font-size: 0.78rem;
  color: var(--text-dimmer);
  font-family: var(--font-mono);
}

.file-item.is-ok .file-item__estado { color: var(--pilot-green); }
.file-item.is-ok .file-item__bar { background: var(--pilot-green); }
.file-item.is-error .file-item__estado { color: var(--pilot-red); }
.file-item.is-error .file-item__bar { background: var(--pilot-red); }

.file-item__reintentar { margin-top: 10px; }