/* ==========================================================================
   NV Group — componentes.css
   Botones, hero, tarjetas, proceso, formulario. Se carga TERCERO.
   ========================================================================== */

/* --- Botones ---------------------------------------------------------------
   Dos formas, como en el sitio de empresas de Apple:
   1. .boton        → rectángulo sólido, para la acción principal.
   2. .boton-enlace → texto azul con flecha, para la secundaria.
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.5em;
  background: var(--tinta);
  color: var(--fondo);
  font-size: var(--t-chico);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--radio);
  border: 1px solid var(--tinta);
  transition: transform 0.25s var(--curva),
              background 0.25s var(--curva-neta),
              box-shadow 0.25s var(--curva);
  will-change: transform;
}

.boton:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.boton:active { transform: translateY(0); box-shadow: none; }

.boton--azul {
  background: var(--acento-vivo);
  border-color: var(--acento-vivo);
  color: #fff;
}

.boton--azul:hover { background: #0077ed; }

/* Botón rectangular negro con chevron que gira hacia abajo al pasar el mouse:
   señala que el botón baja a otra sección de la misma página. */
.boton--baja {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--fondo);
  padding-right: 1.15em;
}

.boton__chevron {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.45s var(--curva);
}

.boton--baja:hover .boton__chevron,
.boton--baja:focus-visible .boton__chevron { transform: rotate(90deg); }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea);
}

.boton--linea:hover {
  background: transparent;
  border-color: var(--tinta);
  box-shadow: none;
}

.seccion--oscura .boton--linea,
.pie .boton--linea {
  color: var(--tinta-inv);
  border-color: var(--linea-inv);
}

.seccion--oscura .boton--linea:hover { border-color: var(--tinta-inv); }

/* Botón tipo enlace */
.boton-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--acento);
  font-size: var(--t-chico);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.boton-enlace::after {
  content: "›";
  font-size: 1.25em;
  line-height: 0.9;
  transition: transform 0.25s var(--curva);
}

/* Sin subrayado al pasar el mouse: lo único que se mueve es la flecha.
   El subrayado en un enlace grande y suelto ensucia más de lo que ayuda. */
.boton-enlace:hover::after { transform: translateX(4px); }

.seccion--oscura .boton-enlace { color: #4da3ff; }

.botonera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

/* --- Hero ------------------------------------------------------------------
   El lienzo WebGL vive detrás del texto, a pantalla completa.
   Si WebGL no está disponible, queda el fondo plano y no se nota.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 84px;
  overflow: hidden;
}

.hero__lienzo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;                      /* lo sube el JS cuando el shader compiló */
  transition: opacity 1.2s ease-out;
}

.hero__lienzo.visible { opacity: 1; }

/* --- Video de fondo -------------------------------------------------------
   Aparece recién cuando hay imagen: si se mostrara antes, se vería un
   rectángulo negro mientras carga.
   -------------------------------------------------------------------------- */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease-out;
  pointer-events: none;
}

.hero__video.visible { opacity: 1; }

/* Velo que garantiza contraste del texto sobre el fondo */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 45%, rgba(250, 249, 247, 0.94) 0%, rgba(250, 249, 247, 0.72) 38%, rgba(250, 249, 247, 0) 70%);
}

/* --- Hero sobre video ------------------------------------------------------
   El video se ve ENTERO, sin blanquear una zona para el texto. Para que el
   texto se lea, se invierte: pasa a blanco y el video se tiñe parejo.

   El velo tiene dos capas y las dos hacen falta:
   1. una oscura pareja, que baja el brillo general del video;
   2. una más marcada abajo, donde vive el texto, porque una fábrica tiene
      luces y superficies claras que aparecen en cualquier cuadro.

   Sin la segunda, el texto blanco desaparece cada vez que pasa una luz.
   -------------------------------------------------------------------------- */

.hero--video .hero__velo {
  background:
    linear-gradient(to bottom,
      rgba(8, 9, 12, 0.52) 0%,
      rgba(8, 9, 12, 0.38) 30%,
      rgba(8, 9, 12, 0.55) 68%,
      rgba(8, 9, 12, 0.76) 100%),
    linear-gradient(95deg,
      rgba(8, 9, 12, 0.42) 0%,
      rgba(8, 9, 12, 0.18) 55%,
      rgba(8, 9, 12, 0.06) 100%);
}

/* --- Texto en blanco -------------------------------------------------------
   La sombra es amplia y floja, no dura: se trata de despegar la letra del
   fondo, no de dibujarle un contorno. Una sombra marcada sobre video se ve
   barata al instante.
   -------------------------------------------------------------------------- */

.hero--video h1,
.hero--video .hero__bajada,
.hero--video .hero__responsabilidad {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 40px rgba(0, 0, 0, 0.35);
}

.hero--video h1 { color: #fff; }

.hero--video .hero__bajada { color: rgba(255, 255, 255, 0.86); }

.hero--video .hero__responsabilidad {
  color: #fff;
  border-left-color: rgba(255, 255, 255, 0.65);
}

.hero--video .hero__baja { color: rgba(255, 255, 255, 0.6); }

.hero--video .hero__baja span {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent);
}

/* --- Botones de vidrio -----------------------------------------------------
   Vidrio esmerilado con un brillo arriba y un borde claro: la luz del fondo
   se filtra y el botón parece una pieza apoyada sobre la imagen, no un
   rectángulo pegado encima.
   -------------------------------------------------------------------------- */

.hero--video .boton {
  border-radius: 100px;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transition: transform 0.35s var(--curva), background 0.35s var(--curva),
              box-shadow 0.35s var(--curva), border-color 0.35s var(--curva);
}

/* El principal: vidrio claro, casi sólido. Es la acción que queremos. */
.hero--video .boton--azul {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.9);
  color: #10121a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 10px 34px rgba(0, 0, 0, 0.30);
}

.hero--video .boton--azul:hover {
  background: #fff;
  transform: translateY(-1px) scale(1.015);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
              0 14px 42px rgba(0, 0, 0, 0.38);
}

/* El secundario: vidrio transparente, se ve el video a través. */
.hero--video .boton--baja {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
              0 8px 28px rgba(0, 0, 0, 0.22);
}

.hero--video .boton--baja:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px) scale(1.015);
}

/* Si el navegador no puede desenfocar, el vidrio transparente sería ilegible.
   En ese caso se cierra a un fondo oscuro sólido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero--video .boton--baja { background: rgba(18, 20, 26, 0.72); }
}

/* En el celular el texto ocupa todo el ancho, así que el velo de abajo tiene
   que ser más firme: no hay una mitad libre donde el video respire. */
@media (max-width: 860px) {
  .hero--video .hero__velo {
    background:
      linear-gradient(to bottom,
        rgba(8, 9, 12, 0.50) 0%,
        rgba(8, 9, 12, 0.42) 24%,
        rgba(8, 9, 12, 0.66) 62%,
        rgba(8, 9, 12, 0.82) 100%);
  }
}

.hero__interior {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(4rem, 12vh, 8rem);
}

.hero__gancho {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tinta-suave);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linea);
  border-radius: 100px;
  padding: 0.45em 0.95em;
  margin-bottom: 1.75rem;
}

.hero__gancho::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento-vivo);
  flex: none;
}

.hero h1 { max-width: 17ch; margin-bottom: 1.5rem; }

/* --- La palabra que se escribe sola ----------------------------------------
   El ancho mínimo lo calcula el JavaScript midiendo la palabra más larga, y
   se aplica a ESTE contenedor. Sin la reserva, el título se reacomoda con
   cada cambio de palabra y la línea salta.

   La reserva NO puede ir en el texto: si va ahí, el cursor queda clavado al
   final del espacio reservado en vez de seguir a la palabra, y se ve como si
   estuviera escribiendo en otro lado. Acá el sobrante queda a la derecha,
   invisible, y el cursor va pegado a la última letra como corresponde.
   -------------------------------------------------------------------------- */

.maquina {
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  vertical-align: baseline;
}

.maquina__texto { display: inline; }

.maquina__cursor {
  display: inline-block;
  width: 0.055em;
  height: 0.78em;
  margin-left: 0.06em;
  background: currentColor;
  border-radius: 1px;
  animation: parpadeo 1.05s steps(1) infinite;
  transform: translateY(0.02em);
}

@keyframes parpadeo {
  0%, 45%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .maquina__cursor { display: none; }
}

/* En el celular la palabra se lleva SIEMPRE un renglón para ella sola.

   Reservar el ancho no alcanzaba: `text-wrap: balance` reparte los renglones
   mirando el contenido, así que con una palabra corta armaba un título de dos
   renglones y con una larga de tres, y el bloque entero saltaba al cambiar de
   ciudad. Con la palabra en su propio renglón el corte del texto de arriba es
   siempre el mismo, mida lo que mida la ciudad. En pantalla grande sobra
   ancho y no hace falta: ahí sigue en la misma línea. */
@media (max-width: 860px) {
  .maquina { display: block; }

  /* El texto fijo se corta solo, sin depender de la ciudad. */
  .hero__interior h1 { text-wrap: pretty; }
}

.hero__bajada {
  font-size: var(--t-guia);
  line-height: 1.45;
  color: var(--tinta-suave);
  max-width: 40ch;
  margin-bottom: 1.5rem;
}

.hero__responsabilidad {
  font-size: var(--t-cuerpo);
  font-weight: 500;
  color: var(--tinta);
  max-width: 38ch;
  padding-left: 1rem;
  border-left: 2px solid var(--tinta);
}

/* Indicador de scroll */
.hero__baja {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: var(--t-micro);
  color: var(--tinta-tenue);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.hero__baja span {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--linea), transparent);
  animation: baja 2.4s var(--curva-neta) infinite;
}

@keyframes baja {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 640px) {
  .hero__baja { display: none; }
  .hero h1 { max-width: 100%; }
}

/* --- Bloque "Qué hacemos" --------------------------------------------------
   Antes la frase corta ("NV Group, tu interlocutor") iba arriba con el mismo
   peso visual que un párrafo largo, y las dos peleaban. Ahora hay una
   jerarquía clara: título grande, una bajada, el detalle en dos columnas y
   el remate abajo separado por una línea.
   -------------------------------------------------------------------------- */

.interlocutor__titulo {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 16ch;
  margin-bottom: 1.5rem;
}

.interlocutor__bajada {
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--tinta-suave);
  max-width: 30ch;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.interlocutor__cuerpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}

@media (max-width: 800px) {
  .interlocutor__cuerpo { grid-template-columns: 1fr; gap: 1.25rem; }
}

.interlocutor__texto {
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  color: var(--tinta-suave);
}

.interlocutor__texto + .interlocutor__texto { margin-top: 0.75rem; }

.interlocutor__cierre {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}

.interlocutor__cierre p {
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: var(--tinta);
  max-width: 30ch;
}

/* --- Tarjeta genérica ----------------------------------------------------- */

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva);
}

.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

.tarjeta h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.018em;
  margin-bottom: 0.75rem;
}

.tarjeta p {
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--tinta-suave);
}

.seccion--hueca .tarjeta { background: var(--blanco); }

/* --- Bloque de la red de fábricas (el diferencial) -------------------------- */

.red__columnas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}

@media (max-width: 700px) { .red__columnas { grid-template-columns: 1fr; } }

/* --- Las dos columnas, con la línea de arriba como indicador --------------
   La línea gris es el riel; encima se dibuja una línea oscura que crece de
   izquierda a derecha en la columna elegida. Solo una está encendida a la vez.

   En escritorio manda el mouse: mientras esté sobre el grupo, se ilumina la
   que se está mirando. Al salir, vuelve a mandar la elegida con el clic.
   En el celular, donde no hay mouse, la elige el toque.
   -------------------------------------------------------------------------- */

.red__col {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--linea);
  transition: color 0.4s var(--curva-neta);
}

.red__col::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--tinta);
  opacity: 1;
  transition: width 0.6s var(--curva), opacity 0.3s var(--curva-neta);
}

.red__col.encendida::before { width: 100%; }

/* El mouse por encima ADELANTA cómo va a quedar, pero en un tono flojo.
   El clic es el que la deja marcada en negro.

   Antes el mouse ganaba sobre el clic, y el resultado era que al hacer clic
   no cambiaba nada a la vista —el cursor ya la tenía iluminada— y parecía
   que el botón no andaba. Vista previa y elección tienen que verse distinto. */
@media (hover: hover) and (pointer: fine) {
  .red__col:not(.encendida):hover::before { width: 100%; opacity: 0.25; }
  .red__col:not(.encendida) { cursor: pointer; }
}

/* La columna apagada baja un poco el contraste del título: refuerza cuál
   está elegida sin necesidad de leer la línea. */
.red__col h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.75rem;
  color: var(--tinta-tenue);
  transition: color 0.4s var(--curva-neta);
}

.red__col.encendida h3 { color: var(--tinta); }

@media (hover: hover) and (pointer: fine) {
  .red__col:not(.encendida):hover h3 { color: var(--tinta-suave); }
}

.red__col p {
  font-size: var(--t-chico);
  color: var(--tinta-suave);
  line-height: 1.55;
}

.red__col p + p { margin-top: 0.75rem; }

/* Variante más chica de .guia, para el párrafo de detalle que va debajo
   de la afirmación principal. */
.guia--menor {
  font-size: var(--t-cuerpo);
  line-height: 1.65;
}

/* Cuando .destacado envuelve varios párrafos */
.destacado p {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.destacado p + p { margin-top: 0.3rem; }

/* --- Proceso ---------------------------------------------------------------
   En escritorio: carril horizontal que se recorre con el scroll (lo maneja
   GSAP). En móvil: se convierte en una lista vertical con scroll lateral
   normal, sin depender de nada.
   -------------------------------------------------------------------------- */

.proceso { overflow: hidden; }

/* Modo carril: la sección se clava en pantalla mientras las etapas desfilan.
   Tiene que entrar EXACTA en el alto de la ventana — si sobra alto, al fijarse
   se corta la parte de abajo y el visitante nunca la ve.
   La clase la pone js/animacion.js, solo cuando el carril se monta de verdad. */
.proceso--carril {
  height: 100svh;
  display: flex;
  flex-direction: column;
  /* Arranca arriba, no centrado: así la etiqueta queda a la MISMA altura que
     en el resto de las secciones. Centrado, quedaba unos 30px más arriba y
     se notaba al pasar de una sección a la otra. */
  justify-content: flex-start;
  padding-block: var(--seccion-y) clamp(1.25rem, 3vh, 2.25rem);
  /* Ajustado: con el `gap` anterior el medidor quedaba a 7px del borde y el
     halo verde del punto salía cortado. */
  gap: clamp(1rem, 2.4vh, 1.9rem);
}

/* Con la sección clavada, TODO tiene que entrar en el alto de la ventana.
   Los textos de las etapas son largos, así que acá se gana espacio por
   tres lados: cabecera en dos columnas, tarjetas más anchas (menos
   renglones) y un techo de alto por si algún texto se pasa. */

.proceso--carril .seccion__cabecera {
  margin-bottom: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.proceso--carril .seccion__cabecera .etiqueta { grid-column: 1 / -1; }
.proceso--carril .seccion__cabecera h2 { margin-bottom: 0; }
.proceso--carril .seccion__cabecera .guia { max-width: 46ch; }

@media (max-width: 1100px) {
  .proceso--carril .seccion__cabecera { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* El medidor ya está separado por el `gap` del contenedor. Sin este cero
   se suma su propio margen y la barra queda pegada al borde de abajo,
   con el halo verde cortado. */
.proceso--carril .proceso__medidor  { margin-top: 0; }

.proceso--carril .etapa {
  flex-basis: clamp(320px, 34vw, 470px);
  min-height: 0;
  /* Techo: lo que sobre se recorre dentro de la tarjeta. Es la red de
     seguridad para cuando un texto crece desde el panel. */
  max-height: calc(100svh - 340px);
}

.proceso__pista {
  display: flex;
  gap: clamp(1.25rem, 2vw, 2rem);
  padding-block: 1rem;
}

/* `will-change` SOLO en el carril de escritorio, que es el único que mueve la
   pista con transform. En el celular la pista se recorre con el dedo, y
   dejarla en una capa aparte hace que se atrase respecto del resto de la
   página: las tarjetas parecen despegarse al deslizar. */
.proceso--carril .proceso__pista { will-change: transform; }

.etapa {
  flex: 0 0 clamp(280px, 30vw, 400px);
  background: var(--blanco);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  min-height: clamp(340px, 42vh, 440px);
}

/* Cabeza de la etapa: el icono a la izquierda, el número a la derecha.
   OJO con el `margin-bottom: auto`: si el bloque de abajo se ancla al fondo
   de la tarjeta, un título de una línea y otro de dos arrancan a distinta
   altura y la fila entera se ve desprolija. Todo se alinea desde ARRIBA. */
.etapa__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

/* El icono va suelto, sin recuadro ni fondo: el marco lo achicaba y lo hacía
   parecer un botón.

   Un color por etapa, tomados de la paleta de sistema de Apple. No es
   decoración: seis tarjetas iguales en fila se leen como una sola masa, y el
   color le da a cada una una identidad que se reconoce de reojo.
   -------------------------------------------------------------------------- */
.etapa__icono {
  display: block;
  flex: none;
  color: #34c759;
  transition: transform 0.45s var(--curva);
}

.etapa__icono--factibilidad { color: #34c759; }  /* verde    */
.etapa__icono--fabrica      { color: #af52de; }  /* violeta  */
.etapa__icono--muestras     { color: #ff9500; }  /* naranja  */
.etapa__icono--calidad      { color: #007aff; }  /* azul     */
.etapa__icono--logistica    { color: #5856d6; }  /* índigo   */
.etapa__icono--entrega      { color: #ff2d55; }  /* rosa     */

.etapa__icono .icono { width: 42px; height: 42px; display: block; }

.etapa:hover .etapa__icono { transform: translateY(-2px) scale(1.05); }

.etapa__numero {
  font-family: var(--fuente-numero);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--acento);
}

/* El título reserva SIEMPRE el alto de dos renglones, tenga uno o dos.
   Así todos los títulos empiezan a la misma altura y todos los textos
   también, sin importar cuánto mida cada uno. */
.etapa h3 {
  min-height: calc(2 * 1.16em);
  display: flex;
  align-items: flex-start;
}

.etapa h3 {
  font-size: 1.375rem;
  letter-spacing: -0.022em;
  margin-bottom: 0.875rem;
}

.etapa p {
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* Los textos de las etapas ahora tienen varios párrafos. Si alguno se pasa
   del alto de la tarjeta, se recorre con la rueda dentro de la tarjeta en
   vez de desbordar sobre la de al lado. */
.etapa__texto {
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-width: thin;
}

.etapa__texto p + p { margin-top: 0.65rem; }

/* --- Barra de avance del carril -------------------------------------------
   Se llena en verde a medida que se recorren las etapas. El punto de la
   punta lleva un halo que late: da la sensación de que algo está avanzando,
   no de que hay una línea pintada.
   -------------------------------------------------------------------------- */

.proceso__medidor {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.proceso__avance {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 99px;
  /* visible, no hidden: el halo del punto tiene que poder salirse. */
  overflow: visible;
}

.proceso__avance i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  display: block;
  border-radius: 99px;
  background: linear-gradient(90deg, #30d158 0%, #34c759 100%);
  box-shadow: 0 0 14px rgba(52, 199, 89, 0.45);
}

/* El punto de la punta */
.proceso__avance i::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.20),
              0 0 16px rgba(52, 199, 89, 0.75);
  animation: latido 2s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.20), 0 0 16px rgba(52, 199, 89, 0.75); }
  50%      { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0.10), 0 0 22px rgba(52, 199, 89, 0.95); }
}

/* Contador de etapa: dice en qué punto del proceso está. */
.proceso__cuenta {
  flex: none;
  font-family: var(--fuente-numero);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
}

.proceso__cuenta b {
  color: #248a3d;   /* el verde, un tono más oscuro para que se lea */
  font-weight: 600;
}

/* Quien pidió menos movimiento no ve el latido. */
@media (prefers-reduced-motion: reduce) {
  .proceso__avance i::after { animation: none; }
}

/* Sin JS o en móvil: el carril se recorre con el dedo */
.proceso--simple .proceso__pista {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--gutter);
  scrollbar-width: none;

  /* Sin esto el relleno de la izquierda NO SE VE, aunque esté puesto: al
     enganchar la primera tarjeta, el navegador la alinea con el borde del
     contenedor y se come los 20px, dejándola pegada al margen. `scroll-padding`
     le dice dónde tiene que enganchar de verdad. */
  scroll-padding-inline: var(--gutter);

  /* Al llegar al final del carril, el envión seguía de largo y lo agarraba la
     página: se deslizaba al costado y la página se movía sola para arriba o
     para abajo. `contain` corta esa cadena; el carril se frena en su borde. */
  overscroll-behavior-inline: contain;
}

.proceso--simple .proceso__pista::-webkit-scrollbar { display: none; }
.proceso--simple .etapa { scroll-snap-align: start; }

/* El relleno de la DERECHA de un contenedor con scroll horizontal lo ignoran
   casi todos los navegadores: la última tarjeta queda pegada al borde. Se
   resuelve con un elemento vacío al final que ocupa ese lugar. */
.proceso--simple .proceso__pista::after {
  content: "";
  flex: 0 0 var(--gutter);
}

/* Se oculta el medidor ENTERO, no solo la barra. Antes se escondía la barra
   y quedaba el contador "01 / 06" suelto contra el margen izquierdo, sin
   nada al lado: parecía un resto de algo. */
.proceso--simple .proceso__medidor { display: none; }

/* --- "Deslizá para ver" ----------------------------------------------------
   Solo en el celular, y solo hasta que la persona desliza por primera vez.
   Un carril horizontal dentro de una página que se recorre en vertical no se
   descubre solo: si no se avisa, se leen dos de las seis etapas.
   -------------------------------------------------------------------------- */

.proceso__desliza {
  display: none;
  width: fit-content;
  margin: 1.25rem auto 0;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  transition: opacity 0.5s var(--curva);
}

.proceso--simple .proceso__desliza { display: flex; }

/* Cuando ya deslizó, la leyenda cumplió su función y se va. */
.proceso--simple.ya-deslizo .proceso__desliza { opacity: 0; pointer-events: none; }

.proceso__desliza svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #34c759;
  animation: desliza 2.2s var(--curva-neta) infinite;
}

/* El borde derecho del carril se desvanece: se ve que las tarjetas siguen.
   Es la señal que de verdad hace entender que hay más — la leyenda sola se
   lee, pero esto se entiende sin leer.

   POR QUÉ UNA CAPA PINTADA ENCIMA Y NO UN `mask-image`

   Con máscara, el navegador tiene que sacar el carril entero a una capa
   aparte para poder recortarlo. Y al primer deslizamiento se le sacaba la
   máscara: la capa se destruía en pleno movimiento y el bloque de tarjetas
   pegaba un salto vertical justo cuando el dedo lo estaba corriendo. Era eso
   lo que se veía "escapar".

   Acá el degradado se pinta ENCIMA, del color del fondo. No toca las
   tarjetas, no arma ninguna capa, y para que se vaya alcanza con bajarle la
   opacidad, que es la propiedad más barata que hay para animar.
   -------------------------------------------------------------------------- */
.proceso--simple .proceso__carril { position: relative; }

.proceso--simple .proceso__carril::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(250, 249, 247, 0) 0%, var(--fondo) 78%);
  transition: opacity 0.45s var(--curva);
}

/* Cuando ya llegó al final, el desvanecido sobra: no hay nada más que ver. */
.proceso--simple.ya-deslizo .proceso__carril::after { opacity: 0; }

@keyframes desliza {
  0%, 100% { transform: translateX(0);    opacity: 0.45; }
  45%      { transform: translateX(7px);  opacity: 1; }
  70%      { transform: translateX(4px);  opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .proceso__desliza svg { animation: none; opacity: 0.8; }
}

/* --- Servicios: tarjetas que giran ----------------------------------------
   Adelante va el título sobre el fondo; el botón de abajo a la derecha la da
   vuelta y muestra la descripción.

   Dos cosas que suelen salir mal en este componente y acá están resueltas:
   1. Las dos caras tienen que medir lo mismo, o al girar cambia el alto de la
      fila entera. Por eso las dos son `position:absolute` dentro de un
      contenedor con altura propia.
   2. La cara de atrás no puede quedar "clickeable" mientras está escondida:
      si queda, el tabulador se mete en botones invisibles.
   -------------------------------------------------------------------------- */

.servicio {
  position: relative;
  height: clamp(280px, 34vh, 340px);
  perspective: 1600px;
}

.servicio__giro {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s var(--curva);
  transform-style: preserve-3d;
  will-change: transform;
}

.servicio.dado-vuelta .servicio__giro { transform: rotateY(180deg); }

.servicio__cara {
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

/* --- Cara de adelante ----------------------------------------------------- */

.servicio__cara--frente {
  background: var(--fondo-oscuro);
  color: var(--tinta-inv);
}

.servicio__foto,
.servicio__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* El tinte es lo que garantiza que el título se lea SIEMPRE, con cualquier
   foto que se suba después. Sin esto, una foto clara se come el texto.

   Es fuerte abajo (donde va el título) y flojo arriba, para que el fondo se
   vea. Si se sube parejo, la tarjeta queda como un rectángulo negro y da lo
   mismo que haya foto o no. */
.servicio__tinte {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(8, 8, 10, 0.94) 0%,
    rgba(8, 8, 10, 0.80) 30%,
    rgba(8, 8, 10, 0.42) 62%,
    rgba(8, 8, 10, 0.20) 100%
  );
}

/* El fondo se acerca apenas al pasar el mouse. */
.servicio__foto,
.servicio__fondo { transition: transform 0.9s var(--curva); }

.servicio:not(.dado-vuelta) .servicio__cara--frente:hover .servicio__foto,
.servicio:not(.dado-vuelta) .servicio__cara--frente:hover .servicio__fondo {
  transform: scale(1.05);
}

.servicio__titulo {
  position: relative;
  z-index: 2;
  font-size: 1.375rem;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: #fff;
  max-width: 88%;
  text-wrap: balance;
}

/* --- Cara de atrás -------------------------------------------------------- */

/* La cara de atrás va en off-black con letra blanca: la tarjeta no cambia de
   claro a oscuro al girar, mantiene el mismo peso de los dos lados. */
.servicio__cara--dorso {
  transform: rotateY(180deg);
  background: #131316;
  border: 1px solid rgba(255, 255, 255, 0.10);
  justify-content: flex-start;
}

.servicio__rotulo {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.875rem;
}

.servicio__texto {
  font-size: var(--t-chico);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* --- El botón ------------------------------------------------------------- */

.servicio__boton {
  position: absolute;
  right: clamp(1.25rem, 2.2vw, 1.75rem);
  bottom: clamp(1.25rem, 2.2vw, 1.75rem);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.3s var(--curva-neta), transform 0.3s var(--curva),
              border-color 0.3s var(--curva-neta);
}

.servicio__boton svg { width: 17px; height: 17px; }

.servicio__boton:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.08);
}

/* Sobre el dorso oscuro el botón sigue siendo claro, como en la cara de
   adelante: es el mismo control y tiene que verse igual. */
.servicio__boton--volver {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.servicio__boton--volver:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Mientras una cara está de espaldas, nada de lo que tiene adentro debe
   recibir el foco del tabulador ni el clic. */
.servicio:not(.dado-vuelta) .servicio__cara--dorso,
.servicio.dado-vuelta .servicio__cara--frente {
  pointer-events: none;
}

/* --- Por qué además se apagan con opacidad --------------------------------
   `backface-visibility: hidden` debería alcanzar para esconder la cara que
   quedó de espaldas. En iPhone NO alcanza: Safari lo ignora cuando la cara
   tiene `overflow: hidden`, y se ve el título al revés, espejado, encima de
   la descripción.

   EL DETALLE QUE HACE QUE FUNCIONE: el retraso va SOLO en la cara que se va.
   La que entra aparece de una.

   El primer intento apagaba una y prendía la otra en el mismo instante, a
   mitad del giro. Bastaba con que ese instante se corriera un cuadro para que
   las dos quedaran invisibles: la tarjeta desaparecía y reaparecía dada
   vuelta. Con este orden las dos se superponen un momento y nunca hay un
   hueco. Es el mismo patrón que usa springpark.com.ar.
   -------------------------------------------------------------------------- */

.servicio__cara { transition: opacity 0.4s var(--curva); }

.servicio.dado-vuelta .servicio__cara--frente {
  opacity: 0;
  transition-delay: 0.35s;
}

.servicio:not(.dado-vuelta) .servicio__cara--dorso {
  opacity: 0;
  transition-delay: 0.35s;
}

/* Quien pidió menos movimiento no recibe un giro en 3D: la cara de atrás
   simplemente aparece encima. */
.sin-movimiento .servicio__giro { transition: opacity 0.25s ease; transform: none !important; }
/* Sin giro no hay mitad de giro que esperar: el cambio de cara es directo. */
.sin-movimiento .servicio__cara { transition-delay: 0s; }
.sin-movimiento .servicio__cara { backface-visibility: visible; }
.sin-movimiento .servicio__cara--dorso { transform: none; opacity: 0; }
.sin-movimiento .servicio.dado-vuelta .servicio__cara--dorso { opacity: 1; }
.sin-movimiento .servicio.dado-vuelta .servicio__cara--frente { opacity: 0; }

/* --- Operaciones ---------------------------------------------------------- */

.operaciones {
  overflow: hidden;
  /* Aire de más abajo: es la banda donde vive el mapa. Sin este espacio el
     dibujo le pasa por encima al texto y no se lee ni una cosa ni la otra. */
  padding-bottom: clamp(9rem, 24vh, 15rem);
}

.operaciones__mapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease-out;

  /* El mapa se desvanece hacia arriba, que es donde está el texto. Abajo se
     ve entero. Así el dibujo nunca compite con lo que hay que leer. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 34%, #000 62%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 34%, #000 62%, #000 100%);
}

.operaciones__mapa.visible { opacity: 1; }

/* --- Video de fondo de la sección -----------------------------------------
   Va muy apagado a propósito. Las protagonistas son las dos tarjetas de país:
   si el video se ve fuerte, compite con ellas y la sección se vuelve ruido.
   -------------------------------------------------------------------------- */

.operaciones__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease-out;
  pointer-events: none;
}

.operaciones__video.visible { opacity: 0.52; }

/* Capa oscura encima del video: sostiene el contraste del texto blanco y
   hunde el fondo para que las tarjetas se despeguen.

   Se aclaró respecto de la primera versión: estaba tan oscuro que el video
   no se distinguía. Sigue firme arriba, donde va el título en blanco, y se
   afloja en el medio, que es donde el video tiene algo para mostrar. */
.operaciones__tinte {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(17, 17, 18, 0.80) 0%,
      rgba(17, 17, 18, 0.54) 30%,
      rgba(17, 17, 18, 0.54) 70%,
      rgba(17, 17, 18, 0.86) 100%);
}

.operaciones__contenido { position: relative; z-index: 2; }

/* Las tarjetas levantan del fondo con una sombra propia. */
.operaciones .sede {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* --- Las dos sedes, como tarjetas grandes ---------------------------------
   Cada país es una pieza alta con foto de fondo. Mientras no haya foto propia
   se dibuja una trama generativa; cuando se suba desde /admin, la foto la
   reemplaza y el diseño no cambia.

   El velo oscuro está calculado para que el texto se lea con CUALQUIER foto,
   incluso una de día y muy clara. Sin eso, una rambla al mediodía se come el
   nombre de la ciudad.
   -------------------------------------------------------------------------- */

.sedes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

@media (max-width: 780px) {
  .sedes { grid-template-columns: 1fr; }
}

.sede {
  position: relative;
  isolation: isolate;
  min-height: clamp(400px, 58vh, 560px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--linea-inv);
  background: #0b0b0d;
  display: flex;
}

/* El fondo es más alto que la tarjeta: ese sobrante es lo que permite el
   desplazamiento suave con el scroll sin que asome un borde vacío. */
.sede__fondo {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  will-change: transform;
}

.sede__foto,
.sede__lienzo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--curva);
}

.sede:hover .sede__foto,
.sede:hover .sede__lienzo { transform: scale(1.045); }

.sede__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(6, 6, 8, 0.94) 0%,
      rgba(6, 6, 8, 0.78) 32%,
      rgba(6, 6, 8, 0.34) 66%,
      rgba(6, 6, 8, 0.30) 100%);
  transition: opacity 0.6s var(--curva);
}

.sede:hover .sede__velo { opacity: 0.9; }

.sede__contenido {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* --- Arriba: país y coordenadas ------------------------------------------ */

.sede__alto {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sede__pais {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: #fff;
}

/* Punto que late: la operación está viva en los dos países. */
.sede__pais::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34c759;
  flex: none;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
  animation: pulso 2.6s ease-out infinite;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

.sede__coord {
  font-family: var(--fuente-numero);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  text-align: right;
}

/* --- Abajo: ciudad y datos ----------------------------------------------- */

.sede__ciudad {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 1.1rem;
}

/* Raya que se dibuja sola cuando la tarjeta entra en pantalla. */
.sede__raya {
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  opacity: 0.85;
  margin-bottom: 1.1rem;
  transition: width 1.1s var(--curva) 0.15s;
}

.sede.vista .sede__raya { width: 64px; }

/* Alto reservado para que el nombre de las dos ciudades quede a la misma
   altura. Hoy las dos sedes tienen las mismas líneas, así que alcanza con
   un colchón chico; absorbe una línea de diferencia si alguna suma texto.
   (Estaba en 8.5rem cuando Uruguay tenía un párrafo extra: al sacarlo,
   quedaba un hueco muerto abajo de las tarjetas.) */
.sede__datos { min-height: 3.5rem; }

@media (max-width: 780px) {
  .sede__datos { min-height: 0; }
}

.sede__razon {
  font-size: var(--t-cuerpo);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 0.3rem;
}

.sede__dato {
  font-size: var(--t-chico);
  color: rgba(255, 255, 255, 0.62);
}

.sede__rol {
  font-size: var(--t-chico);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 42ch;
}

@media (prefers-reduced-motion: reduce) {
  .sede__pais::before { animation: none; }
  .sede__raya { width: 64px; transition: none; }
}

/* --- Casos ---------------------------------------------------------------- */

.caso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 860px) { .caso { grid-template-columns: 1fr; } }

.caso__nombre {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  margin-bottom: 1rem;
}

.caso__claim {
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.022em;
  margin-bottom: 1.5rem;
  max-width: 24ch;
}

.caso__texto { margin-bottom: 1.5rem; }

.caso__texto p {
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.caso__texto p + p { margin-top: 0.75rem; }

.caso__remate {
  padding-left: 1rem;
  border-left: 2px solid var(--acento-vivo);
  margin-bottom: 1.5rem;
}

.caso__remate p {
  font-size: var(--t-cuerpo);
  font-weight: 500;
  line-height: 1.5;
}

.caso__remate p + p { margin-top: 0.3rem; }

.caso__aprendizaje {
  font-size: var(--t-chico);
  color: var(--tinta-suave);
  line-height: 1.55;
}

/* ==========================================================================
   CIFRAS
   Se usan en dos lugares: el bloque de abajo del hero y el caso. La base es
   la misma y cada lugar cambia lo suyo con un modificador, para que los
   números se vean como una sola familia y no como dos inventos distintos.
   ========================================================================== */

.cifras {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.cifra__numero {
  display: flex;
  align-items: baseline;
  gap: 0.26em;
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.55rem;

  /* Sin esto el número TIEMBLA mientras cuenta: cada dígito tiene su propio
     ancho, así que un 1 ocupa menos que un 8 y el texto se sacude en cada
     cuadro. Con cifras tabulares todos los dígitos miden igual. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* La palabra que acompaña al número ("10 años") va bastante más chica: con el
   mismo cuerpo que el número, esa cifra ocupa el triple que las otras y la
   fila queda desbalanceada. */
.cifra__sufijo {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tinta-suave);
}

.cifra__rotulo {
  margin: 0;
  font-size: var(--t-chico);
  line-height: 1.35;
  color: var(--tinta-suave);
  max-width: 18ch;
}

@media (max-width: 640px) {
  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(1.75rem, 5vh, 2.25rem);
  }
}

/* --- En el caso ------------------------------------------------------------
   Cruzando las dos columnas y con una línea arriba: son el resumen del caso,
   no un dato de la columna de texto. La línea es lo que hace que se lean como
   un bloque aparte y no como el final del párrafo anterior.
   -------------------------------------------------------------------------- */

.cifras--caso {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--linea);
}

/* ==========================================================================
   EXPERIENCIA EN NÚMEROS  —  el bloque de abajo del hero
   ========================================================================== */

.numeros__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(3rem, 8vh, 5rem);
}

.numeros__cabecera .etiqueta { grid-column: 1 / -1; }
.numeros__cabecera h2 { margin-bottom: 0; }
.numeros__cabecera .guia { max-width: 46ch; }

@media (max-width: 900px) {
  .numeros__cabecera {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
  }
}

/* --- Los números -----------------------------------------------------------
   Cada uno arranca con una línea propia que se dibuja de izquierda a derecha
   al entrar. Es lo que separa esto de "cuatro números puestos en fila": la
   línea da la sensación de que algo se está midiendo, no decorando.

   Se anima `transform`, que el navegador resuelve sin volver a calcular la
   página. Animar el `width` haría lo mismo a la vista y obligaría a recalcular
   el diseño en cada cuadro.
   -------------------------------------------------------------------------- */

.cifras--destacadas {
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.cifras--destacadas .cifra {
  position: relative;
  padding-top: clamp(1.1rem, 2.4vh, 1.6rem);
}

.cifras--destacadas .cifra::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.95s var(--curva);
}

.cifras--destacadas.vista .cifra::before { transform: scaleX(1); }

/* Escalonadas, en el mismo orden y al mismo ritmo con que entran los números
   (js/animacion.js usa 0.09 s de separación). */
.cifras--destacadas .cifra:nth-child(2)::before { transition-delay: 0.09s; }
.cifras--destacadas .cifra:nth-child(3)::before { transition-delay: 0.18s; }
.cifras--destacadas .cifra:nth-child(4)::before { transition-delay: 0.27s; }
.cifras--destacadas .cifra:nth-child(5)::before { transition-delay: 0.36s; }
.cifras--destacadas .cifra:nth-child(6)::before { transition-delay: 0.45s; }

.cifras--destacadas .cifra__numero {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  margin-bottom: 0.7rem;
}

.cifras--destacadas .cifra__rotulo {
  font-size: var(--t-cuerpo);
  color: var(--tinta-suave);
}

/* --- Los dos mercados ------------------------------------------------------
   Cierra el bloque. Hundido apenas del fondo para que se lea como un pie y no
   como una quinta cifra.
   -------------------------------------------------------------------------- */

.numeros__pie {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--fondo-hueco);
  border-radius: var(--radio);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.numeros__mercados {
  flex: none;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--tinta);
}

.numeros__nota {
  margin: 0;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  border-left: 1px solid var(--linea);
  font-size: var(--t-chico);
  line-height: 1.5;
  color: var(--tinta-suave);
}

@media (max-width: 700px) {
  .numeros__pie { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
  .numeros__nota { padding-left: 0; border-left: 0; }
}

/* Marcador de foto: mientras no haya imagen real, se muestra esto.
   Nunca una foto de banco de imágenes. */
.marcador {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--fondo-hueco);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.marcador canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.marcador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marcador__nota {
  position: relative;
  z-index: 1;
  font-size: var(--t-micro);
  color: var(--tinta-tenue);
  text-align: center;
  padding: 1rem;
}

/* --- Empezar -------------------------------------------------------------- */

.empezar {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.empezar h2 { margin-bottom: 1.5rem; }
.empezar .guia { margin-inline: auto; }

/* Lo que incluye el estudio. En dos columnas para que no quede una lista
   larguísima que empuja el botón fuera de la pantalla. */
.empezar__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 2rem;
  max-width: 34rem;
  margin: 2rem auto 0;
  text-align: left;
}

@media (max-width: 560px) {
  .empezar__lista { grid-template-columns: 1fr; }
}

.empezar__lista li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-chico);
  color: var(--tinta-suave);
  line-height: 1.5;
}

.empezar__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34c759;
}

.empezar__resultado {
  max-width: 46ch;
  margin: 2rem auto 0;
  font-size: var(--t-guia);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta);
}

.empezar__notas {
  max-width: 48ch;
  margin: 1.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-chico);
  color: var(--tinta-suave);
  line-height: 1.55;
}

.empezar__notas p + p { margin-top: 0.5rem; }
.empezar__notas strong { color: var(--tinta); font-weight: 600; }

.empezar .botonera { justify-content: center; }

/* --- Formulario ----------------------------------------------------------- */

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--tinta-suave);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8em 0.9em;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  font-size: var(--t-chico);
  color: var(--tinta);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 12px;
  padding-right: 2.4em;
  cursor: pointer;
}

.campo textarea { resize: vertical; min-height: 6.5rem; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento-vivo);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
}

.campo--error input,
.campo--error select {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.10);
}

.campo__error {
  font-size: var(--t-micro);
  color: #d93025;
  min-height: 1.1em;
}

/* Trampa para robots: invisible para personas, tentadora para spam */
.campo--trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__pie {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}

.form__nota {
  font-size: var(--t-micro);
  color: var(--tinta-tenue);
  max-width: 34ch;
}

.form__aviso {
  grid-column: 1 / -1;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radio-chico);
  font-size: var(--t-chico);
  display: none;
}

.form__aviso.visible { display: block; }
.form__aviso--ok  { background: rgba(52, 168, 83, 0.10); color: #1e7e34; border: 1px solid rgba(52, 168, 83, 0.25); }
.form__aviso--mal { background: rgba(217, 48, 37, 0.08); color: #b3261e; border: 1px solid rgba(217, 48, 37, 0.22); }

.boton[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* --- Pantalla de "enviado" -------------------------------------------------
   Reemplaza al formulario cuando la consulta sale bien. Un cartel verde
   arriba del formulario se pierde entre los campos; esto ocupa el lugar
   entero y no deja duda de que se envió.

   El círculo tiene un anillo que se expande y se apaga: da señal de vida sin
   necesidad de un texto que diga "listo".
   -------------------------------------------------------------------------- */

.enviado {
  display: none;
  text-align: center;
  padding: clamp(2.5rem, 8vh, 4.5rem) 1rem;
}

.contacto__caja.enviado-ok .enviado { display: block; animation: entraEnviado 0.7s var(--curva) both; }
.contacto__caja.enviado-ok .form   { display: none; }

@keyframes entraEnviado {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.enviado__circulo {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: #34c759;
  color: #fff;
  box-shadow: 0 10px 30px rgba(52, 199, 89, 0.32);
}

.enviado__circulo svg { width: 34px; height: 34px; position: relative; z-index: 2; }

/* El anillo que late */
.enviado__circulo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #34c759;
  animation: pulsoEnviado 1.9s var(--curva) infinite;
}

@keyframes pulsoEnviado {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

.enviado__titulo {
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--tinta);
  margin-bottom: 0.6rem;
}

.enviado__texto {
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 40ch;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .enviado__circulo::before { animation: none; opacity: 0.35; }
  .contacto__caja.enviado-ok .enviado { animation: none; }
}

/* --- Datos de contacto ---------------------------------------------------- */

.contacto__sedes {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.contacto__sede h4 {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 0.6rem;
}

.contacto__sede a {
  display: block;
  font-size: var(--t-chico);
  color: var(--tinta);
  margin-bottom: 0.35rem;
}

.contacto__sede a:last-child { margin-bottom: 0; }
.contacto__sede a:hover { color: var(--acento); }

/* WhatsApp. El `width` del SVG no es opcional: sin él, el icono se estira
   hasta el ancho de la columna y ocupa media pantalla. */
.contacto__wa {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  font-weight: 500;
}

.contacto__wa svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: #25d366;
  transition: transform 0.25s var(--curva);
}

.contacto__wa:hover { color: #128c4a; }
.contacto__wa:hover svg { transform: scale(1.1); }