/* ==========================================================================
   GRUPO RUBBER — Sistema de diseño
   Display: Archivo · Texto: IBM Plex Sans · Utilidad/datos: IBM Plex Mono
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Base oscura: azul noche, evoca centro de monitoreo */
  --ink:        #0B1020;
  --ink-raised: #131B33;
  --ink-line:   #1F2947;

  /* Bloque de color secundario (a sangre) */
  --navy:       #10193F;
  --navy-hi:    #1A2557;

  /* Acento: oro del logo TSM, aclarado hasta 11.8:1 sobre la base oscura
     para que los titulares se lean sin esfuerzo */
  --gold:       #F2C75C;
  --gold-hi:    #FFE08A;
  --gold-dim:   #A8842A;

  /* Texto */
  --bone:       #D6D1C4;
  --bone-dim:   #9A958A;
  --white:      #FFFFFF;

  /* Métrica */
  --wrap:       1240px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --radius:     14px;
  --radius-lg:  22px;

  /* Tipografía */
  --display: "Archivo", "Arial Black", sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* El sitio es oscuro: que los controles nativos y las barras de
     desplazamiento se pinten en consecuencia. */
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: #000; }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Tipografía base ---------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--gold);
  /* Reparte las líneas para que el bloque no quede desparejo */
  text-wrap: balance;
}

.display--white { color: var(--white); }
.display--ink   { color: var(--ink); }

.d-xl { font-size: clamp(2.5rem, 6.4vw, 5.6rem); }
.d-lg { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.d-md { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.d-sm { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* Etiqueta monoespaciada: el lenguaje de una hoja de especificaciones */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.15rem;
  display: block;
}

.eyebrow--dim { color: var(--bone-dim); }

.lede {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.7;
  color: var(--bone);
  max-width: 62ch;
  margin: 0;
}

.muted { color: var(--bone-dim); }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: 1440px; }

.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--navy  { background: var(--navy); }
.section--gold  { background: var(--gold); color: var(--ink); }

.center { text-align: center; }
.stack  { display: flex; flex-direction: column; }

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease);
}

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

.btn--gold        { background: var(--gold); color: #14100A; }
.btn--gold:hover  { background: var(--gold-hi); }

.btn--ghost       { border-color: rgba(214,209,196,0.35); color: var(--bone); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--ink         { background: var(--ink); color: var(--bone); }
.btn--ink:hover   { background: var(--navy); }

.btn--lg { padding: 1.05rem 2.2rem; font-size: 1.02rem; }

/* Enlace con flecha en disco — repetido en tarjetas */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.arrow-link .disc {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: #14100A;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease);
  flex: 0 0 auto;
}

.arrow-link:hover .disc { transform: translateX(5px); }

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(11,16,32,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.nav.is-stuck {
  border-bottom-color: var(--ink-line);
  background: rgba(11,16,32,0.95);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 78px;
}

.nav__logo img { height: 46px; width: auto; }

/* Wordmark provisional hasta que exista un logo con fondo transparente */
.nav__wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
}

.nav__wordmark b { color: var(--gold); font-weight: 800; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--bone);
  transition: color 0.2s var(--ease);
  /* Los desplegables son <button>: sin este reseteo heredan el fondo y el
     borde del navegador y aparecen como cajas claras. */
  background: none;
  border: 0;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.nav__link:hover,
.nav__link[aria-expanded="true"] { color: var(--gold); }

.nav__link[aria-current="page"] { color: var(--gold); }

/* La etiqueta es un enlace y la flecha un control aparte: así el clic
   lleva a la página y el submenú se sigue pudiendo abrir por separado,
   que es lo único que funciona en pantallas sin puntero. */
.nav__item--has-drop .nav__link { padding-right: 0.35rem; }

.nav__caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.7rem 0.55rem 0.35rem;
  background: none;
  border: 0;
  color: var(--bone);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.2s var(--ease);
}

.nav__caret-btn:hover,
.nav__caret-btn[aria-expanded="true"] { color: var(--gold); }

.nav__item--has-drop:hover .nav__link,
.nav__item--has-drop:hover .nav__caret-btn { color: var(--gold); }

.nav__caret {
  width: 9px; height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}

.nav__caret-btn[aria-expanded="true"] .nav__caret {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* Menú desplegable */
.nav__item { position: relative; }

.nav__drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  min-width: 440px;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
              visibility 0.24s;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.nav__item.is-open .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__drop-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 0.9rem;
}

.nav__drop-list { list-style: none; margin: 0; padding: 0; }
.nav__drop-list li + li { margin-top: 0.5rem; }

.nav__drop-link { display: block; padding: 0.4rem 0; }
.nav__drop-link strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--white);
  transition: color 0.2s var(--ease);
}
.nav__drop-link span {
  font-size: 0.83rem;
  color: var(--bone-dim);
  line-height: 1.45;
}
.nav__drop-link:hover strong { color: var(--gold); }

/* Botón hamburguesa */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.nav__toggle span {
  display: block;
  width: 18px; height: 1.6px;
  background: var(--bone);
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.6px;
  background: var(--bone);
  transition: transform 0.28s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top:  6px; }

.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: 0;
  overflow: hidden;
}

/* Firma: topología de fibra dibujada detrás del hero */
.topology {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

.topology .link {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.14;
}

.topology .node {
  fill: var(--gold);
  opacity: 0.3;
}

/* Pulso de luz recorriendo el enlace, como señal en fibra */
.topology .pulse {
  fill: none;
  stroke: var(--gold-hi);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 26 1000;
  opacity: 0.75;
  animation: fiber 7s linear infinite;
}

.topology .pulse--b { animation-duration: 9s;  animation-delay: -2.5s; }
.topology .pulse--c { animation-duration: 11s; animation-delay: -5s;   }
.topology .pulse--d { animation-duration: 8s;  animation-delay: -1.2s; }

@keyframes fiber {
  from { stroke-dashoffset: 1026; }
  to   { stroke-dashoffset: 0; }
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title { max-width: 18ch; margin-inline: auto; }

.hero__lede {
  margin: 1.75rem auto 0;
  max-width: 60ch;
  text-align: center;
}

/* Fila de credenciales — ocupa el lugar de los premios en la referencia */
.creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

.creds li {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  background: rgba(19,27,51,0.6);
  white-space: nowrap;
}

.creds li b {
  color: var(--gold);
  font-weight: 600;
}

.hero__cta { margin-top: 2.5rem; }

/* Trío de imágenes inclinadas al pie del hero */
.hero__gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: end;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hero__shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-line);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
  transition: transform 0.5s var(--ease);
}

.hero__shot img {
  width: 100%;
  height: clamp(150px, 20vw, 260px);
  object-fit: cover;
}

.hero__shot--l { transform: rotate(-4deg) translateY(14px); }
.hero__shot--c { transform: rotate(0deg)  translateY(-10px); }
.hero__shot--r { transform: rotate(4deg)  translateY(14px); }

.hero__shot--l:hover { transform: rotate(-2deg) translateY(6px); }
.hero__shot--c:hover { transform: rotate(0deg)  translateY(-18px); }
.hero__shot--r:hover { transform: rotate(2deg)  translateY(6px); }

/* ==========================================================================
   MARQUEE DE CLIENTES
   ========================================================================== */
.marquee-band {
  border-block: 1px solid var(--ink-line);
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
  background: var(--ink);
}

.marquee-band__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-align: center;
  margin: 0 0 2rem;
}

.marquee-band__label b { color: var(--gold); font-weight: 500; }

.marquee {
  display: flex;
  overflow: hidden;
  gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-right: clamp(2.5rem, 5vw, 4.5rem);
  flex: 0 0 auto;
  animation: slide 38s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Logos de las marcas que instalamos, en tránsito continuo.
   Cada uno lleva a la tabla completa en Nosotros. */
.marquee__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  height: 46px;
  padding-inline: 0.4rem;
  border-radius: 10px;
  cursor: pointer;
}

.marquee__logo:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 4px;
}

/* Los archivos ya vienen normalizados: blanco sobre transparente, recortados
   y equilibrados por área dentro de un lienzo común de 420x140. Por eso aquí
   basta con un recuadro fijo, sin filtros. */
.marquee__logo img {
  width: 132px;
  height: 44px;
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 0.35s var(--ease);
}

.marquee__logo:hover img { opacity: 1; }

/* Nombres de cliente: sus logos no son nuestros para redistribuir */
.clients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  padding: 0;
}

.clients li {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem 1.1rem;
  border-right: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--bone);
  opacity: 0.72;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}

.clients li:hover {
  opacity: 1;
  color: var(--gold);
  background: var(--ink-raised);
}

/* ==========================================================================
   DECLARACIÓN (dos columnas)
   ========================================================================== */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.statement__head { display: flex; gap: 1.1rem; align-items: flex-start; }

.statement__mark {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gold);
  display: grid;
  place-items: center;
  margin-top: 0.35rem;
}

.statement__mark svg { width: 20px; height: 20px; }

.statement__body p { margin: 0 0 1.15rem; }
.statement__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   TARJETAS DE SERVICIO
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.9rem 1.7rem 1.6rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
              transform 0.35s var(--ease);
}

.svc-card:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(242,199,92,0.45);
  transform: translateY(-4px);
}

/* Marca de esquina: retícula técnica, no adorno */
.svc-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 84px; height: 84px;
  background:
    linear-gradient(to right, rgba(242,199,92,0.16) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(to bottom, rgba(242,199,92,0.16) 1px, transparent 1px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
          mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
  pointer-events: none;
}

.svc-card__title {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
  line-height: 1.15;
  position: relative;
  z-index: 1;
}

.svc-card__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--bone);
  flex: 1;
  position: relative;
  z-index: 1;
}

.svc-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  position: relative;
  z-index: 1;
}

.svc-card__list li {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}

.svc-card .arrow-link { margin-top: 0.35rem; position: relative; z-index: 1; }

/* ==========================================================================
   BANDA DE MÉTRICAS
   ========================================================================== */
.stats-band {
  border-block: 1px solid var(--ink-line);
  padding-block: clamp(2.6rem, 5vw, 3.8rem);
}

.stats-band__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-align: center;
  margin: 0 0 2.2rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats li {
  text-align: center;
  padding-inline: 1rem;
}

.stats li + li { border-left: 1px solid var(--ink-line); }

.stats__num {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.stats__cap {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--bone);
  max-width: 20ch;
  margin-inline: auto;
}

/* ==========================================================================
   CASOS DE ÉXITO
   ========================================================================== */
.cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.6vw, 1.4rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.case-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.case-card:hover {
  border-color: rgba(242,199,92,0.45);
  transform: translateY(-4px);
}

.case-card__media { overflow: hidden; }

.case-card__media img {
  width: 100%;
  height: 205px;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

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

.case-card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }

.case-card__place {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.case-card__name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  line-height: 1.2;
}

.case-card__specs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.case-card__specs li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--bone);
  padding-left: 1.15rem;
  position: relative;
}

.case-card__specs li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* ==========================================================================
   MARCAS ALIADAS
   ========================================================================== */
/* Tabla de marcas sobre el fondo del sitio. Los separadores son bordes de
   cada celda, no el fondo del contenedor: así las celdas que sobran en la
   última fila quedan invisibles en vez de pintarse como un bloque. */
.brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.brands__cell {
  display: grid;
  place-items: center;
  padding: 1.7rem 1.3rem;
  border-right: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  transition: background-color 0.3s var(--ease);
}

.brands__cell:hover { background: var(--ink-raised); }

.brands__cell img {
  width: 100%;
  max-width: 128px;
  height: 44px;
  object-fit: contain;
  opacity: 0.66;
  transition: opacity 0.35s var(--ease);
}

.brands__cell:hover img { opacity: 1; }

.brands__cell:hover img { opacity: 1; }

/* ==========================================================================
   BLOQUE CTA (inversión a oro)
   ========================================================================== */
.cta-block { text-align: center; }

.cta-block .display { color: var(--ink); }

.cta-block__lede {
  margin: 1.4rem auto 2.2rem;
  max-width: 56ch;
  color: rgba(20,16,10,0.82);
  font-size: 1.06rem;
  line-height: 1.65;
}

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

.cta-block__note {
  margin: 2rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20,16,10,0.6);
}

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */
.footer {
  background: #070B16;
  border-top: 1px solid var(--ink-line);
  padding-top: clamp(3.5rem, 6vw, 5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}

.footer__logo img { height: 62px; width: auto; margin-bottom: 1.2rem; }

.footer__wordmark { margin: 0 0 1.2rem; }
.footer__wordmark .nav__wordmark { font-size: 1.45rem; }

.footer__about {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--bone-dim);
  margin: 0 0 1.3rem;
  max-width: 34ch;
}

.footer__title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.15rem;
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: 0.6rem; }

.footer__list a,
.footer__list span {
  font-size: 0.92rem;
  color: var(--bone-dim);
  transition: color 0.2s var(--ease);
}

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

.footer__contact { list-style: none; margin: 0; padding: 0; }
.footer__contact li + li { margin-top: 1.1rem; }

.footer__person {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
}

.footer__role {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0.15rem 0 0.35rem;
}

.footer__contact a {
  display: block;
  font-size: 0.88rem;
  color: var(--bone-dim);
  transition: color 0.2s var(--ease);
}

.footer__contact a:hover { color: var(--gold); }

.footer__bar {
  border-top: 1px solid var(--ink-line);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.footer__legal {
  margin: 0;
  font-size: 0.82rem;
  color: var(--bone-dim);
  line-height: 1.6;
}

/* Marcas de las dos razones sociales. Los archivos traen fondo blanco opaco,
   así que se presentan sobre ficha clara en lugar de recortarlos. */
.footer__ents {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer__ent {
  background: #fff;
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  display: grid;
  place-items: center;
  height: 52px;
  opacity: 0.9;
  transition: opacity 0.3s var(--ease);
}

.footer__ent:hover { opacity: 1; }

.footer__ent img {
  max-height: 38px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

/* ==========================================================================
   ENCABEZADO DE PÁGINAS INTERNAS
   ========================================================================== */
.page-head {
  position: relative;
  padding-top: clamp(8.5rem, 14vw, 11.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
}

.page-head__inner { position: relative; z-index: 1; max-width: 74ch; }
.page-head .lede { margin-top: 1.5rem; }

/* Índice de áreas — la página de servicios es un catálogo, no una promoción */
.area {
  border-top: 1px solid var(--ink-line);
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
}

.area__code {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 0.35rem;
}

.area__name {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.7rem;
  line-height: 1.15;
}

.area__desc { margin: 0; font-size: 0.95rem; color: var(--bone-dim); line-height: 1.6; }

.area__items { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }

.area__items li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--bone);
  padding-left: 1.15rem;
  position: relative;
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

.area__items li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* --- Retícula de sectores ------------------------------------------------ */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.sector {
  padding: 1.8rem 1.6rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.sector:hover { border-color: rgba(242,199,92,0.45); transform: translateY(-3px); }

.sector__name {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.7rem;
  line-height: 1.2;
}

.sector__text { margin: 0 0 1rem; font-size: 0.93rem; line-height: 1.6; color: var(--bone); }

.sector__clients {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
  line-height: 1.6;
}

/* --- Proceso ------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; }

.steps li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.5rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--ink-line);
  align-items: start;
}

.steps li:last-child { border-bottom: 1px solid var(--ink-line); }

.steps__n {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--gold);
  padding-top: 0.3rem;
}

.steps__t {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.45rem;
}

.steps__d { margin: 0; font-size: 0.95rem; color: var(--bone); line-height: 1.6; }

/* --- Valores ------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.values li { background: var(--ink); padding: 1.7rem 1.5rem; }

.values__n {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}

.values__d { font-size: 0.9rem; color: var(--bone-dim); line-height: 1.55; }

/* --- Formulario de contacto ---------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form { display: grid; gap: 1.1rem; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--white);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
  width: 100%;
}

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

/* Chrome en Windows dibuja el desplegable nativo con la paleta del sistema:
   respeta el color del texto de cada opción pero ignora su fondo, así que
   quedaba texto claro sobre blanco. Como no hay forma de forzarlo por CSS,
   el script lo sustituye por el control de más abajo. Estas reglas dejan el
   nativo legible mientras tanto y si el script no llega a ejecutarse. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2C75C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.field select option { background-color: #FFFFFF; color: #14181F; }

/* --- Desplegable propio ---------------------------------------------------
   Reproduce el control con elementos normales para poder darle la misma
   paleta que el resto del sitio. El <select> original permanece en el
   formulario como origen del dato. */
.select { position: relative; }

.select__native { display: none; }

.select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  text-align: left;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.select__button:hover { border-color: rgba(242, 199, 92, 0.5); }

.select__button[aria-expanded="true"] {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.select__button.is-placeholder { color: #5E5A52; }

.select__caret {
  flex: 0 0 auto;
  width: 12px; height: 8px;
  transition: transform 0.25s var(--ease);
}

.select__button[aria-expanded="true"] .select__caret { transform: rotate(180deg); }

.select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: none;
}

.select.is-open .select__list { display: block; }

.select__option {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--bone);
  cursor: pointer;
}

.select__option:hover,
.select__option.is-active {
  background: var(--ink-line);
  color: var(--white);
}

.select__option[aria-selected="true"] { color: var(--gold); font-weight: 600; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.06);
}

.field input::placeholder,
.field textarea::placeholder { color: #5E5A52; }

.form__note {
  font-size: 0.82rem;
  color: var(--bone-dim);
  margin: 0;
  line-height: 1.55;
}

/* Señuelo contra robots: fuera de la vista pero sin display:none, que
   algunos lo detectan y lo saltan. */
.form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Resultado del envío, en el sitio y sin salir de la página */
.form__estado {
  margin: 0;
  padding: 0.85rem 1.05rem;
  border-radius: 10px;
  border: 1px solid;
  font-size: 0.92rem;
  line-height: 1.55;
}

.form__estado--ok {
  color: #CBEBD2;
  background: rgba(70, 165, 100, 0.12);
  border-color: rgba(70, 165, 100, 0.45);
}

.form__estado--error {
  color: #F6C7C2;
  background: rgba(205, 80, 68, 0.12);
  border-color: rgba(205, 80, 68, 0.5);
}

.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }

.contact-aside {
  padding: 1.9rem 1.7rem;
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
}

.contact-aside + .contact-aside { margin-top: 1.2rem; }

/* ==========================================================================
   REVELADO AL HACER SCROLL
   ========================================================================== */
/* Mejora progresiva: el contenido es visible de entrada. Sólo cuando el script
   confirma que puede observar la entrada en pantalla se oculta para animarlo,
   de modo que un fallo de JS nunca deja la página en blanco. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   ADAPTATIVO
   ========================================================================== */
@media (max-width: 1080px) {
  .svc-grid,
  .cases,
  .sector-grid { grid-template-columns: repeat(2, 1fr); }

  .clients { grid-template-columns: repeat(3, 1fr); }

  .footer__grid { grid-template-columns: 1fr 1fr; }

  .area { grid-template-columns: 60px 1fr; }
  .area__items { grid-column: 2; columns: 2; }
}

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

  .nav__menu {
    position: fixed;
    inset: 78px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-raised);
    border-bottom: 1px solid var(--ink-line);
    padding: 1rem var(--gutter) 1.5rem;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  }

  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link { padding: 0.85rem 0; justify-content: space-between; font-size: 1.02rem; }

  /* El enlace ocupa la fila y la flecha queda a la derecha como zona de
     toque independiente; el submenú cae debajo, a lo ancho. */
  .nav__item--has-drop { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item--has-drop .nav__link { flex: 1 1 auto; padding-right: 0; }
  /* Zona de toque holgada: la flecha queda junto a un enlace que navega,
     así que un roce impreciso no debe sacarte de la página. */
  .nav__item--has-drop .nav__caret-btn {
    min-width: 48px;
    min-height: 48px;
    padding: 0 0.6rem 0 1rem;
    margin-left: auto;
  }
  .nav__item--has-drop .nav__drop { flex: 0 0 100%; }

  .nav__drop {
    position: static;
    translate: none;
    transform: none;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 0 0 1rem 0.9rem;
    border: none;
    border-left: 1px solid var(--ink-line);
    border-radius: 0;
    box-shadow: none;
    background: none;
    display: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__item.is-open .nav__drop { display: grid; }

  .nav__cta { margin-top: 1rem; justify-content: center; }

  .statement { grid-template-columns: 1fr; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .stats li + li { border-left: none; }
  .stats li:nth-child(even) { border-left: 1px solid var(--ink-line); }

  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero__gallery { grid-template-columns: 1fr; gap: 1rem; }
  .hero__shot--l,
  .hero__shot--c,
  .hero__shot--r { transform: none; }
  .hero__shot img { height: 190px; }

  .svc-grid,
  .cases,
  .sector-grid,
  .values { grid-template-columns: 1fr; }

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

  .footer__grid { grid-template-columns: 1fr; }

  .area { grid-template-columns: 1fr; gap: 0.9rem; }
  .area__code { padding-top: 0; }
  .area__items { grid-column: auto; columns: 1; }

  .form__row { grid-template-columns: 1fr; }

  .creds li { font-size: 0.66rem; padding: 0.45rem 0.85rem; }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js-reveal .reveal { opacity: 1; transform: none; }
  .topology .pulse { display: none; }
}

@media print {
  .nav, .topology, .marquee-band { display: none; }
  body { background: #fff; color: #000; }
}