/* ==========================================================================
   Grupo EXSA — hoja de estilo del sitio.

   La primera parte es el diseño original tal cual estaba (antes vivía dentro
   de un <style> en home.html). Al final se agrega la capa de movimiento y los
   estilos de los elementos nuevos.

   Se sacó a un archivo para que el navegador la cachee y para que todas las
   páginas compartan el mismo diseño, no solo la portada.
   ========================================================================== */

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

    :root {
      --navy:  #0C1E3C;
      --sky:   #1B9FC0;
      --jade:  #2EAA4A;
      /* Teal de la paleta, para acentos que no son texto: 3.12:1 sobre warm,
         por encima del 3:1 que pide WCAG 1.4.11 para componentes. */
      --teal:  #158FAD;
      /* Variante oscura para texto de enlace: el teal claro se queda en 3.12:1
         y el texto normal necesita 4.5:1. Esta da 4.83:1 sobre warm. */
      --teal-ink: #0E6E86;
      /* Igual que el teal: el jade #2EAA4A se queda en 2.49:1 sobre warm y no
         sirve para texto. Esta variante da 5.10:1. */
      --jade-ink: #1B7030;
      --stone: #F5F4F0;
      --warm:  #EEE9E0;
      --ink:   #1A2A42;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'Nunito Sans', sans-serif;
      font-size: 17px;
      background: var(--stone);
      color: var(--navy);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 { font-family: 'Cormorant Garamond', Georgia, serif; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--stone); }
    ::-webkit-scrollbar-thumb { background: var(--sky); border-radius: 2px; }

    /* ══════════════════════════════════════════════════
       ANIMACIONES — Fluidas, naturales, no agresivas
    ══════════════════════════════════════════════════ */

    /* Reveal principal */
    .fade-up {
      opacity: 0;
      transform: translateY(16px);
      /* Corta a propósito: cada cambio de página empieza con el contenido
         oculto, y una entrada de casi un segundo hacía sentir lento el sitio. */
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .fade-up.in { opacity: 1; transform: translateY(0); }

    .fade-in {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .fade-in.in { opacity: 1; }

    /* Stagger helpers */
    .delay-1 { transition-delay: 0.05s; }
    .delay-2 { transition-delay: 0.10s; }
    .delay-3 { transition-delay: 0.15s; }
    .delay-4 { transition-delay: 0.20s; }
    .delay-5 { transition-delay: 0.25s; }
    .delay-6 { transition-delay: 0.30s; }

    /* Línea animada al cargar */
    @keyframes lineGrow {
      from { transform: scaleX(0); transform-origin: left; }
      to   { transform: scaleX(1); transform-origin: left; }
    }
    .line-grow { animation: lineGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

    /* Hero texto */
    @keyframes heroEntry {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-brand { animation: heroEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
    .hero-title { animation: heroEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
    .hero-sub   { animation: heroEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
    .hero-cta   { animation: heroEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
    .hero-stat  { animation: heroEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }

    /* Número de stats counter */
    @keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .stat-num { animation: countUp 0.8s ease both; }

    /* ── Navbar ── */
    .navbar {
      transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    }
    .navbar.scrolled {
      /* Sin backdrop-filter: con un fondo al 97% el desenfoque apenas se veía,
         y obligaba a recomponer en cada cuadro todo lo que pasa detrás (el
         globo animado), lo que trababa el scroll en Safari y pantallas Retina. */
      background: rgba(245, 244, 240, 0.97);
      box-shadow: 0 1px 0 rgba(12, 30, 60, 0.07);
    }

    /* ── Nav links ── */
    .nav-link {
      position: relative;
      color: var(--navy);
      opacity: 0.65;
      transition: opacity 0.25s ease;
      font-size: 0.8125rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1px;
      background: var(--sky);
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-link:hover { opacity: 1; }
    .nav-link:hover::after { width: 100%; }

    /* ── Botones ── */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--navy);
      color: white;
      padding: 0.875rem 2rem;
      font-size: 0.8125rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 600;
      border: 1.5px solid var(--navy);
      transition: background 0.3s ease, color 0.3s ease;
      cursor: pointer;
    }
    .btn-primary:hover { background: transparent; color: var(--navy); }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: transparent;
      color: var(--navy);
      padding: 0.875rem 2rem;
      font-size: 0.8125rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 600;
      border: 1.5px solid rgba(12, 30, 60, 0.25);
      transition: border-color 0.3s ease, background 0.3s ease;
      cursor: pointer;
    }
    .btn-outline:hover { border-color: var(--sky); background: rgba(27, 159, 192, 0.05); }

    /* ── Tarjeta de servicio ── */
    .service-card {
      border: 1px solid rgba(12, 30, 60, 0.08);
      background: white;
      transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
    }
    .service-card:hover {
      border-color: rgba(27, 159, 192, 0.3);
      box-shadow: 0 12px 48px rgba(12, 30, 60, 0.08);
      transform: translateY(-4px);
    }

    /* ── Ticker ── */
    .ticker-bar {
      background: var(--navy);
      font-size: 0.8125rem;
      letter-spacing: 0.04em;
    }

    /* ── Divisor elegante ── */
    .divider {
      width: 40px;
      height: 2px;
      background: var(--sky);
      display: block;
    }

    /* ── Hero imagen de fondo ── */
    .hero-bg {
      background: linear-gradient(105deg,
        var(--navy) 0%,
        #122348 55%,
        #0E2954 100%);
      position: relative;
    }
    .hero-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231B9FC0' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      opacity: 1;
    }

    /* ── Timeline ── */
    .timeline-line {
      position: absolute;
      left: 15px;
      top: 24px;
      bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, var(--sky), rgba(27,159,192,0.1));
    }

    .timeline-node {
      position: relative;
      z-index: 1;
    }

    .timeline-dot {
      width: 31px;
      height: 31px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .dot-done    { background: var(--jade); border: 2px solid var(--jade); }
    .dot-active  { background: white; border: 2px solid var(--sky); box-shadow: 0 0 0 4px rgba(27,159,192,0.15); }
    .dot-pending { background: white; border: 2px solid rgba(12,30,60,0.12); }

    /* ── Input rastreo ── */
    .track-input {
      border: 1.5px solid rgba(12, 30, 60, 0.15);
      background: white;
      padding: 1rem 1.25rem;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 0.9375rem;
      color: var(--navy);
      width: 100%;
      transition: border-color 0.3s ease;
      outline: none;
    }
    .track-input:focus { border-color: var(--sky); }
    .track-input::placeholder { color: rgba(12, 30, 60, 0.3); letter-spacing: 0.05em; }

    /* ── Progreso bar ── */
    .progress-track {
      height: 3px;
      background: rgba(12, 30, 60, 0.08);
      border-radius: 0;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--sky), var(--jade));
      transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ── Mapa invertido profesional ── */
    .map-frame iframe {
      filter: grayscale(20%) contrast(0.95);
    }

    /* ── Quote mark decorativo ── */
    .quote-mark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 6rem;
      line-height: 0.5;
      color: var(--sky);
      opacity: 0.15;
      user-select: none;
    }

    /* ── Separador de sección ── */
    .section-label {
      font-size: 0.8125rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--sky);
      font-family: 'Nunito Sans', sans-serif;
    }

    /* ── Hover arrow link ── */
    .arrow-link {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      font-size: 0.8125rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--sky);
      transition: gap 0.25s ease;
    }
    .arrow-link:hover { gap: 0.625rem; }



    /* ── Aduana cards ── */
    .aduana-card:hover { background: rgba(27,159,192,0.07) !important; }
    .aduana-card:hover .aduana-icon svg { opacity: 1 !important; stroke: var(--jade) !important; }

    /* Tipo de cambio pulsing dot */
    @keyframes dot-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }
    .live-dot { animation: dot-pulse 2s ease-in-out infinite; }

    /* Footer hover links */
    .footer-link {
      color: rgba(255,255,255,0.45);
      font-size: 0.8125rem;
      transition: color 0.25s ease;
    }
    .footer-link:hover { color: rgba(255,255,255,0.9); }

    /* Parallax leve hero */
    .hero-content { will-change: transform; }

/* ==========================================================================
   MOVIMIENTO — capa añadida sobre el diseño original
   --------------------------------------------------------------------------
   Se anima solo transform y opacity: son las dos propiedades que el
   compositor del navegador resuelve sin volver a calcular el layout, así que
   se mantienen fluidas incluso en equipos modestos.
   ========================================================================== */

/* Curvas compartidas. La de salida es la misma del diseño original. */
:root {
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1.12, 0.36, 1);
}

/* ── Escalonado dentro de una retícula ──────────────────────────────────
   Los hijos de un mismo bloque entran uno tras otro, no todos de golpe. */
.stagger > .fade-up:nth-child(1),
.stagger > .fade-in:nth-child(1) { transition-delay: 0.000s; }
.stagger > .fade-up:nth-child(2),
.stagger > .fade-in:nth-child(2) { transition-delay: 0.035s; }
.stagger > .fade-up:nth-child(3),
.stagger > .fade-in:nth-child(3) { transition-delay: 0.070s; }
.stagger > .fade-up:nth-child(4),
.stagger > .fade-in:nth-child(4) { transition-delay: 0.105s; }
.stagger > .fade-up:nth-child(5),
.stagger > .fade-in:nth-child(5) { transition-delay: 0.140s; }
.stagger > .fade-up:nth-child(6),
.stagger > .fade-in:nth-child(6) { transition-delay: 0.175s; }
.stagger > .fade-up:nth-child(7),
.stagger > .fade-in:nth-child(7) { transition-delay: 0.210s; }
.stagger > .fade-up:nth-child(8),
.stagger > .fade-in:nth-child(8) { transition-delay: 0.245s; }

/* ── Tarjetas de servicio ───────────────────────────────────────────────
   El original ya subía la tarjeta; se le suma el ícono, que responde con un
   resorte leve, y una sombra que crece con la misma curva. */
.service-card svg {
  transition: transform 0.45s var(--ease-spring), stroke 0.35s ease;
}
.service-card:hover svg { transform: translateY(-2px) scale(1.06); }

/* ── Botones ────────────────────────────────────────────────────────────
   Respuesta física al clic: se hunden un poco y vuelven. */
.btn-primary, .btn-outline {
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
              transform 0.18s var(--ease-spring);
  will-change: transform;
}
.btn-primary:active, .btn-outline:active { transform: scale(0.972); }
.btn-primary svg, .btn-outline svg { transition: transform 0.35s var(--ease-out); }
.btn-primary:hover svg, .btn-outline:hover svg { transform: translateX(3px); }

/* ── Tarjetas de aduana ─────────────────────────────────────────────────── */
.aduana-card { transition: background 0.35s ease, transform 0.35s var(--ease-out); }
.aduana-card:hover { transform: translateY(-2px); }

/* ── Cifras que cuentan hacia arriba ────────────────────────────────────
   Son datos reales, no adorno: contar hasta el valor los hace leer como
   cifra y no como rótulo. El ancho se reserva para que no salte el layout. */
.count-up { font-variant-numeric: tabular-nums; }

/* ── Línea de tiempo del expediente ─────────────────────────────────────── */
.timeline-node { animation: node-in 0.55s var(--ease-spring) both; }
.timeline-node:nth-child(1) { animation-delay: 0.05s; }
.timeline-node:nth-child(2) { animation-delay: 0.12s; }
.timeline-node:nth-child(3) { animation-delay: 0.19s; }
.timeline-node:nth-child(4) { animation-delay: 0.26s; }
.timeline-node:nth-child(5) { animation-delay: 0.33s; }
.timeline-node:nth-child(6) { animation-delay: 0.40s; }
.timeline-node:nth-child(7) { animation-delay: 0.47s; }
@keyframes node-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Cinta del tipo de cambio ───────────────────────────────────────────
   El valor se atenúa antes de cambiar, para que no salte de golpe. */
#rate-top { transition: opacity 0.3s var(--ease-out); }
#rate-top[data-updating="true"] { opacity: 0.35; }

/* ── Enlaces del pie ────────────────────────────────────────────────────── */
.footer-link { transition: color 0.25s ease, transform 0.25s var(--ease-out); }
.footer-link:hover { transform: translateY(-1px); }

/* ==========================================================================
   ELEMENTOS NUEVOS
   ========================================================================== */

/* Salto al contenido: primer tabulador de la página. */
.skip-link {
  position: absolute;
  left: 1rem; top: -6rem;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.875rem 1.5rem;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Avisos del formulario de contacto. */
.site-message {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid;
  background: #fff;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.9375rem;
  animation: message-in 0.45s var(--ease-spring) both;
}
.site-message svg { flex-shrink: 0; margin-top: 0.15rem; }
.site-message--success { border-color: var(--jade); color: #157E3D; }
.site-message--error   { border-color: #B3261E;    color: #B3261E; }
.site-message--info    { border-color: var(--sky);  color: #0E6E86; }
@keyframes message-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Errores por campo. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.8125rem;
  color: #B3261E;
}
.field-error svg { flex-shrink: 0; margin-top: 0.15rem; }
.has-error .track-input { border-color: #B3261E; }

/* ==========================================================================
   FOCO VISIBLE
   El diseño original quitaba el contorno de los campos sin reemplazarlo:
   quien navega con teclado no veía dónde estaba parado.
   ========================================================================== */
:focus-visible {
  /* navy sobre los fondos claros: 15:1. Con --sky quedaba en 2.82 y WCAG
     1.4.11 pide 3:1 para que el indicador de foco se distinga del fondo. */
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.bg-navy :focus-visible, .hero-bg :focus-visible, footer :focus-visible {
  outline-color: var(--jade);
}
.track-input:focus-visible {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(27, 159, 192, 0.22);
}

/* Las anclas se detienen debajo de la barra fija. */
[id] { scroll-margin-top: 7rem; }

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   Si el sistema pide menos animación, todo queda en su estado final al
   instante. El original no lo contemplaba.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up, .fade-in { opacity: 1 !important; transform: none !important; }
  .live-dot { animation: none; }
}

/* Sin JavaScript el contenido se ve completo: el movimiento nunca lo esconde. */
.no-motion .fade-up,
.no-motion .fade-in { opacity: 1; transform: none; }

/* ── Impresión ──────────────────────────────────────────────────────────── */
@media print {
  .ticker-bar, .navbar, footer, .skip-link { display: none !important; }
  .fade-up, .fade-in { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}

/* Texto solo para lectores de pantalla (por si Tailwind no cargara). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ESCÁNER DEL CAMBIO DE IDIOMA
   --------------------------------------------------------------------------
   Un haz horizontal sube de abajo hacia arriba y detrás de él avanza una
   cortina, como cuando un escáner de cama plana recorre un documento. Al
   salir, la cortina cubre; al llegar la página en el otro idioma, se retira
   siguiendo al mismo haz y en el mismo sentido, de modo que las dos mitades
   se leen como un solo gesto continuo.

   Solo se animan transform y opacity, y la cortina se pone antes del primer
   pintado (clase .lang-scanning en <html>) para que no haya destello.
   ========================================================================== */
.scan {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}
.scan.is-active { visibility: visible; }
/* Mientras cubre, no se puede tocar lo que hay debajo. */
.scan.is-out { pointer-events: auto; }

.scan__veil {
  position: absolute;
  inset: 0;
  background: var(--navy);
  /* Pauta fina: la textura de un documento pasando por el escáner. */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 5px
  );
  transform: scaleY(0);
  transform-origin: bottom center;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* El código del idioma al que se va, leído por el escáner. */
.scan__code {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--sky);
  opacity: 0;
}

.scan__beam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--sky) 12%,
    #ffffff 50%,
    var(--sky) 88%,
    transparent
  );
  box-shadow: 0 0 18px 4px rgba(27, 159, 192, 0.55),
              0 0 70px 16px rgba(27, 159, 192, 0.25);
  opacity: 0;
  will-change: transform;
}

/* ── Salida: la cortina cubre y el haz la encabeza ───────────────────────── */
.scan.is-out .scan__veil { animation: veil-cover 520ms cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.scan.is-out .scan__beam { animation: beam-sweep 520ms cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.scan.is-out .scan__code { animation: code-in 520ms ease-out forwards; }

/* ── Llegada: la cortina se retira siguiendo al mismo haz ────────────────── */
.scan.is-in .scan__veil {
  transform: scaleY(1);
  transform-origin: top center;
  animation: veil-reveal 620ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.scan.is-in .scan__beam { animation: beam-sweep 620ms cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.scan.is-in .scan__code { animation: code-out 380ms ease-in forwards; }

/* Estado inicial al llegar: cubierto desde antes del primer pintado. */
.lang-scanning .scan { visibility: visible; }
.lang-scanning .scan__veil { transform: scaleY(1); transform-origin: top center; }

@keyframes veil-cover {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes veil-reveal {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}
/* De abajo hacia arriba, encabezando el borde de la cortina en ambas mitades. */
@keyframes beam-sweep {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100vh); }
}
@keyframes code-in {
  0%, 25% { opacity: 0; }
  60%     { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes code-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Con movimiento reducido no hay barrido: el cambio de idioma es inmediato. */
@media (prefers-reduced-motion: reduce) {
  .scan, .lang-scanning .scan { visibility: hidden !important; }
  .scan__veil, .scan__beam, .scan__code { animation: none !important; }
}

/* ==========================================================================
   NAVEGACIÓN EN PANTALLAS ANGOSTAS
   --------------------------------------------------------------------------
   Debajo de 1024px los cinco enlaces no caben junto al logotipo, el selector
   de idioma y el botón de cotizar: se salían de la pantalla y encabalgaban el
   lema. Ahora se guardan en un panel que abre el botón de menú.
   ========================================================================== */

/* Objetivos táctiles: WCAG 2.5.8 pide 24×24 como mínimo. */
.nav-link { padding-block: 0.625rem; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(12, 30, 60, 0.45);
  transition: color 0.25s ease;
}
.lang-btn:hover { color: var(--sky); }
.lang-btn[aria-current="true"] { color: var(--navy); }

/* ── Botón de menú ──────────────────────────────────────────────────────── */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(12, 30, 60, 0.15);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav-toggle:hover { border-color: var(--sky); }

.nav-toggle__bars { position: relative; width: 18px; height: 12px; display: block; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--navy);
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }

/* Abierto: las tres barras se vuelven una cruz. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ── Panel de enlaces ───────────────────────────────────────────────────── */
.nav-menu {
  max-width: 80rem;
  margin: 1rem auto 0;
  padding: 0.5rem 0;
  background: rgba(245, 244, 240, 0.98);
  border-top: 1px solid rgba(12, 30, 60, 0.08);
  display: flex;
  flex-direction: column;
}
@supports (backdrop-filter: blur(1px)) { .nav-menu { backdrop-filter: blur(14px); } }

.nav-menu[hidden] { display: none; }

/* Entra desplegándose, no de golpe. */
.nav-menu.is-open { animation: menu-open 0.32s var(--ease-out) both; }
@keyframes menu-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.nav-menu__link {
  display: block;
  padding: 0.875rem 0.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.75;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 30, 60, 0.06);
  transition: opacity 0.2s ease, padding-left 0.25s var(--ease-out);
}
.nav-menu__link:hover { opacity: 1; padding-left: 0.75rem; }
.nav-menu__link:last-of-type { border-bottom: 0; }

/* Los enlaces del pie también necesitan altura suficiente para el dedo. */
.footer-link { display: inline-block; padding-block: 0.375rem; }

/* ==========================================================================
   BARRA SOBRE EL HÉROE OSCURO
   --------------------------------------------------------------------------
   La portada abre con el héroe azul marino y la barra es transparente hasta
   que se hace scroll: el texto navy quedaba invisible sobre él. Mientras esté
   arriba del todo en esa página, la barra pinta en claro.
   ========================================================================== */
/* El logotipo de la barra sufre lo mismo que el del heroe mientras flota
   sobre el navy: su azul da 2.43:1. Va en negativo hasta que la barra se
   aclara al hacer scroll, y entonces recupera el color de marca. */
.nav-logo { transition: filter 0.35s ease, transform 0.3s ease; }
.navbar[data-over-hero]:not(.scrolled) .nav-logo { filter: brightness(0) invert(1); }

.navbar[data-over-hero]:not(.scrolled) .nav-link,
.navbar[data-over-hero]:not(.scrolled) .lang-btn,
.navbar[data-over-hero]:not(.scrolled) .wordmark-dark {
  color: rgba(255, 255, 255, 0.8);
}
.navbar[data-over-hero]:not(.scrolled) .nav-link:hover,
.navbar[data-over-hero]:not(.scrolled) .lang-btn:hover,
.navbar[data-over-hero]:not(.scrolled) .lang-btn[aria-current="true"] {
  color: #ffffff;
  opacity: 1;
}
.navbar[data-over-hero]:not(.scrolled) .nav-link::after { background: var(--sky); }

.navbar[data-over-hero]:not(.scrolled) .nav-toggle { border-color: rgba(255, 255, 255, 0.32); }
.navbar[data-over-hero]:not(.scrolled) .nav-toggle:hover { border-color: #ffffff; }
.navbar[data-over-hero]:not(.scrolled) .nav-toggle__bars span { background: #ffffff; }

.navbar[data-over-hero]:not(.scrolled) .btn-primary {
  background: #ffffff;
  color: var(--navy);
  border-color: #ffffff;
}
.navbar[data-over-hero]:not(.scrolled) .btn-primary:hover {
  background: transparent;
  color: #ffffff;
}

/* El separador entre ES y EN también. */
.navbar[data-over-hero]:not(.scrolled) .text-navy\/20 { color: rgba(255, 255, 255, 0.3); }

/* ==========================================================================
   RENGLÓN DE SERVICIO
   --------------------------------------------------------------------------
   Los servicios son un índice editorial de ancho completo, no una retícula de
   tarjetas idénticas con ícono. El renglón entero es el objetivo del clic.
   ========================================================================== */
.service-row {
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease, padding-left 0.35s var(--ease-out);
}
.service-row:hover,
.service-row:focus-visible {
  background: rgba(27, 159, 192, 0.05);
  padding-left: 1.25rem;
}
.service-row .arrow-link { transition: gap 0.25s ease, color 0.25s ease; }
.service-row:hover .arrow-link { gap: 0.625rem; }

@media (max-width: 63.99rem) {
  /* En una columna el desplazamiento lateral estorba más de lo que aporta. */
  .service-row:hover, .service-row:focus-visible { padding-left: 0; }
}

/* ==========================================================================
   PESO VISUAL
   --------------------------------------------------------------------------
   El sitio no tiene fotografías todavía, así que el atractivo tiene que salir
   de la composición: tarjetas con relieve real, acentos de color, y una
   muestra del producto (el expediente) en la portada.
   ========================================================================== */

/* ── Tarjeta con relieve ────────────────────────────────────────────────── */
.card-lift {
  position: relative;
  background: #fff;
  border: 1px solid rgba(12, 30, 60, 0.07);
  box-shadow: 0 1px 2px rgba(12, 30, 60, 0.04),
              0 8px 24px -16px rgba(12, 30, 60, 0.18);
  transition: transform 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
}
.card-lift:hover {
  transform: translateY(-6px);
  border-color: rgba(27, 159, 192, 0.35);
  box-shadow: 0 2px 4px rgba(12, 30, 60, 0.05),
              0 28px 56px -28px rgba(12, 30, 60, 0.35);
}

/* Filo de color que aparece al apuntar: da vida sin ensuciar el reposo. */
.card-lift::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--jade));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.card-lift:hover::before { transform: scaleX(1); }

/* ── Ícono en placa ─────────────────────────────────────────────────────── */
/* ── Placa de ícono ─────────────────────────────────────────────────────
   Un trazo fino de 24px dentro de un cuadro plano se leía pobre. Ahora la
   placa tiene volumen: degradado, filo luminoso, halo detrás y un disco de
   color que crece desde el centro al apuntar la tarjeta. */
.icon-plate {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  isolation: isolate;
  color: var(--sky);
  background:
    linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,0)) padding-box,
    linear-gradient(150deg, rgba(27,159,192,.16), rgba(46,170,74,.12)) padding-box;
  border: 1px solid rgba(27, 159, 192, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75),
              0 6px 16px -10px rgba(27, 159, 192, .55);
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
              transform 0.55s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}

/* Halo suave por detrás: separa la placa del papel. */
.icon-plate::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(150deg, var(--sky), var(--jade));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.icon-plate svg {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  stroke-width: 1.6;
}

.card-lift:hover .icon-plate,
.card-lift:focus-visible .icon-plate {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px) rotate(-3deg) scale(1.05);
  box-shadow: 0 14px 28px -14px rgba(27, 159, 192, .85);
}
.card-lift:hover .icon-plate::after,
.card-lift:focus-visible .icon-plate::after { opacity: 1; }

/* Sobre fondo oscuro el filo blanco no aplica. */
.icon-plate--ink {
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              0 6px 18px -12px rgba(0, 0, 0, .8);
  color: var(--sky);
}
.card-lift:hover .icon-plate--ink { color: #fff; }

/* ── Muestra del expediente en la portada ───────────────────────────────── */
/* Es el producto real de la agencia, no una imagen de archivo. */
.sample {
  background: #fff;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.sample__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid rgba(12, 30, 60, 0.08);
}
.sample__code {
  font-family: 'Courier New', monospace;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.sample__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sky);
  background: rgba(27, 159, 192, 0.1);
}
.sample__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-pulse 2.4s ease-in-out infinite;
}
.sample__body { padding: 1.125rem; }
.sample__bar { height: 5px; background: rgba(12,30,60,0.08); overflow: hidden; margin-bottom: 1rem; }
.sample__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sky), var(--jade));
  transition: width 1.6s var(--ease-out);
}
.sample.is-live .sample__fill { width: 58%; }

.sample__events { list-style: none; margin: 0; padding: 0; }
.sample__event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0;
  font-size: 0.8125rem;
  color: rgba(12, 30, 60, 0.75);
}
.sample__event::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--jade);
}
/* Se ve apagado pero legible: a 0.35 daba 2.18:1 y WCAG pide 4.5 para texto. */
.sample__event--pending { color: rgba(12, 30, 60, 0.65); }
.sample__event--pending::before { background: transparent; border: 1.5px solid rgba(12,30,60,0.2); }
.sample__when { font-size: 0.6875rem; color: rgba(12,30,60,0.62); white-space: nowrap; }

/* ── Acento de sección ──────────────────────────────────────────────────── */
.accent-rule {
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--jade));
  display: block;
  margin-bottom: 1.5rem;
}

/* ── Resplandor de fondo, para que las bandas claras no queden planas ───── */
.glow {
  position: relative;
  isolation: isolate;
}
.glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(46rem, 80vw);
  height: min(46rem, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,159,192,0.10), transparent 68%);
  pointer-events: none;
}
.glow--tr::after { top: -18rem; right: -14rem; }
.glow--bl::after { bottom: -20rem; left: -16rem; }

@media (prefers-reduced-motion: reduce) {
  .card-lift:hover { transform: none; }
  .sample__badge::before { animation: none; }
}

/* ==========================================================================
   GLOBO DE RUTAS — fondo de la portada
   --------------------------------------------------------------------------
   Malla de esfera con arcos de comercio convergiendo en México. La geometría
   la genera tools/make_globe.py; aquí solo vive el movimiento.

   Se anima stroke-dashoffset, opacity y transform: nada que obligue al
   navegador a recalcular el layout.
   ========================================================================== */
/* La sección lleva la clase .hero-bg del diseño original, no .hero. */
.hero-bg { position: relative; isolation: isolate; }

.hero__scene {
  position: absolute;
  inset: 0;
  /* Con z-index negativo la escena se iba detrás del fondo de la sección.
     En 0 queda encima del degradado y debajo del contenido, que va en z-10. */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Fondo, no protagonista: se atenúa en conjunto y se desvanece hacia el
     centro y los bordes, para que nunca compita con el texto. */
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 78% 45%, #000 12%, rgba(0,0,0,.45) 48%, transparent 82%);
  mask-image: radial-gradient(ellipse 85% 75% at 78% 45%, #000 12%, rgba(0,0,0,.45) 48%, transparent 82%);
}

/* Luz de fondo: da profundidad al azul plano. */
.hero__scene::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 90vw; height: 90vw;
  max-width: 1200px; max-height: 1200px;
  background: radial-gradient(circle at 50% 50%,
              rgba(27, 159, 192, 0.16) 0%,
              rgba(27, 159, 192, 0.06) 35%,
              transparent 68%);
  pointer-events: none;
}

.globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: globe-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes globe-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

/* Malla fija. Animar la opacidad de todo el grupo repintaba el SVG completo
   en cada cuadro, y el cambio (0.85 a 1) apenas se percibía. */
.globe__mesh { opacity: 0.92; }

/* Cada ruta se dibuja y el trazo viaja hacia el destino. */
.globe__dash {
  stroke-dasharray: 34 calc(var(--len) * 1px);
  stroke-dashoffset: calc(var(--len) * 1px);
  animation: route-travel 6.5s linear infinite;
}
.globe__dash--1 { animation-delay: 0s;    animation-duration: 6.5s; }
.globe__dash--2 { animation-delay: 1.1s;  animation-duration: 7.8s; }
.globe__dash--3 { animation-delay: 2.3s;  animation-duration: 5.9s; }
.globe__dash--4 { animation-delay: 3.4s;  animation-duration: 8.4s; }
.globe__dash--5 { animation-delay: 4.6s;  animation-duration: 7.1s; }

@keyframes route-travel {
  from { stroke-dashoffset: calc(var(--len) * 1px); }
  to   { stroke-dashoffset: calc(var(--len) * -1px); }
}

/* Nodos fijos por la misma razón: el movimiento lo dan las rutas y el pulso. */
.globe__node { fill-opacity: 0.7; }

/* Anillo que se expande sobre el destino, como un radar. */
.globe__pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: dest-pulse 3s ease-out infinite;
}
@keyframes dest-pulse {
  0%   { transform: scale(0.6); stroke-opacity: 0.9; }
  70%  { transform: scale(3.2); stroke-opacity: 0; }
  100% { transform: scale(3.2); stroke-opacity: 0; }
}

/* La retícula fina del diseño original estorba sobre el globo. */
.hero--scene::before { display: none; }

@media (max-width: 63.99rem) {
  /* En pantallas angostas el globo compite con el texto: se corre y se atenúa. */
  .globe { animation-name: globe-in-soft; }
  @keyframes globe-in-soft {
    from { opacity: 0; }
    to   { opacity: 0.5; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe { animation: none; opacity: 1; }
  .globe__mesh, .globe__dash, .globe__node, .globe__pulse { animation: none; }
  .globe__dash { stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: .5; }
}


/* ── Alto del héroe ──────────────────────────────────────────────────────
   min-h-screen en una pantalla de 1400px de alto dejaba 600px de vacío
   arriba del titular. Se acota para que el contenido siempre quede cerca
   del centro óptico. */
section.hero-bg {
  min-height: min(100vh, 52rem);
  padding-top: clamp(7rem, 12vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

/* Placa chica, para las celdas de aduana. */
.icon-plate--sm { width: 2.75rem; height: 2.75rem; }
.icon-plate--sm svg { width: 1.25rem; height: 1.25rem; }

/* La celda de aduana responde como tarjeta, aunque no sea un enlace. */
.office-cell { transition: background 0.3s ease; }
.office-cell:hover { background: #fff; }
.office-cell:hover .icon-plate {
  color: #fff;
  border-color: transparent;
  transform: rotate(-3deg) scale(1.05);
}
.office-cell:hover .icon-plate::after { opacity: 1; }

/* ==========================================================================
   MARCA DEL HEROE
   --------------------------------------------------------------------------
   El logotipo a color no sirve sobre el navy: su azul dominante (#006090) da
   2.43:1 contra #0C1E3C y el nombre se deshace. En negativo conserva el trazo
   exacto del logotipo y queda en blanco puro, que es lo que usa el titular.
   ========================================================================== */
.hero-brand { margin-bottom: 1rem; }

/* El heroe va justo de alto: con el lema en grande se salia de la ventana. Se
   recorta su aire, no el titular. 7rem siguen despejando la barra fija. */
@media (min-width: 1024px) {
  #inicio.hero-bg { padding-top: 7rem; padding-bottom: 3.5rem; }
}

.hero-brand__logo {
  display: block;
  height: clamp(3.5rem, 7vw, 5.5rem);
  width: auto;
  filter: brightness(0) invert(1);
}

.hero-brand__tag {
  margin: 0.9rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 500;
  /* A mayor cuerpo, menos interletraje. */
  letter-spacing: 0.12em;
  line-height: 1.16;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Dos lineas deliberadas, no un salto por falta de sitio: asi el lema puede ir
   al doble de cuerpo sin salirse de la columna. */
.hero-brand__tag span { display: block; }

/* La marca tambien responde al alto de la ventana, no solo al ancho: en un
   portatil de 800 px el bloque en grande sacaba el heroe de pantalla y cortaba
   la fila de cifras. Aqui baja un punto todo el conjunto. */
@media (min-width: 1024px) and (max-height: 880px) {
  #inicio.hero-bg { padding-top: 6rem; padding-bottom: 2.5rem; }
  .hero-brand__logo { height: 3.75rem; }
  .hero-brand__tag { font-size: 1.7rem; }
  .hero-title { font-size: clamp(2.4rem, 4.6vw, 4rem) !important; }
}

/* ==========================================================================
   CARRUSEL DE CONTACTO DIRECTO
   --------------------------------------------------------------------------
   Rota la persona que atiende y su correo. Las fichas se apilan en la misma
   celda de la retícula, de modo que el bloque mide lo que la ficha mas alta y
   no da un salto cada vez que cambia.
   ========================================================================== */
/* El area tactil mide 24px (minimo de WCAG 2.5.8) con el punto centrado
   dentro, asi que la fila queda ligeramente entrada respecto del texto. */
.people__dots {
  display: flex;
  gap: 0.125rem;
  margin: 0.5rem 0 0;
}

.people__dot {
  /* 24px de lado: el minimo que pide WCAG 2.5.8 para el dedo. El punto
     visible es mas chico y vive centrado dentro de esa area. */
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.people__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(12, 30, 60, 0.22);
  transition: background 0.3s ease, transform 0.3s var(--ease-out);
}
.people__dot:hover::after { background: rgba(12, 30, 60, 0.4); }
.people__dot.is-active::after { background: var(--teal); transform: scale(1.3); }

.people__stage { display: grid; }

.people__item {
  /* Todas en la misma celda: se superponen en vez de apilarse. */
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
.people__item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.people__name { margin: 0; line-height: 1.35; }
.people__area { margin: 0.125rem 0 0; }

/* Telefono y correo de la persona, uno por renglon. */
.people__lines {
  margin: 0.4rem 0 0;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
}
.people__phone,
.people__mail {
  display: block;
  text-decoration: none;
  transition: color 0.25s ease;
}
.people__phone { color: var(--navy); font-weight: 600; }
.people__mail { color: var(--teal-ink); }
.people__phone:hover,
.people__mail:hover { color: var(--navy); text-decoration: underline; }

.people__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* 24px de alto para el dedo, como pide WCAG 2.5.8. */
  padding: 0.25rem 0;
  color: var(--jade-ink);
  text-decoration: none;
  transition: color 0.25s ease;
}
.people__wa:hover { color: var(--navy); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .people__item { transition: none; }
  .people__dot::after { transition: none; }
}

/* Banda del plano: cierra la seccion de contacto centrada en el eje de la
   pagina. Se le da el ancho del formulario para que las dos piezas rimen. */
.place-band {
  max-width: 42rem;
  margin: 3.5rem auto 0;
}

/* ==========================================================================
   TARJETA DE UBICACION
   --------------------------------------------------------------------------
   Tres bandas simetricas respecto del eje vertical: encabezado centrado, el
   plano con el marcador sobre ese eje, y un pie de tres columnas con la
   accion al centro. Las columnas laterales del pie son 1fr, de modo que la
   accion cae en el centro exacto aunque las anotaciones midan distinto.
   ========================================================================== */
.place {
  background: #fff;
  border: 1px solid rgba(12, 30, 60, 0.08);
  box-shadow: 0 1px 2px rgba(12, 30, 60, 0.04),
              0 16px 40px -28px rgba(12, 30, 60, 0.4);
  overflow: hidden;
}

.place__head {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}
.place__head .section-label { margin: 0; }

.place__address {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(12, 30, 60, 0.78);
}
/* Cada dato es indivisible: el renglon solo puede partir entre uno y otro,
   nunca a media localidad, que en movil dejaba "Mexico" huerfano. */
.place__address span { white-space: nowrap; }

/* ── El plano ─────────────────────────────────────────────────────────── */
.place__map {
  position: relative;
  display: block;
  height: var(--map-h, 300px);
  border-top: 1px solid rgba(12, 30, 60, 0.08);
  line-height: 0;
  text-decoration: none;
  overflow: hidden;
}
/* Filete de acento, degradado hacia los dos extremos para que no rompa la
   simetria del conjunto. */
.place__map::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--sky) 32%, var(--jade) 68%, transparent);
}
.citymap {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.7s var(--ease-out);
}
.place__map:hover .citymap { transform: scale(1.04); }

/* Anillo que late sobre el marcador, como el destino del globo. */
.citymap__halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: dest-pulse 3s ease-out infinite;
}

/* Rotulo del marcador. Placa clara con filete, no una pastilla oscura pegada
   encima: el lenguaje es el mismo de las demas placas de la pagina. */
.place__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 34px);
  padding: 0.3125rem 0.6875rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(12, 30, 60, 0.14);
  box-shadow: 0 6px 18px -12px rgba(12, 30, 60, 0.7);
  color: var(--navy);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Pie: anotacion | accion | atribucion ─────────────────────────────── */
.place__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(12, 30, 60, 0.08);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.place__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-self: start;
  color: rgba(12, 30, 60, 0.62);
}

.place__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sky);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.25s var(--ease-out), color 0.25s ease;
}
.place__link:hover { gap: 0.7rem; color: var(--teal-ink); }

.place__credit { justify-self: end; }
.place__credit a {
  /* Altura suficiente para el dedo: WCAG 2.5.8 pide 24px como minimo. */
  display: inline-block;
  padding: 0.3125rem 0.125rem;
  color: rgba(12, 30, 60, 0.62);
  text-decoration: none;
  transition: color 0.25s ease;
}
.place__credit a:hover { color: var(--navy); text-decoration: underline; }

/* Sin sitio para tres columnas: la accion se va arriba y las anotaciones
   quedan debajo, cada una en su extremo. */
@media (max-width: 26rem) {
  .place__foot { grid-template-columns: 1fr 1fr; row-gap: 0.625rem; }
  .place__link { order: -1; grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .citymap__halo { animation: none; }
  .place__map:hover .citymap { transform: none; }
}


/* ── Animaciones en pausa fuera de pantalla ──────────────────────────────
   main.js marca con .is-paused las escenas animadas (globo, mapa) que no se
   ven. Las animaciones de SVG no las acelera la GPU: sin esto se repintaban
   en cada cuadro aunque el visitante ya hubiera bajado de la portada. */
.is-paused,
.is-paused * { animation-play-state: paused !important; }