/* =============================================================================
   CondorFinder - Feria de Software USM 2026
   Paleta: azul marino / blanco / amarillo. El logo definitivo aun no esta
   listo, asi que por ahora el navbar/footer usan un wordmark de texto en
   azul marino (navbar claro, no marino, para que el logo se lea cuando se
   agregue). Animaciones tomadas del propio proyecto CondorFinder: entrada
   escalonada tipo login.tsx (fade+slide con delay por elemento) y los
   efectos scan-line / pulse-dot de src/styles.css.
   ============================================================================= */

:root {
  /* Marca */
  --yellow: #FFC53D;
  --yellow-dark: #E6A800;
  --navy: #0F2244;
  --navy-2: #16223B;
  --navy-3: #2E5AA8;

  /* Superficies (tema oscuro). --bg es casi negro con tinte navy, el mismo
     tono del sidebar de la aplicación, para que el sitio y el producto se
     sientan del mismo sistema. */
  --bg: #070B14;
  --surface: #0E1626;
  --surface-2: #16223B;

  /* Texto */
  --text: #EDF1F9;
  --muted: #8E9CBA;
  --white: #FFFFFF;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --font-body: "Sora", sans-serif;
  --font-heading: "Rubik", sans-serif;

  --radius: 1rem;
  --container-w: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Reserva el ancho de la barra de scroll aunque la pagina no la necesite,
     para que el navbar no "salte" horizontalmente al navegar entre vistas
     con distinto largo de contenido (equipo/contacto son cortas y no
     scrollean, inicio/producto si). */
  scrollbar-gutter: stable;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Fundido de entrada al cargar la página (corre una sola vez). El de
     salida vive aparte en .page-transition-overlay, ver más abajo. */
  animation: pageFadeIn 0.35s ease;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Antes, salir de una página dejaba el body en opacity:0, lo que exponía
   el blanco crudo del navegador detrás - se sentía como que la pantalla
   "se apagaba" de golpe (justo lo "brusco" reportado). En vez de eso, un
   velo fijo del MISMO color de fondo del sitio (no blanco) se funde por
   encima del contenido justo antes de navegar; como la página nueva
   arranca con ese mismo fondo, la continuidad de color es lo que hace que
   se sienta como una transición y no un corte. */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.page-transition-overlay.show { opacity: 1; }

/* Transición cruzada nativa entre páginas (Chrome/Edge 126+; el resto
   navega igual que siempre, sin error, solo sin el efecto). No requiere
   JS: el navegador hace un fundido automático del documento saliente al
   entrante en vez del salto brusco habitual entre .html distintos. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
}

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

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

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: 16px; }
h3 { font-size: 1.1rem; margin-bottom: 8px; }

.text-yellow { color: var(--yellow-dark); }

.eyebrow {
  color: var(--yellow-dark);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.section-lead {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 40px;
}

/* ---------------------------------------------------------------- wordmark (fallback, ya sin uso ahora que hay logo) */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.footer .wordmark { color: var(--white); }

/* ---------------------------------------------------------------- logo (lockup apilado original: ícono + "CondorFinder" en el mismo SVG) */
.nav-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}
.footer-logo {
  height: 85px;
  width: auto;
  display: block;
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Antes 72px: al usar el logo apilado (ícono + "CondorFinder" en el
     mismo SVG) el texto queda ilegible si se lo aprieta a esa altura,
     porque solo ocupa ~21% del alto total del lockup. 88px es lo mínimo
     para que el texto se lea a un tamaño razonable (ver .nav-logo). */
  height: 88px;
}
.nav-brand { display: flex; align-items: center; text-decoration: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
/* Subrayado que crece desde el centro al pasar el mouse (no es solo un
   cambio de color, es un movimiento real), y se queda expandido y fijo
   en amarillo para el link activo. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 3px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active::after { background: var(--yellow); transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 8px 20px -6px rgba(255, 197, 61, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--yellow-dark); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
}
.btn-ghost:hover { border-color: var(--white); }
.btn-ghost-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.btn-ghost-navy:hover { border-color: var(--navy-3); color: var(--navy-3); }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- hero (navy) */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
  color: var(--white);
  padding: 96px 0 72px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 1;
}
.hero h1 { color: var(--white); }
.hero .eyebrow { color: var(--yellow); }
.hero-sub {
  color: rgba(255,255,255,0.78);
  font-size: 1.15rem;
  max-width: 620px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- scan visual placeholder */
.media-placeholder {
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  text-align: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.media-placeholder.light {
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
}
.media-placeholder strong {
  color: inherit;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
}
.media-placeholder.light strong { color: var(--navy); }
.hero-media { max-width: var(--container-w); margin: 0 auto; position: relative; z-index: 1; }
.media-placeholder-icon { font-size: 2.2rem; opacity: 0.5; }
.media-placeholder-icon svg { width: 1em; height: 1em; fill: currentColor; }

.scan-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,197,61,0.35), transparent);
  animation: scan 2.4s linear infinite;
  pointer-events: none;
}
@keyframes scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------- capturas (filas intercaladas) */
/* Una captura por fila, texto y espacio reservado alternando de lado
   (impar: texto-izquierda/imagen-derecha; par: imagen-izquierda/texto-
   derecha) para que la lectura vaya en zigzag en vez de repetir siempre
   el mismo orden. */
.shots-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.shots-row {
  display: grid;
  /* La imagen pesa más que el texto (0.85fr/1.15fr) para que se vea más
     grande, sea cual sea el lado en que esté: en las filas donde el botón
     de la imagen es el primer hijo (imagen a la izquierda), se invierte la
     proporción para que la columna grande siga siendo la de la imagen. */
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 48px;
}
.shots-row:has(.shots-image:first-child) {
  grid-template-columns: 1.15fr 0.85fr;
}
.shots-text strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.shots-text p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; }
/* El rectángulo 16/9 ya viene heredado de .media-placeholder, así que acá
   no hace falta pisarlo: solo se agranda un poco el ícono para que se
   note mejor en un espacio más ancho. Es un <button>, así que se resetean
   los estilos nativos de botón y se agrega cursor + hover para que se
   note que es clickeable (abre la ventana flotante más grande). */
.shots-image {
  width: 100%;
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.shots-image:hover {
  transform: translateY(-3px);
  border-color: var(--yellow-dark);
  box-shadow: 0 4px 8px rgba(15,34,68,0.05), 0 16px 28px -8px rgba(15,34,68,0.12);
}
.shots-image .media-placeholder-icon { font-size: 2.6rem; }
/* Capturas reales: contain (no cover) para no recortar el sidebar/UI de
   los bordes - el rectángulo real (~2:1) es más ancho que el 16/9 del
   contenedor, así que queda un margen mínimo arriba/abajo en vez de
   perder contenido a los costados. */
.shots-image img,
.shots-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------------- ventana flotante de capturas */
.shots-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.shots-modal.open { display: flex; }
.shots-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,34,68,0.72);
  backdrop-filter: blur(2px);
}
.shots-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  /* Más padding arriba que a los costados/abajo: el botón de cerrar vive
     en esa franja superior y antes quedaba pisado por el propio recuadro
     de la imagen, que empezaba muy cerca de su borde. */
  padding: 56px 28px 28px;
  /* 80% de la pantalla, no un ancho máximo fijo. */
  width: 80vw;
  height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px -12px rgba(15,34,68,0.45);
}
.shots-modal-media {
  width: 100%;
  /* Se pisa el aspect-ratio 16/9 de .media-placeholder: acá la imagen debe
     estirarse para ocupar todo el alto disponible del panel, no quedar
     fija a esa proporción. */
  aspect-ratio: unset;
  flex: 1;
  min-height: 0;
}
.shots-modal-media .media-placeholder-icon { font-size: 3.4rem; }
.shots-modal-panel h3 {
  flex: none;
  margin: 18px 0 0;
  color: var(--navy);
  font-size: 1.15rem;
}
.shots-modal-caption {
  flex: none;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.shots-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.shots-modal-close svg { width: 16px; height: 16px; }
.shots-modal-close:hover { background: var(--navy); color: var(--white); }

/* ---------------------------------------------------------------- ODS (Sobre Nosotros) */
.ods-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.ods-text .section-lead, .ods-text p:not(.eyebrow) { color: var(--muted); margin-bottom: 0; }
.ods-item {
  display: block;
  width: 180px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,34,68,0.05), 0 8px 16px -4px rgba(15,34,68,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ods-item:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(15,34,68,0.06), 0 16px 28px -8px rgba(15,34,68,0.14); }
.ods-item img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- page hero (paginas internas, sin scan) */
.page-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--white);
  padding: 72px 0 56px;
  text-align: center;
}
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.75rem); }
.page-hero .eyebrow { color: var(--yellow); }
.page-hero p { color: rgba(255,255,255,0.78); max-width: 620px; margin: 12px auto 0; }

/* Logo sobre el título de "Quiénes somos" (fondo navy del page-hero: Dark Mode).
   El SVG en sí ya viene recortado justo al borde del dibujo (ver logo-dark-mode.svg),
   así que esta altura es 100% dibujo visible, sin margen invisible desperdiciado
   dentro del archivo - por eso ya no hace falta el contenedor con overflow que
   se usaba antes para "esconder" ese espacio muerto. */
.hero-logo {
  height: 105px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}

/* ---------------------------------------------------------------- entrada escalonada (fade + slide, como login.tsx) */
.anim-in {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.25s; }
.d4 { animation-delay: 0.35s; }
.d5 { animation-delay: 0.45s; }

/* ---------------------------------------------------------------- sections */
.section { padding: 88px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-card, .feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(15,34,68,0.03), 0 8px 16px -4px rgba(15,34,68,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover, .feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(15,34,68,0.05), 0 16px 28px -8px rgba(15,34,68,0.10);
}
.section-alt .stat-card, .section-alt .feature-card { background: var(--bg); }
.stat-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--navy);
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.stat-card-icon svg { width: 28px; height: 28px; fill: currentColor; }
/* Íconos duotone (Nuestros valores): dos paths, uno marcado con opacity
   (la silueta clara) y otro sin ella (el detalle sólido) - se colorean por
   separado en vez de heredar un solo currentColor plano. */
.duotone-icon svg path[opacity] { fill: var(--yellow); }
.duotone-icon svg path:not([opacity]) { fill: var(--navy); }
/* Color propio por ícono en vez del amarillo genérico: la silueta clara
   (el path con opacity) pasa a opacity:1 para que el color se note de
   verdad y no quede lavado al 20%. El detalle sólido se queda en navy. */
.icon-bulb svg path[opacity] { fill: var(--yellow-dark); opacity: 1; }
.icon-plant svg path[opacity] { fill: #6FCF8E; opacity: 1; }
.icon-search svg path[opacity] { fill: #7EC8E3; opacity: 1; }
.icon-handshake svg path[opacity] { fill: #FF9466; opacity: 1; }
.stat-card p, .feature-card p { color: var(--muted); font-size: 0.95rem; }

/* ---------------------------------------------------------------- pipeline: "mapa del tesoro" */
/* Escalera de 2 columnas x 4 filas (una tarjeta por fila, alternando
   columna): tarjeta 1 arriba a la izquierda, 2 más abajo a la derecha, 3
   más abajo a la izquierda, 4 más abajo a la derecha. Al alternar columna
   en cada fila siguiente, la bajada ya se lee en diagonal por sí sola,
   como en el boceto de referencia. */
/* ---------------------------------------------------------------- team (fila de 4) */
.team-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -8px rgba(15,34,68,0.12); }
.team-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
  border: 2px dashed rgba(255,255,255,0.25);
}
.team-body { padding: 20px; }
.team-body h3 { margin-bottom: 2px; }
.team-role {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.team-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.team-linkedin svg { width: 15px; height: 15px; }
.team-linkedin:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------------------------------------------------------------- contacto: formulario */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-field input, .form-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--navy-3);
  background: var(--surface);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
/* ---------------------------------------------------------------- toast (notificación deslizante) */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  background: var(--navy);
  color: var(--white);
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 16px 32px -8px rgba(15,34,68,0.4);
  font-size: 0.9rem;
  font-weight: 600;
  /* Fuera de pantalla a la derecha por defecto; .show la trae adentro. La
     misma transition anima la entrada y la salida (quitar la clase = se
     desliza de vuelta afuera), por eso no hace falta una animación de
     salida aparte. */
  transform: translateX(calc(100% + 24px));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.toast.show { transform: translateX(0); }
.toast svg { width: 20px; height: 20px; flex-shrink: 0; color: #6FCF8E; }

/* ---------------------------------------------------------------- contacto: redes */
.channel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}
.channel-row:last-child { border-bottom: none; }
.channel-row:hover { transform: translateX(3px); }
.channel-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}
.channel-icon svg { width: 20px; height: 20px; }
.channel-icon.ig { background: linear-gradient(135deg, #C13584, #E1306C, #F77737); }
.channel-icon.li { background: #0A66C2; }
.channel-icon.yt { background: #FF0000; }
.channel-icon.mail { background: var(--navy); }
.channel-text h3 { font-size: 0.98rem; margin-bottom: 2px; }
.channel-text p { font-size: 0.85rem; color: var(--muted); }

/* ---------------------------------------------------------------- contacto: intro (columna izquierda, sin card) */
.contact-intro { padding-top: 4px; }
.contact-intro p.section-lead { margin-bottom: 28px; }
.contact-intro .channel-row { padding: 16px 4px; }

/* El formulario queda más ancho que la columna de canales. */
.contact-columns { grid-template-columns: 2fr 3fr; }

/* ---------------------------------------------------------------- contacto: feria de software */
.fair-grid {
  display: grid;
  /* Antes 2fr/5fr (28.6%): la dirección completa quedaba muy apretada y
     partía en 3 líneas irregulares. 3fr/5fr le da más aire a la tarjeta
     de info sin achicar demasiado el mapa. */
  grid-template-columns: 3fr 5fr;
  gap: 24px;
  align-items: stretch;
}
.fair-grid .contact-card,
.fair-grid .media-placeholder,
.fair-grid .map-embed {
  min-height: 420px;
}
.fair-grid .contact-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.fair-grid .media-placeholder {
  aspect-ratio: unset;
}
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-embed iframe { width: 100%; height: 100%; display: block; }
.fair-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.fair-info-row:last-child { border-bottom: none; }
.fair-info-icon {
  width: 40px; height: 40px;
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.fair-info-icon svg { width: 22px; height: 22px; fill: currentColor; }
.fair-info-row .label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.fair-info-row .value { font-weight: 600; color: var(--navy); }

/* ---------------------------------------------------------------- cta */
.cta-section { text-align: center; background: var(--surface); border-top: 1px solid var(--border); }
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-inner .section-lead { text-align: center; }

/* ---------------------------------------------------------------- footer */
.footer {
  background: var(--navy);
}
/* Grid de 3 pistas: la del centro mide justo lo que necesita "Mapa del
   sitio" (auto), flanqueada por dos pistas iguales (1fr = 1fr) donde la
   marca y "Proyecto" se pegan a su borde exterior - eso deja la columna
   del medio exactamente centrada en el container, no solo "con huecos
   parejos" como daba space-between (que la corría hacia la derecha por
   ser la marca mucho más ancha que "Proyecto"). */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 24px;
}
.footer-grid > *:first-child { justify-self: start; }
.footer-grid > *:nth-child(2) { justify-self: center; }
.footer-grid > *:last-child { justify-self: end; }

.footer-wordmark { color: var(--white); }
.footer-tag { font-size: 0.9rem; color: #A7B4CE; max-width: 300px; margin: 8px 0 14px; }

.footer-social { display: flex; gap: 10px; margin-bottom: 14px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #C7D1E5;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-social svg { width: 16px; height: 16px; }
.footer-social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.back-to-top svg { width: 14px; height: 14px; }
.back-to-top:hover { border-color: var(--yellow); background: rgba(255,197,61,0.08); }

.footer-col {
  display: flex;
  flex-direction: column;
}
.footer-col h4 {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
/* El contenido (links o logos) se reparte en todo el alto restante de la
   columna, para que no quede espacio vacío bajo la columna más corta. */
.footer-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer-col-link {
  display: block;
  color: #C7D1E5;
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.footer-col-link:hover { color: var(--white); }
.footer-col-link.active { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

/* La columna de logos usa el mismo .footer-col-body (space-between) que
   "Mapa del sitio", sin modificador propio, para que las tres columnas
   terminen a la misma altura abajo. El respiro que pide el manual de
   marca de la USM ya lo da el padding inferior del propio .footer-grid
   antes de la barra amarilla. */
.footer-credit-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* No estirar el área clickeable a todo el ancho de la columna: el href
     debe cubrir exactamente el logo, ni más ni menos. */
  align-self: flex-start;
  text-decoration: none;
}
/* Mismo ancho para los dos (no la misma altura): el logo de la feria es
   apaisado y el escudo de la USM es casi cuadrado, así que igualar la
   altura los dejaba muy desparejos en ancho. Con el mismo ancho quedan
   visualmente simétricos aunque el escudo se vea más alto. */
/* El escudo recortado quedó con más proporción de alto que el logo apaisado
   de la feria, así que al mismo ancho ocupaba casi toda la columna sin
   dejar espacio entre ambos - se achica un poco el ancho compartido para
   que quede aire entre los dos. */
.footer-credit-line img { width: 112px; height: auto; }

/* "Somos parte de": los dos logos centrados en la columna (por defecto la
   columna alinea a la izquierda, como "Mapa del sitio"). */
.footer-col-body-center { align-items: center; }
.footer-col-body-center .footer-credit-line { align-self: center; }

/* Antes era una franja amarilla sólida: un bloque de color tan grande solo
   para el copyright competía con el amarillo como acento puntual (CTA,
   subrayado activo) del resto del sitio. Una línea divisoria sutil, en el
   mismo tono navy del footer, combina mejor con la paleta. */
.footer-bar {
  background: var(--navy-2);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 8px 24px;
  text-align: center;
}
.footer-bar p {
  color: #8FA0C2;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Al volver del envío del formulario de contacto (ver script inline en el
   <head> de contacto.html), la página se recarga de verdad, pero no debe
   sentirse como una primera visita: se apagan las animaciones de entrada
   (el fundido del body, el stagger del hero, el fade-in de scroll) y todo
   queda directamente en su estado final. El toast de confirmación es la
   única animación que se ve en ese momento. */
html.no-entrance-anim body { animation: none; opacity: 1; }
html.no-entrance-anim .anim-in { animation: none; opacity: 1; transform: none; }
html.no-entrance-anim .reveal { transition: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .grid-3, .grid-2, .team-row, .fair-grid { grid-template-columns: 1fr; }
  .ods-split { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .shots-row { gap: 28px; }
  /* La escalera 2x2 del "mapa del tesoro" se endereza a una sola columna;
     la curva la recalcula script.js sobre la posición real de cada
     círculo, así que en este layout apilado sale derecha sola, sin
     necesitar una línea de respaldo aparte. */
  .t-item-2 { grid-row: 2; }
  .t-item-4 { grid-row: 4; }
  /* En item1/3 el marcador va después de la tarjeta en el HTML (para
     quedar a la derecha en el escritorio); en mobile se reordena visual
     para que quede primero, como en item2/4, y así el marcador siempre
     esté pegado a la línea de la izquierda. */
  .footer-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; padding-bottom: 32px; }
  .footer-grid > *:first-child,
  .footer-grid > *:nth-child(2),
  .footer-grid > *:last-child { justify-self: start; }
}

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 18px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a.active::after { display: none; }
  .nav-toggle { display: flex; }
  .grid-4 { grid-template-columns: 1fr; }
  .shots-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* En una sola columna, la imagen siempre queda arriba y el texto abajo,
     sin importar el orden que tenga cada fila en el HTML para el
     zigzag de escritorio. */
  .shots-row .shots-image { order: 1; }
  .shots-row .shots-text { order: 2; }
}


/* =============================================================================
   SISTEMA VISUAL "VISTA DE CÓNDOR"
   El producto no es el dron: es lo que se descubre en las fotos que captura.
   Tres motivos se repiten en las 4 vistas para amarrar el sitio, cada uno
   anclado a algo que el sistema realmente hace:

   1. .topo-bg      curvas de nivel - el pipeline genera un modelo 3D del
                    terreno (DSM/DTM) para estimar volumen; esto lo hace
                    visible como textura de fondo.
   2. .detect-frame esquinas en L - la misma caja que el modelo dibuja sobre
                    cada basural detectado, reutilizada para enmarcar imágenes.
   3. .meta-line    metadatos técnicos en monoespaciada (coordenadas, m³,
                    cantidad de imágenes) - da el aire geoespacial sin caer
                    en HUD de videojuego.
   ============================================================================= */

:root {
  /* Mono del sistema: evita cargar otra fuente de Google solo para las
     líneas de metadatos. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- 1. curvas de nivel */
/* El SVG se repite en mosaico: el dibujo vive al centro del tile y los
   bordes quedan vacíos, así no se ven costuras al repetir. */
.topo-bg { position: relative; isolation: isolate; }
.topo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620' fill='none' stroke='%230F2244' stroke-width='1.1'%3E%3Cellipse cx='310' cy='300' rx='38' ry='27'/%3E%3Cellipse cx='308' cy='302' rx='74' ry='55'/%3E%3Cellipse cx='305' cy='305' rx='112' ry='84'/%3E%3Cellipse cx='302' cy='308' rx='152' ry='115'/%3E%3Cellipse cx='299' cy='311' rx='194' ry='148'/%3E%3Cellipse cx='296' cy='314' rx='238' ry='183'/%3E%3Cellipse cx='293' cy='317' rx='284' ry='220'/%3E%3C/svg%3E");
  background-size: 620px 620px;
  opacity: 0.055;
}
/* Sobre fondo navy las curvas van en amarillo, no en navy (se perderían). */
.topo-bg-dark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620' fill='none' stroke='%23FFC53D' stroke-width='1.1'%3E%3Cellipse cx='310' cy='300' rx='38' ry='27'/%3E%3Cellipse cx='308' cy='302' rx='74' ry='55'/%3E%3Cellipse cx='305' cy='305' rx='112' ry='84'/%3E%3Cellipse cx='302' cy='308' rx='152' ry='115'/%3E%3Cellipse cx='299' cy='311' rx='194' ry='148'/%3E%3Cellipse cx='296' cy='314' rx='238' ry='183'/%3E%3Cellipse cx='293' cy='317' rx='284' ry='220'/%3E%3C/svg%3E");
  opacity: 0.10;
}

/* ---------------------------------------------------------------- 2. marco de detección */
/* Cuatro esquinas en L (dos por pseudo-elemento) en vez de un borde
   completo: es la forma que tiene la caja de detección del modelo.
   Van por DENTRO del elemento: colgadas hacia afuera se las comía
   cualquier contenedor con overflow:hidden (p. ej. .team-card). */
.detect-frame { position: relative; }
.detect-frame::before,
.detect-frame::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  border-color: var(--yellow);
  border-style: solid;
  z-index: 2;
}
.detect-frame::before {
  top: 10px; left: 10px;
  border-width: 2px 0 0 2px;
}
.detect-frame::after {
  bottom: 10px; right: 10px;
  border-width: 0 2px 2px 0;
}
/* Las otras dos esquinas van en un hijo dedicado para no gastar los
   pseudo-elementos del contenedor (que ya usa ::before/::after). */
.detect-frame > .detect-corners { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.detect-frame > .detect-corners::before,
.detect-frame > .detect-corners::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--yellow);
  border-style: solid;
}
.detect-frame > .detect-corners::before {
  top: 10px; right: 10px;
  border-width: 2px 2px 0 0;
}
.detect-frame > .detect-corners::after {
  bottom: 10px; left: 10px;
  border-width: 0 0 2px 2px;
}

/* ---------------------------------------------------------------- 3. metadatos técnicos */
.meta-line {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}
.meta-line span { white-space: nowrap; }
.meta-line span + span::before {
  content: "·";
  margin-right: 14px;
  color: var(--border);
}
/* Variante sobre navy */
.meta-line-light { color: rgba(255,255,255,0.55); }
.meta-line-light span + span::before { color: rgba(255,255,255,0.28); }

/* =============================================================================
   COMPARADOR ANTES / DESPUÉS
   Ambas imágenes son del mismo ortomosaico real (900x600), así que la de
   arriba se dimensiona por alto y calza pixel a pixel con la de abajo.
   El <input type=range> transparente encima da arrastre y teclado gratis,
   en vez de escribir lógica de drag a mano.
   ============================================================================= */
.compare {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(15,34,68,0.25);
  user-select: none;
  line-height: 0;
}
.compare-base { width: 100%; height: auto; }
.compare-top {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}
.compare-top img {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
}
.compare-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--yellow);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}
.compare-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 2px 8px rgba(15,34,68,0.35);
}
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}
.compare-range:focus-visible ~ .compare-divider::after {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}
.compare-tag {
  position: absolute;
  bottom: 14px;
  z-index: 3;
  background: rgba(15,34,68,0.82);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  pointer-events: none;
  line-height: 1.4;
}
.compare-tag-left { left: 14px; }
.compare-tag-right { right: 14px; background: var(--yellow); color: var(--navy); }

/* =============================================================================
   MINIATURAS DE ETAPA (Producto - "Cómo funciona")
   Cada etapa del pipeline muestra su salida real, no solo texto.
   ============================================================================= */
.stage-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
}

/* =============================================================================
   SECCIÓN DE VIDEO (Inicio)
   ============================================================================= */
.video-frame {
  max-width: 860px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 16 / 9;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =============================================================================
   TARJETAS DE EQUIPO (Sobre Nosotros)
   ============================================================================= */
.member-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg);
  margin-bottom: 14px;
}
.member-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--yellow-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}


/* =============================================================================
   AJUSTES DEL TEMA OSCURO
   Estética de landing SaaS oscura: fondo casi negro con una grilla muy tenue,
   un resplandor cálido detrás del hero, bordes finos de baja opacidad y el
   amarillo reservado como único acento. El navbar pasa a ser una píldora
   flotante de vidrio, y el logo del navbar cambia al de modo oscuro.
   ============================================================================= */

/* Grilla fina + resplandor: van en ::before/::after del body para no tocar
   el marcado. Ambos son decorativos y quedan detrás de todo el contenido. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Se desvanece hacia abajo para que la grilla no compita con el contenido
     de las secciones inferiores. */
  mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
}
body::after {
  content: "";
  position: fixed;
  top: -30vh;
  left: 50%;
  width: 130vw;
  height: 90vh;
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 197, 61, 0.10) 0%, transparent 62%);
}

/* Las curvas de nivel sobre fondo oscuro necesitan trazo claro: la variante
   navy del bloque anterior queda invisible acá. */
.topo-bg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620' fill='none' stroke='%23FFC53D' stroke-width='1.1'%3E%3Cellipse cx='310' cy='300' rx='38' ry='27'/%3E%3Cellipse cx='308' cy='302' rx='74' ry='55'/%3E%3Cellipse cx='305' cy='305' rx='112' ry='84'/%3E%3Cellipse cx='302' cy='308' rx='152' ry='115'/%3E%3Cellipse cx='299' cy='311' rx='194' ry='148'/%3E%3Cellipse cx='296' cy='314' rx='238' ry='183'/%3E%3Cellipse cx='293' cy='317' rx='284' ry='220'/%3E%3C/svg%3E");
  opacity: 0.07;
}

/* ---------------------------------------------------------------- navbar */
/* Píldora flotante en vez de barra pegada al borde: se despega del tope,
   se centra al ancho del contenedor y usa vidrio esmerilado. */
.nav {
  background: transparent;
  border-bottom: 0;
  padding: 14px 0;
}
.nav-inner {
  height: 66px;
  max-width: var(--container-w);
  padding: 0 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(14, 22, 38, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.7);
}
/* El lockup apilado ya no cabe en una píldora de 66px: en el navbar se usa
   el logo en horizontal, más bajo. */
.nav-logo { width: auto; height: 40px; }
.nav-links { gap: 26px; }
.nav-links a { font-size: 0.9rem; }
/* El subrayado colgaba de una barra de 88px; acá se sube al borde de la
   píldora para que no quede flotando fuera de ella. */
.nav-links a::after { bottom: -8px; height: 2px; }

/* ---------------------------------------------------------------- superficies */
.section-alt {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-card, .feature-card, .contact-card, .team-card {
  border: 1px solid var(--border);
  box-shadow: none;
}
.section-alt .stat-card,
.section-alt .feature-card,
.section-alt .contact-card,
.section-alt .team-card,
.section-alt .pipe-shot {
  background: var(--surface-2);
}
/* Hover: el borde se enciende en amarillo tenue en vez de sombra fuerte. */
.stat-card:hover, .feature-card:hover {
  border-color: rgba(255, 197, 61, 0.35);
  box-shadow: 0 10px 30px -14px rgba(255, 197, 61, 0.25);
}

/* ---------------------------------------------------------------- formulario */
.form-field input, .form-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); }
.form-field input:focus, .form-field textarea:focus {
  border-color: var(--yellow);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 197, 61, 0.15);
}
.form-field label { color: var(--muted); }

/* ---------------------------------------------------------------- placeholders */
.media-placeholder,
.media-placeholder.light {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.media-placeholder.light strong { color: var(--text); }

/* ---------------------------------------------------------------- hero */
.hero, .page-hero {
  background: transparent;
  border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------- footer */
.footer { background: var(--surface); border-top: 1px solid var(--border); }
.footer-bar { border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------- botones */
.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-primary { box-shadow: 0 8px 24px -10px rgba(255, 197, 61, 0.55); }

/* ---------------------------------------------------------------- comparador */
.compare { border: 1px solid var(--border); }
.compare-tag { background: rgba(7, 11, 20, 0.85); }

/* ---------------------------------------------------------------- ventana de capturas */
.shots-modal-panel { background: var(--surface); border: 1px solid var(--border); }
.shots-modal-close { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.shots-modal-close:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

/* ---------------------------------------------------------------- misceláneos */
.stage-thumb { border-color: var(--border); background: var(--surface-2); }
.meta-line span + span::before { color: var(--border-strong); }
.page-transition-overlay { background: var(--bg); }
.team-linkedin { border-color: var(--border); color: var(--muted); }
.team-linkedin:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }


/* =============================================================================
   HERO EN DOS COLUMNAS (Inicio)
   Texto a la izquierda y la evidencia visual a la derecha, en un recuadro
   casi cuadrado. Reemplaza al hero de foto a sangre completa: la caja de
   detección ahora viene dibujada dentro de la propia imagen, sobre basura
   real, en vez de ser un recuadro de CSS en una posición fija que no
   correspondía con lo que se ve debajo.
   ============================================================================= */
.hero { padding: 72px 0 84px; text-align: left; }
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-copy .hero-sub { margin: 0; max-width: 34rem; }
.hero-visual { border-radius: var(--radius); overflow: hidden; line-height: 0; }
.hero-visual img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 48px 0 60px; }
}

/* El hero de foto a sangre ya no se usa (quedó reemplazado por el de dos
   columnas), igual que el recuadro de detección posicionado por CSS. */

/* Marca del navbar: ícono + wordmark en texto, en vez del lockup apilado.
   El lockup deja el texto en ~21% de su alto, ilegible dentro de una
   píldora de 66px; separándolos el ícono queda chico y el nombre legible. */
.nav-brand { gap: 10px; }
.nav-logo { width: auto; height: 30px; }
.nav-wordmark {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.01em;
  line-height: 1;
}
.nav-wordmark strong { font-weight: 800; color: var(--text); }
.nav-brand:hover .nav-wordmark { color: var(--text); }

/* Placeholder de foto del equipo: el degradado navy competía con el resto
   en el tema oscuro. Queda neutro hasta que entren las fotos reales. */
.team-photo {
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  color: var(--muted);
}

/* Textos e íconos que seguían en navy y quedaban invisibles sobre el fondo
   oscuro. Los que van sobre amarillo (botón primario, chips) se dejan en
   navy a propósito, ahí el contraste es correcto. */
.btn-ghost-navy { color: var(--text); border-color: var(--border-strong); }
.btn-ghost-navy:hover { color: var(--yellow); border-color: var(--yellow); }
.shots-text strong { color: var(--text); }
.shots-modal-panel h3 { color: var(--text); }
.stat-card-icon { color: var(--yellow); }
.fair-info-icon { color: var(--yellow); }
.fair-info-row .value { color: var(--text); }
.fair-info-row .label { color: var(--muted); }

/* =============================================================================
   AJUSTES DE ALINEACIÓN, ÍCONOS Y FOOTER
   ============================================================================= */

/* El párrafo de bajada ocupa el mismo ancho que su título, en vez de
   cortarse antes: dentro de una sección todo arranca y termina en la misma
   línea. El tope de ancho se mantiene solo donde el texto va centrado
   (hero de página y bloques CTA), que ahí sí necesita medida de lectura. */
.page-hero p,
.cta-inner .section-lead { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Íconos sin fondo: ni pastilla gris, ni círculo, ni cuadro de color. El
   ícono se pinta con su propio color sobre el fondo de la sección. */
.stat-card-icon { background: none; width: auto; height: auto; }
.channel-icon {
  width: auto; height: auto;
  border-radius: 0;
  background: none !important;
}
.channel-icon svg { width: 22px; height: 22px; }
.channel-icon.ig { color: #E1306C; }
.channel-icon.li { color: #0A66C2; }
.channel-icon.yt { color: #FF0000; }
.channel-icon.mail { color: var(--yellow); }
.channel-row { gap: 14px; }

/* ---------------------------------------------------------------- footer */
.footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 36px;
}
/* El grid anterior era de 3 columnas con alineaciones forzadas por posición
   (start/center/end); con 4 columnas todas arrancan a la izquierda. */
.footer-grid > *:first-child,
.footer-grid > *:nth-child(2),
.footer-grid > *:last-child { justify-self: start; }

.footer-logo { height: 62px; margin-bottom: 14px; }
.footer-tag { max-width: 340px; margin: 0 0 18px; }

.footer-col-body { gap: 10px; justify-content: flex-start; }

/* Redes sociales: ícono + nombre en fila, sin botón circular de fondo. */
.footer-social-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
.footer-social-row svg { width: 17px; height: 17px; flex-shrink: 0; }
.footer-social-row:hover { color: var(--text); }

.footer-partners { gap: 14px; align-items: flex-start; }

/* Barra inferior: copyright a la izquierda y lema a la derecha. */
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 22px;
}
.footer-bar p { font-size: 0.82rem; color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bar { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Navbar: vuelve el lockup original, así que la píldora crece para que el
   wordmark del logo se lea (ocupa ~21% del alto del lockup). */
.nav-inner { height: 80px; }
.nav-logo { height: 58px; width: auto; }

/* La barra inferior heredaba un fondo navy propio que, al pasar a .container,
   se veía como un bloque más claro flotando dentro del footer. Ahora es solo
   una línea divisoria sobre el mismo fondo. */
.footer-bar { background: none; text-align: left; padding-left: 24px; padding-right: 24px; }
.footer-bar p { font-weight: 500; }
/* Los dos logos de "Somos parte de" quedaban chicos frente al resto. */
.footer-credit-line img { width: 140px; }

/* =============================================================================
   CINTA DE ZONAS EN TERRENO (Inicio)
   Adaptación en CSS puro del marquee animado de la referencia: la cinta lleva
   el set de fotos dos veces y se desplaza exactamente la mitad de su ancho,
   así el punto de empalme cae justo donde empieza la copia y el ciclo se ve
   continuo. Sin librerías de animación: es un translateX en @keyframes.
   ============================================================================= */
.marquee-section { padding-bottom: 0; overflow: hidden; }
.marquee-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 56px;
}
.marquee-copy h2 { margin-bottom: 0; }
.marquee-copy .section-lead { margin-bottom: 0; max-width: 640px; }

.marquee {
  /* Los bordes se desvanecen para que las tarjetas entren y salgan en vez de
     aparecer cortadas contra el borde de la pantalla. */
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  padding: 26px 0 60px;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: marqueeScroll 46s linear infinite;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); } /* -10px = la mitad del gap */
}

.marquee-card {
  flex: 0 0 auto;
  width: 208px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
}
/* Leve desalineo alternado, como en la referencia, para que la fila no se
   lea como una grilla perfecta. */
.marquee-card:nth-child(odd)  { transform: rotate(-2deg); }
.marquee-card:nth-child(even) { transform: rotate(3deg); }
.marquee-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 700px) {
  .marquee-card { width: 150px; border-radius: 14px; }
  .marquee-track { gap: 14px; }
  @keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 7px)); }
  }
}

/* Sin guarda de prefers-reduced-motion, igual que el resto de las
   animaciones del sitio (ver script.js): la cinta se mueve siempre, aunque
   el equipo tenga desactivados los efectos de animación. */

/* Ajustes de la cinta: queda contenida al mismo ancho centrado que el resto
   de las secciones (antes cruzaba la pantalla completa), con tarjetas
   cuadradas y más anchas. Al caber solo unas cuatro a la vez dentro del
   contenedor, el desplazamiento es justamente lo que permite ver las cinco. */
.marquee {
  overflow: hidden;
  border-radius: var(--radius);
}
.marquee-card {
  width: 262px;
  aspect-ratio: 1 / 1;
}
@media (max-width: 700px) {
  .marquee-card { width: 190px; }
}

/* =============================================================================
   FONDO ANIMADO
   Los tres elementos decorativos del fondo dejan de ser estáticos. El
   movimiento es lento y de baja opacidad a propósito: tiene que leerse como
   ambiente, no competir con el contenido.

   1. La grilla deriva en diagonal, como el terreno pasando por debajo en un
      vuelo. Se desplaza exactamente un cuadro (64px), así el ciclo cierra
      sin salto, y se anima con transform (no background-position) porque es
      mucho más barato de componer.
   2. El resplandor cálido respira despacio.
   3. Un barrido cruza la pantalla de arriba a abajo, el mismo gesto del
      scan-line que ya usa el proyecto para representar el escaneo.
   ============================================================================= */

/* 1. Grilla en deriva. El inset negativo da margen para que el
   desplazamiento no descubra los bordes del mosaico. */
body::before {
  inset: -80px;
  animation: gridDrift 72s linear infinite;
}
@keyframes gridDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(64px, 64px, 0); }
}

/* 2. Resplandor que respira. Conserva el translateX del centrado original
   dentro de cada keyframe, si no se pierde al animar el transform. */
body::after {
  animation: glowBreathe 16s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes glowBreathe {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}



/* =============================================================================
   MARCAS DE DETECCIÓN EN EL FONDO
   Reemplaza al barrido continuo: en vez de una línea recorriendo la pantalla,
   aparecen y se desvanecen marcas sueltas en distintos puntos, con la misma
   forma de esquinas en L que usa .detect-frame. Es el gesto del sistema
   encontrando algo.

   Contenida a propósito: seis marcas, ciclo de 18s y cada una visible unos
   3s, con los retardos repartidos para que normalmente haya una sola a la
   vez. Si aparecieran seguido se leería como adorno, no como detección.
   ============================================================================= */
.bg-detections {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-detections span {
  position: absolute;
  opacity: 0;
  /* Cuatro esquinas en L armadas con gradientes, para no gastar DOM ni
     pseudo-elementos en algo puramente decorativo. */
  background:
    linear-gradient(var(--yellow), var(--yellow)) left    top    / 11px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left    top    / 1px 11px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right   top    / 11px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right   top    / 1px 11px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left    bottom / 11px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left    bottom / 1px 11px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right   bottom / 11px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right   bottom / 1px 11px no-repeat;
  animation: detectBlink 18s ease-in-out infinite;
}
/* Entra achicándose, como si el recuadro se cerrara sobre el hallazgo, se
   queda un momento y se desvanece. */
@keyframes detectBlink {
  0%,  100% { opacity: 0;    transform: scale(1.18); }
  5%        { opacity: 0.55; transform: scale(1); }
  16%       { opacity: 0.55; transform: scale(1); }
  22%       { opacity: 0;    transform: scale(1); }
}

/* En pantallas chicas el contenido ocupa casi todo el ancho y las marcas
   quedarían detrás del texto en vez de en los márgenes. */
@media (max-width: 900px) {
  .bg-detections { display: none; }
}

/* Las marcas van ancladas al documento, no al viewport: con position:fixed
   quedaban pegadas a la pantalla y se veían deslizándose por encima del
   contenido a medida que se hacía scroll. Ahora cada una pertenece a un
   punto de la página y se va con ella. El position:relative del body es lo
   que hace que el "inset: 0" cubra el alto completo del documento. */
body { position: relative; }
.bg-detections { position: absolute; }
/* El ciclo se alarga junto con la cantidad de marcas, para que la densidad
   en pantalla siga siendo baja. */
.bg-detections span { animation-duration: 22s; }

/* =============================================================================
   PIPELINE EN TIRA HORIZONTAL (Producto)
   Reemplaza al recorrido en zigzag: ese dejaba medio ancho vacío en cada fila
   y encogía las miniaturas, que son justamente lo que explica el proceso. Acá
   las cuatro salidas reales van en fila y se leen como una transformación.
   ============================================================================= */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pipe-step { position: relative; }

/* Sin overflow:hidden a propósito: recortaba la flecha que sobresale hacia
   la etapa siguiente. El redondeo va en la imagen misma. */
.pipe-shot {
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  line-height: 0;
}
.pipe-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 11px;
}

/* Flecha entre etapas: va en el hueco del grid, no dentro de la tarjeta, y
   la última no la lleva. */
.pipe-step:not(:last-child) .pipe-shot::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.6;
  z-index: 3;
}

.pipe-num {
  width: 30px;
  height: 30px;
  margin: 16px 0 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
}
.pipe-step h3 { margin-bottom: 6px; }
.pipe-step p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }

/* Al pasar el cursor se levanta apenas y se enciende el borde, mismo gesto
   que las tarjetas del resto del sitio. */
.pipe-shot { transition: transform 0.25s ease, border-color 0.25s ease; }
.pipe-step:hover .pipe-shot {
  transform: translateY(-4px);
  border-color: rgba(255, 197, 61, 0.45);
}

@media (max-width: 900px) {
  .pipeline { grid-template-columns: repeat(2, 1fr); gap: 22px 20px; }
  .pipe-step:nth-child(2) .pipe-shot::after { display: none; }
}
@media (max-width: 560px) {
  .pipeline { grid-template-columns: 1fr; }
  .pipe-shot::after { display: none !important; }
}

/* =============================================================================
   AYUDAS DE NAVEGACIÓN
   Dos elementos, ambos funcionales y no decorativos: cuánto queda de página, y
   cómo volver al inicio sin scrollear de vuelta. Se suman a la entrada
   escalonada del pipeline, que ayuda a leerlo como secuencia.
   ============================================================================= */

/* Barra de progreso de lectura, pegada al borde superior. El ancho lo escribe
   script.js con transform, que es lo barato de animar en scroll. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Botón flotante de volver arriba: aparece recién cuando hay algo de página
   arriba, así no estorba al inicio. */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 55;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: rgba(14, 22, 38, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
.to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.to-top svg { width: 19px; height: 19px; }

/* Entrada escalonada de las etapas del pipeline: entran una después de otra,
   de izquierda a derecha, para que se lean en orden. El retardo sale de la
   variable --paso que trae cada <li> desde el HTML. */
.pipe-step.reveal { transition-delay: calc(var(--paso, 1) * 90ms); }

@media (max-width: 560px) {
  .to-top { right: 16px; bottom: 16px; }
}

/* El trazo sólido de los íconos duotone de "Nuestros valores" estaba en
   navy, heredado del tema claro: sobre el fondo oscuro quedaba invisible y
   solo se veía la silueta de color. En el handshake eso dejaba una mano
   pintada y la otra prácticamente borrada. */
.duotone-icon svg path:not([opacity]) { fill: var(--text); }

/* =============================================================================
   VENTANA DE CAPTURAS: TAMAÑO SEGÚN LA IMAGEN
   Antes el panel era una caja fija de 80vw x 80vh y la imagen se ajustaba
   dentro con object-fit. Como las capturas son casi 2:1, sobraba mucho alto
   vacío arriba y abajo, y la imagen se veía chica dentro de un marco enorme.
   Ahora el panel se adapta a la imagen: el tope de 1180px la deja siempre
   por debajo de su resolución nativa (1600px), así se ve nítida.
   ============================================================================= */
.shots-modal-panel {
  width: auto;
  max-width: min(94vw, 1180px);
  height: auto;
  max-height: 90vh;
  padding: 52px 20px 20px;
}
.shots-modal-media {
  aspect-ratio: auto;
  flex: none;
  min-height: 0;
  border: 0;
  background: none;
  padding: 0;
}
.shots-modal-media img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 10px;
}

/* =============================================================================
   APERTURA Y CIERRE DE LA VENTANA DE CAPTURAS
   El velo se funde y el panel entra escalando desde un poco más chico, que es
   lo que da la sensación de que la imagen "se agranda" desde la miniatura. Al
   cerrar corre el gesto inverso: script.js marca .closing, espera a que
   termine la animación y recién ahí oculta la ventana (pasar de display:flex
   a none de golpe cortaría cualquier transición).
   ============================================================================= */
.shots-modal.open .shots-modal-backdrop {
  animation: modalVeloIn 0.2s ease both;
}
.shots-modal.open .shots-modal-panel {
  animation: modalPanelIn 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.shots-modal.closing .shots-modal-backdrop {
  animation: modalVeloOut 0.2s ease both;
}
.shots-modal.closing .shots-modal-panel {
  animation: modalPanelOut 0.2s ease both;
}

@keyframes modalVeloIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalVeloOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes modalPanelIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalPanelOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.96) translateY(6px); }
}

/* La miniatura acompaña el gesto: al hacer clic se hunde apenas antes de que
   se abra la ventana. */
.shots-image:active { transform: translateY(-1px) scale(0.99); }

/* El tag de la derecha vuelve a ser amarillo: la regla genérica .compare-tag
   del bloque oscuro lo había pisado (misma especificidad, definida después),
   dejándolo con fondo oscuro y texto navy encima, ilegible. Se reafirma acá,
   al final, para que gane por orden. */
.compare-tag-right { background: var(--yellow); color: var(--navy); }

/* =============================================================================
   FOTOS DEL EQUIPO (Sobre Nosotros)
   ============================================================================= */
/* Avatar circular. Las cuatro fotos son selfies con fondos, luz y encuadres
   muy distintos entre si; el circulo recorta justamente las esquinas, que es
   donde vive esa diferencia, y deja la cara como lo unico que se compara.
   El recorte de cada una se eligio mirando la foto (ver assets/equipo), no
   con un valor unico: la cara esta a distinta altura en cada toma. */
.team-photo {
  width: 152px;
  height: 152px;
  aspect-ratio: 1 / 1;
  margin: 4px auto 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  background: var(--bg);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Mismo gesto que el resto de las tarjetas del sitio. */
.team-card:hover .team-photo {
  border-color: var(--yellow);
  transform: translateY(-3px);
}
/* Con el avatar centrado, el resto de la tarjeta se centra tambien. */
.team-body { text-align: center; }



/* =============================================================================
   AFORDANCIA DEL COMPARADOR
   El control era un círculo liso: no comunicaba que se arrastra, y la
   instrucción vivía enterrada en el párrafo de arriba, lejos de donde el
   usuario está mirando. Ahora el tirador lleva flechas y el aviso va sobre
   la imagen, desapareciendo apenas se interactúa.
   ============================================================================= */

/* Flechas dentro del tirador, que es el gesto universal de "arrástrame". */
.compare-divider::after {
  background-color: var(--yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230F2244' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}
/* La línea se engrosa apenas al pasar por encima, para reforzar que la zona
   completa es interactiva y no solo el círculo. */
.compare:hover .compare-divider { width: 3px; }

.compare-hint {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.88);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
  /* Latido suave: llama la atención sin moverse de lugar. */
  animation: hintLatido 2.4s ease-in-out infinite;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.compare-hint svg { width: 17px; height: 17px; color: var(--yellow); }

@keyframes hintLatido {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.045); }
}

/* Cumplió su función: el usuario ya arrastró. */
.compare.usado .compare-hint {
  opacity: 0;
  transform: translateX(-50%) scale(0.92);
  animation: none;
}