/* ===== RuBot · Sistema visual v2.0 (marfil · carbón · dorado) ===== */
@import url("/fonts/gf.css");

:root {
  /* Paleta (tokens del sistema) */
  --bg-page: #f7ede8;
  --bg-card: #fff9f4;
  --bg-dark: #20201f;
  --text: #313130;
  --text-2: #6d6762;
  --gold: #dbad79;
  --gold-dark: #a9742a;
  --gold-light: #f5d47c;
  --ivory: #f6e6dc;
  --border: #e1d4cc;
  --border-2: #cabfb7;
  --visor: #121211;
  --white-hi: #fffcf6;

  --gold-grad: linear-gradient(90deg, #9b671d 0%, #d9aa72 35%, #e4bd8a 55%, #a46e24 100%);
  --gold-btn: linear-gradient(135deg, #b57a2a, #dbad79);
  --charcoal-grad: linear-gradient(90deg, #1d1d1c 0%, #3a3a39 48%, #171716 100%);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-card: 24px;
  --shadow-card: 0 16px 50px rgba(49, 49, 48, 0.06);
  --shadow-soft: 0 10px 30px rgba(49, 49, 48, 0.05);
  --maxw: 1240px;
  --nav-h: 74px;

  /* Variables ajustables en vivo con ?tune (ver tune.js) */
  --hero-robot-h: min(68vh, 720px);
  --hero-copy-w: min(660px, 34vw);
  --hero-h1: clamp(30px, min(8.9vh, 5.4vw), 100px);
  --hero-gap: clamp(16px, 2vw, 46px);
  --section-h2: clamp(28px, 2.9vw, 46px);
  /* Alto del personaje (y de las cabezas SVG) y cuánto asoma por encima de su
     tarjeta. Medido: cada píxel de arte cuesta 1.7px de alto de sección, y el
     Bloque 2 tiene que caber en una pantalla. A 1080 de ventana el máximo que
     entra son 230px; se dejan 220 para no ir al filo (25px de margen).
     Sigue siendo 1.6x el tamaño original, que era de 134. */
  /* La usuaria dio por bueno que el Bloque 2 deje de caber en una pantalla a
     cambio de que los RuBots se vean grandes, así que aquí ya no manda el
     ajuste al alto de ventana: manda el tamaño del personaje. */
  --sector-art-h: clamp(260px, 40vh, 480px);
  --sector-art-out: clamp(-140px, -11.8vh, -76px);
  /* cuánto sube la caja de texto por encima del personaje */
  --sector-body-sube: clamp(40px, 6.5vh, 84px);
  /* El hueco entre filas tiene que ser al menos lo que el personaje ASOMA por
     encima de su tarjeta; si no, la antena de la fila de abajo se mete dentro
     de la tarjeta de arriba. Se ata al mismo número para que no se puedan
     descuadrar por separado. */
  --sector-gap-y: calc(-1 * var(--sector-art-out) + 10px);

  /* Alto de la franja del Bloque 3. Sale de la proporción medida: la franja
     ocupa el 85% del ancho y su relación ancho/alto es 7.52, o sea
     85 / 7.52 = 11.3vw. El tope de 226px es el mismo cálculo con el ancho
     máximo del marco (1700 / 7.52). Todo lo de dentro se deriva de aquí, así
     que la franja escala como una pieza y no por partes sueltas. */
  --cta-h: clamp(150px, 11.3vw, 226px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  /* marfil UNIFORME (igual que las esquinas de la imagen del arco) */
  background: #f9efe7;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* Utilidades tipográficas */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
}
.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--text); margin: 0; }

/* ===== Botones ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(14px, 0.9vw, 17px);
  padding: clamp(13px, 1.5vh, 19px) clamp(22px, 1.7vw, 34px);
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: var(--gold-btn);
  color: #fff9f4;
  box-shadow: 0 10px 26px rgba(169, 116, 42, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(169, 116, 42, 0.36); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--gold);
  color: var(--text);
}
.btn-secondary:hover { background: #fff; transform: translateY(-2px); }
.btn .chev { width: 18px; height: 18px; }
.btn .play {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-btn); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -8px;
}

/* ===== Nav ===== */
/* Arriba del todo la barra no pinta nada: el fondo del bloque (nebulosa y
   red) sube por detras y se ve a traves. Al hacer scroll se vuelve solida,
   porque si no el menu quedaria ilegible sobre el contenido de abajo. */
/* La barra NO acompaña al scroll: se queda arriba del todo, en el sitio donde
   está, y se va con la página al bajar. Es lo que pidió la usuaria el
   2026-08-14 ("que se quede arriba y no baje si haces scroll").
   Estuvo en `sticky` y luego en `fixed` (las dos la pegan a la ventana y la
   arrastran hacia abajo contigo). `relative` la devuelve al flujo: sigue
   ocupando sus 74px arriba y ya no hay que compensar nada en <main>.
   El z-index se mantiene para que quede por encima de los lienzos del hero,
   que suben 74px para pasar por detrás de ella. */
.nav {
  position: relative;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
}
/* La clase .solida (fondo opaco + desenfoque al hacer scroll) ya no pinta:
   servía para que el menú se leyera cuando iba pegado y el contenido pasaba
   por debajo. Ahora la barra se va con la página, así que aplicarla solo daba
   un destello de fondo durante los primeros 74px. app.js sigue poniendo la
   clase; se deja sin estilo a propósito por si algún día vuelve a fijarse. */
.nav .nav-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 0 5%;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
/* MISMA REJILLA QUE .cta-marca, y no es un capricho: la bajada tiene que ir
   centrada bajo el CONJUNTO (cabeza + palabra), como en los logotipos de la
   franja y del pie. Colgada en columna al lado de la cabeza se iba 28 px a la
   derecha sobre un logotipo de 202 —medido—, y se notaba.
     fila 1: cabeza | palabra
     fila 2: la bajada, cruzando las dos columnas y centrada */
.brand {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  text-decoration: none;
}
.brand .logo-head   { grid-column: 1; grid-row: 1; }
.brand .wordmark    { grid-column: 2; grid-row: 1; }
.brand .brand-bajada { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
/* El translateY(4px) de .wordmark centraba la palabra SOLA contra la cabeza;
   con la bajada debajo, el conjunto ya se centra por sí mismo y ese empujón
   lo único que hace es descuadrarlo. */
.brand .wordmark { transform: none; }
.brand-bajada {
  font-family: var(--font-body);
  font-size: clamp(8px, 0.56vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
}
/* Render real de la cabeza (iconohero.png, sin fondo). El SVG #rubotHead se
   mantiene definido porque lo siguen usando las tarjetas del Bloque 2. */
.brand .logo-head { width: clamp(40px, 3vw, 58px); height: auto; display: block; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.1vw, 40px);
  letter-spacing: 0.5px;
  line-height: 1;
  /* Ajuste óptico: la caja de línea está centrada, pero la tinta de "RuBot"
     queda 4px por encima del centro de masa de la cabeza (la antena ocupa
     arriba y no pesa). Se baja para que los dos lean a la misma altura. */
  transform: translateY(4px);
}
.wordmark .ru { color: var(--text); }
/* LA MARCA REGISTRADA.
   Es el carácter ®, no un dibujo: se compone con la palabra, hereda su
   cuerpo y no hay que volver a colocarla cada vez que este cambie. No hereda
   el degradado de "Bot" porque es un hermano, no un hijo.

   ⚠️ LOS TRES NÚMEROS NO SON DE MANUAL: SON LOS DEL PECHO DEL ROBOT (19/08).
   El ® del render va en diagonal respecto a la "t" —separado y a la altura
   de la mayúscula— y aquí iba pegado al asta. Medido sobre el PNG y sobre la
   página, en unidades de altura de mayúscula:

                             pecho    rótulos (antes)
       separación tras "t"   0.101    0.043   ← menos de la mitad
       alto del símbolo      0.304    0.256
       centro sobre la base  0.842    0.931   ← y más alto

   De ahí salen los tres valores, con las métricas reales de Playfair
   Display 700 (mayúscula 0.71875 em; tinta del ® de 0.219 a 0.781 em, o sea
   que el glifo YA nace elevado, y mide 0.5625 em de alto):

     · cuerpo   → 0.5625 · f = 0.304 · 0.71875     →  f = 0.388em
     · altura   → tinta arriba a 0.994 de mayúscula, o sea 0.7144 em; el
                  ® sube 0.781·f = 0.3031, luego su base va a 0.4113 em de
                  la base de la palabra = 1.06em de su propio cuerpo
     · avance   → la "t" avanza 0.352 y su tinta llega a 0.359 (sobresale),
                  el ® entra con 0.047 de margen propio y hay 0.5px de
                  letter-spacing: para dejar 0.0726 em de aire hay que
                  añadir 0.136em

   Y AFINADO CONTRA LA PÁGINA YA PINTADA, midiendo la tinta en la captura,
   que es lo único que no miente: con esos valores salía a 1.013 de tope y
   0.127 de hueco, o sea un píxel largo de cada. De ahí 1.025em y 0.088em.
   ⚠️ No medir esto con getBoundingClientRect: la caja de un elemento EN LÍNEA
   es su line-height (aquí 1), no su tinta, y da números que parecen buenos y
   no lo son.

   Se sube con `position: relative`, NO con `vertical-align`: el segundo
   agranda la caja de línea y con ella el alto del logotipo, que en la barra
   está contado. */
.wordmark .reg {
  font-size: 0.388em;
  position: relative;
  bottom: 1.025em;
  letter-spacing: 0;
  margin-left: 0.088em;
  /* 20/08: NEGRA, no dorada, en los tres rotulos y tambien en el pecho del
     robot. La UNICA excepcion es el logotipo del pie: alli el fondo es oscuro
     y un negro no se veria, asi que va en dorado (regla mas abajo). */
  color: var(--text);
}
/* El dorado de "Bot" es icónico de la marca: se saca del logotipo para poder
   usarlo en cualquier titular (lo pide el h2 del Bloque 2). */
.wordmark .bot,
h1 .bot, h2 .bot, h3 .bot {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
h1 .ru, h2 .ru, h3 .ru { color: inherit; }
.nav-links { display: flex; gap: 38px; }
/* Tipografía del logo (Playfair) y carbón pleno: en gris claro se perdía. */
.nav-links a {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.05vw, 20px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  transform-origin: center center;
  will-change: transform;
  /* rápido y con rebote corto */
  transition:
    transform 0.13s cubic-bezier(0.22, 1.2, 0.36, 1),
    color 0.13s ease,
    text-shadow 0.13s ease;
}

/* El sol de detrás: un radial que crece con el texto. Va en ::before para no
   tocar el layout, y por debajo de la letra. */
.nav-links a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  height: 460%;
  transform: translate(-50%, -50%) scale(0.25);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 240, 200, 0.95) 0%,
    rgba(255, 205, 125, 0.55) 32%,
    rgba(255, 190, 105, 0.22) 55%,
    rgba(255, 190, 105, 0) 74%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.13s ease, transform 0.13s cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* El aumento va a 1.5 y no a 2.5: a 2.5 el enlace se comía media barra y el
   resto del menú se veía diminuto al lado. El sol y el resplandor van dentro
   del propio enlace, así que escalan solos y siguen proporcionados. */
.nav-links a:hover,
.nav-links a.conectado {
  transform: scale(1.5);
  color: #3d2506;
  z-index: 5;
  text-shadow:
    0 0 4px rgba(255, 250, 235, 1),
    0 0 12px rgba(255, 214, 150, 0.95),
    0 0 30px rgba(255, 186, 92, 0.8),
    0 0 62px rgba(219, 173, 121, 0.55);
}
.nav-links a:hover::before,
.nav-links a.conectado::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.nav-cta { display: flex; align-items: center; gap: 14px; }
.menu-toggle { display: none; }
/* el botón que vive dentro del panel del menú: fuera de móvil no existe */
.solo-movil { display: none; }

/* ===== Hero ===== */
/* Bloque 1: 3 zonas (texto · robot · tarjetas) + franja abajo, en 1 pantalla */
.hero {
  position: relative;
  min-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding-bottom: 22px;
}
.hero-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr auto 0.95fr;
  align-items: center;
  gap: var(--hero-gap);
  width: 100%;
  max-width: 2100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 120px);
}
.hero-main > * { min-width: 0; }
.hero-copy { max-width: var(--hero-copy-w); }
.hero-stage { display: flex; justify-content: center; align-items: center; }

/* Fondo animado del bloque (arcos, líneas finas, puntos y destellos).
   Va debajo de todo y no intercepta el ratón. */
.hero-bg,
.hero-red {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--nav-h));
  height: calc(100% + var(--nav-h));
  z-index: 0;
  pointer-events: none;
  display: block;
  /* El borde de abajo se cortaba en seco y dejaba una línea recta entre el
     bloque 1 y el 2. Medido en la costura: 6-10 niveles de salto de tono y la
     textura cayendo de 5.77 a 0.00 de golpe. Los dos lienzos se desvanecen
     antes de llegar al final, así que el bloque 1 termina en el crema de la
     página y el 2 arranca del mismo sitio. */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, 0) 99%);
  mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, 0) 99%);
}
/* la red va por encima de la nebulosa */
.hero-red { z-index: 1; }
.hero-copy,
.hero-stage,
.hero-cards { z-index: 2; }

/* Escenario por capas: arco de fondo · luz cálida · robot giratorio.
   El arco lleva los bordes fundidos, así que no se ve ningún recuadro. */
.stage3d {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%;
}
.stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.stage-halo {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 74%;
  height: 52%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 226, 170, 0.5), rgba(255, 226, 170, 0.12) 55%, rgba(255, 226, 170, 0) 78%);
}
/* Las 5 vistas superpuestas: el JS funde de una a otra según el ratón */
.spin {
  position: absolute;
  /* valores calculados desde la composición original del render */
  /* Sin pedestal propio: apoya en el podio del arco.
     Medido sobre bloque1-v2: la cabeza ocupa el 76.9% del arco y los pies
     quedan al 13.5% del alto. El eje se corre al 46.7% porque en la vista
     de 3/4 la cabeza no está centrada en el fotograma. */
  /* botchroma.png sin fondo: las orejas marcan el ancho del recorte y el eje
     de la cabeza cae en el 50%. Medido sobre bloque1-v3: la cabeza ocupa el
     82.8% del arco y los pies quedan al 13.4% del alto. */
  left: var(--robot-x, 50%);
  bottom: var(--robot-y, 13.4%);
  width: var(--robot-w, 79.3%);
  aspect-ratio: 781 / 1006;
  transform: translateX(-50%);
  will-change: transform;
}
.spin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 14px 18px rgba(120, 90, 40, 0.2));
}
/* Sin JS se ve la vista frontal, nunca un hueco */
.spin img { opacity: 1; }
.spin { transition: opacity 0.6s ease; }

/* Lienzo del robot 3D: se enciende cuando el modelo está listo.
   Un <canvas> es un elemento reemplazado: con inset:0 NO se estira,
   necesita width/height al 100% explícitos. */
.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-cards { display: flex; flex-direction: column; gap: 16px; justify-self: end; }
/* El titular iba en carbón plano y se quedaba sin cuerpo. Ahora lleva:
   - peso 800 (Playfair sí lo tiene en redonda; la cursiva solo llega a 600)
   - degradado vertical en el propio texto, de casi negro a marrón cálido
   - relieve: un filo claro de 1px arriba y una sombra cálida difusa debajo.
   El relieve va con filter: drop-shadow y NO con text-shadow, porque con
   background-clip:text la sombra normal se recorta y no se ve. */
.hero-copy h1 {
  font-size: var(--hero-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.5px;
  background: linear-gradient(177deg, #14100b 0%, #2f2b26 48%, #4b4034 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 252, 246, 0.75))
    drop-shadow(0 10px 24px rgba(96, 64, 24, 0.20));
}
.hero-copy h1 em {
  font-style: italic;
  font-weight: 600; /* la cursiva de Playfair no pasa de 600: pedir 700 la falsea */
}
/* El dorado, con más recorrido: oscuro en los extremos y brillo en el centro */
.hero-copy h1 em.gold-text {
  background: linear-gradient(100deg,
    #7d4f12 0%, #b8862e 18%, #e7c078 38%, #fbe6b4 50%,
    #dcae63 64%, #a97327 84%, #6f440d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy .lead {
  margin: 24px 0 30px;
  color: var(--text-2);
  font-size: clamp(15px, 1.15vw, 22px);
  max-width: 30em;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Zona visual: robot + tarjetas */
.hero-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.hero-visual > * { min-width: 0; }

/* Cúpula + pedestal + robot */
/* El arco grande, ~1/4 del bloque, a la derecha */
.robot-stage {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  width: 25%;
  min-width: 260px;
  z-index: 1;
}
.stage-inner { position: relative; width: 100%; }
.stage-img { display: block; width: 100%; height: auto; }
/* Halo de luz cálido dentro del arco, donde se posa el robot */
.stage-glow {
  position: absolute;
  left: 53%;
  top: 38%;
  width: 62%;
  height: 52%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 226, 170, 0.55), rgba(255, 226, 170, 0.14) 55%, rgba(255, 226, 170, 0) 78%);
  filter: blur(3px);
}
.stage-robot {
  position: absolute;
  left: 48%;
  bottom: 22%;
  width: 34%;
  transform: translateX(-50%);
  z-index: 2;
}
.stage-robot .floaty { animation: float 5.5s ease-in-out infinite; }
#robotImg {
  display: block;
  width: 100%;
  transform-origin: center bottom;
  filter: drop-shadow(0 12px 16px rgba(120, 90, 40, 0.22));
}
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

/* ===== Tarjetas de mármol del hero =====
   Todas las medidas salen de spec-bloque1.json → "tarjetas", medidas sobre
   bloque1-v3.png. Las de tipografía vienen en px de un lienzo de 1672 de ancho,
   así que se pasan a vw dividiendo entre 16.72.

   Tres capas por tarjeta y cada una con UN solo transform, porque si se juntan
   se pisan:
     .mini-card  -> la escribe GSAP (entrada y vaivén). No lleva transform en CSS.
     .mc-face    -> la superficie: mármol, borde, sombra y el gesto de hover.
     .ico/.barra -> la vida del icono.
*/
.hero-cards { display: flex; flex-direction: column; gap: 16px; }

.mini-card {
  position: relative;
  --mc-titulo: clamp(15px, 1.077vw, 23px);   /* 18px sobre 1672 */
  --mc-desc: clamp(13px, 0.927vw, 20px);     /* 15.5px sobre 1672 */
}

.mc-face {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  /* Mármol beige con vetas doradas. NO es una imagen de IA: se genera por código
     en tools/marmol.cjs (ruido de cordillera con deformación de dominio). */
  background-color: #fffaf4;
  background-image: url("assets/textures/marmol-beige.png");
  background-size: 150% auto;
  background-repeat: no-repeat;
  border: 1px solid rgba(196, 168, 132, 0.38);
  box-shadow:
    0 18px 40px rgba(120, 88, 40, 0.13),
    0 3px 8px rgba(120, 88, 40, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition:
    transform 0.42s cubic-bezier(0.22, 0.9, 0.28, 1),
    box-shadow 0.42s ease,
    border-color 0.42s ease;
}
/* Cada tarjeta enseña un trozo distinto de la piedra: con la misma posición
   las tres se ven clonadas y canta mucho. */
.mini-card:nth-child(1) .mc-face { background-position: 2% 6%; }
.mini-card:nth-child(2) .mc-face { background-position: 54% 50%; }
.mini-card:nth-child(3) .mc-face { background-position: 98% 94%; }

/* Velo: baja el contraste de la veta para que el texto se lea, sin borrarla */
.mc-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Ojo con subirlo: con el velo al 87% la piedra desaparecía y la tarjeta se
     quedaba en crema plano. Aquí solo baja el contraste lo justo para leer. */
  background:
    linear-gradient(126deg, rgba(255, 253, 250, 0.58) 0%, rgba(255, 250, 243, 0.34) 46%, rgba(253, 242, 228, 0.22) 100%),
    radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 62%);
}
/* Detrás del texto hace falta un poco más de velo, pero MUY difuminado: con el
   degradado llegando vivo al borde de la caja se veía el rectángulo recortado
   sobre la piedra. Se agranda la caja y el degradado muere mucho antes. */
.mc-txt::before {
  content: "";
  position: absolute;
  inset: -60% -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 40% at 50% 50%,
    rgba(255, 253, 249, 0.82), rgba(255, 253, 249, 0.34) 55%, rgba(255, 253, 249, 0) 78%);
}

/* Barrido de luz al pasar el ratón: la piedra pulida devolviendo el reflejo */
.mc-sheen {
  position: absolute;
  inset: -50% -70%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(102deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 247, 228, 0.9) 48%,
    rgba(255, 255, 255, 0) 58%);
}
.mini-card:hover .mc-sheen { animation: barrido 1.05s cubic-bezier(0.3, 0.1, 0.2, 1); }
@keyframes barrido {
  0%   { transform: translateX(-120%); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* --- Icono --- */
.mc-ic {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
/* Luz derramada sobre la piedra: es lo que hace que el icono parezca encendido.
   Sobre marfil no se puede "iluminar" con blanco, así que la luz es ámbar. */
.mc-pool {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 195%;
  height: 195%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 203, 128, 0.45), rgba(255, 203, 128, 0.15) 45%, rgba(255, 203, 128, 0) 72%);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.ico {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* NEÓN SOBRE FONDO CLARO: el trazo va oscuro y saturado y la luz se pone
     FUERA, en el halo. Al revés (núcleo claro) sobre marfil no se ve nada:
     el fondo ya está al 95% de brillo y no queda margen para iluminar. */
  filter:
    drop-shadow(0 0 1.2px rgba(169, 116, 42, 0.9))
    drop-shadow(0 0 4px rgba(240, 186, 106, 0.95))
    drop-shadow(0 0 11px rgba(255, 198, 112, 0.6))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
  transition: filter 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.ico .trazo { stroke: url(#neonOro); stroke-width: 2.7; fill: none; }
.ico .eco    { stroke-width: 1.5; opacity: 0.5; }
.ico .aro    { stroke-width: 1.3; opacity: 0.4; }
.ico .marcas { stroke-width: 1.9; }
.ico .marcas.corta { stroke-width: 1.5; opacity: 0.6; }
.ico .base   { stroke-width: 1.8; opacity: 0.5; }
.ico .barra  { stroke-width: 2.1; fill: rgba(201, 146, 47, 0.12); }
/* Las agujas a 2.9 se empastaban con el eje y el reloj era un borrón */
.ico .aguja-min  { stroke-width: 2.2; }
.ico .aguja-hora { stroke-width: 2.5; }
.ico .eje    { fill: url(#neonOro); stroke: none; r: 1.5px; }
.ico .chispa { fill: url(#neonOroSuave); stroke: none; }

/* Vida en reposo: destellos desfasados y el reloj andando */
.ico .chispa {
  transform-box: fill-box;
  transform-origin: center;
  animation: destello 3.6s ease-in-out infinite;
}
.ico-estrella .c2 { animation-delay: -1.2s; }
.ico-estrella .c3 { animation-delay: -2.4s; }
@keyframes destello {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.ico-reloj .aguja-min,
.ico-reloj .aguja-hora {
  transform-box: view-box;
  transform-origin: 27px 29px;
}
.ico-reloj .aguja-min  { animation: girar 14s linear infinite; }
.ico-reloj .aguja-hora { animation: girar 168s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.ico-grafica .barra {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.ico-grafica .b2 { transition-delay: 0.05s; }
.ico-grafica .b3 { transition-delay: 0.1s; }
.ico-grafica .b4 { transition-delay: 0.15s; }
.ico-grafica .flecha { stroke-dasharray: 44; stroke-dashoffset: 0; } /* largo del trazado */

/* --- Texto --- */
.mc-txt { position: relative; z-index: 2; min-width: 0; }
.mc-txt strong {
  display: block;
  font-size: var(--mc-titulo);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #26221d;
  margin-bottom: 0.26em;
}
.mc-txt span {
  display: block;
  font-size: var(--mc-desc);
  line-height: 1.48;
  color: var(--text-2);
}

/* --- Al pasar el ratón --- */
.mini-card:hover .mc-face {
  transform: translateY(-5px) scale(1.018);
  border-color: rgba(186, 146, 86, 0.62);
  box-shadow:
    0 28px 56px rgba(120, 88, 40, 0.2),
    0 6px 14px rgba(120, 88, 40, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.mini-card:hover .ico {
  transform: scale(1.07);
  filter:
    drop-shadow(0 0 2px rgba(214, 166, 92, 1))
    drop-shadow(0 0 9px rgba(255, 206, 128, 0.9))
    drop-shadow(0 0 18px rgba(255, 190, 96, 0.45))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
}
.mini-card:hover .mc-pool { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
.mini-card:hover .ico-grafica .barra { transform: scaleY(1.14); }
.mini-card:hover .ico-grafica .flecha { animation: trazar 0.8s ease forwards; }
@keyframes trazar { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mc-sheen,
  .ico .chispa,
  .ico-reloj .aguja-min,
  .ico-reloj .aguja-hora,
  .ico-grafica .flecha { animation: none !important; }
  .mc-face, .ico, .mc-pool, .ico-grafica .barra { transition: none !important; }
}

/* =================================================================
   FRANJA DE CONFIANZA · carrusel con profundidad
   Sustituye a la tarjeta plana (.trust-card, que era un rectángulo con borde
   y sombra). Ahora son tres piezas: el rótulo, un suelo de mármol en fuga y
   una pista de logos que se acercan y se alejan.

   LA IDEA: el tamaño NO se anima. Lo único que se anima es la posición en el
   espacio (x y z) y la perspectiva hace el resto. Por eso el logo que viene
   de frente crece de verdad, con su deformación, en vez de "hacerse grande".
   ================================================================= */
:root {
  /* Altura de un logo a escala 1. Los .webp salen de tools/marcas.cjs
     normalizados por ALTURA (300 px, con tope de ancho), así que basta este
     número para dimensionarlos a todos: alto = --h * --marca-alto / 300.
     Se igualan por altura y no por área de caja porque en un carrusel los
     logos pasan de uno en uno: lo que hace que se lean parejos es que ocupen
     la misma franja de altura, no que tengan la misma superficie. */
  --marca-alto: clamp(32px, 3.2vw, 62px);

  /* Perspectiva y planos. El de cerca sale 2.1 veces y el de lejos 0.57:
     entre uno y otro hay CASI CUATRO VECES, que es lo que hace que se lea como
     distancia y no como un simple vaivén.
       cerca = 700 / (700 - 367) = 2.10
       lejos = 700 / (700 + 520) = 0.57
     Se empezó con 1.32 de cerca y no bastaba: el logo del centro apenas se
     distinguía de los de al lado. */
  --marca-p: 700px;
  --marca-z-cerca: 367px;
  --marca-z-lejos: -520px;

  /* Medio recorrido. Tiene que ser bastante mayor que media franja porque en
     el extremo el logo está LEJOS y la perspectiva le encoge también la x:
     74vw de recorrido se quedan en 74 x 0.59 = 44vw en pantalla, justo fuera
     de los 40vw de media franja. Con menos, los logos aparecen de la nada
     dentro del encuadre. */
  --marca-recorrido: 84vw;
  --marca-vuelta: 36s;

  /* El HORIZONTE, medido desde abajo. Lo que queda por debajo es suelo.
     ⚠️ Va ALTO (66%), no bajo. Con la caída de aquí abajo, los logos apoyan por
     DEBAJO del horizonte, así que lo que hay que reservar arriba es solo lo que
     sobresale el más alto (unos 70px) y abajo todo el recorrido de la caída más
     el reflejo (unos 155px). Puesto al revés —el horizonte abajo— quedaba un
     hueco muerto enorme entre el rótulo y los logos. */
  --marca-linea: 66%;

  /* ⚠️ ESTA ES LA PIEZA QUE HACE QUE SE LEA COMO PROFUNDIDAD.
     Sin ella, todos los logos apoyan en la MISMA línea y el efecto se queda en
     "logos que cambian de tamaño". En un suelo de verdad, lo que está lejos
     apoya más arriba (pegado al horizonte) y lo que está cerca apoya más
     abajo, y la separación es proporcional a lo grande que se ve.
     Sale gratis: se le da una caída CONSTANTE en el espacio 3D y la
     perspectiva la divide sola por la distancia, que es exactamente la ley que
     se quiere. A 46px, el de lejos apoya 26px bajo el horizonte y el de cerca
     97px. Y así el carrusel y el suelo de mármol cuentan lo mismo. */
  --marca-caida: 46px;
}

/* La banda. Va entre el hero y los sectores, sobre el crema de la página.
   No repite la nebulosa (esa es la firma del Bloque 1) ni la piedra del
   Bloque 2: lo único que trae es su propio suelo, que además hace de puente
   entre los dos, porque la textura no cae a cero de golpe en la costura. */
.marcas-banda {
  position: relative;
  background: #f9efe7;
  padding: clamp(14px, 2.4vh, 34px) 0 clamp(20px, 3.4vh, 46px);
}
.marcas-banda .marcas {
  width: 80%;
  max-width: 1700px;
  margin: 0 auto;
  /* 270px a 1080. El alto de la banda es el techo del logo que viene de
     frente: se calcula al revés, desde el más alto de los ocho (Doña Col, que
     es un emblema redondo) puesto en el plano cercano. */
  height: clamp(230px, 26vh, 320px);
}

.marcas {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- El rótulo ----------
   Antes iba en 12px, versalitas y gris: correcto y sin ninguna presencia.
   Ahora es Playfair con el degradado dorado de la marca y dos filetes que se
   desvanecen, el mismo recurso que ya usa la cabecera del Bloque 2. */
.marcas-titulo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.3vw, 28px);
  margin: 0 0 clamp(3px, 0.5vh, 9px);
}
.marcas-titulo::before,
.marcas-titulo::after {
  content: "";
  flex: 1 1 auto;
  max-width: 20%;
  height: 1px;
  background: linear-gradient(90deg, rgba(219, 173, 121, 0), var(--gold));
}
.marcas-titulo::after { transform: scaleX(-1); }
/* ⚠️ NO se usa --gold-grad aquí. Ese degradado pasa por #e4bd8a, que sobre el
   crema de la página (#f9efe7) se queda en 4 niveles de diferencia: el centro
   de cada letra desaparecía y el rótulo no se leía. Es la misma lección que ya
   estaba anotada para el neón del hero — SOBRE MARFIL NO SE PUEDE ILUMINAR—,
   aplicada a la tipografía: el oro que funciona sobre claro es el OSCURO.
   Este degradado se mueve entre #6d4610 y #a9742a, así que conserva el brillo
   metálico pero el tono más claro sigue siendo más oscuro que el fondo. */
.marcas-titulo span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 23px);
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: linear-gradient(90deg, #6d4610 0%, #a9742a 28%, #8a5c18 62%, #6d4610 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* El relieve va con drop-shadow y NO con text-shadow: con background-clip
     en el texto, la sombra normal se recorta y no se ve. Misma lección que
     el titular del hero. Va por DEBAJO y en claro, para despegar la letra del
     fondo sin comerle contraste. */
  filter: drop-shadow(0 1px 0 rgba(255, 252, 246, 0.9));
}

/* ---------- La escena ---------- */
.marcas-escena {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Recorta los logos que salen por los lados. OJO: NO se usa overflow para
     desvanecerlos, sino una máscara, porque un corte seco delata el truco.
     Que aquí se aplane el 3D da igual: cada logo lleva su propia perspective()
     dentro de su transform, así que no depende de preserve-3d de nadie. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}

/* ---------- El suelo ----------
   El mismo mármol de las tarjetas y del Bloque 2, tumbado. Se ancla por el
   BORDE DE ARRIBA (transform-origin: 50% 0) y se gira en X, así que ese borde
   se queda quieto —es el horizonte, y coincide con la línea donde pisan los
   logos— mientras el borde de abajo se viene hacia el espectador. */
.marcas-suelo {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: 0;
  height: var(--marca-linea);
  /* Dos capas: una sombra cálida que hace de suelo y, debajo, las vetas.
     ⚠️ La piedra sola NO se ve: es más clara que el crema de la página y sobre
     la nebulosa desaparece. Lo que dibuja el suelo es la SOMBRA, más densa
     junto al horizonte y desvaneciéndose hacia el espectador; el mármol solo
     le pone grano encima. (En el Bloque 2 esto se resuelve con
     mix-blend-mode: multiply, pero aquí no vale: .trust-inline crea contexto
     de apilamiento con z-index 2 y el multiply se quedaría sin nada contra lo
     que multiplicar.) */
  /* ⚠️ La sombra arranca en TRANSPARENTE y no a tope. Empezando con opacidad
     en el borde de arriba, el horizonte salía como una línea recta y dura de
     lado a lado: parecía el canto de un estante, no un suelo. */
  background-image:
    linear-gradient(to bottom, rgba(116, 82, 40, 0) 0%, rgba(116, 82, 40, 0.30) 13%, rgba(116, 82, 40, 0.09) 52%, rgba(116, 82, 40, 0) 100%),
    url("assets/textures/marmol-beige.png");
  background-size: 100% 100%, 78% auto;
  background-position: center top, center bottom;
  transform-origin: 50% 0%;
  /* ⚠️ El ángulo cuesta ALTURA: un plano tumbado 64° se proyecta a menos de la
     mitad de lo que mide, y con 58° se conserva bastante más. Es lo que hacía
     que el suelo no se viera cuando esto vivía dentro del hero. */
  transform: perspective(560px) rotateX(52deg);
  opacity: 0.9;
  filter: contrast(1.15) saturate(0.85);
  -webkit-mask-image: radial-gradient(128% 108% at 50% 0%, #000 24%, rgba(0, 0, 0, 0.42) 58%, transparent 100%);
  mask-image: radial-gradient(128% 108% at 50% 0%, #000 24%, rgba(0, 0, 0, 0.42) 58%, transparent 100%);
  pointer-events: none;
}

/* ---------- La pista ---------- */
.marcas-pista {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marcas-pista li {
  position: absolute;
  left: 50%;
  bottom: var(--marca-linea);
  width: calc(var(--w) * var(--marca-alto) / 300);
  margin-left: calc(var(--w) * var(--marca-alto) / -600);
  /* El punto de fuga de cada logo es SU PROPIA BASE. Como todos están en
     left: 50% y centrados, esa base es la misma para los ocho: comparten
     punto de fuga y, al alejarse, encogen hacia la línea del suelo en vez de
     hacia su centro. Eso es lo que hace que parezca que pisan. */
  transform-origin: 50% 100%;
  animation: marcas-desfile var(--marca-vuelta) linear infinite;
  /* El retardo negativo es lo que reparte los logos por el recorrido: cada uno
     entra en la vuelta ya empezada, en su puesto. El divisor es CUÁNTOS SON, y
     antes era un 8 escrito aquí: si se añadía o quitaba una marca sin tocar
     esta línea, se amontonaban. Ahora lo dice el propio <ul> con --total. */
  animation-delay: calc(var(--n) * var(--marca-vuelta) / var(--total, 8) * -1);
  will-change: transform, opacity;
}
/* UNA SOLA MARCA = NADA DE DESFILE. Se queda plantada en el puesto de delante,
   que es exactamente el fotograma del 50% del @keyframes: centrada, cerca y
   opaca. No se toca el resto de la maquinaria; en cuanto --total sea mayor que
   1, esta regla deja de aplicar y el desfile vuelve solo. */
.marcas-pista[data-total="1"] li {
  animation: none;
  transform: perspective(var(--marca-p)) translate3d(0, var(--marca-caida), var(--marca-z-cerca));
  opacity: 1;
}

.marcas-pista img {
  display: block;
  width: 100%;
  height: auto;
}

/* La sombra de contacto. Es lo que de verdad pega el logo al suelo: sin ella
   los logos flotan aunque tengan reflejo. Va dentro del <li>, así que la
   perspectiva la encoge con él y el que está lejos proyecta una sombra más
   pequeña, como toca. */
.marcas-pista li::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7%;
  width: 112%;
  height: 18%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(94, 66, 34, 0.34) 0%, rgba(94, 66, 34, 0.14) 45%, rgba(94, 66, 34, 0) 72%);
  pointer-events: none;
}

/* El reflejo en el suelo. Es el MISMO archivo (ya está en caché), puesto de
   fondo y volteado. Va con background-position: bottom a propósito: la caja
   solo muestra el trozo de abajo del logo, que es el que toca el suelo; al
   voltear queda pegado a sus pies y no al revés. */
.marcas-pista li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 58%;
  background-image: var(--reflejo);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform: scaleY(-1);
  opacity: 0.2;
  /* La máscara se aplica ANTES del volteo, así que se escribe al revés de
     como se ve: opaca abajo, transparente arriba. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 20%, #000 100%);
  pointer-events: none;
}

/* La vuelta. Solo se mueven x y z; el tamaño lo pone la perspectiva.
   El orden importa: perspective() va PRIMERO, así la x también se proyecta y
   los logos de lejos avanzan más despacio por la pantalla, que es lo que hace
   la profundidad creíble. Con translateX() antes de la perspectiva, todos
   cruzarían a la misma velocidad y se vería plano. */
@keyframes marcas-desfile {
  0% {
    transform: perspective(var(--marca-p)) translate3d(var(--marca-recorrido), var(--marca-caida), var(--marca-z-lejos));
    opacity: 0;
  }
  10%, 90% { opacity: 1; }
  50% {
    transform: perspective(var(--marca-p)) translate3d(0, var(--marca-caida), var(--marca-z-cerca));
    opacity: 1;
  }
  100% {
    transform: perspective(var(--marca-p)) translate3d(calc(-1 * var(--marca-recorrido)), var(--marca-caida), var(--marca-z-lejos));
    opacity: 0;
  }
}

/* ---------- Pantalla estrecha ----------
   ⚠️ El recorrido va en vw, así que en móvil se encoge con la pantalla pero el
   NÚMERO de logos no: los ocho se repartían en 656px y, midiendo 107 de ancho,
   se pisaban unos a otros. Se alarga el recorrido a 150vw (que separa a 146px)
   y se encogen los logos. También se baja el plano cercano: con 2.1 el logo
   del centro tapaba la pantalla entera. */
@media (max-width: 780px) {
  :root {
    --marca-alto: clamp(22px, 7vw, 40px);
    /* 210vw, no 150. El recorrido reparte los ocho logos, así que es lo que
       marca cuánto se separan: a 150vw quedaban a 146px y con 90 de ancho se
       veían pegados. A 210vw quedan a 205px y pasan de uno en uno. */
    --marca-recorrido: 210vw;
    --marca-caida: 26px;
    --marca-z-cerca: 240px;      /* 1.52 en vez de 2.10 */
    --marca-z-lejos: -420px;
    --marca-linea: 62%;
  }
  .marcas-banda { padding: 18px 0 22px; }
  .marcas-banda .marcas { width: 88%; height: clamp(150px, 27vh, 220px); }
  /* El rótulo iba en una sola línea y se salía por la derecha. */
  .marcas-titulo { gap: 10px; }
  .marcas-titulo span { white-space: normal; text-align: center; font-size: clamp(12px, 3.5vw, 17px); }
  .marcas-titulo::before, .marcas-titulo::after { max-width: 10%; }
}

@media (prefers-reduced-motion: reduce) {
  .marcas-pista li { animation: none; }
  /* Sin movimiento se reparten quietos, todos al mismo plano medio. */
  .marcas-pista li {
    transform: perspective(var(--marca-p))
      translate3d(calc((var(--n) - 3.5) * 11.4vw), var(--marca-caida), -120px);
    opacity: 1;
  }
}

/* SVG robot: piezas */
.svg-gold { fill: url(#goldGrad); }

/* ===== BLOQUE 2 · Sectores ===== */
.sectors {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Simétrico. Antes el padding de arriba llevaba +74px porque la barra iba
     pegada y tapaba esa franja; ahora la barra se va con la página, así que
     ese hueco dejaba el contenido unos 37px bajo respecto al centro. */
  padding: clamp(12px, 2vh, 30px) 0;
  /* el mismo crema de la página, pero pintado aquí para que el mármol de
     ::before tenga contra qué multiplicar sin salirse de la sección */
  background: #f9efe7;
  isolation: isolate;
}
/* Fondo de piedra del bloque 2.
   No se repite la nebulosa del hero: esa es la firma del bloque 1 y repetirla
   apelmaza. Se usa el MISMO mármol de las tarjetas, enorme y muy lavado, que
   además ata visualmente los dos bloques.
   Va en `multiply` a propósito: el mármol es más claro que el crema de la
   página, así que superpuesto normal ACLARARÍA la sección y volveríamos a
   tener un salto de tono en la costura, solo que al revés. Multiplicando, el
   blanco de la piedra no hace nada y solo entran las vetas. */
/* Capa de fuera: se queda QUIETA. Lleva el desvanecido de entrada y salida, el
   recorte y el modo de fusión. Si el desvanecido viajara con la piedra se
   vería la veta entrar de golpe por el borde de arriba. */
.sectors-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: multiply;
  opacity: 0.46;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 15%, #000 84%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 15%, #000 84%, rgba(0, 0, 0, 0) 100%);
}
/* Capa de dentro: la que cae.
   Mide el doble de alto, arranca una altura por encima y la baldosa ocupa la
   mitad, o sea exactamente el alto de la sección. Bajándola media altura vuelve
   al punto de partida y el bucle es invisible. Con el doble basta: a mitad de
   recorrido va de -945 a 945 y a final de 0 a 1890, y la sección (0..945) queda
   cubierta siempre. Con el triple sobraba capa y son varios MB de más en la
   tarjeta gráfica para nada.
   La textura es la versión `marmol-corriente`, que empalma consigo misma por
   arriba y por abajo (la normal deja un corte de 14 niveles; esta, de 1).
   Se mueve con `transform`, que la tarjeta gráfica compone sola. Con
   `background-position` habría que repintar la pantalla entera en cada
   fotograma, que es justo lo que no queremos en un escritorio remoto. */
.corriente {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  height: 200%;
  background-image: url("assets/textures/marmol-corriente.png");
  background-repeat: repeat;
  background-size: 100% 50%;
  will-change: transform;
  animation: caer 75s linear infinite;
}
@keyframes caer {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); } /* una baldosa justa */
}
@media (prefers-reduced-motion: reduce) {
  .corriente { animation: none; }
}
.sectors-inner { width: 85%; max-width: 1700px; margin: 0 auto; }

/* Cabecera de sección */
/* Al hueco normal se le suma lo que el personaje ASOMA por encima de su
   tarjeta (--sector-art-out, que es negativo: por eso se resta). Sin esto la
   antena del personaje se metía dentro del subtítulo de la sección. */
.section-head {
  text-align: center;
  margin-bottom: calc(clamp(20px, 2.8vh, 40px) - var(--sector-art-out));
}
.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.eyebrow-row .rule {
  width: clamp(40px, 8vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, rgba(219, 173, 121, 0), var(--gold));
}
.eyebrow-row .rule:last-child { background: linear-gradient(90deg, var(--gold), rgba(219, 173, 121, 0)); }
.diamond { margin: 10px auto 0; width: 9px; height: 9px; }
.diamond svg { display: block; width: 100%; height: 100%; }
.section-head h2 {
  font-size: var(--section-h2);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 14px 0 0;
}
.section-head p {
  margin: 12px auto 0;
  max-width: 56ch;
  color: var(--text-2);
  font-size: 15.5px;
}

/* Rejilla 3×2 */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sector-gap-y) 3.5%;
}
/* La tarjeta exterior ya NO se ve: no lleva fondo, ni borde, ni sombra. El
   personaje queda suelto sobre la piedra del bloque y lo único que parece una
   tarjeta es la caja de texto de abajo. */
.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  transition: transform 0.25s ease;
}
/* Al pasar el ratón sube la tarjeta entera y se enciende la caja de texto,
   que es lo único que se ve */
.sector-card:hover { transform: translateY(-6px); }
.sector-card:hover .sector-body {
  background: linear-gradient(178deg, rgba(255, 254, 251, 0.42), rgba(255, 250, 242, 0.56));
  box-shadow:
    inset 0 14px 24px -14px rgba(90, 66, 32, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 28px 58px rgba(120, 88, 40, 0.16);
}
.sector-card:hover .sector-body::before { animation-duration: 2.6s; }   /* el pulso acelera */
.sector-card:hover .sector-body::after {
  opacity: 1;
  box-shadow: 0 0 26px rgba(201, 146, 47, 0.5);
}

/* Ilustración: asoma por encima de la tarjeta (como en la referencia) */
.sector-art {
  margin: var(--sector-art-out) auto 2px;
  height: var(--sector-art-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* `max-width` es imprescindible desde que el arte mide ~300px: la cabeza SVG es
   cuadrada, así que a 300 de alto pide 300 de ancho y se salía de una tarjeta
   de 285 en móvil. Con el tope, el SVG se reduce solo y conserva su proporción. */
.sector-art svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }

/* Personaje de sector: las seis poses una encima de otra, fundiéndose.
   Se recortan todas con la MISMA caja (tools/personajes.cjs), así que la
   cabeza no se mueve de una a otra y el fundido no da imagen doble. */
.personaje {
  position: relative;
  height: 100%;
  max-width: 100%;
  /* SIN `aspect-ratio`. Lo llevaba para darle ancho a la caja, porque todas las
     poses iban en posición absoluta y no la dimensionaban. En Safari de iOS esa
     combinación —`aspect-ratio` + alto en porcentaje— se resuelve con ANCHO 0:
     el hueco quedaba reservado, el haz de luz del fondo se pintaba, y el
     personaje no aparecía. Era exactamente lo que se veía en el móvil.
     Ahora la PRIMERA pose va en el flujo y es la que da la medida; las otras
     cinco se apilan encima en absoluto. La caja mide lo que mide la imagen, sin
     depender de ningún cálculo. */
}
.personaje img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.4s ease;
}
/* La PRIMERA pose va en el flujo y es la que le da el ancho a la caja; las
   otras cinco se apilan encima en absoluto. Sin esto, con todas en absoluto la
   caja mide CERO de ancho: el hueco queda reservado, el haz del fondo se pinta
   y el personaje no aparece. Es lo que pasaba en el móvil.
   Se oculta con `opacity`, que no le quita el sitio que ocupa. */
.personaje img:first-child {
  position: relative;
  inset: auto;
  width: auto;
  height: 100%;
  max-width: 100%;
}
.personaje img.visible { opacity: 1; }
/* Sin JS o con el movimiento reducido se queda la pose de reposo, nunca un hueco */
@media (prefers-reduced-motion: reduce) {
  .personaje img { transition: none; }
}
.prop-shadow { fill: #c0ab9b; opacity: 0.26; }
.prop-fill { fill: url(#goldGrad); }
.prop-line {
  fill: none;
  stroke: url(#goldGrad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prop-ivory {
  fill: url(#ivoryGrad);
  stroke: url(#goldGrad);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

/* Columnas al píxel: la cabecera reserva 2 líneas aunque el título ocupe 1,
   así todas las descripciones y flechas arrancan a la misma altura. */

/* ---- SEPARAR AL PERSONAJE DEL FONDO ----
   Se pegaba a la piedra y quedaba plano contra ella. Dos recursos, ninguno es
   una tarjeta:

   1. UN HAZ DE LUZ detrás, en cono, como el foco de un escaparate. Da
      atmósfera y le pone un suelo de luz.
   2. UNA SILUETA DORADA que abraza su contorno. Se hace con `drop-shadow`
      apilados sobre el PNG recortado, así que sigue el perfil exacto del
      personaje —pelo, antena, dedos— y no un óvalo aproximado. Eso es lo que
      de verdad lo despega: el filo de luz por el borde, como un contraluz de
      estudio. */
.sector-art {
  position: relative;
  isolation: isolate;
}
.sector-art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4%;
  z-index: -1;
  width: 132%;
  height: 118%;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    /* el cono de luz que baja */
    radial-gradient(46% 62% at 50% 34%,
      rgba(255, 224, 168, 0.55), rgba(255, 214, 150, 0.18) 52%, rgba(255, 214, 150, 0) 76%),
    /* el charco de luz en el suelo, más ancho y más bajo */
    radial-gradient(58% 22% at 50% 92%,
      rgba(201, 146, 47, 0.26), rgba(201, 146, 47, 0.08) 55%, rgba(201, 146, 47, 0) 78%);
  animation: respira-haz 7.5s ease-in-out infinite;
}
@keyframes respira-haz {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.035); }
}

/* La silueta: tres sombras de distinto radio. La pegada define el filo, la
   media da el cuerpo del halo y la abierta lo funde con la piedra. */
.personaje img {
  filter:
    drop-shadow(0 0 2px rgba(255, 236, 196, 0.95))
    drop-shadow(0 0 10px rgba(255, 214, 150, 0.6))
    drop-shadow(0 0 30px rgba(201, 146, 47, 0.34))
    drop-shadow(0 16px 20px rgba(120, 88, 40, 0.3));
}
/* Las tarjetas que aún llevan la cabeza dibujada reciben el mismo trato */
.sector-art svg { filter: drop-shadow(0 0 14px rgba(255, 214, 150, 0.45)); }

@media (prefers-reduced-motion: reduce) {
  .sector-art::before { animation: none; }
}

/* La caja de texto SUBE por encima del personaje en vez de esperar debajo.
   Es lo que más sitio libera: cada píxel que sube quita un píxel de alto a la
   tarjeta y dos a la sección (son dos filas), y a cambio el personaje no
   encoge nada. Además le da el corte limpio de la referencia, con el texto
   tapando al personaje de cintura para abajo.
   Va con z-index para quedar POR ENCIMA, y con fondo opaco para que corte. */
.sector-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;      /* todo el contenido centrado */
  text-align: center;
  /* TRANSPARENTE, no una caja blanca. Se ve el mármol del bloque a través, así
     que la tarjeta deja de competir con el personaje y el conjunto respira.
     El volumen no lo da la caja: lo da la SOMBRA QUE EL PERSONAJE PROYECTA
     dentro de ella (la primera `inset` de abajo). Son dos objetos a distinta
     distancia y uno tapa la luz del otro: eso es profundidad de verdad, no un
     degradado imitándola. */
  /* Muy transparente a propósito. La legibilidad NO se resuelve subiendo esto,
     que taparía el mármol: se resuelve con el velo que lleva `.olas` justo
     detrás del texto (ver más abajo). */
  background: linear-gradient(178deg, rgba(255, 253, 249, 0.30), rgba(255, 248, 238, 0.44));
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  backdrop-filter: blur(9px) saturate(1.15);
  border: none;
  border-radius: 20px;
  padding: 17px 20px 19px;
  margin: calc(-1 * var(--sector-body-sube)) 0 0;
  box-shadow:
    /* la sombra del personaje cayendo dentro de la tarjeta */
    inset 0 14px 24px -14px rgba(90, 66, 32, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 20px 44px rgba(120, 88, 40, 0.10);
  transition: box-shadow 0.28s ease, transform 0.28s ease, background 0.28s ease;
}

/* EL FILO DORADO NEÓN, con un pulso de luz recorriendo el perímetro.
   Es un cono de color girando, recortado a un aro de 1.5px con dos máscaras
   que se restan. Se mueve solo, sin depender de que nadie pase el ratón: esa
   fue la lección de los intentos del chat. */
@property --giro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.sector-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--giro),
    rgba(201, 146, 47, 0.30) 0deg,
    rgba(201, 146, 47, 0.30) 40deg,
    rgba(240, 201, 119, 0.95) 74deg,
    #fff4da 84deg,
    rgba(240, 201, 119, 0.95) 94deg,
    rgba(201, 146, 47, 0.30) 128deg,
    rgba(201, 146, 47, 0.30) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: recorrer 7s linear infinite;
}
/* cada tarjeta arranca el recorrido en un punto distinto: si van a la vez
   parecen seis luces sincronizadas y canta */
.sector-grid > :nth-child(2) .sector-body::before { animation-delay: -1.2s; }
.sector-grid > :nth-child(3) .sector-body::before { animation-delay: -2.4s; }
.sector-grid > :nth-child(4) .sector-body::before { animation-delay: -3.5s; }
.sector-grid > :nth-child(5) .sector-body::before { animation-delay: -4.7s; }
.sector-grid > :nth-child(6) .sector-body::before { animation-delay: -5.9s; }
@keyframes recorrer { to { --giro: 360deg; } }

/* El resplandor del filo: un halo dorado por fuera, muy suave. Sin él el aro
   se lee como un borde fino y no como una línea encendida. */
.sector-body::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(201, 146, 47, 0.28);
  opacity: 0.75;
  transition: opacity 0.28s ease, box-shadow 0.28s ease;
}
/* El titular iba a dos líneas forzadas (`min-height: 2.24em` más un <br> en el
   HTML) para que todas las tarjetas cuadraran. A una línea se ahorran 23px de
   alto por tarjeta, que son 46 de sección: se los queda el personaje. */
/* El titular iba en carbón plano. Ahora lleva el mismo degradado vertical que
   el del hero —de casi negro a marrón cálido— más un filo claro de 1px arriba.
   El relieve va con `filter: drop-shadow` y NO con `text-shadow`, porque con
   `background-clip: text` la sombra normal se recorta y no se ve. */
.sector-body h3,
.sector-body p,
.sector-card .go { position: relative; z-index: 1; }

.sector-body h3 {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.12;
  min-height: 0;
  background: linear-gradient(176deg, #221c14 0%, #3a2e22 55%, #5a4632 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 253, 248, 0.9));
}
/* La "&" en dorado: separa las dos mitades del nombre sin subir el ruido */
.sector-body h3 .amp { color: var(--gold-dark); -webkit-text-fill-color: var(--gold-dark); }
/* El salto de línea se anula, pero en el HTML hay un espacio antes: si no,
   quedaba "Gimnasios& Fitness" todo pegado. */
.sector-body h3 br { display: none; }

/* Las tarjetas que todavía llevan la cabeza SVG (las que esperan personaje) no
   suben la caja de texto y usan un arte más corto, porque su objeto (la campana,
   la casa, el libro…) vive abajo del todo del dibujo y la caja se lo comía.
   Al restar lo mismo que sube la otra, las dos tarjetas acaban midiendo igual y
   la rejilla no se descuadra. */
.sector-card:not(:has(.personaje)) .sector-art {
  height: calc(var(--sector-art-h) - var(--sector-body-sube));
}
.sector-card:not(:has(.personaje)) .sector-body { margin-top: 0; }
.sector-body p {
  margin: 7px 0 0;
  /* Estaba en --text-2 (#6d6762) a 13.5px y sobre una caja tan transparente no
     se leía. Se sube a un marrón cálido de la familia de la marca, con más
     cuerpo y algo más de peso: gana contraste sin irse al negro, que sobre
     marfil canta. */
  color: #574a3d;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  /* sin sangría a la derecha: la flecha ya no flota en la esquina, va centrada
     debajo, así que el texto puede ocupar todo el ancho */
  padding-right: 0;
  /* Reserva de dos líneas: unas descripciones ocupan una y otras dos, y sin
     esto las tarjetas de una misma fila acababan a alturas distintas. */
  min-height: 2.9em;
}

/* ---- ONDAS DORADAS DENTRO DE LA CAJA ----
   Líneas SÓLIDAS (no degradados difusos) que cruzan la tarjeta ondulando.
   Son dos capas a distinta altura, distinto grosor y distinta velocidad: el
   desfase entre ellas es lo que da la sensación de oleaje y de profundidad,
   igual que un fondo y un primer plano moviéndose a distinto ritmo.

   El bucle es exacto: la baldosa del dibujo mide 200px y cada capa se desplaza
   exactamente 200px, así que al reiniciar cae en el mismo sitio y no se ve el
   salto. Es el mismo principio que el mármol que cae en el fondo del bloque. */
.sector-body .olas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  /* El velo que hace legible el texto sobre una caja tan transparente. Va aquí
     y no en el fondo de la tarjeta para que el mármol siga viéndose por los
     bordes y solo se aclare la zona de la tinta. */
  background: radial-gradient(70% 62% at 50% 36%,
    rgba(255, 253, 249, 0.80), rgba(255, 253, 249, 0.34) 60%, rgba(255, 253, 249, 0) 84%);
}
.sector-body .olas i {
  position: absolute;
  left: 0;
  /* La banda vive en la MITAD DE ABAJO, a la altura del botón. Antes cruzaba la
     tarjeta entera y llegaba hasta el titular; ahora los hilos pasan por detrás
     de «Hablar con…» y no tocan el texto de arriba. */
  top: 48%;
  height: 52%;
  width: 200%;
  background-repeat: repeat-x;
  /* 240px = el ancho de la baldosa que genera el script. Si se cambia una,
     hay que cambiar la otra y también el desplazamiento del @keyframes: es
     lo que hace que el bucle no tenga junta. */
  background-size: 240px 100%;
  /* Nacen desvanecidos por arriba, para que la banda no empiece con un corte */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  will-change: transform;
}
/* GENERADO por tools/hilos.cjs — no editar a mano, volver a generarlo.
   Baldosa de 240px: cada capa se desplaza exactamente eso, así que el
   bucle no tiene junta visible. */
.sector-body .olas i:nth-child(1) {
  opacity: 0.5;
  filter: blur(0.5px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M0 42 C 40 31, 80 31, 120 42 C 160 53, 200 53, 240 42' fill='none' stroke='%23c9922f' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M0 50 C 40 42, 80 42, 120 50 C 160 58, 200 58, 240 50' fill='none' stroke='%23c9922f' stroke-width='0.7' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: ondear 19s linear infinite normal;
}
.sector-body .olas i:nth-child(2) {
  opacity: 0.36;
  filter: blur(1.3px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 40 23, 80 23, 120 38 C 160 53, 200 53, 240 38' fill='none' stroke='%23c9922f' stroke-width='0.9' stroke-linecap='round'/%3E%3Cpath d='M0 54 C 40 42, 80 42, 120 54 C 160 66, 200 66, 240 54' fill='none' stroke='%23c9922f' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: ondear 27s linear infinite reverse;
}
.sector-body .olas i:nth-child(3) {
  opacity: 0.58;
  filter: blur(0.25px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C 40 28, 80 28, 120 46 C 160 64, 200 64, 240 46' fill='none' stroke='%23c9922f' stroke-width='0.7' stroke-linecap='round'/%3E%3Cpath d='M0 58 C 40 49, 80 49, 120 58 C 160 67, 200 67, 240 58' fill='none' stroke='%23c9922f' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: ondear 15s linear infinite reverse;
}
@keyframes ondear {
  from { transform: translateX(0); }
  to   { transform: translateX(-240px); }
}

/* Al pasar el ratón los hilos se avivan y aceleran. Cada capa mantiene su
   proporción de velocidad: si todas fueran a la misma, dejarían de trenzarse. */
.sector-card:hover .olas i { opacity: 0.85; }
.sector-card:hover .olas i:nth-child(1) { animation-duration: 8s; }
.sector-card:hover .olas i:nth-child(2) { animation-duration: 11s; }
.sector-card:hover .olas i:nth-child(3) { animation-duration: 6.5s; }

@media (prefers-reduced-motion: reduce) {
  .sector-body .olas i { animation: none; }
}

/* Botón para abrir el chat del RuBot. Va en el flujo y centrado debajo del
   texto: flotando en la esquina derecha chocaba con el texto centrado. */
/* Sin flecha: la usuaria la quitó el 2026-08-17. Con texto dentro, la flecha
   descentraba la etiqueta (el texto quedaba desplazado a la izquierda para
   dejarle sitio) y no aportaba nada que no dijera ya «Hablar con…».
   Va como flex centrado, no inline-flex suelto, para que el texto quede en el
   medio de la píldora. */
.sector-card .go {
  position: relative;
  z-index: 3;
  margin: 14px auto 0;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--gold-btn);
  color: #fff9f4;
  /* hace falta desde que el botón lleva TEXTO: antes solo tenía la flecha y no
     se veía que es un enlace subrayado */
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(169, 116, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.sector-card .go:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px rgba(169, 116, 42, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Fila de garantías */
.features {
  margin-top: clamp(22px, 3vh, 42px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 90px;
}
.feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 17px clamp(14px, 1.5vw, 24px);
  border-right: 1px solid var(--border);
}
.feature:last-child { border-right: none; }
.feature .ic { flex-shrink: 0; color: var(--gold-dark); }
.feature .ic svg { width: 27px; height: 27px; display: block; }
.feature strong { display: block; font-size: 14.5px; font-weight: 700; }
.feature span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin-top: 3px; }

/* ===== BLOQUE 1 · Rejilla de la infografía (v3) =====
   El hero NO se maqueta a ojo: cada zona va en el porcentaje medido sobre
   assets/references/bloque1-v3.png (1672x941, 16:9), documentado en
   assets/references/spec-bloque1.json.
   Como la referencia es 16:9, el % vertical es directamente vh; se resta el
   alto del nav (74px) porque .hero empieza justo debajo.
   El robot 3D vive dentro de la caja del arco: no puede descolocar nada. */
@media (min-width: 1025px) {
  .hero {
    display: block;
    height: calc(100vh - 74px);
    min-height: 600px;
    padding: 0;
  }
  .hero-main { display: block; position: static; max-width: none; padding: 0; height: 100%; }

  /* Columna de texto: de 7.5% a 34.5% de ancho */
  .hero-copy {
    position: absolute;
    left: 10.5%;
    top: 0;
    width: 27%;
    height: 100%;
    max-width: none;
  }
  .hero-copy h1        { position: absolute; top: calc(20vh - 74px); width: 100%; }
  .hero-copy .lead     { position: absolute; top: calc(58vh - 74px); width: 100%; max-width: none; margin: 0; }
  .hero-copy .hero-actions { position: absolute; top: calc(72vh - 74px); width: 100%; }

  /* Arco: de 13% a 80% de alto, centrado en el 62.5% de ancho */
  .hero-stage {
    position: absolute;
    left: var(--arco-cx, 61.9%);
    top: calc(13vh - 74px);
    height: 67vh;
    width: var(--arco-w, 30.3%);
    transform: translateX(-50%);
    display: block;
  }

  /* Tarjetas: de 77.21% a 93.84% de ancho. La primera arranca al 24.2% y la
     última acaba al 72.6%; cada una mide 14.4vh y el hueco es de 2.6vh.
     (3 × 14.4 + 2 × 2.6 = 48.4 = 72.6 − 24.2, así que cuadra sola con
     justify-content: space-between.) */
  .hero-cards {
    position: absolute;
    left: 77.21%;
    top: calc(24.2vh - 74px);
    width: 16.63%;
    height: 48.4vh;
    justify-content: space-between;
    gap: 0;
  }
  .hero-cards .mini-card { width: 100%; height: 14.4vh; }

  /* Dentro de la tarjeta se coloca por posición absoluta, NO con padding en %.
     Un % dentro de un flex se mide contra la caja de CONTENIDO (ya sin padding),
     así que el icono salía al 16.9% en vez del 20.1% medido. En absoluto, left
     y width se miden los dos contra la misma caja y el número sale clavado. */
  .hero-cards .mc-face { padding: 0; gap: 0; display: block; }
  .hero-cards .mc-ic {
    position: absolute;
    left: 9.1%;
    top: 47%;                /* centro del icono medido en la referencia */
    width: 20.1%;            /* 56px en una tarjeta de 278px */
    transform: translateY(-50%);
  }
  /* El texto arranca al 37.8% medido. El margen derecho va al 3% y no al 8%:
     con 8% "Impulsa tu negocio" partía en dos líneas y en la referencia va en
     una. La tinta sigue acabando donde marca el spec (~92%). */
  .hero-cards .mc-txt {
    position: absolute;
    left: 37.8%;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
  }

  /* La franja de confianza YA NO va aquí dentro. Estaba en absoluto, del 83%
     al 96%, como la referencia, y ahí se montó el carrusel primero: medido en
     el DOM, ese hueco deja 135px de escena, el logo de delante se queda en
     50px y el suelo se proyecta a 16px. El techo eran 183px (el podio acaba en
     el 80% y la pantalla en el 100%). Ahora tiene banda propia detrás del
     hero: ver .marcas-banda. */
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero { min-height: auto; padding: 8px 0 34px; }
  .hero-main { grid-template-columns: 1fr; gap: 18px; text-align: center; padding: 0 20px; }
  .hero-copy { max-width: 100%; order: 1; }
  .hero-actions { justify-content: center; }
  .hero-stage { order: 2; }
  /* OJO: .stage3d no puede ir con `height: auto`. Todos sus hijos (el arco, el
     halo y el robot) van en posición absoluta, así que la caja se quedaba en
     ALTURA 0 y el robot, que se coloca con `bottom` respecto a ella, terminaba
     en lo alto de la página tapando el titular, el párrafo y los botones.
     Con la proporción del arco (558x748) la caja recupera su alto. */
  .stage3d { width: min(320px, 78%); height: auto; aspect-ratio: 558 / 748; }

  /* SILUETA SIMPLIFICADA EN MÓVIL.
     En escritorio el personaje lleva cuatro `drop-shadow` apilados, uno de
     ellos con 30px de radio. En un teléfono eso es demasiado: el navegador
     llega a no pintar la imagen y se queda solo el haz de luz del fondo —que
     es justo lo que veía la usuaria—. Aquí se deja UNA sombra de radio corto,
     que da el filo sin ahogar a la tarjeta gráfica. */
  /* NADA de `filter` sobre la imagen en móvil. Es el otro sospechoso de que el
     personaje no se pintara en el teléfono, y aquí no se echa de menos: el
     resplandor lo da el haz del fondo. */
  .personaje img { filter: none; }
  .sector-art svg { filter: none; }
  /* el haz respira, pero sin escalar: animar tamaño en móvil cuesta caro */
  .sector-art::before { animation: none; opacity: 0.9; }
  /* Fuera del escritorio las sangrías en % dejan de tener sentido (la tarjeta
     es mucho más estrecha), así que aquí van en píxeles. */
  .hero-cards { order: 3; flex-direction: row; flex-wrap: wrap; justify-content: center; justify-self: stretch; }
  .hero-cards .mini-card { flex: 1 1 clamp(240px, 30vw, 320px); height: auto; }
  .mc-face { height: auto; padding: 16px 20px; gap: 16px; text-align: left; }
  .mc-ic { width: 52px; }

  /* ---- Menú de móvil ---- */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 252, 246, 0.85);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle .barritas { display: block; width: 20px; }
  .menu-toggle .barritas i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-dark);
    transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.28, 1), opacity 0.18s ease;
  }
  .menu-toggle .barritas i + i { margin-top: 5px; }
  /* abierto: la de arriba y la de abajo se cruzan, la del medio se apaga */
  .nav.menu-abierto .menu-toggle .barritas i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-abierto .menu-toggle .barritas i:nth-child(2) { opacity: 0; }
  .nav.menu-abierto .menu-toggle .barritas i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* El panel cuelga de la barra. `.nav` va en `position: relative`, así que
     basta con colgarlo al 100% de su alto. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 4%;
    right: 4%;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 251, 246, 0.97);
    border: 1px solid var(--border);
    box-shadow: 0 24px 50px rgba(120, 88, 40, 0.18);
    backdrop-filter: blur(10px);
  }
  .nav.menu-abierto .nav-links { display: flex; }
  .nav-links a {
    padding: 14px 16px;          /* zona de toque cómoda */
    border-radius: 12px;
    font-size: 19px;
    text-align: left;
  }
  .nav-links a + a { border-top: 1px solid rgba(225, 212, 204, 0.7); }
  /* En móvil no hay ratón: el aumento x1.5 y el sol no pintan nada aquí y
     además descuadrarían la lista. */
  .nav-links a:hover,
  .nav-links a.conectado { transform: none; text-shadow: none; }
  .nav-links a::before { display: none; }

  .sectors { min-height: auto; padding: 56px 20px 48px; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(2) { border-right: none; }
  .feature:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .hero-cards .mini-card { flex: 1 1 100%; }

  /* A 375px no caben el logo, el botón y la hamburguesa. Se quita el botón de
     la barra: el mismo "Solicitar demo" está justo debajo, en el hero, y
     también dentro del panel del menú. */
  .nav-cta > .btn { display: none; }
  .nav .nav-inner { padding: 0 18px; }
  .nav-links .solo-movil {
    display: inline-flex;
    justify-content: center;
    margin-top: 10px;
    border-top: none;
    font-size: 16px;
    /* `.nav-links a` (0,1,1) le gana a `.btn-primary` (0,1,0) y le pisaba el
       color: el botón salía con la letra en carbón sobre el dorado. */
    color: #fff9f4;
    font-family: var(--font-body);
  }

  .sector-grid { grid-template-columns: 1fr; }
  .sector-body p { padding-right: 0; }
  /* La burbuja va CENTRADA, igual que en escritorio. Estaba con
     `margin: 14px 0 0 auto`, que la empujaba contra el borde derecho: venía de
     cuando el botón era solo una flecha y suelta a la izquierda parecía
     olvidada ahí. Desde que lleva texto, pegada a la derecha desalinea la
     tarjeta entera, que tiene el resto del contenido centrado. */
  .sector-card .go { position: static; margin: 14px auto 0; }

  /* El antetítulo con dos filetes al lado no cabe en 375px y partía en dos
     líneas dejando los filetes descolocados. En móvil van fuera. */
  .eyebrow-row .rule { display: none; }
  .eyebrow { letter-spacing: 0.2em; }
  .features { grid-template-columns: 1fr; }
  .feature { border-right: none; border-bottom: 1px solid var(--border); }
  .feature:last-child { border-bottom: none; }
}

/* ===========================================================================
   CHAT DE MUESTRA DE LOS RUBOT DE SECTOR
   Lógica en teaser.js, respuestas en datos/teaser.json. No hay API detrás.

   La ventana es ANCHA y el personaje es el protagonista: sale de cintura para
   arriba, a tamaño grande, y CAMBIA DE POSE según lo que le preguntes (las seis
   poses ya estaban recortadas y no se estaban usando para nada).
   Al abrirse, la página se va hacia atrás y la ventana entra por delante.
=========================================================================== */
.teaser {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  perspective: 1600px;
}
.teaser[hidden] { display: none; }

/* El fondo se retira: se oscurece y se desenfoca. Junto con el retroceso de la
   página (ver .teaser-abierto) es lo que hace que la ventana venga "hacia ti". */
.teaser-fondo {
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 75% at 50% 45%, rgba(58, 42, 24, 0.42), rgba(30, 22, 12, 0.68));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.42s ease;
}
.teaser.visible .teaser-fondo { opacity: 1; }

/* La página entera se va hacia atrás mientras el chat está abierto */
body.teaser-abierto { overflow: hidden; }
body.teaser-abierto > header.nav,
body.teaser-abierto > main {
  transform: scale(0.965);
  filter: blur(1.5px);
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1), filter 0.45s ease;
}
header.nav, main { transition: transform 0.45s ease, filter 0.35s ease; }

/* ---------------------------------------------------------------- ventana */
.teaser-panel {
  position: relative;
  width: min(920px, 100%);
  /* alto FIJO: si se deja crecer con el contenido, con dos mensajes la ventana
     se queda en 300px y el personaje sale diminuto, que es lo contrario de lo
     que se busca */
  height: min(600px, 86vh);
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(150deg, #fffdfa 0%, #fff8ef 52%, #fbf0e2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(201, 146, 47, 0.35),
    0 30px 60px rgba(80, 58, 26, 0.28),
    0 80px 140px rgba(80, 58, 26, 0.30);

  transform-origin: 50% 60%;
  transform: translateY(var(--ent-y, 40px)) rotateX(var(--ent-x, 10deg)) scale(var(--ent-s, 0.92));
  opacity: 0;
  transition:
    transform 0.62s cubic-bezier(0.16, 0.86, 0.24, 1),
    opacity 0.36s ease;
}
.teaser.visible .teaser-panel { --ent-y: 0px; --ent-x: 0deg; --ent-s: 1; opacity: 1; }

/* filo dorado por dentro del borde: remata la pieza */
.teaser-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.95), rgba(226, 194, 140, 0.6) 40%,
    rgba(255, 255, 255, 0.5) 62%, rgba(160, 118, 56, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.teaser-cerrar {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 10;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: rgba(255, 253, 249, 0.9);
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.teaser-cerrar svg { width: 18px; height: 18px; }
.teaser-cerrar:hover { color: var(--text); border-color: var(--gold); background: #fff; }

/* ------------------------------------------------------------ la escena */
.teaser-escena {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* la piedra del bloque, para que la ventana pertenezca a la página */
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0.6), rgba(247, 235, 220, 0.85)),
    url("assets/textures/marmol-beige.png") center/180% auto;
  border-right: 1px solid rgba(214, 190, 165, 0.5);
}
/* Halo dorado detrás del personaje: es lo que lo separa del fondo y lo que da
   el "toque" de marca. Late despacio, para que la escena no esté muerta. */
.teaser-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 96%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 214, 150, 0.55), rgba(255, 205, 130, 0.20) 46%, rgba(255, 205, 130, 0) 72%);
  animation: latido 6s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
/* Elipse dorada bajo el personaje: le da suelo, si no flota en el vacío */
.teaser-suelo {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 62%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(169, 116, 42, 0.34), rgba(169, 116, 42, 0.10) 55%, rgba(169, 116, 42, 0) 75%);
}

.teaser-poses {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.teaser-poses[hidden] { display: none; }
/* Aquí el ancho ya salía de la propia imagen (`width: auto`), así que no
   arrastra el problema de `aspect-ratio` que sí tenían las tarjetas. */
.teaser-poses img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: drop-shadow(0 18px 22px rgba(120, 88, 40, 0.28));
}
.teaser-poses img.visible { opacity: 1; }
/* Se difumina el corte de abajo: el recorte acaba en la cintura y contra el
   borde recto de la ventana se veía como una foto cortada con tijera. */
.teaser-escena::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 241, 229, 0), rgba(250, 241, 229, 0.92));
}

/* Destello dorado al cambiar de pose: sin él el cambio pasa desapercibido,
   porque las poses se parecen entre sí. */
.teaser-escena.destella .teaser-halo { animation: destello-oro 0.7s ease-out; }
@keyframes destello-oro {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
}

/* La cabeza 3D (sectores sin personaje todavía) ocupa la escena entera */
.teaser-3d { position: absolute; inset: 8% 8% 14%; z-index: 2; display: block; }
.teaser-3d[hidden] { display: none; }
.teaser-3d canvas { width: 100%; height: 100%; display: block; }

/* Chapa con el nombre, abajo en la escena */
.teaser-placa {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 18px;
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(201, 146, 47, 0.35), 0 10px 22px rgba(120, 88, 40, 0.16);
  white-space: nowrap;
}
.teaser-placa strong { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.teaser-rol {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
}
.teaser-rol::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #6fc07a;
  box-shadow: 0 0 7px rgba(111, 192, 122, 0.9);
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ---------------------------------------------------------- conversación */
.teaser-charla {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Sin `min-height: 0` un hijo flexible NO puede encogerse por debajo de su
     contenido (el valor por defecto es `auto`). La lista de mensajes crecía con
     cada respuesta y empujaba las sugerencias y el campo FUERA de la ventana:
     el chat se quedaba bloqueado, sin sitio donde escribir. */
  min-height: 0;
  overflow: hidden;
}
.teaser-log {
  flex: 1;
  min-height: 0;            /* ver la nota de .teaser-charla */
  overflow-y: auto;
  padding: 26px 66px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 146, 47, 0.4) transparent;
}
.teaser-log::-webkit-scrollbar { width: 6px; }
.teaser-log::-webkit-scrollbar-thumb { background: rgba(201, 146, 47, 0.35); border-radius: 3px; }

.teaser-msg {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-line;
  /* cada mensaje entra desde abajo: la conversación se siente viva */
  animation: entra-msg 0.42s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes entra-msg {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.teaser-bot {
  align-self: flex-start;
  background: #fffefb;
  border: 1px solid rgba(214, 190, 165, 0.55);
  border-left: 2px solid var(--gold);
  border-bottom-left-radius: 5px;
  color: #2c261f;
  box-shadow: 0 2px 4px rgba(120, 88, 40, 0.05), 0 12px 26px rgba(120, 88, 40, 0.09);
}
.teaser-yo {
  align-self: flex-end;
  background: var(--gold-btn);
  color: #fff9f4;
  font-weight: 600;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(169, 116, 42, 0.26);
}
.teaser-escribiendo { display: flex; gap: 5px; align-items: center; padding: 16px 18px; }
.teaser-escribiendo i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-dark);
  animation: teclea 1.1s ease-in-out infinite;
}
.teaser-escribiendo i:nth-child(2) { animation-delay: 0.16s; }
.teaser-escribiendo i:nth-child(3) { animation-delay: 0.32s; }
@keyframes teclea {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

.teaser-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 22px 12px; }
.teaser-chip {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 146, 47, 0.42);
  background: rgba(255, 250, 242, 0.9);
  color: var(--gold-dark);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.teaser-chip:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(169, 116, 42, 0.18);
}

.teaser-form { display: flex; gap: 9px; padding: 0 22px 10px; }
.teaser-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 17px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fffdfa;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text);
  box-shadow: inset 0 2px 4px rgba(120, 88, 40, 0.07);
}
.teaser-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: inset 0 2px 4px rgba(120, 88, 40, 0.07), 0 0 0 3px rgba(219, 173, 121, 0.24);
}
.teaser-form button {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--gold-btn);
  color: #fff9f4;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(169, 116, 42, 0.3);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.teaser-form button svg { width: 19px; height: 19px; }
.teaser-form button:hover { filter: brightness(1.06); transform: translateY(-1px); }

.teaser-aviso {
  margin: 0;
  padding: 0 22px 16px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-2);
  text-align: center;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 780px) {
  .teaser { padding: 0; perspective: none; }

  /* SIN GIRO NI ESCALADO AL ABRIR.
     A pantalla completa, el giro en 3D y el escalado de la página hacían que
     por un instante se viera media ventana con el bot, luego se fuera todo a
     blanco y después apareciera el chat. En móvil la ventana ocupa el 100%, así
     que no hay nada que "venir hacia ti": entra deslizando y ya. */
  .teaser-panel {
    transform: translateY(18px);
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.26s ease;
  }
  .teaser.visible .teaser-panel { transform: none; }
  /* la página de detrás no se escala ni se desenfoca: está tapada al 100% y
     animarla era justo lo que provocaba el parpadeo */
  body.teaser-abierto > header.nav,
  body.teaser-abierto > main { transform: none; filter: none; }
  .teaser-panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 40% 60%;
  }
  .teaser-escena { border-right: none; border-bottom: 1px solid rgba(214, 190, 165, 0.5); }
  /* La chapa iba arriba a la izquierda y en una escena que solo ocupa el 40%
     de la pantalla se comía la cabeza del personaje. Abajo y en una sola línea. */
  .teaser-placa {
    top: auto;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
  }
  .teaser-placa strong { font-size: 15px; }
  .teaser-rol { font-size: 9.5px; letter-spacing: 0.12em; }
  .teaser-log { padding: 16px 16px 10px; }
  .teaser-chips, .teaser-form { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .teaser-fondo, .teaser-panel, .teaser-poses img,
  body.teaser-abierto > header.nav, body.teaser-abierto > main { transition: none; }
  .teaser-panel { transform: none; }
  .teaser-halo, .teaser-msg, .teaser-escribiendo i, .teaser-rol::before { animation: none; }
  body.teaser-abierto > header.nav, body.teaser-abierto > main { transform: none; filter: none; }
}

/* =================================================================
   BLOQUE 3 · LLAMADA A LA ACCIÓN
   Medido sobre la franja final de infografia.jpg (x 63-844, y 1476-1579 →
   782x104 px). Los números están en assets/references/spec-bloque3.json.
   Nada de esto va a ojo: cada valor es el porcentaje medido, y todos los
   tamaños cuelgan de --cta-h para que la franja escale de una pieza.
   ================================================================= */
/* ===================================================================
   MÉTODO RUBOT · la gráfica dorada
   El motor está en metodo.js. Aquí van la caja, el titular, las seis
   tarjetas de fase y el remate.

   ⚠️ 19/08 · CAMBIO DE CONCEPTO. Antes la gobernaba el scroll y la sección
   se CLAVABA (pin), así que tenía que medir exactamente una pantalla y
   nunca más. Ahora la animación se reproduce sola, como un vídeo, y al
   acabar deja una composición quieta que se lee de frente:

       +---------------- titular ----------------+
       |  01 02 03  |   la gráfica   |  04 05 06 |
       +-------- ÉXITO · frase · botón ----------+

   O sea que ya NO hay pin, el alto lo pone el contenido y las tarjetas ya
   no se pisan con la gráfica: cada cosa tiene su hueco en una rejilla de
   tres columnas. Por eso el encuadre del tablero se calcula contra la caja
   del lienzo y no contra la pantalla (ver medir() en metodo.js).
   =================================================================== */
.metodo {
  position: relative;
  /* Una pantalla como MÍNIMO, no como tope: si el contenido pide más —una
     ventana baja, tipografías grandes— crece, porque ya no hay nada clavado
     debajo que se pueda descuadrar. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Medido a 1440x900: con el aire de antes la composición salía a 965 px y
     el botón se quedaba fuera de la ventana. Todo el reparto vertical cuelga
     de vh para que encoja con la pantalla, no de píxeles fijos. */
  gap: clamp(16px, 2.4vh, 34px);
  padding: clamp(34px, 5vh, 72px) 0 clamp(30px, 4.4vh, 62px);
  overflow: hidden;
  background: #f9efe7;
}

/* El mármol reutilizado del hero (crearNebulosa de fondo.js, sin la red
   neuronal). La regla original de .hero-bg sube el lienzo 74px para meterlo
   por detrás de la barra y lo alarga otro tanto; aquí no hay barra que tapar,
   así que se devuelve a su caja. */
.metodo .hero-bg {
  top: 0;
  height: 100%;
  -webkit-mask-image: none;
  mask-image: none;
  /* En el hero la nebulosa queda por detrás de mucho contenido y encima va
     enmascarada; aquí es TODO el fondo y a 0.85 se comía la sección: parecía
     una losa de piedra con humo, no un fondo. */
  opacity: 0.3;
}

/* ---------- TITULAR ---------- */
.metodo-intro {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 2.5%;
}

/* EL TITULAR DE LA SECCIÓN. Entra desde el fondo, desenfocado, igual que las
   tres palabras: es el mismo idioma de entrada, sólo que llega antes. */
.metodo-titulo {
  margin: 0 0 clamp(7px, 1vh, 14px);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--text);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 1px rgba(255, 255, 255, 0.55),
    0 4px 8px rgba(120, 88, 40, 0.2),
    0 14px 30px rgba(120, 88, 40, 0.12);
  opacity: 0;
  filter: blur(7px);
  transform: translateY(16px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.metodo-intro.viva .metodo-titulo { opacity: 1; filter: blur(0); transform: none; }
.metodo-marca { color: var(--gold-dark); }

/* El filo dorado debajo del titular: se abre desde el centro. Es el "algo se
   pone en marcha" antes de que la línea empiece a subir. */
.metodo-filo {
  display: block;
  width: min(230px, 32%);
  height: 2px;
  margin: 0 auto clamp(9px, 1.3vh, 18px);
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(169, 116, 42, 0) 0%, var(--gold-dark) 22%,
    var(--gold-dark) 78%, rgba(169, 116, 42, 0) 100%);
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.metodo-intro.viva .metodo-filo { transform: scaleX(1); }

/* Las tres palabras EN UNA SOLA LÍNEA. El tamaño se calcula contra el ancho
   de la ventana, no contra la altura, porque lo que no puede es partirse. */
.metodo-lema {
  margin: 0;
  font-family: var(--font-display);
  /* [v3] Tres tercios: la pantalla se partía en tres columnas iguales y cada
     palabra iba centrada en la suya. Tenía sentido cuando ESTO era el titular
     y ocupaba toda la sección.
     ⚠️ [20/08] YA NO. Con "El Método RuBot" arriba y en grande, las tres
     palabras repartidas de borde a borde dejan de leerse como una frase y
     parecen tres rótulos sueltos encima de las columnas. Y en el teléfono era
     peor: cada tercio mide 116 px, "Transformamos" pide 150, y como van con
     `nowrap` se salían de su columna y se montaban unas con otras — se leía
     "MedimosTransformamosEvolucionamo".
     Ahora es UNA línea centrada, con las palabras juntas y un punto entre
     ellas. Y si no cabe, cae sola al renglón siguiente. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 clamp(10px, 1.1vw, 20px);
  width: 100%;
  font-size: clamp(15px, 2vw, 34px);
  line-height: 1.15;
  color: var(--text);
  /* Profundidad: relieve tallado, no sombra caída. Una luz arriba y una
     sombra corta abajo, del color de la piedra, no gris. */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 1px rgba(255, 255, 255, 0.55),
    0 3px 6px rgba(120, 88, 40, 0.22),
    0 12px 26px rgba(120, 88, 40, 0.13);
}
/* Cada palabra llega desde el fondo con giro y se enciende al pasar por su
   tercio de la reproducción. La perspectiva va DENTRO del transform de cada
   palabra: puesta en el padre, el overflow de la sección la aplasta (misma
   trampa que costó el carrusel de marcas). */
.metodo-palabra {
  display: inline-block;
  opacity: 0.16;
  /* [v4] Entrada de verdad, no solo un encendido: la palabra llega desde
     el fondo, girada, desenfocada y con la letra abierta, y aterriza en su
     sitio. El desenfoque es lo que le da el golpe de cine; sin él es un
     simple cambio de opacidad.
     Poca Z a propósito: con -260 la palabra se iba tanto hacia el punto de
     fuga que abría un hueco entre "Transformamos." y "Evolucionamos.". */
  filter: blur(9px);
  letter-spacing: 0.18em;
  transform: perspective(1400px) translateZ(-150px) translateY(26px) rotateX(34deg);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.7s ease;
  text-align: center;
}
/* El punto que ata las tres. Va DETRÁS de cada palabra, no delante de la
   siguiente: si va delante y la línea parte ahí, el renglón nuevo empieza por
   el punto ("· Evolucionamos"), que es justo lo que pasaba en el teléfono.
   Va dentro del <span>, así que se enciende con su palabra y no antes. */
.metodo-palabra:not(:last-child)::after {
  content: "·";
  margin-left: clamp(10px, 1.1vw, 20px);
  color: var(--gold-dark);
  opacity: 0.5;
}
.metodo-palabra:nth-child(2) { transition-delay: 0.05s; }
.metodo-palabra:nth-child(3) { transition-delay: 0.1s; }
.metodo-palabra.viva {
  opacity: 1;
  filter: blur(0);
  letter-spacing: 0;
  transform: perspective(1400px) translateZ(0) translateY(0) rotateX(0deg);
  /* El oro del robot, no el degradado de marca: --gold-grad pasa por #e4bd8a y
     sobre crema se apaga justo en mitad de la palabra. */
  color: var(--gold-dark);
}

/* ---------- LA ESCENA: fases · gráfica · fases ----------
   Las columnas laterales llevan un ancho MÍNIMO en px, no solo en fracción:
   por debajo de ~200px la tarjeta parte "EVOLUCIONAR" en dos líneas y las
   seis dejan de leerse igual. Cuando ese mínimo ya no cabe, se cambia de
   reparto en el media query de abajo.
   La fila se estira (stretch) y el lienzo lleva alto mínimo, así que el alto
   de la escena es el mayor de los dos: las tarjetas nunca se salen y el
   lienzo nunca se queda sin sitio. */
.metodo-escena {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 2.4fr) minmax(210px, 1fr);
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 34px);
  width: min(1560px, 94%);
  margin: 0 auto;
}

.metodo-columna {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1vh, 16px);
}

.metodo-lienzo { position: relative; min-height: clamp(260px, 38vh, 480px); }

/* ---------- LOS EJES ----------
   Lo que mide el tablero: cuanta más automatización con IA (eje de abajo), más
   ingresos potenciales (eje de la izquierda). Es lo que le da sentido a que la
   línea suba hacia la derecha.
   Van pegados a los bordes del lienzo, y el tablero deja hueco para ellos
   porque MARGEN_FINAL de metodo.js se subió de 0.45 a 0.75 cuadros.
   Arrancan apagados: los enciende verTablero() con la propia cuadrícula. */
.metodo-eje {
  position: absolute;
  z-index: 3;
  font-family: var(--font-body);
  font-size: clamp(9px, 0.62vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-dark);
  opacity: 0;
  pointer-events: none;
}
/* ⚠️ LOS DOS A LA MISMA DISTANCIA DEL MARCO, y eso NO es pegarlos a los bordes
   del lienzo: el tablero va CENTRADO dentro del lienzo y le sobra distinto por
   los lados que por arriba y abajo, así que uno pegado al borde de la caja
   queda a una distancia y el otro a otra.
   Hace falta cuánto mide el tablero DENTRO del lienzo, y eso sólo lo sabe la
   cámara: metodo.js lo calcula en medir() y lo deja en --tablero-an y
   --tablero-al. Desde aquí se colocan contra el borde del propio tablero, los
   dos con el mismo --eje-aire. */
/* El aire es el MISMO para los dos rótulos, y dentro de él caben las marcas de
   la escala: por la izquierda un "100" (unos 22 px) y por abajo un dígito. */
.metodo-lienzo { --eje-aire: 30px; --tic-aire: 6px; }
.metodo-eje-x {
  left: 50%;
  top: calc(50% + var(--tablero-al, 80%) / 2 + var(--eje-aire));
  transform: translateX(-50%);
}

/* LAS MARCAS DE LA ESCALA: los números que hacen que el tablero mida algo.
   Se colocan con la misma cuenta que los rótulos, más una fracción --f que
   dice dónde cae cada una a lo largo del eje (0 = principio, 1 = final). La
   escribe metodo.js, que es quien sabe en qué punto del tablero está cada
   fase; el CSS sólo la convierte en posición. */
.metodo-tic {
  position: absolute;
  z-index: 3;
  font-family: var(--font-body);
  font-size: clamp(8px, 0.54vw, 10px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
  opacity: 0;
  pointer-events: none;
}
.metodo-tic-x {
  top: calc(50% + var(--tablero-al, 80%) / 2 + var(--tic-aire));
  left: calc(50% - var(--tablero-an, 88%) / 2 + var(--tablero-an, 88%) * var(--f));
  transform: translateX(-50%);
}
.metodo-tic-y {
  top: calc(50% + var(--tablero-al, 80%) / 2 - var(--tablero-al, 80%) * var(--f));
  right: calc(50% + var(--tablero-an, 88%) / 2 + var(--tic-aire));
  transform: translateY(-50%);
}
/* El de la izquierda, tumbado.
   ⚠️ Con `rotate(-90deg)` la caja gira sobre SU CENTRO, así que `left` no manda
   donde parece: el rótulo salía 28 px DENTRO del tablero. Con `writing-mode` la
   caja ya nace estrecha y alta, y entonces `left` sí coloca. El rotate(180) es
   para que se lea de abajo arriba y no al revés. */
.metodo-eje-y {
  right: calc(50% + var(--tablero-an, 88%) / 2 + var(--eje-aire));
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
}
.metodo-lienzo canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- LAS SEIS TARJETAS ----------
   Ya NO se relevan: cada una entra cuando la gráfica llega a su nodo y SE
   QUEDA. Al final están las seis puestas, que es la composición que se
   quiere ver de frente. */
.metodo-tarjeta {
  width: 100%;
  padding: clamp(12px, 1.15vw, 18px) clamp(14px, 1.35vw, 22px);
  border-radius: 16px;
  /* Mármol del bloque 1 pero MÁS LIGERO: la capa clara por encima lo aclara y
     el desenfoque deja adivinar el fondo por detrás en vez de taparlo. */
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.97), rgba(251, 243, 233, 0.94)),
    url("assets/textures/marmol-beige.png") center / 190% auto;
  backdrop-filter: blur(3px);
  border: 1px solid rgba(196, 168, 132, 0.5);
  /* [v3] Profundidad de verdad: una sombra corta y densa que la despega del
     fondo, una larga y difusa que la levanta, y un filo claro arriba. Antes
     flotaba sin peso. Las distancias se han acortado con la tarjeta: la
     sombra de 48/90 px era de una tarjeta de 460 px de ancho. */
  box-shadow:
    0 1px 2px rgba(90, 62, 20, 0.14),
    0 5px 10px rgba(90, 62, 20, 0.13),
    0 14px 26px rgba(90, 62, 20, 0.16),
    0 34px 62px rgba(90, 62, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(196, 168, 132, 0.35);
  /* Estado en reposo: lejos, girada y sin ver. Llega hacia la pantalla al
     activarse. */
  opacity: 0;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  /* Todo centrado bajo el nombre de la fase. Alineado a un lado, la frase
     quedaba suelta del título y se veía como una línea ajena. */
  text-align: center;
}

/* Cada lado llega girando del suyo, para que no parezcan seis veces la misma
   animación, y aterriza LADEADA hacia el centro de la pantalla: en rotateY(0)
   quedaba como una pegatina. */
.metodo-columna-izq .metodo-tarjeta {
  transform: perspective(1000px) translateZ(-320px) translateX(-40px) rotateY(-24deg) rotateX(8deg);
}
.metodo-columna-der .metodo-tarjeta {
  transform: perspective(1000px) translateZ(-320px) translateX(40px) rotateY(24deg) rotateX(8deg);
}
.metodo-columna-izq .metodo-tarjeta.activa {
  transform: perspective(1000px) translateZ(0) rotateY(7deg) rotateX(-3deg);
}
.metodo-columna-der .metodo-tarjeta.activa {
  transform: perspective(1000px) translateZ(0) rotateY(-7deg) rotateX(-3deg);
}
.metodo-tarjeta.activa { opacity: 1; }

.metodo-tarjeta .metodo-numero {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.34em;
  color: var(--gold-dark);
}
.metodo-tarjeta h3 {
  margin: 4px 0 7px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.55vw, 26px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 3px 7px rgba(120, 88, 40, 0.16);
}
.metodo-tarjeta p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.88vw, 15.5px);
  line-height: 1.42;
  color: var(--text-2);
}

/* ---------- EL REMATE: ÉXITO · FRASE · BOTÓN ----------
   Los tres aparecen juntos cuando la gráfica remata, y ya no se mueven de
   ahí. Antes ÉXITO iba ARRIBA y en absoluto, encima del titular, y por eso
   el titular tenía que apagarse; con el remate abajo no hay solape que
   resolver y la composición se lee entera. */
.metodo-final {
  position: relative;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vh, 16px);
  width: min(880px, 92%);
  margin: 0 auto;
  text-align: center;
}

.metodo-exito {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.metodo-exito.visible { opacity: 1; transform: translateY(0); }
.metodo-exito span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.metodo-exito h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  /* Bajado de 132 px: allí era el titular de la sección y estaba solo arriba;
     aquí es el remate y compite con el lema y con el botón. */
  font-size: clamp(36px, 4.6vw, 70px);
  line-height: 0.92;
  color: var(--gold-dark);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.75),
    0 6px 16px rgba(120, 88, 40, 0.26),
    0 20px 44px rgba(120, 88, 40, 0.16);
}

.metodo-cierre {
  width: min(680px, 100%);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 25px);
  line-height: 1.32;
  color: var(--text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.12s, transform 0.6s ease 0.12s;
}
.metodo-cierre.visible { opacity: 1; transform: translateY(0); }

.metodo-cta {
  margin-top: clamp(2px, 0.8vh, 10px);
  opacity: 0;
  transform: translateY(14px);
  /* El .btn de la casa ya anima transform en 0.15s para el hover; aquí hace
     falta que la ENTRADA sea lenta y el hover siga siendo rápido, así que se
     escriben las dos y la del hover gana por ser más específica. */
  transition: opacity 0.6s ease 0.24s, transform 0.6s ease 0.24s, box-shadow 0.2s ease;
  pointer-events: none;
}
.metodo-cta.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.metodo-cta.visible:hover { transform: translateY(-2px); transition: transform 0.15s ease; }

/* ---------- VENTANA BAJA ----------
   El alto de la composición lo mandan las tarjetas, y las tarjetas miden lo
   que mide su texto: por debajo de ~840 px de ventana no hay reparto que
   valga, hay que apretar la letra. */
@media (max-height: 840px) {
  .metodo-tarjeta { padding: 10px 14px; border-radius: 13px; }
  .metodo-tarjeta h3 { font-size: clamp(18px, 1.4vw, 23px); margin: 3px 0 5px; }
  .metodo-tarjeta p { font-size: clamp(12px, 0.82vw, 14px); line-height: 1.38; }
  .metodo-tarjeta .metodo-numero { font-size: 11px; }
  .metodo-exito h3 { font-size: clamp(32px, 3.9vw, 58px); }
  .metodo-exito span { font-size: 11px; }
  .metodo-cierre { font-size: clamp(15px, 1.35vw, 21px); }
  .metodo-lienzo { min-height: clamp(220px, 32vh, 380px); }
}

/* ---------- ESCENA ESTRECHA ----------
   Por debajo de 980px las dos columnas laterales ya no llegan a sus 210px sin
   comerse el lienzo: la gráfica pasa arriba, a todo lo ancho, y las seis
   fases quedan debajo en dos columnas de tres, que conserva el orden de la
   composición (1-2-3 a la izquierda, 4-5-6 a la derecha). */
@media (max-width: 980px) {
  .metodo-escena {
    grid-template-columns: 1fr 1fr;
    width: 92%;
  }
  .metodo-lienzo {
    grid-column: 1 / -1;
    grid-row: 1;
    /* ⚠️ Aqui el alto se mide contra el ANCHO, no contra la ventana. El tablero
       es de 12x6 y con su aire pide una caja de 1.8 a 1; si el lienzo se hace
       alto por vh, el tablero se queda limitado por el ancho y arriba y abajo
       sobra un pasillo muerto (medido en un movil de 390: el tablero ocupaba el
       47% del alto del lienzo). Con vw la caja acompaña al tablero. */
    min-height: clamp(170px, 52vw, 520px);
  }
  /* ⚠️ LAS COLUMNAS DESAPARECEN COMO CAJA (`display: contents`) y las seis
     tarjetas pasan a ser hijas directas de la rejilla. Es lo que hace que
     salgan 1-2 / 3-4 / 5-6, o sea en el orden en que se leen.
     Con las dos columnas puestas salían 1-4 / 2-5 / 3-6: se leía hacia abajo y
     luego se volvía arriba, que no es como nadie lee seis pasos numerados. */
  .metodo-columna { display: contents; }
}

/* Y en el teléfono ni dos columnas: una sola, con las seis en orden. Al
   apilarse la izquierda y después la derecha, salen 1-2-3-4-5-6 seguidas. */
@media (max-width: 620px) {
  /* ⚠️ EN EL TELÉFONO LAS SEIS VAN DE DOS EN DOS, NO APILADAS.
     Apiladas ocupaban unos 780 px y en la pantalla sólo entraban la gráfica y
     tres tarjetas: para ver las otras tres había que dejar de ver la
     animación. De dos en dos son tres filas, unos 450 px, y entran la gráfica
     y las seis a la vez.
     El texto baja de cuerpo LO JUSTO para que quepa en media pantalla; la
     tarjeta sigue siendo la misma pieza, sólo que a otra escala. */
  .metodo-escena { gap: 10px; }
  .metodo-tarjeta { padding: 11px 11px 12px; border-radius: 14px; }
  .metodo-tarjeta .metodo-numero { font-size: 10px; letter-spacing: 0.26em; }
  .metodo-lema { font-size: clamp(15px, 4.6vw, 26px); }
  /* El pasillo de la izquierda se queda en 26 px en un móvil de 390 y ahí no
     caben un "100" y el rótulo. Se quedan las marcas de abajo, que son de un
     dígito, y el rótulo de la izquierda, que es lo que dice qué se mide. */
  .metodo-lienzo { --eje-aire: 16px; --tic-aire: 4px; }
  .metodo-tic-y { display: none; }
  .metodo-tarjeta h3 { font-size: clamp(15px, 4.5vw, 21px); margin: 3px 0 5px; }
  .metodo-tarjeta p { font-size: clamp(11px, 3.1vw, 14px); line-height: 1.34; }
  /* De frente y sin ladeo: en un ancho de pantalla el giro se come el filo. */
  .metodo-columna-izq .metodo-tarjeta,
  .metodo-columna-der .metodo-tarjeta {
    transform: perspective(900px) translateZ(-260px) rotateX(14deg);
  }
  .metodo-columna-izq .metodo-tarjeta.activa,
  .metodo-columna-der .metodo-tarjeta.activa {
    transform: perspective(900px) translateZ(0) rotateX(0);
  }
  .metodo-cta { white-space: normal; text-align: center; }
}

.cta {
  position: relative;
  /* el mismo crema de la página: la sección de sectores ya disuelve su mármol
     antes de terminar, así que aquí no hay costura que coser */
  background: #f9efe7;
  padding: clamp(26px, 4.6vh, 70px) 0 clamp(34px, 6vh, 86px);
}

.cta-franja {
  /* mismo marco que .sectors-inner; lo medido es 85.6% y 6.9% de margen */
  width: 85%;
  max-width: 1700px;
  margin: 0 auto;
  min-height: var(--cta-h);

  /* ⚠️ Las siete pistas SON los porcentajes medidos y por eso la franja no
     lleva padding lateral. Un % dentro de la caja de contenido se mide contra
     el ancho YA sin padding: metiendo el margen como padding, las columnas se
     descolocarían igual que se descolocó el icono de las tarjetas del Bloque 1.
        3.3  margen        21.5  logo        6.8  hueco
       33.9  texto         11.1  hueco      17.5  botón      5.9  margen  */
  display: grid;
  grid-template-columns: 3.3% 21.5% 6.8% 33.9% 11.1% 17.5% 5.9%;
  align-items: center;
  /* El contenido de la referencia NO está centrado: texto y botón comparten
     centro en el 51.5%, no en el 50%. Son 3px, pero es sistemático en las dos
     piezas, así que se reproduce. Solo padding ARRIBA: un padding lateral
     rompería las pistas en %, que se miden contra la caja de contenido. */
  padding-top: calc(var(--cta-h) * 0.03);

  /* Colores medidos en la referencia: el relleno es un punto más claro y más
     cálido que la página (251,242,235 contra 249,239,231) y el filo es
     suavísimo, 7 niveles. Nada que ver con el borde de .features, que marca
     26 niveles: aquí la franja la define la sombra, no una línea. */
  background: #fbf2eb;
  border: 1px solid #f0e5da;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

/* ---------- Logotipo ---------- */
/* ⚠️ La bajada YA NO va en posición absoluta.
   Estaba así para reproducir la referencia, donde «CONSULTORES TECNOLÓGICOS»
   es más ancha que la palabra y se mete por debajo del icono. Medido en el
   DOM, eso le pisaba 11px al robot y en el pie se iba 280px a la derecha,
   suelta del logotipo. La usuaria lo cortó: estéticamente no vale.
   Ahora son dos filas de rejilla: arriba icono + palabra, abajo la bajada
   centrada bajo el conjunto entero. Sin solapes y funciona igual en la franja
   y en el pie, que tienen anchos distintos. */
.cta-marca {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: calc(var(--cta-h) * 0.07);
  row-gap: calc(var(--cta-h) * 0.05);
  text-decoration: none;
  color: var(--text);
}
.cta-marca .logo-head { grid-column: 1; grid-row: 1; }
.cta-marca .wordmark  { grid-column: 2; grid-row: 1; }
.cta-marca .cta-bajada { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
.cta-marca .logo-head {
  /* medido: el icono ocupa el 52.9% del alto de la franja */
  height: calc(var(--cta-h) * 0.529);
  width: auto;
  display: block;
}

/* ⚠️ La palabra se dimensiona por ANCHO, no por altura de mayúscula.
   La referencia da las dos cosas y NO son compatibles: su "RuBot" mide 103px
   de ancho con 35 de mayúscula (relación 2.94), mientras que en Playfair esa
   misma relación es 4.17 — el mockup usa una serif más estrecha que la de la
   marca ya montada. Obedeciendo la altura, la palabra sale de 304px, el
   logotipo se come 438 de los 348 que tiene su columna y se mete debajo del
   titular. Manda el ancho medido (13.2% de la franja), que es la restricción
   real: 0.338 de --cta-h da 73px de cuerpo y 214 de ancho, y el conjunto
   (icono 119 + hueco 15 + palabra 214) cuadra en los 348 de la pista.
   Consecuencia asumida: el logotipo se lee algo menor que en la referencia. */
.cta-marca .wordmark { font-size: calc(var(--cta-h) * 0.338); }

.cta-bajada {
  white-space: nowrap;
  font-family: var(--font-body);
  line-height: 1;
  font-size: calc(var(--cta-h) * 0.068);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}

/* ---------- Texto ---------- */
.cta-texto { grid-column: 4; }
/* ⚠️ Palo seco, NO Playfair. Se comprobó ampliando la referencia: el titular
   de esta franja es la única cabecera de la página que no va en serif. */
/* Mismo choque que con el logotipo, y se resuelve igual: por el ancho.
   La altura de tinta de la referencia pide 39px de cuerpo, pero a 39px la
   primera línea necesita 690px y su columna mide 549, así que partiría en tres
   líneas en vez de en dos y se rompería el salto de la referencia. Manrope es
   un 25% más ancha que la palo seco del mockup. Medido en el navegador: la
   línea larga cabe justo a 34.5px; se dejan 33.6 (0.155) para no ir al filo. */
.cta-texto h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(var(--cta-h) * 0.155);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--text);
}
/* Se conserva la proporción medida entre subtítulo y titular (0.62), y el
   hueco que los separa: en la referencia son 13.4% de la franja (29px), no los
   10px que salían del margen anterior. Con este hueco el bloque de texto mide
   los 123px medidos y cae en el 23–79% de la franja, como la referencia. */
.cta-texto p {
  margin: calc(var(--cta-h) * 0.097) 0 0;
  font-size: calc(var(--cta-h) * 0.096);
  line-height: 1.35;
  color: var(--text-2);
}

/* ---------- Botón ---------- */
/* El ancho no se escribe: es el 100% de su pista del 17.5%, que es justo lo
   medido. El alto sí, porque la referencia lo da: 35.6% de la franja. */
.cta-boton {
  grid-column: 6;
  width: 100%;
  height: calc(var(--cta-h) * 0.356);
  padding: 0;
  justify-content: center;
  font-size: calc(var(--cta-h) * 0.085);
  white-space: nowrap;
}
.cta-boton .chev { width: 1.1em; height: 1.1em; }

/* ---------- Franja estrecha ----------
   Por debajo de 980px las tres columnas no caben: el titular a dos líneas
   necesita 553px él solo. Se apila y la franja deja de tener alto fijo. */
@media (max-width: 980px) {
  .cta { padding: 34px 0 42px; }
  .cta-franja {
    --cta-h: 168px;              /* solo para seguir dimensionando lo de dentro */
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 0;
    gap: 22px;
    padding: 34px 22px 30px;     /* aquí sí, porque ya no hay columnas en % */
  }
  .cta-marca, .cta-texto, .cta-boton { grid-column: 1; }
  .cta-texto h2 { font-size: clamp(21px, 3.6vw, 30px); }
  .cta-texto p { font-size: clamp(14px, 1.9vw, 17px); }
  .cta-boton { width: auto; min-width: 240px; height: 54px; font-size: 16px; }
  /* En la referencia el titular parte en "con un"; a una columna estrecha ese
     salto forzado deja líneas huérfanas, así que se deja fluir. */
  .cta-texto h2 br { display: none; }
}

/* =================================================================
   PIE
   ⚠️ No sale en ninguna referencia: la infografía termina en la franja de
   arriba. Se monta con el sistema de la propia página (token --bg-dark, el
   mismo marco del 85%, la misma escala tipográfica).
   ================================================================= */
.pie {
  background: var(--bg-dark);
  color: #cfc7bf;
  padding: clamp(40px, 6vh, 76px) 0 0;
  font-size: 15px;
}
.pie-inner,
.pie-legal {
  width: 85%;
  max-width: 1700px;
  margin: 0 auto;
}
.pie-inner {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) 2fr;
  gap: clamp(30px, 4vw, 80px);
  padding-bottom: clamp(30px, 4.4vh, 56px);
}

/* El logotipo del pie es el mismo bloque de la franja, más pequeño y en
   claro. Sobre oscuro la cabeza marfil ya contrasta sola: no lleva halo.
   Se deshacen los dos ajustes que solo tienen sentido dentro de la franja: la
   subida sobre el centro y la bajada colgando por fuera del icono, que aquí
   se metería dentro del párrafo. */
.pie-logo { --cta-h: 120px; }
.pie-logo .cta-bajada { color: #8d857e; }
.pie-logo .wordmark .ru { color: #f4ece4; }
/* La excepcion: sobre el fondo oscuro del pie la marca va DORADA. No se
   elige el tono a ojo -- medido en la captura, el "Bot" del pie sale
   (213,167,112), que es --gold. */
.pie-logo .wordmark .reg { color: var(--gold); }
.pie-marca p {
  margin: 20px 0 0;
  max-width: 46ch;
  line-height: 1.6;
  color: #a49b93;
}

.pie-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 46px);
}
.pie-col { display: flex; flex-direction: column; align-items: flex-start; }
.pie-col h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.pie-col a {
  color: #cfc7bf;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.16s ease;
}
.pie-col a:hover { color: var(--gold-light); }

.pie-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(207, 199, 191, 0.14);
  font-size: 13px;
  color: #8d857e;
}

@media (max-width: 980px) {
  .pie-inner { grid-template-columns: 1fr; }
  .pie-legal { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .pie-cols { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .pie-logo { --cta-h: 100px; }
}

/* =================================================================
   RECOGER EL CONTACTO DENTRO DE LA CONVERSACIÓN (2026-08-18)
   Sale cuando alguien dice que quiere contratarlo. Antes el bot le mandaba a
   buscar un botón justo en el momento en que estaba decidido, y ahí se pierde.

   Va DENTRO del hilo de mensajes, no en una ventana aparte: es la continuación
   de la conversación, no un trámite nuevo.
   ================================================================= */
.teaser-lead {
  align-self: stretch;
  margin: 6px 0 2px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.62);
  border: 1px solid rgba(214, 190, 165, 0.55);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 10px 26px rgba(49, 49, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.teaser-lead-tit {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
}
.teaser-lead-form { display: grid; gap: 9px; }
.teaser-lead-form label {
  display: grid;
  gap: 3px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}
.teaser-lead-form input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.75);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.teaser-lead-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(219, 173, 121, 0.28);
}
/* Solo se marcan en rojo los que faltan, y solo después de intentar enviar:
   marcar antes de que nadie haya hecho nada es regañar por adelantado. */
.teaser-lead.falta input:invalid,
.teaser-lead.falta input[required]:placeholder-shown { border-color: #b4674f; }
.teaser-lead-form button {
  margin-top: 4px;
  padding: 11px 18px;
  border: none;
  border-radius: 999px;
  background: var(--gold-btn);
  color: #fff9f4;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(169, 116, 42, 0.26);
  transition: transform 0.16s ease, filter 0.16s ease;
}
.teaser-lead-form button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.teaser-lead-pie { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); }
.teaser-lead-pie a { color: var(--gold-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.teaser-lead-pie a:hover { text-decoration: underline; }
/* Aviso honesto: hoy esto no sale del navegador de quien lo escribe. */
.teaser-lead-nota { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--text-2); opacity: 0.85; }

@media (max-width: 780px) {
  .teaser-lead { padding: 14px 14px 12px; border-radius: 14px; }
  .teaser-lead-form input { font-size: 16px; }  /* 16px evita que iOS haga zoom al enfocar */
}

/* ===================================================================
   EL ROBOT HABLA  ·  boca animada + bocadillo del hero (20/08)
   El motor está en hero-habla.js. Aquí van la caja de la boca y el panel.

   NO toca nada del hero que ya había: ni la rejilla, ni el texto, ni las
   tarjetas, ni el fondo. Todo lo de aquí es posición absoluta dentro de
   .spin, así que no mueve el layout ni un píxel.
   =================================================================== */

/* El cuerpo del robot: la caja que se escala en la microanimación de "se
   activa". Existe porque .spin NO se puede tocar —app.js le reescribe el
   transform en cada fotograma— y porque la boca tiene que escalar con la
   imagen o se despega de la cara. Ocupa exactamente lo mismo que .spin, así
   que los % de dentro siguen siendo los % del PNG. */
.robot-cuerpo { position: absolute; inset: 0; }

/* LA BOCA.
   Los cuatro valores son el viewBox pasado a % de la caja del robot:
   180/781, 498/1006, 264/781 y 118/1006. Ni un número a ojo. */
.robot-boca {
  position: absolute;
  left: 23.048%;
  top: 49.503%;
  width: 33.803%;
  height: 11.729%;
  pointer-events: none;
  overflow: visible;
}

/* ---------- EL BOCADILLO ---------- */
/* Medido a 1440x900: la tinta del titular acaba en x=549 y la cara negra
   empieza en x=739, o sea 190 px de corredor. `right: 93%` deja el filo
   derecho del panel justo en el borde de la cara (la punta es lo único que
   la toca) y el ancho crece hacia la izquierda, hacia el hueco.
   `top: 36%` pone el centro del panel a la altura de la boca (y=447). */
.habla {
  position: absolute;
  /* Medido y corregido: con `right: 93%` y 54% de ancho el panel arrancaba en
     x=550 y la tinta del titular acaba en 549 -- un pixel. Y a 1280 se tocaban,
     porque ahi el minimo de 180px mandaba sobre el %. Con 92% y 53% quedan 8px
     de aire a 1440 y 20 a 1280, y el filo derecho sigue justo en la cara.
     `top: 39.4%` pone la punta a la altura de la boca (y=447), no 15px por
     encima como estaba. */
  right: 92%;
  top: 39.4%;
  width: clamp(150px, 53%, 290px);
  z-index: 6;
  /* Arranca apagado: lo enciende hero-habla.js. Si se dejara visible se vería
     un fotograma del panel antes de que el módulo tome el control. */
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Sólo cuando ya ha entrado se le puede hacer clic: mientras es invisible no
   debe robarle el ratón al titular que tiene debajo. */
.habla.puesto { pointer-events: auto; }

.habla-caja {
  position: relative;
  padding: 15px 17px 13px;
  border-radius: 22px;
  /* Mismo material que las tarjetas del hero (.mc-face): mármol de
     tools/marmol.cjs sobre marfil, no un blanco plano. Encima, un degradado
     claro en diagonal que hace el brillo de arriba. */
  background-color: #fffaf4;
  background-image:
    linear-gradient(157deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 253, 250, 0.72) 62%, rgba(255, 252, 247, 0.6) 100%),
    url("assets/textures/marmol-beige.png");
  background-size: auto, 175% auto;
  background-position: 0 0, 34% 42%;
  background-repeat: no-repeat;
  border: 1px solid rgba(180, 142, 88, 0.55);
  /* Cuatro capas: filo claro arriba, sombra de contacto, sombra ambiental y
     un halo dorado muy flojo que lo despega del mármol del fondo. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(90, 62, 20, 0.10),
    0 10px 22px rgba(120, 88, 40, 0.14),
    0 26px 48px rgba(120, 88, 40, 0.16),
    0 0 0 3px rgba(219, 173, 121, 0.10);
  transform-style: preserve-3d;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Al pasar el raton la sombra crece un poco y el filo se marca. Nada mas: no
   es una tarjeta de videojuego, es un panel corporativo. */
.habla.puesto:hover .habla-caja {
  border-color: rgba(180, 142, 88, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(90, 62, 20, 0.12),
    0 14px 28px rgba(120, 88, 40, 0.17),
    0 34px 60px rgba(120, 88, 40, 0.2),
    0 0 0 4px rgba(219, 173, 121, 0.14);
}

/* La punta sale del filo DERECHO y apunta a la boca. Es un cuadrado girado
   con borde sólo en sus dos lados de fuera: así continúa el filo dorado del
   panel en vez de parecer un pico de cómic pegado. */
.habla-punta {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%) rotate(45deg);
  background: #fdf6ee;
  border-top: 1px solid rgba(180, 142, 88, 0.55);
  border-right: 1px solid rgba(180, 142, 88, 0.55);
  border-radius: 0 3px 0 0;
}

.habla-frase {
  margin: 0 0 7px;
  font-family: var(--font-display);
  /* ⚠️ 20/08 · NO ES CUESTIÓN DE TAMAÑO, ES DE PESO. Playfair en cuerpo 17
     sobre mármol tiene los trazos finos demasiado finos y la frase se leía
     floja. Sube a 700 y el negro se cierra un punto (el --text de la casa es
     #313130, aquí va #23211f). El cuerpo se queda como estaba. */
  font-size: clamp(15px, 1.16vw, 19px);
  font-weight: 700;
  line-height: 1.28;
  color: #23211f;
}
/* El texto aparece por PALABRAS, no letra a letra. hero-habla.js envuelve cada
   una en un .pal; en bloque para poder moverlas. */
.habla-frase .pal { display: inline-block; }

.habla-claim {
  margin: 0 0 11px;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #6d635a;
}

.habla-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(12px, 0.85vw, 14px);
  color: var(--gold-dark);
  text-decoration: none;
}
.habla-cta .chev { width: 1em; height: 1em; transition: transform 0.18s ease; }
.habla-cta:hover .chev,
.habla-cta:focus-visible .chev { transform: translateX(3px); }
.habla-cta:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 5px;
}

/* ---------- FUERA DEL ESCRITORIO ----------
   Por debajo de 1025px el hero se apila (rejilla de una columna) y al lado del
   robot no queda hueco: el robot mide 207 px de ancho en un teléfono de 390 y
   los márgenes son de 64. Así que el panel deja de flotar y se mete en el
   flujo, entre el párrafo y los botones, que es donde no rompe la jerarquía.
   Lo mueve hero-habla.js con un matchMedia, no un duplicado del marcado. */
@media (max-width: 1024px) {
  .habla {
    position: static;
    right: auto;
    top: auto;
    width: min(calc(100vw - 32px), 330px);
    margin: 2px auto 6px;
  }
  /* La punta pasa abajo, porque en esta disposición el robot está DEBAJO. */
  .habla-punta {
    right: auto;
    top: auto;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
    border-top: 0;
    border-right: 1px solid rgba(180, 142, 88, 0.55);
    border-bottom: 1px solid rgba(180, 142, 88, 0.55);
    border-radius: 0 0 3px 0;
  }
  .habla-frase { font-size: 17px; }
  .habla-claim { font-size: 13px; }
  .habla-cta   { font-size: 14px; }
}

/* ---------- MENOS MOVIMIENTO ----------
   Se ve el panel puesto y la sonrisa de siempre. Sin entrada, sin flotación y
   sin boca hablando. hero-habla.js hace lo propio por su lado. */
@media (prefers-reduced-motion: reduce) {
  .habla { opacity: 1; pointer-events: auto; }
  .habla-cta .chev { transition: none; }
}