/* ==========================================================================
   FUYANG WEALTH · SITIO PÚBLICO
   Rediseño 27-ago-2026.

   Jerarquía de color (decisión del dueño): BLANCO manda como fondo, el
   NARANJA de marca es el color SECUNDARIO y se usa con presencia — una línea
   del titular, los chips de íconos, los acentos y el botón de acción — y el
   NEGRO queda para el texto y la acción principal. No es el naranja de
   puntuación tímido de la primera pasada.

   Tipografías: Archivo (titulares) · DM Sans (texto) · JetBrains Mono (datos).
   ========================================================================== */

:root {
  --blanco:      #FFFFFF;
  --papel:       #FAFAF9;   /* fondo general, blanco con un grado de calidez */
  --papel-2:     #F4F3F0;   /* franjas y secciones alternas */
  --tinta:       #0E1013;   /* negro de texto y acciones */
  --tinta-2:     #1B1E23;
  --gris:        #6E7176;
  --gris-claro:  #A0A3A8;
  --regla:       rgba(14, 16, 19, 0.09);
  --regla-2:     rgba(14, 16, 19, 0.18);
  --relleno:     #F4F4F2;   /* relleno suave de tarjeta, sin borde */
  --r-card:      22px;      /* radio de tarjeta */

  /* Naranja de la marca, bajado de tono: el #FF751F original leía neón sobre
     tanto blanco. Este mantiene la identidad pero se comporta como color
     institucional. El sistema interno conserva el suyo — son dos piezas. */
  --naranja:     #D9581C;   /* SECUNDARIO */
  --naranja-osc: #AE420F;
  /* Unificado 27-ago por orden del dueño: un solo naranja en todo el sitio.
     El "claro" apunta al mismo tono de marca — la variable queda por si
     algún día se decide separar de nuevo, sin tocar cada regla. */
  --naranja-cl:  #D9581C;
  --naranja-suave: rgba(217, 88, 28, 0.09);

  --display: 'Archivo', sans-serif;
  --texto:   'DM Sans', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --shell: 1300px;
  --pad:   clamp(20px, 5vw, 64px);
  /* Radios · 28-ago-2026. El sitio nació con esquinas rectas; al rediseñar
     la barra entraron redondeadas (el conmutador de idioma y el botón de
     conectar) y quedó mezclado. Se unifica: TODO redondea, con tres escalas.
     --r-pill  botones y controles: cápsula completa
     --r       tarjetas, campos y paneles
     --r-mini  piezas pequeñas (chips, íconos, toast) */
  --r-pill: 999px;
  --r:      14px;
  --r-mini: 10px;
  --t:     cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 82px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--texto);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: clip;   /* clip, no hidden: hidden rompe position:sticky */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
::selection { background: var(--naranja); color: #fff; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.accent { color: var(--naranja); }

/* ---------- Piezas de texto reutilizables ---------- */
/* Rótulo de sección: dejó de ser una etiqueta en versalitas y pasó a ser una
   PREGUNTA en minúscula — texto grande, interlineado corto y sin tracking.
   Ya no es un adorno sobre el título: es lo que el lector se está
   preguntando, y el título de abajo es la respuesta. */
.eyebrow {
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.028em;
  text-transform: none;
  color: var(--naranja);
  margin-bottom: 10px;
}
.titulo {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* Palabras clave dentro de los párrafos: suben a la tinta y ganan medio
   grado de peso. Es lo único que interrumpe el gris del cuerpo, así que se
   usa con cuentagotas — dos o tres por párrafo, no más. */
.clave { color: var(--tinta); font-weight: 500; }
footer .clave, .cierre .clave, .std--alt .clave { color: #fff; }

.bajada {
  margin-top: 16px;
  font-size: 16px; line-height: 1.38;
  color: var(--gris);
  max-width: 56ch;
}
.enlace {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 20px;
  font-size: 13.5px; font-weight: 500;
  color: var(--naranja);
  text-decoration: none;
  transition: gap 0.3s var(--t), color 0.25s var(--t);
}
.enlace:hover { gap: 12px; color: var(--naranja-osc); }

/* Mayúscula SOLO en la primera letra del rótulo. Los nombres propios (Asia,
   Latinoamérica) ya vienen capitalizados desde el i18n, así que no hace falta
   tocarlos — y así el chino y el inglés tampoco se deforman. */
.eyebrow::first-letter,
.hero-eyebrow::first-letter { text-transform: uppercase; }

/* ---------- Botones ---------- */
.btn-primary, .btn-outline, .btn-acento {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font-family: var(--texto);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.3s var(--t), color 0.3s var(--t),
              border-color 0.3s var(--t), transform 0.25s var(--t);
}
.btn-primary { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-primary:hover { background: var(--naranja); border-color: var(--naranja); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--tinta); border-color: var(--regla-2); }
.btn-outline:hover { border-color: var(--tinta); transform: translateY(-2px); }
.btn-acento { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.btn-acento:hover { background: var(--naranja-osc); border-color: var(--naranja-osc); transform: translateY(-2px); }
/* Sobre el board naranja el botón de acento se perdería: pasa a blanco. */
.cierre .btn-acento { background: #fff; color: var(--naranja-osc); border-color: #fff; }
.cierre .btn-acento:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* ==========================================================================
   NAVEGACIÓN
   Barra de texto limpia con el CTA en naranja. Sin píldoras flotantes: la
   navegación de un sitio institucional no debe parecer la de una app.
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 120;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad);
  background: rgba(250, 250, 249, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--t), box-shadow 0.3s var(--t);
}
.nav--scrolled { border-bottom-color: var(--regla); box-shadow: 0 6px 24px rgba(14,16,19,0.05); }

.nav-brand { display: flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.nav-brand-1 {
  display: block;
  font-family: var(--display);
  font-weight: 600; font-size: 17px;
  letter-spacing: -0.025em; color: var(--tinta);
  line-height: 1.15;
}
.nav-brand-2 {
  display: block;
  font-size: 12px; color: var(--gris);
  letter-spacing: 0.06em; margin-top: 2px;
}

.menu { display: inline-flex; align-items: center; gap: 2px; }
.menu__item {
  position: relative;
  padding: 9px 15px;
  font-size: 14px; font-weight: 500;
  color: var(--gris);
  text-decoration: none;
  transition: color 0.25s var(--t);
}
.menu__item:hover { color: var(--tinta); }
.menu__item.active { color: var(--tinta); font-weight: 500; }
.menu__item.active::after {
  content: '';
  position: absolute; left: 15px; right: 15px; bottom: 2px;
  height: 1.5px;
  background: var(--naranja);
}

.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Selector de idioma: un CONMUTADOR, no tres botones sueltos. Cárcel gris
   con una pastilla blanca que se desliza al idioma activo — la posición la
   escribe site.js en --lang-i, así que el movimiento es del grupo y no un
   fondo que aparece y desaparece bajo cada botón. */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: rgba(14, 16, 19, 0.05);
  border-radius: 999px;
}
.lang-switcher::before {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: var(--lang-w, 40px);
  transform: translateX(calc(var(--lang-i, 0) * var(--lang-w, 40px)));
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.10), 0 2px 8px rgba(20, 22, 26, 0.06);
  transition: transform 0.38s var(--t);
}
.lang-btn {
  position: relative;
  z-index: 1;
  width: var(--lang-w, 40px);
  background: none; border: none; cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--gris);
  padding: 7px 0; border-radius: 999px;
  transition: color 0.28s var(--t);
}
.lang-btn:hover { color: var(--tinta); }
.lang-btn.active { color: var(--tinta); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--naranja); color: #fff;
  padding: 12px 22px 12px 24px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(174, 66, 15, 0.20), 0 8px 20px rgba(217, 88, 28, 0.24);
  transition: background 0.3s var(--t), transform 0.25s var(--t), box-shadow 0.3s var(--t);
}
/* La flecha se separa al pasar: el movimiento vive en el botón. */
.nav-cta::after {
  content: '→';
  font-size: 13px;
  transition: transform 0.3s var(--t);
}
.nav-cta:hover {
  background: var(--naranja-osc);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(174, 66, 15, 0.22), 0 14px 30px rgba(217, 88, 28, 0.30);
}
.nav-cta:hover::after { transform: translateX(4px); }

/* Botón hamburguesa — solo celular/tablet */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: none; border: 1px solid var(--regla-2);
  border-radius: var(--r-mini); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px;
  background: var(--tinta); border-radius: 2px;
  transition: transform 0.3s var(--t), opacity 0.3s var(--t);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* Panel de navegación en celular */
.nav-panel {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 110;
  background: var(--papel);
  padding: 24px var(--pad) 40px;
  display: flex;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--t), transform 0.3s var(--t), visibility 0.3s;
}
.nav-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-panel nav { display: flex; flex-direction: column; width: 100%; }
.nav-panel a {
  font-family: var(--display);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--regla);
}
.nav-panel a:hover { color: var(--naranja); }

@media (max-width: 1040px) {
  .menu { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 620px) {
  :root { --nav-h: 62px; }
  .nav { gap: 12px; }
  .nav-brand-1 {
    font-size: 12.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nav-brand-2 { display: none; }
  .nav-cta { display: none; }   /* el CTA vive en el panel, no aprieta la barra */
  .nav-right { gap: 8px; }
}

/* ==========================================================================
   REVELADO AL ENTRAR
   Un solo gesto para todo el sitio: sube y aparece. Discreto a propósito —
   lo que da sensación de oficio es el ritmo, no la acrobacia.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--t), transform 0.75s var(--t);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: calc(var(--nav-h) + clamp(30px, 5vw, 68px)) 0 0; position: relative; overflow: visible; }
.hero-grid {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad);
  display: grid;
  /* La escena manda: se lleva bastante más columna que el texto. Además se
     deja salir por el borde derecho (ver .escena) — el hero tenía mucho aire
     muerto a la derecha y la grúa se veía chica dentro de su caja. */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--naranja);
}
.hero-text h1 {
  margin-top: 20px;
  font-family: var(--display);
  /* El cuerpo y el solape van atados: bajar la tipografía acorta la palabra
     y la aleja de la pata, así que al reducirla hay que acercar la escena la
     misma cantidad (ver el margen negativo de .escena). Con 6vw "Mejoramos"
     termina en x=561 a 1440px y la pata queda en 543: la "s" pasa medio
     tapada — se lee entera y se ve que va por detrás. */
  font-size: clamp(38px, 5.1vw, 74px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  /* Los saltos del titular los manda el <br> del HTML: son tres líneas,
     "Mejoramos / tu cadena / de valor.". Sin este nowrap la columna partía
     "tu cadena" en dos y dejaba un hueco muerto al lado de "tu"; con
     text-wrap: balance el reparto además cambiaba solo. */
  text-wrap: nowrap;
}
.hero-sub {
  margin-top: 22px;
  font-size: 16.5px; line-height: 1.34;
  color: var(--gris);
  max-width: 46ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ==========================================================================
   ESCENA DEL HERO · la grúa arría el contenedor
   Tres piezas: la grúa (fija), la CUERDA (se alarga) y el contenedor (baja).
   Todo el recorrido se mide en cqw contra el ancho de la escena, así la
   cuerda y la carga se mueven exactamente lo mismo en cualquier pantalla —
   si una usara % y la otra px se despegarían al cambiar de tamaño.
   El avance lo escribe home.js en --p (0 → 1) y es REVERSIBLE: al subir, la
   carga vuelve a subir.
   ========================================================================== */
.escena {
  position: relative;
  z-index: 3;          /* la grúa pasa por delante del titular */
  /* Se desborda del padding derecho del hero: así la grúa gana ancho de
     verdad en vez de encogerse dentro de la rejilla. */
  width: calc(100% + var(--pad));
  margin-right: calc(var(--pad) * -1);
  /* Acerca la escena al titular lo justo para conservar el solape de la "s"
     tras bajarle el cuerpo. En vw, no en px, para que la relación aguante
     a cualquier ancho. */
  /* Acerca la escena al titular para que la cola de la "s" pase por detrás
     de la pata. El valor se ajusta MIDIENDO —la pata es inclinada, así que
     dónde cruza la línea del titular no se puede deducir del ancho—. */
  margin-left: -6.4vw;
  overflow: visible;
  container-type: inline-size;
  --p: 0;
  /* Tope de la bajada. Medido a 1440px: la base arranca en 423px y el borde
     de las cifras está en 539px. Con 10cqw se quedaba 35px corta; 13cqw la
     lleva hasta rozar la franja, que es donde se pidió. */
  --caida: calc(var(--p) * 15cqw);
}
/* Fondo blanco, y abajo lo único que lo interrumpe: la sombra de apoyo.
   Sin ella la grúa flota; con un degradado de color detrás, se ensucia. */
.escena::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 1.5%;
  width: 74%; height: 5%;
  /* Es la sombra de apoyo de la GRÚA, no la del contenedor. Se cierra y se
     oscurece a medida que la carga baja: lo que se acerca al suelo proyecta
     una sombra más corta y más densa. */
  transform: translateX(-50%) scaleX(calc(1 - var(--p) * 0.08));
  background: radial-gradient(ellipse at 50% 50%,
              rgba(20, 22, 26, calc(0.14 + var(--p) * 0.08)) 0%,
              rgba(20, 22, 26, calc(0.06 + var(--p) * 0.04)) 45%,
              transparent 72%);
  transition: transform 0.2s linear;
  z-index: 0;
  pointer-events: none;
}

.escena-grua { width: 100%; height: auto; position: relative; z-index: 2; }

/* La cuerda va del gancho de la grúa a la argolla del aparejo del contenedor.
   Ambos extremos están MEDIDOS sobre los PNG, no ajustados al ojo:
   el gancho de la grúa se llevó al EJE (50%) moviéndolo dentro del propio PNG
   —carro y gancho recortados y repegados, la viga reparada con su espejo—
   porque la carga tenía que colgar del centro; su punta termina en el 37,6%
   del alto; en contenedor.webp la argolla está
   centrada en el 49,9% del ancho de esa imagen. */
.escena-cable {
  position: absolute;
  /* Arranca en la PUNTA del gancho (37,6% del alto, medido sobre el PNG) y
     su largo es exactamente la caída: en reposo no se ve cuerda ninguna
     —la argolla va enhebrada en el gancho— y al bajar la carga la cuerda
     va apareciendo justo lo que se separan. */
  top: 37.6%;
  left: 50%;
  width: 5px;
  height: var(--caida);
  transform: translateX(-50%);
  background: linear-gradient(180deg, #3A3D44 0%, #3A3D44 60%, #24272D 100%);
  border-radius: 0 0 2px 2px;
  z-index: 3;
  transition: height 0.12s linear;
}

.escena-carga {
  /* Cuelga del extremo de la cuerda. El translateX del 51,2% no es medio
     ancho: es la columna donde está la argolla dentro del PNG, para que
     quede enhebrada en el gancho y no descentrada. */
  /* 35,3% sale de la cuenta, no del ojo: el aparejo mide 32/100 del ancho
     de la carga y la argolla está a 4/32 de su alto, así que su centro cae
     2,3% del alto de la escena por debajo del borde de .escena-carga. Restado
     al 37,6% donde termina el gancho, da 35,3% — y la argolla queda enhebrada. */
  position: absolute; top: 35.3%; left: 50%;
  width: 34%;
  transform: translateX(-50%);
  z-index: 40;
  translate: 0 var(--caida);
  transition: translate 0.12s linear;
}
.escena-eslingas {
  display: block;
  width: 100%;
  aspect-ratio: 100 / 32;
  overflow: visible;
}
.escena-eslingas path,
.escena-eslingas circle {
  fill: none;
  /* Muestreado del gancho de la grúa: rgb(30,32,36). */
  stroke: #1E2024;
  stroke-linecap: round;
}
.escena-eslingas path   { stroke-width: 1.1; }
.escena-eslingas circle { stroke-width: 1.5; }

.escena-contenedor {
  width: 100%; height: auto;
  /* SIN sombra propia: cuelga en el aire y además se mueve — una sombra
     pegada que viaja con él no la proyecta nada. */
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .escena { max-width: 560px; margin: 0 auto; }
}

/* ==========================================================================
   MANIFIESTO · la franja de datos del hero
   ========================================================================== */
.manifiesto {
  position: relative; z-index: 1;   /* la carga le pasa por encima */
  margin-top: clamp(32px, 4.5vw, 66px);
  border-top: 1px solid var(--regla);
  border-bottom: 1px solid var(--regla);
}
.manifiesto-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.dato { padding: 24px 24px 24px 0; border-left: 1px solid var(--regla); padding-left: 24px; }
.dato:first-child { border-left: none; padding-left: 0; }
.dato .num {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 52px); font-weight: 500;
  line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  transition: transform 0.4s var(--t), color 0.4s var(--t);
}
.dato .num.bumping { transform: translateY(-3px); color: var(--naranja); }
.dato .label { margin-top: 10px; font-size: 13.5px; line-height: 1.35; max-width: 22ch; }
.dato .sub {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris-claro);
}
@media (max-width: 900px) {
  .manifiesto-inner { grid-template-columns: 1fr 1fr; }
  .dato { padding: 22px 18px; }
  .dato:nth-child(odd) { border-left: none; padding-left: 0; }
  .dato:nth-child(n+3) { border-top: 1px solid var(--regla); }
}
@media (max-width: 520px) {
  .manifiesto-inner { grid-template-columns: 1fr; }
  .dato { border-left: none; padding: 18px 0; }
  .dato + .dato { border-top: 1px solid var(--regla); }
  .dato .label { max-width: none; }
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.std { padding: clamp(52px, 7vw, 100px) 0; }
/* ---------- Board · el mismo sistema del laboratorio de Kuvo, en naranja ----
   Fondo de color de marca con una retícula de líneas blancas de 1px cada 46px,
   difuminada con una máscara radial para que no llegue dura a los bordes. Las
   tarjetas de encima quedan BLANCAS: sobre el board, una tarjeta gris se
   pierde. Es el patrón de la casa, aquí con el color del cliente. */
.std--alt, .cierre, .std--vinilos {
  position: relative;
  --board-linea: rgba(255, 255, 255, 0.20);
  background: var(--naranja);
  color: #fff;
  border-top: none;
}
.std--alt::before, .cierre::before, .std--vinilos::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--board-linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--board-linea) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 40%, #000 30%, transparent 100%);
}
.std--alt > .shell, .cierre > .shell, .std--vinilos > .shell { position: relative; z-index: 1; }
.std--alt .eyebrow { color: rgba(255, 255, 255, 0.82); }
.std--alt .titulo { color: #fff; }

/* Sobre el board naranja las tarjetas van en BLANCO y se despegan del color
   con sombra. La sombra de .persona ya viene en su propia regla; aquí queda
   la de .ficha, que sí sigue siendo negra. */
.std--alt .ficha { box-shadow: 0 4px 10px rgba(0,0,0,.10), 0 22px 50px rgba(0,0,0,.18); }

/* Encabezado de página interior */
.encabezado {
  padding: calc(var(--nav-h) + clamp(36px, 5.5vw, 74px)) 0 clamp(28px, 4vw, 50px);
  border-bottom: 1px solid var(--regla);
}
.encabezado h1 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500; line-height: 0.95;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.encabezado .bajada { margin-top: 24px; }

/* Dos frentes (inicio) */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 88px); }
/* Al quitarse Productos quedó una sola columna: pasa a un frente único, con
   la bajada en medida de lectura para que el párrafo no se estire a lo ancho
   de la página. */
.par--solo { grid-template-columns: 1fr; }
.par--solo .bajada { max-width: 62ch; }
@media (max-width: 860px) { .par { grid-template-columns: 1fr; } }

/* ---------- Fichas ---------- */
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 940px) { .rejilla-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rejilla-3, .rejilla-2 { grid-template-columns: 1fr; } }

/* Tarjetas: CUADRADAS y en negro. Una sola por rejilla va en naranja, como
   pieza focal — el contraste es lo que ordena la lectura, no el tamaño. */
.ficha {
  background: var(--tinta);
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: 30px 28px 32px;
  transition: background 0.35s var(--t), transform 0.35s var(--t);
}
.ficha:hover { transform: translateY(-3px); }
.ficha h3 { color: #fff; }
.ficha p { color: rgba(255, 255, 255, 0.62); margin-top: 9px; font-size: 14.5px; line-height: 1.36; }
/* En tarjeta negra el chip va naranja */
/* El CHIP y su SVG: sin estas dos reglas el icono se dibuja a tamaño natural
   y relleno de negro (se perdieron al reescribir el bloque de tarjetas). */
.ficha-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-mini);
  margin-bottom: 18px;
}
.ficha-ico svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.ficha .ficha-ico { background: var(--naranja); color: #fff; }

/* La focal: fondo naranja, chip negro */
.ficha--acento { background: var(--naranja); }
.ficha--acento h3 { color: #fff; }
.ficha--acento p { color: rgba(255, 255, 255, 0.78); }
.ficha--acento .ficha-ico { background: var(--tinta); color: #fff; }
.ficha--acento .enlace { color: #fff; }
.ficha--acento .enlace:hover { color: var(--tinta); }
.ficha .enlace { color: var(--naranja); }
.ficha .enlace:hover { color: #fff; }

/* ==========================================================================
   LA RUTA · ruleta de etapas
   El scroll no desplaza la pieza: la hace GIRAR. Un tramo alto de página
   (--vueltas) sirve solo de recorrido; dentro, un bloque sticky se queda
   quieto en pantalla mientras ese recorrido avanza, y ese avance (--p, 0→1)
   rota la rueda.

   La rueda es enorme y su centro cae MUY a la izquierda, fuera del lienzo:
   de una circunferencia de 1400px solo se ve el borde derecho, y por eso se
   lee como un reloj y no como un círculo. Cada etapa se coloca con la
   fórmula rotate(θ) translateX(R) rotate(−θ): la segunda rotación devuelve
   el contenido a la vertical, así que gira la RUEDA, no los números.

   θ de la etapa k = (k − p·6) · 12°  →  con p=0 la 01 queda en el centro y
   con p=1 la 07. La cuenta la hace el CSS a partir de --i; no hay una
   posición escrita a mano por elemento.
   ========================================================================== */
.std--ruta { padding: 0; }

.rul-scroll {
  --p: 0;
  /* Punto medio entre los dos extremos que fallaron: con R=1400 el arco era
     una recta (no se veía dónde empezaba ni terminaba) y con R=130 la rueda
     entera se montaba sobre el contenido. Con 420 el arco se DOBLA a la
     vista — arriba y abajo se aleja 137px del eje — y sigue siendo una
     tajada pegada al borde que no invade los carriles del texto. */
  --R: 420px;
  --paso: 24deg;
  --medio: 460px;       /* mitad del lienzo del SVG: R + aire para las marcas */
  --vueltas: 6;         /* saltos entre las 7 etapas */
  --eje: 118px;         /* dónde asoma la tajada, desde el filo */
  position: relative;
  /* Solo recorrido. De aquí salen ~28vh de scroll por etapa, que es lo que
     tarda el disco en girar un paso. */
  height: 250vh;
}
.rul-fija {
  position: sticky;
  top: var(--nav-h);
  /* El bloque fijo se lleva TODO: título, reloj y ficha. Antes el título
     vivía fuera y quedaba un vacío enorme entre él y la pieza, además de
     chocar con ella al pegarse. */
  height: calc(100vh - var(--nav-h));
  /* Franja baja a propósito. Con 780px el bloque llenaba la pantalla y la
     pieza se veía suelta dentro de tanto aire. */
  max-height: 620px;
  background: var(--papel);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.rul-dentro {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 28px);
  padding-top: clamp(14px, 3vh, 34px);
  padding-bottom: clamp(14px, 3vh, 34px);
}
.rul-cabeza { flex: none; text-align: center; }
.rul-cabeza .titulo { max-width: 24ch; margin: 0 auto; }
.rul-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* Un solo carril de contenido. La tajada del disco y sus números viven en
     los primeros 268px, fuera del flujo, y el contenido arranca después: así
     no se pisan, que era el problema. */
  grid-template-columns: minmax(0, 1fr);
  padding-left: 268px;
  padding-right: var(--pad);
  align-content: center;
  align-items: center;
}

/* ---------- la rueda ---------- */
/* Pegada al borde DE VERDAD: sale de la rejilla y se ancla al bloque fijo,
   que ocupa todo el ancho. Con un margen negativo solo se despegaba del
   padding del shell y seguía a 148px del filo, porque el shell además va
   centrado. La columna que deja libre en la rejilla le reserva el sitio. */
.rul-rueda {
  position: absolute;
  left: 0; top: 0;
  width: 240px;
  height: 100%;
  pointer-events: none;
}
/* El disco: aro y marcas. GIRA como un todo con el avance — es el dial el
   que se mueve, mientras la aguja se queda fija en el centro de lectura.
   El viewBox está centrado en 0,0, así que basta con poner ese origen donde
   va el centro del círculo: 380px a la izquierda del eje de las etapas. */
.rul-disco {
  position: absolute;
  /* El SVG mide 760 y su viewBox está centrado, así que su CENTRO cae en
     left+380. El centro del círculo tiene que quedar a R de distancia del eje
     de lectura, de modo que el punto más a la derecha del disco caiga
     exactamente en el eje: left = eje − R − 380. */
  top: 50%; left: calc(var(--eje) - var(--R) - var(--medio));
  width: calc(var(--medio) * 2); height: calc(var(--medio) * 2);
  /* La regla global "img, svg { max-width: 100% }" estaba encogiendo el disco
     al ancho de su columna y descuadraba todo el cálculo del centro. */
  max-width: none;
  margin-top: calc(var(--medio) * -1);
  overflow: visible;
  transform: rotate(calc(var(--p) * var(--vueltas) * var(--paso) * -1));
  transition: transform 0.55s var(--t);
  pointer-events: none;
}
.rul-disco-aro {
  fill: none;
  stroke: rgba(14, 16, 19, 0.16);
  stroke-width: 1.4;
}
.rul-disco-marcas line {
  stroke: rgba(14, 16, 19, 0.22);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.rul-pasos {
  list-style: none; margin: 0; padding: 0;
  position: absolute;
  top: 50%; left: var(--eje);     /* el punto del disco más a la derecha */
  width: 0; height: 0;
}
.rul-paso {
  --ang: calc((var(--i) - var(--p) * var(--vueltas)) * var(--paso));
  --lejos: max(var(--ang), calc(var(--ang) * -1));   /* |ángulo| */
  position: absolute;
  top: 0; left: 0;
  display: flex; align-items: center; gap: 16px;
  /* Se lleva al borde de la rueda y se endereza: gira la rueda, no el texto */
  transform: translate(-5px, -50%)
             translateY(calc(sin(var(--ang)) * var(--R)))
             translateX(calc((cos(var(--ang)) - 1) * var(--R)));
  transition: transform 0.55s var(--t);
  white-space: nowrap;
}
.rul-punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #C9C9C6;
  transition: background 0.4s var(--t), transform 0.4s var(--t);
}
.rul-num {
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: #D2D2CE;
  transition: color 0.4s var(--t), transform 0.4s var(--t);
  transform-origin: left center;
}
/* La etapa en el centro del reloj: la marca el JS, por color y tamaño —
   no por opacidad, que ya sabemos que hace ver las demás como rotas. */
.rul-paso.activo .rul-punto { background: var(--naranja); transform: scale(1.4); }
.rul-paso.activo .rul-num   { color: var(--naranja); transform: scale(1.7); }

/* ---------- la ficha de la derecha ---------- */
.rul-panel {
  grid-column: 1;
  position: relative;
  display: flex; align-items: center;
  min-height: 0;
}
.rul-ficha {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s var(--t), transform 0.45s var(--t), visibility 0s 0.35s;
}
.rul-ficha.activa {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--t), transform 0.45s var(--t), visibility 0s;
}
.rul-ico { width: 28%; max-width: 200px; height: auto; flex: none; }
/* Sin flex el bloque de texto se encogía a su contenido y el párrafo caía en
   una columna angosta con media pantalla vacía al lado. */
.rul-txt { flex: 1 1 auto; min-width: 0; }
.rul-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--naranja);
  margin-bottom: 12px;
}
.rul-ficha h3 {
  font-family: var(--display);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--tinta);
}
.rul-ficha p {
  margin-top: 12px;
  font-size: 16.5px; line-height: 1.5;
  color: var(--gris);
  max-width: 54ch;
}

/* Angosto: el reloj no cabe. Las etapas pasan a lista, con su objeto al
   lado, y se pierde el giro — pero se lee, que es lo que importa. */
@media (max-width: 900px) {
  .std--ruta { padding: 0; }

.rul-scroll { height: auto; }
  .rul-fija { position: static; height: auto; max-height: none; overflow: visible; padding: 8px 0; }
  .rul-dentro { gap: 22px; padding: 0; }
  .rul-grid { padding-left: var(--pad); }
  .rul-grid { grid-template-columns: 1fr; }
  .rul-rueda { display: none; }
  .rul-panel { min-height: 0; display: grid; gap: 26px; }
  .rul-ficha {
    position: static; inset: auto;
    visibility: visible; opacity: 1; transform: none;
    gap: 16px;
  }
  .rul-ico { width: 84px; }
  .rul-ficha h3 { font-size: 19px; }
  .rul-ficha p { font-size: 14px; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .rul-paso, .rul-ficha { transition: none; }
}

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.dos-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 940px) { .dos-col { grid-template-columns: 1fr; } }
.texto-largo { display: flex; flex-direction: column; gap: 14px; }
.texto-largo p { font-size: 16px; line-height: 1.42; color: var(--gris); max-width: 58ch; }
.texto-largo strong { color: var(--tinta); font-weight: 600; }
.texto-largo .hl { color: var(--naranja); font-weight: 500; }

/* ---------- Trayectoria · lista que se va marcando con el scroll ----------
   Cada etapa es un punto de control: al bajar, el círculo se llena, el check
   se dibuja solo y la línea hasta la etapa siguiente se pinta de naranja. Al
   subir se desmarca, porque el recorrido tiene que poder verse en los dos
   sentidos y no quedarse "todo hecho" a la primera pasada.
   El estado lo pone nosotros.js con la clase .hecho. */
.trayectoria { position: relative; }
/* Compacta: el círculo se dimensiona contra el texto de al lado, no al revés.
   26px es la altura de una línea del título — así el marcador queda alineado
   con la primera línea y la lista no se abre más de lo que ocupa el texto. */
.hito {
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px; padding-bottom: 18px;
}
.hito:last-child { padding-bottom: 0; }

/* Riel entre etapas: gris de base, naranja el tramo ya recorrido */
.hito:not(:last-child)::before,
.hito:not(:last-child)::after {
  content: ''; position: absolute;
  left: 12.5px; top: 28px; width: 1.5px;
}
.hito:not(:last-child)::before { bottom: -2px; background: var(--regla-2); }
.hito:not(:last-child)::after {
  height: 0; background: var(--naranja);
  transition: height 0.55s var(--t);
}
.hito.hecho:not(:last-child)::after { height: calc(100% - 26px); }

.hito-marca {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--regla-2);
  background: var(--papel-2);
  display: grid; place-items: center;
  transition: border-color 0.4s var(--t), background 0.4s var(--t), transform 0.4s var(--t);
}
.hito.hecho .hito-marca {
  border-color: var(--naranja);
  background: var(--naranja);
}
/* El check se DIBUJA (no aparece de golpe): el trazo entra por dashoffset. */
.hito-check {
  width: 12px; height: 12px;
  stroke: #fff; stroke-width: 2.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.45s var(--t) 0.12s;
}
.hito.hecho .hito-check { stroke-dashoffset: 0; }

/* La etapa vive DENTRO del cuerpo, bajo el título: nombre arriba, dato
   debajo — la misma jerarquía del componente de referencia. */
.hito-etapa {
  display: block;
  font-family: var(--mono); font-style: normal;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gris-claro);
  margin-top: 2px;
  transition: color 0.4s var(--t);
}
.hito.hecho .hito-etapa { color: var(--naranja); }
.hito-cuerpo { padding-top: 1px; }
.hito-cuerpo b {
  display: block;
  font-family: var(--display);
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.4s var(--t);
}
.hito-cuerpo span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.36; color: var(--gris); }
@media (max-width: 520px) { .hito { gap: 14px; } }

/* ---------- Equipo ---------- */
/* Cuatro integrantes: la rejilla se ajusta sola con auto-fit en vez de un
   número fijo de columnas, así entrar o salir del equipo no obliga a tocar
   el CSS otra vez. */
.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 28px;
}
@media (max-width: 900px) { .equipo { grid-template-columns: 1fr; } }
/* Tarjetas del equipo en BLANCO sobre el board naranja. Al invertir el
   fondo hay que invertir toda la escala de texto con él: lo que antes eran
   blancos a distinta opacidad ahora son tinta y gris, y el chip de idiomas
   pasa de blanco translúcido a papel — sobre blanco, un chip blanco al 10%
   desaparece. */
.persona {
  background: #fff;
  color: var(--tinta);
  border: none;
  border-radius: var(--r);
  padding: 30px 28px 32px;
  box-shadow: 0 4px 10px rgba(0,0,0,.10), 0 22px 50px rgba(0,0,0,.18);
  transition: transform 0.35s var(--t), box-shadow 0.35s var(--t);
}
.persona:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12), 0 30px 64px rgba(0,0,0,.22);
}
.persona h3 { color: var(--tinta); }
.persona-rol { color: var(--gris); }
.persona-area { color: var(--gris-claro); }
.persona-idiomas span { background: var(--papel-2); color: var(--gris); }
.persona .enlace { color: var(--naranja); }
.persona .enlace:hover { color: var(--naranja-osc); }
.persona-ini {
  width: 46px; height: 46px; border-radius: var(--r);
  /* Naranja pleno: sobre la tarjeta blanca el naranja al 9% desaparecía. */
  background: var(--naranja); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.persona h3 { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.022em; }
.persona-rol { margin-top: 6px; font-size: 14px; color: var(--gris); }
.persona-area {
  margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-claro);
  line-height: 1.5;
}
.persona-idiomas { display: flex; gap: 6px; margin-top: 18px; }
.persona-idiomas span {
  min-width: 32px; height: 27px; padding: 0 8px;
  border: none; background: rgba(14,16,19,.05); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: var(--gris);
}
.persona .enlace { margin-top: 20px; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
/* ==========================================================================
   CONTACTO
   Los datos dejan de ser una lista con reglas y pasan a TARJETAS, como el
   resto del sistema; el formulario vive en su propio panel. Los campos
   dejan de ser rayas sueltas y se vuelven cajas: sobre un panel blanco una
   línea inferior sola no se lee como "aquí se escribe".
   ========================================================================== */
.contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}
@media (max-width: 940px) { .contacto-grid { grid-template-columns: 1fr; } }

.datos { display: grid; gap: 14px; }
.dato-fila {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--regla);
  border-radius: var(--r);
  transition: border-color 0.3s var(--t), box-shadow 0.3s var(--t);
}
.dato-fila:hover {
  border-color: rgba(217, 88, 28, 0.30);
  box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 12px 28px rgba(20,22,26,.06);
}
.dato-rotulo {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--naranja); margin-bottom: 9px;
}
.dato-valor { font-size: 15px; line-height: 1.45; font-weight: 500; }
.dato-valor a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--t), border-color .25s var(--t);
}
.dato-valor a:hover { color: var(--naranja); border-color: var(--naranja); }
.dato-nota { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--gris-claro); }

/* El formulario, en panel */
.formulario {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 2.6vw, 34px);
  background: #fff;
  border: 1px solid var(--regla);
  border-radius: var(--r);
}
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .campo-par { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label {
  font-size: 12.5px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--gris);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  font-family: var(--texto); font-size: 15px; color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--regla);
  border-radius: var(--r-mini);
  padding: 12px 14px;
  transition: border-color 0.25s var(--t), background 0.25s var(--t), box-shadow 0.25s var(--t);
  -webkit-appearance: none; appearance: none;
}
.campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 32px; cursor: pointer;
}
.campo textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--naranja);
  /* Aro de foco propio: sin él, sobre papel el cambio de borde solo se nota
     si ya sabías dónde mirar. */
  box-shadow: 0 0 0 3px rgba(217, 88, 28, 0.14);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-claro); }
.btn-enviar { align-self: flex-start; margin-top: 6px; }
.btn-enviar svg { width: 16px; height: 16px; }

.autocomplete-wrap { position: relative; }
.autocomplete-list {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--blanco);
  border: 1px solid var(--regla-2);
  border-radius: var(--r);
  max-height: 240px; overflow-y: auto; z-index: 30;
  box-shadow: 0 16px 38px rgba(14, 16, 19, 0.12);
}
.autocomplete-list.show { display: block; }
.autocomplete-item {
  padding: 11px 14px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--regla);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--naranja-suave); }
.autocomplete-item .ac-region {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-claro);
}
.autocomplete-item:hover .ac-region, .autocomplete-item.active .ac-region { color: var(--naranja); }
.autocomplete-empty { padding: 14px; font-size: 13.5px; color: var(--gris); }
.autocomplete-list::-webkit-scrollbar { width: 5px; }
.autocomplete-list::-webkit-scrollbar-thumb { background: var(--regla-2); border-radius: 3px; }

/* ==========================================================================
   CIERRE · la banda de llamada a la acción
   ========================================================================== */

.cierre-inner {
  padding: clamp(44px, 6vw, 78px) var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.cierre h2 { color: #fff; }
.cierre h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 500;
  line-height: 0.99; letter-spacing: -0.038em;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Sobre negro el texto va BLANCO — el gris de antes se hundía en el fondo. */
footer { background: #000; color: #fff; padding: clamp(52px, 7vw, 84px) 0 0; }
.footer-inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 52px);
  padding-bottom: clamp(40px, 6vw, 68px);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand-block { margin-bottom: 16px; }
/* El nombre de la empresa, en el naranja de marca. Se usa la variante clara
   porque el naranja base sobre negro pierde legibilidad. */
.footer-brand-block .nav-brand-1 { color: var(--naranja); font-size: 15px; }
.footer-brand-block .nav-brand-2 { color: var(--naranja); }
.footer-tagline { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,0.78); max-width: 40ch; }
.footer-col-title {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--naranja-cl);
  padding-bottom: 13px; margin-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 13.5px; color: #fff; text-decoration: none; transition: color 0.25s var(--t); }
.footer-col a:hover { color: var(--naranja-cl); }
.footer-office { font-size: 12.5px; line-height: 1.42; color: rgba(255,255,255,0.78); margin-top: 12px; }
.footer-office strong {
  display: block;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--naranja-cl); margin-bottom: 4px;
}
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62);
}

/* ==========================================================================
   TOAST · MODAL
   ========================================================================== */
.toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translate(-50%, 18px);
  background: var(--tinta); color: #fff;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-size: 13.5px; z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--t), transform 0.3s var(--t);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.lead-modal-backdrop {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(14, 16, 19, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--t);
}
.lead-modal-backdrop.show { opacity: 1; pointer-events: auto; }
.lead-modal {
  position: relative; width: 100%; max-width: 460px;
  background: var(--papel);
  border: 1px solid var(--regla-2);
  border-radius: var(--r);
  padding: 46px 42px 32px;
  text-align: center;
  transform: translateY(14px);
  transition: transform 0.4s var(--t);
}
.lead-modal-backdrop.show .lead-modal { transform: translateY(0); }
.lead-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px;
  background: transparent; border: 1px solid var(--regla);
  border-radius: 50%; color: var(--gris); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.25s var(--t), color 0.25s var(--t);
}
.lead-modal-close:hover { border-color: var(--tinta); color: var(--tinta); }
.lead-modal-close svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.lead-modal-eyebrow {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--naranja); margin-bottom: 12px;
}
.lead-modal-title {
  font-family: var(--display); font-size: 26px; font-weight: 500;
  line-height: 1.14; letter-spacing: -0.03em; text-wrap: balance;
}
.lead-modal-desc { margin: 12px 0 24px; font-size: 14.5px; line-height: 1.36; color: var(--gris); }
.lead-modal-actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 480px) { .lead-modal-actions { flex-direction: row; } }
.lead-modal-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px; border-radius: var(--r);
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.3s var(--t), border-color 0.3s var(--t), color 0.3s var(--t);
}
.lead-modal-btn.outline { background: transparent; color: var(--tinta); border-color: var(--regla-2); }
.lead-modal-btn.outline:hover { border-color: var(--tinta); }
.lead-modal-btn.primary { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.lead-modal-btn.primary:hover { background: var(--naranja-osc); border-color: var(--naranja-osc); }
.lead-modal-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--regla);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-claro);
}
@media (max-width: 480px) {
  .lead-modal { padding: 38px 24px 26px; }
  .lead-modal-title { font-size: 22px; }
}

/* Foco visible en todo lo interactivo */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

/* ==========================================================================
   SERVICIOS · carrusel de fichas
   Las seis dejaron de ser rejilla: la ficha activa manda al centro y las
   vecinas asoman a los lados, escaladas. Se distinguen por TAMAÑO, no por
   transparencia — una tarjeta a medio apagar se lee como rota, y además
   por el borde ya se entiende que hay más.
   El desplazamiento lo calcula el JS con el ancho real de la ficha, no con
   un porcentaje: así el centrado es exacto a cualquier tamaño de pantalla.
   ========================================================================== */
/* La franja naranja ceñida a su contenido: el aire de arriba y abajo lo
   daba el padding de sección genérico, pensado para bloques de texto, no
   para un carrusel que ya trae su propio respiro. */
.std--vinilos { padding: clamp(18px, 2.2vw, 30px) 0; }

/* La bajada del encabezado corre a lo ancho del panel completo, sin el tope
   de 56ch que trae .bajada por defecto. */
.encabezado .bajada { max-width: none; }

/* Sobre el board naranja, los controles cambian de bando: los puntos pasan
   a blanco (el naranja activo desaparecería sobre naranja) y la sombra de
   las tarjetas se refuerza para despegarlas del color. */
.std--vinilos .vin-punto { background: rgba(255, 255, 255, 0.45); }
.std--vinilos .vin-punto.activo { background: #fff; }
.std--vinilos .vin-flecha { border-color: transparent; }

.vinilos { position: relative; }
.vin-caja {
  overflow: hidden;
  /* Solo lo que la sombra de la ficha necesita para no recortarse. */
  padding: 14px 0;
  /* Las vecinas se difuminan hacia los filos: máscara de desvanecimiento en
     los bordes, no opacidad por tarjeta — así el fundido es continuo y la
     tarjeta que entra se va revelando a medida que avanza. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.vin-pista {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  align-items: stretch;
  gap: var(--vin-gap, 28px);
  transform: translateX(var(--vin-x, 0px));
  transition: transform 0.55s var(--t);
}
.vin-item {
  flex: 0 0 auto;
  width: min(340px, 38%);
  transform: scale(0.92);
  transition: transform 0.55s var(--t);
}
.vin-item.activo { transform: scale(1); }

/* La ficha: imagen arriba, cuerpo abajo. Sin borde pintado — se separa del
   board por luz. */
.vin-ficha {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: none;
  border-radius: var(--r);
  height: 100%;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10), 0 22px 50px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.55s var(--t);
}
.vin-item.activo .vin-ficha {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12), 0 30px 64px rgba(0, 0, 0, 0.22);
}

/* La imagen vive sobre un panel del papel cálido, con su propio radio dentro
   de la tarjeta — como en la referencia, no llega a los bordes. */
.vin-media {
  margin: 12px 12px 0;
  padding: 14px;
  background: var(--papel-2);
  border-radius: calc(var(--r) - 4px);
  display: flex; align-items: center; justify-content: center;
  /* Banda más baja: la imagen era lo que más alargaba la tarjeta. */
  aspect-ratio: 16 / 7;
}
.vin-media img {
  max-width: 52%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

.vin-cuerpo {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 14px clamp(16px, 1.9vw, 22px) 16px;
  text-align: left;
}

/* Etiqueta de categoría + apostilla */
.vin-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vin-chip {
  padding: 4px 11px;
  background: var(--papel-2);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--tinta);
}
.vin-punto-sep { color: var(--gris-claro); }
.vin-meta-txt {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--gris);
}

.vin-cuerpo h3 {
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--tinta);
  max-width: 20ch;
}
.vin-cuerpo p {
  margin-top: 10px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--gris);
  /* Justificado con partición: sin hyphens el justificado abre ríos de
     espacio entre palabras en una columna estrecha como esta. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* El pie quedó solo con el enlace: el bloque "Dónde · Hangzhou · Hong Kong"
   se retiró — decía lo mismo en las seis tarjetas y esa dirección ya vive
   en el pie de página y en Contacto. */
.vin-pie {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--regla);
}
.vin-dato { display: flex; flex-direction: column; gap: 5px; }
.vin-dato--der { text-align: right; }
.vin-dato-rot { font-size: 11.5px; color: var(--gris); }
.vin-dato-val {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.vin-enlace { margin-top: 0; white-space: nowrap; }

/* Flechas */
.vin-flecha {
  position: absolute; top: 50%;
  width: 46px; height: 46px;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--regla-2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  transition: background 0.25s var(--t), border-color 0.25s var(--t);
}
.vin-flecha:hover { background: var(--tinta); border-color: var(--tinta); }
.vin-flecha:hover svg { stroke: #fff; }
.vin-flecha svg { width: 20px; height: 20px; stroke: var(--tinta); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vin-flecha[disabled] { opacity: 0.35; cursor: default; }
.vin-flecha--izq { left: clamp(16px, 3vw, 44px); }
.vin-flecha--der { right: clamp(16px, 3vw, 44px); }

/* Puntos */
.vin-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.vin-punto {
  width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 50%;
  background: #D2D2CE;
  cursor: pointer;
  transition: background 0.3s var(--t), width 0.3s var(--t);
}
.vin-punto.activo { background: var(--naranja); width: 22px; border-radius: var(--r-pill); }

@media (max-width: 760px) {
  .vin-item { width: 84%; }
  .vin-flecha { display: none; }
  .vin-media { aspect-ratio: 16 / 10; }
  .vin-pie { flex-direction: column; align-items: flex-start; gap: 14px; }
  .vin-dato--der { text-align: left; }
}

/* ==========================================================================
   DOCK · navegación flotante estilo macOS
   La construye assets/js/dock.js a partir del menú superior; la clase
   con-dock (que oculta ese menú y el hamburguesa) solo existe si el script
   corrió — sin JS, la barra clásica sigue funcionando.
   La magnificación vive en el JS (ancho por resorte); aquí solo la piel.
   ========================================================================== */
.dock {
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 130;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(14, 16, 19, 0.07);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(20, 22, 26, 0.06), 0 18px 44px rgba(20, 22, 26, 0.13);
}
.dock-item {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--papel-2);
  color: var(--tinta);
  text-decoration: none;
  transition: background 0.25s var(--t), color 0.25s var(--t);
}
.dock-item svg {
  width: 46%; height: 46%;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.dock-item:hover { background: var(--tinta); color: #fff; }
/* La página actual, en el color de la casa */
.dock-item--aqui { background: var(--naranja); color: #fff; }
.dock-item--aqui:hover { background: var(--naranja-osc); }

/* Etiqueta flotante sobre el botón, como el tooltip del dock original */
.dock-etiqueta {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  background: var(--tinta);
  color: #fff;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--r-mini);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--t), transform 0.25s var(--t);
}
.dock-item:hover .dock-etiqueta { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Con el dock puesto, el menú central y el hamburguesa sobran, y el pie
   necesita aire para que el dock no tape lo último de la página. */
.con-dock .menu, .con-dock .nav-toggle, .con-dock .nav-panel { display: none; }
.con-dock body { padding-bottom: 92px; }

/* El titular con el efecto de proximidad nace DELGADO y engorda bajo el
   cursor. La clase la añade proximidad.js: sin JS el h1 conserva su peso
   macizo. Cada letra sobrescribe esto con su propio font-variation-settings. */
.hero-text h1.h1-proximidad {
  font-weight: 400;
  font-variation-settings: 'wght' 260;
}
.hero-text h1.h1-proximidad .letra {
  display: inline-block;   /* para medir cada letra por separado */
  transition: none;
}