/* =========================================================
   Zurvel — estilos compartidos
   Un solo archivo para todo el sitio. Índice:
   1. Tipografías   2. Variables   3. Base   4. Utilidades
   5. Botones   6. Header y menú   7. Secciones   8. Tarjetas
   9. Marco de video   10. Diagrama de nodos   11. Pasos
   12. Precio   13. Preguntas frecuentes   14. CTA y footer
   15. 404   16. Animaciones   17. Movimiento reducido
   ========================================================= */

/* ---------- 1. Tipografías (servidas desde el propio sitio) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-expandida.woff2") format("woff2");
  font-weight: 700 800;
  font-stretch: 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Variables ---------- */
:root {
  /* Colores de marca (CLAUDE.md, sección 5) */
  --azul: #86B4FF;
  --azul-borde: #5A8FE8;
  --tinta: #0B0C0E;
  --blanco: #FFFFFF;
  --azul-texto: #2E64D8;
  --oscuro: #141519;
  --fondo-alterno: #F4F5F7;
  --gris-texto: #5B606B;
  --gris-etiqueta: #6B7079;
  --linea: #E4E6EA;
  --ambar: #F29A4A;

  /* Grises del diagrama y de los marcos de video (mockup) */
  --panel: #111317;
  --panel-punto: #252930;
  --nodo: #1B1E24;
  --nodo-borde: #3A404B;
  --nodo-icono: #C9CDD4;
  --conector: #6B7280;
  --texto-claro: #E6E8EB;
  --texto-apagado: #9AA1AC;
  --boton-oscuro-borde: #3A3F48;

  /* Texto sobre fondo oscuro */
  --sobre-oscuro-72: rgba(255, 255, 255, .72);
  --sobre-oscuro-60: rgba(255, 255, 255, .62);
  --sobre-oscuro-linea: rgba(255, 255, 255, .14);

  /* Tipografías */
  --f-titulo: "Archivo", "Arial Black", sans-serif;
  --f-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Tamaños de texto: de celular (390 px) a escritorio (1440 px) */
  --t-h1: clamp(2.125rem, 1.2rem + 3.6vw, 4rem);          /* 34 → 64 */
  --t-h2-xl: clamp(1.75rem, 1rem + 3vw, 3.5rem);           /* 28 → 56 */
  --t-h2-l: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);       /* 28 → 52 */
  --t-h2: clamp(1.625rem, 1.1rem + 2vw, 2.75rem);          /* 26 → 44 */
  --t-h3: clamp(1.1875rem, 1rem + .6vw, 1.5rem);           /* 19 → 24 */
  --t-subtitulo: clamp(.9375rem, .75rem + .9vw, 1.375rem); /* 15 → 22 */
  --t-lead: clamp(1rem, .95rem + .3vw, 1.125rem);          /* 16 → 18 */
  --t-cuerpo: clamp(.9375rem, .9rem + .2vw, 1.0625rem);    /* 15 → 17 */
  --t-etiqueta: clamp(.6875rem, .65rem + .2vw, .8125rem);  /* 11 → 13 */

  /* Espaciados */
  --gutter: clamp(16px, 5.5vw, 80px);          /* margen lateral */
  --seccion: clamp(48px, 8vw, 120px);          /* relleno vertical de sección */
  --ancho-max: 1440px;
  --e-1: 8px;
  --e-2: 12px;
  --e-3: 16px;
  --e-4: 24px;
  --e-5: 32px;
  --e-6: 48px;
  --e-7: 64px;
  --e-8: 80px;

  /* Radios */
  --r-tarjeta: 12px;
  /* estrella de navegación de 8 puntas, para usar con clip-path */
  --estrella: polygon(50% 4.17%, 54.13% 40%, 66.5% 33.5%, 60% 45.88%, 95.83% 50%, 60% 54.13%, 66.5% 66.5%, 54.13% 60%, 50% 95.83%, 45.88% 60%, 33.5% 66.5%, 40% 54.13%, 4.17% 50%, 40% 45.88%, 33.5% 33.5%, 45.88% 40%);
  --r-marco: 14px;
  --r-caja: 10px;

  /* Header */
  --header-h: 64px;
  --header-h-chico: 56px;

  /* Movimiento (sección 8) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 700ms;
  --escalon: 80ms;
  --dur-ui: 450ms;       /* header, menú, acordeón */
  --ease-suave: cubic-bezier(.45, 0, .2, 1);

  /* Foco visible */
  --foco: var(--azul-texto);
}

@media (min-width: 1120px) {
  :root {
    --header-h: 84px;
    --header-h-chico: 68px;
  }
}

/* ---------- 3. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.menu-abierto { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }

a { color: inherit; }
a:hover { color: var(--azul-texto); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

/* Títulos: Archivo expandida, siempre en mayúscula */
.titulo,
h1, h2, h3 {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  /* Las palabras nunca se cortan con guión: si no entran, pasan enteras a la línea siguiente */
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

h1 { font-size: var(--t-h1); line-height: 1.02; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.1; }

.mono {
  font-family: var(--f-mono);
  letter-spacing: .04em;
}

/* Saltar al contenido */
.saltar {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
}
.saltar:focus { top: 12px; color: var(--blanco); }

/* ---------- 4. Utilidades ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.etiqueta {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-etiqueta);
  letter-spacing: .01em;
  color: var(--azul-texto);
  line-height: 1.4;
}
/* Estrella de la marca adelante de cada etiqueta (Pedido 09). Dibujada con clip-path: no carga archivos. */
.etiqueta::before,
.ficha__titulo::before {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-right: .5em;
  vertical-align: -.08em;
  background: currentColor;
  clip-path: var(--estrella);
}

.subtitulo {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-subtitulo);
  line-height: 1.3;
  color: var(--azul-texto);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--gris-texto);
}

.link-flecha {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.link-flecha span[aria-hidden] {
  display: inline-block;
  margin-left: .4em;
  transition: transform 250ms var(--ease);
}
.link-flecha:hover span[aria-hidden] { transform: translateX(4px); }

/* Placeholder visible (datos que faltan) */
.placeholder {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--texto-apagado);
}

/* ---------- 5. Botones ----------
   El borde inferior es una sombra interna: al "hundirse" el botón
   baja 2 px y la pierde, sin mover nada alrededor. */
.btn {
  --btn-fondo: var(--azul);
  --btn-texto: var(--tinta);
  --btn-borde: var(--azul-borde);
  --btn-hover: #9DC2FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px 3px;
  border: 0;
  border-radius: 0;
  background: var(--btn-fondo);
  color: var(--btn-texto);
  box-shadow: inset 0 -3px 0 var(--btn-borde);
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 280ms var(--ease), color 280ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.btn:hover { background: var(--btn-hover); color: var(--btn-texto); }
.btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.btn--chico { min-height: 44px; padding: 0 20px 3px; font-size: 12px; }
.btn--grande { min-height: 54px; padding: 0 28px 3px; }

.btn--secundario {
  --btn-fondo: transparent;
  --btn-texto: var(--tinta);
  --btn-hover: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta), inset 0 -3px 0 var(--tinta);
}
.btn--secundario:hover { color: var(--blanco); }
.btn--secundario:active { box-shadow: inset 0 0 0 1px var(--tinta); }

/* Sobre un bloque azul: un botón azul desaparecería */
.btn--oscuro {
  --btn-fondo: var(--tinta);
  --btn-texto: var(--blanco);
  --btn-borde: var(--boton-oscuro-borde);
  --btn-hover: #262A31;
}

.btn[disabled] { cursor: default; }

/* ---------- 6. Header y menú ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--blanco);
  border-bottom: 1px solid transparent;
  transition: height var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.header.is-chico {
  height: var(--header-h-chico);
  border-bottom-color: var(--linea);
}

.header__barra {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.logo {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
  color: var(--tinta);
}
/* Símbolo: velero + estrella */
.logo svg { height: 23px; width: auto; flex-shrink: 0; overflow: visible; }
.logo__barco { transform-box: fill-box; transform-origin: 50% 100%; }
.logo__estrella {
  fill: var(--azul-borde);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 700ms var(--ease);
}
.footer .logo__estrella { fill: var(--azul); }

.nav { display: none; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: 18px;
}
@media (min-width: 1280px) {
  .nav__lista { gap: clamp(24px, 2.5vw, 36px); }
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 3px;
  background: var(--azul-borde);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-ui) var(--ease);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.header__cta { display: none; white-space: nowrap; }

.menu-boton {
  --btn-fondo: var(--azul);
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--azul);
  box-shadow: inset 0 -3px 0 var(--azul-borde);
  cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.menu-boton:active { transform: translateY(2px); box-shadow: none; }
.menu-boton svg { width: 20px; height: 20px; }
.menu-boton .linea {
  transition: transform var(--dur-ui) var(--ease), opacity 250ms var(--ease);
  transform-origin: 12px 12px;
}
.menu-boton[aria-expanded="true"] .linea--1 { transform: translateY(4px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .linea--2 { transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 640px) {
  .header__cta { display: inline-flex; }
}

@media (min-width: 1120px) {
  .logo { font-size: 24px; }
  .logo svg { height: 29px; width: auto; }
  .nav { display: block; }
  .menu-boton { display: none; }
}

/* Panel del menú mobile: pantalla completa, debajo del header */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: calc(var(--header-h) + var(--e-5)) var(--gutter) var(--e-6);
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui);
}
.menu-panel.is-abierto {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s;
}

.menu-panel__lista { display: flex; flex-direction: column; }
.menu-panel__lista a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.125rem, 1rem + 1.5vw, 1.5rem);
  text-decoration: none;
}
.menu-panel__lista a[aria-current="page"] { color: var(--azul-texto); }
.menu-panel .btn { width: 100%; }
.menu-panel__contacto {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--gris-texto);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 1120px) {
  .menu-panel { display: none; }
}

/* ---------- 7. Secciones ---------- */
.seccion { padding-block: var(--seccion); }

.seccion--oscura {
  --foco: var(--azul);
  background: var(--oscuro);
  color: var(--blanco);
}
.seccion--oscura a:not(.btn):hover { color: var(--azul); }

.seccion--azul {
  --foco: var(--tinta);
  background: var(--azul);
  color: var(--tinta);
}
.seccion--azul a:not(.btn):hover { color: var(--tinta); }

.seccion--alterna { background: var(--fondo-alterno); }

.encabezado-centrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.encabezado-centrado h2 { font-size: var(--t-h2-l); line-height: 1.02; }
.encabezado-centrado p {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem);
  line-height: 1.4;
}

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px); }
.hero__grilla {
  display: grid;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.hero__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}
.hero__texto .lead { max-width: 560px; }
/* Títulos con una palabra muy larga ("Automatizaciones"): se achican con la columna para que la palabra entre entera */
.hero__texto { container-type: inline-size; }
h1.titulo--largo { font-size: min(var(--t-h1), 7.2cqi); }
.hero__botones {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: 6px;
}

@media (min-width: 560px) {
  .hero__botones { flex-direction: row; flex-wrap: wrap; }
}

@media (min-width: 1120px) {
  /* texto y video casi mitad y mitad: el título entra entero aunque la pantalla sea angosta */
  .hero__grilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Problema */
.problema__grilla {
  display: grid;
  gap: clamp(28px, 5.5vw, 80px);
  align-items: center;
}
.problema__imagen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-marco);
  background: #1D1F24;
  overflow: hidden;
}
.problema__imagen .placeholder {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
}
.problema__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}
.problema__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--sobre-oscuro-72);
}
.problema__lista li { display: flex; gap: 14px; }
.problema__lista li::before {
  content: "—";
  color: var(--azul);
  flex-shrink: 0;
}
.problema__separador {
  height: 1px;
  background: var(--sobre-oscuro-linea);
}
.problema__antidoto {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1rem, .85rem + .7vw, 1.375rem);
  line-height: 1.3;
  color: var(--azul);
}

@media (min-width: 900px) {
  .problema__grilla { grid-template-columns: 1fr 1fr; }
}

/* Problema del Inicio (Pedido 09): título | tarjetas, y el antídoto abajo a todo el ancho */
.problema__grilla--tarjetas { align-items: start; }
.problema__tarjetas {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.problema__tarjeta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--sobre-oscuro-linea);
  border-radius: var(--r-tarjeta);
  background: rgba(255, 255, 255, .04);
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--sobre-oscuro-72);
}
.problema__icono { width: 40px; height: 40px; flex-shrink: 0; color: var(--blanco); }
.problema__cierre { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
@media (min-width: 900px) {
  .problema__grilla--tarjetas { row-gap: clamp(32px, 4vw, 56px); }
  .problema__cierre { grid-column: 1 / -1; }
}

/* Íconos del problema: el feed pasa de largo, los mensajes se apilan y aparecés último */
.icono__feed,
.icono__subir,
.icono__ultimo { transform-box: view-box; }
.is-animando .icono__feed { animation: ic-feed 1.1s var(--ease-suave) both; }
.is-animando .icono__subir { animation: ic-subir 1.1s var(--ease-suave) both; }
.is-animando .icono__ultimo { animation: ic-ultimo 900ms var(--ease) 250ms both; }
@keyframes ic-feed {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-7px); opacity: 0; }
  55% { transform: translateY(7px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes ic-subir {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-5px); }
}
@keyframes ic-ultimo {
  0% { transform: translateY(-18px); opacity: 0; }
  60% { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(0); }
}

/* Automatización por dentro */
.auto__grilla {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.auto__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  container-type: inline-size;
}
/* "AUTOMATIZACIÓN" entra entera en 320 px: el título se achica con la columna */
.auto__texto h2 { font-size: min(var(--t-h2), 8.6cqi); }
.auto__dato {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .04em;
}

@media (min-width: 1120px) {
  .auto__grilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Trabajos */
.trabajos__encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.trabajos__encabezado h2 { font-size: var(--t-h2-l); line-height: 1.02; }
.trabajos__encabezado p {
  max-width: 460px;
  font-size: var(--t-cuerpo);
  color: var(--sobre-oscuro-60);
}
.trabajos__grilla {
  display: grid;
  gap: clamp(40px, 3vw, 32px);
}
.trabajo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.trabajo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .6);
}
.punto-ambar { color: var(--ambar); }
.trabajo h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.trabajo h3 a { text-decoration: none; }
.trabajo p { font-size: 16px; color: var(--sobre-oscuro-60); }
.trabajos__pie { margin-top: clamp(32px, 4vw, 48px); }

@media (min-width: 900px) {
  .trabajos__grilla { grid-template-columns: 1.5fr 1fr; }
}

/* ---------- 8. Tarjetas ---------- */
.tarjetas {
  display: grid;
  gap: var(--e-3);
}
.tarjeta {
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--r-tarjeta);
  padding: clamp(22px, 2.5vw, 36px) clamp(20px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 18px);
}
.tarjeta__icono { width: clamp(34px, 3vw, 44px); height: auto; }
/* El título se achica con la tarjeta: la palabra más larga ("Automatizaciones") entra entera */
.tarjeta { container-type: inline-size; }
.tarjeta h3 { font-size: min(var(--t-h3), 7.4cqi); }
.tarjeta p { font-size: var(--t-cuerpo); line-height: 1.55; }
.tarjeta__ficha {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--azul-texto);
}
.tarjeta .link-flecha { margin-top: auto; align-self: flex-start; }
.insignia {
  align-self: flex-start;
  padding: 4px 8px;
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
}

@media (min-width: 720px) {
  .tarjetas { gap: 20px; }
}
@media (min-width: 1024px) {
  .tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 9. Marco de video ---------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-marco);
  background: #1A1C21;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
}
.video--alto { aspect-ratio: auto; min-height: clamp(220px, 32vw, 440px); }
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__play {
  --foco: var(--azul);
  width: clamp(58px, 5.5vw, 76px);
  height: clamp(58px, 5.5vw, 76px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(0, 0, 0, .25);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 250ms var(--ease), background-color 250ms var(--ease), border-color 250ms var(--ease);
}
.video__play svg { width: 20px; height: 20px; margin-left: 3px; }
.video__play:not([disabled]):hover {
  transform: scale(1.06);
  background: rgba(0, 0, 0, .45);
  border-color: var(--blanco);
}
.video__play[disabled] { display: none; } /* sin link de YouTube no hay play (Pedido 10) */
.video__etiqueta {
  position: absolute;
  left: 20px;
  bottom: 16px;
  right: 20px;
}
.video__rec {
  position: absolute;
  right: 20px;
  top: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--blanco);
}
.video__rec .punto-ambar { animation: rec 1.1s var(--ease-suave) infinite alternate; }

@keyframes rec {
  from { opacity: 1; }
  to { opacity: .25; }
}

/* ---------- 10. Diagrama de nodos ---------- */
.diagrama {
  border-radius: var(--r-marco);
  background: var(--panel);
  overflow: hidden;
  color: var(--texto-claro);
}

/* Dos versiones horizontales: completa (tablet y escritorio) y compacta (celular) */
.diagrama__svg { width: 100%; height: auto; }
.diagrama__svg text { font-family: var(--f-texto); }
.diagrama__svg .d-mono { font-family: var(--f-mono); }
.diagrama__svg--ancho { display: none; }

@media (min-width: 720px) {
  .diagrama__svg--ancho { display: block; }
  .diagrama__svg--movil { display: none; }
}

/* ---------- 11. Pasos ---------- */
.pasos {
  display: grid;
  column-gap: clamp(24px, 3vw, 48px);
}
.paso {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px) 0 clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.paso__numero {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 1;
  color: var(--azul-texto);
}
/* segmento azul Rigel sobre la línea de cada paso (Pedido 09); al pasar el mouse lo tapa la línea completa */
.paso::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--azul);
}
.paso h3 { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); }
.paso p { font-size: 16px; line-height: 1.55; color: var(--gris-texto); }

@media (min-width: 640px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 12. Precio ---------- */
.precio__grilla {
  display: grid;
  gap: clamp(28px, 5.5vw, 80px);
}
.precio__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.precio__factores {
  display: grid;
  gap: var(--e-3);
}
.factor {
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: inset 0 3px 0 var(--azul); /* línea azul Rigel arriba (Pedido 09) */
  border-radius: var(--r-caja);
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.factor { container-type: inline-size; }
.factor__icono { width: 36px; height: 36px; color: var(--tinta); }
.factor h3 { font-size: min(15px, 9cqi); }
.factor p { font-size: 15px; line-height: 1.55; color: var(--gris-texto); }
.precio__pendiente {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--gris-texto);
}

@media (min-width: 720px) {
  .precio__factores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
}
@media (min-width: 1280px) {
  .precio__grilla { grid-template-columns: 1fr 1.6fr; }
}

/* ---------- 13. Preguntas frecuentes (acordeón) ---------- */
.faq__grilla {
  display: grid;
  gap: clamp(28px, 5.5vw, 80px);
}
.faq { border-top: 1px solid var(--tinta); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item h3 { font-size: inherit; line-height: inherit; }
.faq__boton {
  width: 100%;
  min-height: 44px;
  padding: clamp(20px, 2vw, 26px) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(.875rem, .8rem + .3vw, 1rem);
  line-height: 1.3;
  color: var(--tinta);
  transition: color 280ms var(--ease);
}
.faq__boton:hover { color: var(--azul-texto); }

/* El + gira y pierde la barra vertical: queda un − */
.faq__icono {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform var(--dur-ui) var(--ease);
}
.faq__icono::before,
.faq__icono::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.faq__icono::before { width: 14px; height: 2px; }
.faq__icono::after {
  width: 2px;
  height: 14px;
  transition: transform var(--dur-ui) var(--ease);
}
.faq__boton[aria-expanded="true"] .faq__icono { transform: rotate(180deg); }
.faq__boton[aria-expanded="true"] .faq__icono::after { transform: scaleY(0); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 550ms var(--ease-suave), visibility 0s linear 550ms;
}
.faq__panel.is-abierto {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 550ms var(--ease-suave), visibility 0s;
}
.faq__interior { overflow: hidden; }
.faq__interior p {
  max-width: 700px;
  padding-bottom: clamp(20px, 2vw, 26px);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--gris-texto);
}

/* Sin JS, todas las respuestas quedan abiertas */
html:not(.js) .faq__panel { grid-template-rows: 1fr; visibility: visible; }

@media (min-width: 1024px) {
  .faq__grilla { grid-template-columns: 1fr 1.6fr; }
}

/* ---------- 14. CTA final y footer ---------- */
.cta {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
}
.cta h2 { font-size: var(--t-h2-xl); line-height: 1.02; max-width: 1180px; }
.cta__bajada {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem);
  line-height: 1.4;
}
.cta .btn { width: 100%; }
.cta__dato { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; }

@media (min-width: 640px) {
  .cta { align-items: center; text-align: center; }
  .cta .btn { width: auto; }
}

.footer {
  --foco: var(--azul);
  background: var(--tinta);
  color: var(--blanco);
  /* abajo deja lugar para el botón de volver arriba, que no tape los links legales */
  padding-block: clamp(40px, 4.5vw, 64px) calc(var(--e-5) + 64px);
}
.footer a { color: var(--blanco); text-decoration: none; }
.footer a:not(.btn):hover { color: var(--azul); text-decoration: underline; text-underline-offset: 4px; }
.footer__grilla {
  display: grid;
  gap: var(--e-5);
}
.footer__marca {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__marca .logo { color: var(--blanco); font-size: 18px; }
.footer__marca .logo svg { height: 22px; width: auto; }
.footer__zona { font-size: 14px; color: rgba(255, 255, 255, .6); }
.footer__columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5) var(--e-4);
}
.footer__columna {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
}
.footer__columna a,
.footer__columna span:not(.footer__titulo) {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.footer__titulo {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 6px;
}
.footer__legal {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}
.footer__legal a { color: rgba(255, 255, 255, .8); }

@media (min-width: 720px) {
  .footer__columnas { grid-template-columns: repeat(3, auto); gap: var(--e-5) clamp(40px, 5.5vw, 80px); }
}
@media (min-width: 1024px) {
  .footer__grilla {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: start;
  }
}

/* ---------- Páginas de servicio (misma plantilla para las tres) ---------- */

/* Breadcrumb y fecha de actualización */
.breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-etiqueta);
  line-height: 1.4;
  color: var(--gris-etiqueta);
}
.breadcrumb li + li::before { content: "/"; margin-right: 8px; }
.breadcrumb a { color: var(--gris-etiqueta); text-decoration: none; }
.breadcrumb a:hover { color: var(--azul-texto); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb [aria-current] { color: var(--tinta); }

.actualizado {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gris-etiqueta);
}

/* Problema: título a la izquierda, lista a la derecha */
.problema-s__grilla {
  display: grid;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.problema-s__grilla .problema__texto { gap: clamp(18px, 2vw, 24px); }
@media (min-width: 900px) {
  .problema-s__grilla { grid-template-columns: 1fr 1.1fr; }
}

/* Qué hacemos + ficha técnica */
.antidoto__grilla {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.antidoto__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}
.antidoto__texto p { font-size: var(--t-lead); line-height: 1.6; color: var(--gris-texto); }
.antidoto__texto p strong { color: var(--tinta); font-weight: 600; }
.antidoto__texto p.etiqueta { color: var(--azul-texto); }
.ficha {
  border: 1px solid var(--tinta);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Encabezado tinta con la estrella en azul Rigel (Pedido 09) */
.ficha__titulo {
  padding: 14px clamp(22px, 2.5vw, 32px);
  background: var(--tinta);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--blanco);
}
.ficha__titulo::before { background: var(--azul); }
.ficha dl { display: flex; flex-direction: column; padding: 4px clamp(22px, 2.5vw, 32px) 10px; }
.ficha dl > div:first-child { border-top: 0; }
.ficha dl > div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--linea);
}
.ficha dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}
.ficha dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--gris-texto);
}
.ficha dt .ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--azul-texto); }
.ficha dd.ficha__pendiente { font-size: 12px; color: var(--gris-etiqueta); }
@media (min-width: 560px) {
  .ficha dl > div { grid-template-columns: 172px 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  .antidoto__grilla { grid-template-columns: 1.1fr 1fr; }
}

/* Capacidades: tarjetas sin link */
.tarjeta--cap { gap: clamp(10px, 1.2vw, 14px); }
.tarjeta--cap h3 { font-size: min(clamp(1.0625rem, .95rem + .4vw, 1.25rem), 7.4cqi); }
.tarjeta--cap p { font-size: 16px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .tarjetas--cap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Caso real con selector "En simple / Técnica" */
.caso__encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.caso__titulos { display: flex; flex-direction: column; gap: 14px; }
/* títulos largos de caso ("Extractor de comprobantes"): nunca se cortan, se achican con el ancho */
.caso__titulos { container-type: inline-size; }
.caso__titulos h2 { font-size: min(var(--t-h2), 8.8cqi); }
.caso__titulos .etiqueta { color: rgba(255, 255, 255, .6); }
.selector {
  align-self: flex-start;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .3);
}
.selector__boton {
  --foco: var(--azul);
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--blanco);
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.selector__boton:hover { background: rgba(255, 255, 255, .08); }
.selector__boton[aria-pressed="true"] { background: var(--azul); color: var(--tinta); }

/* Las dos versiones ocupan la misma celda: el alto es el de la más larga, así no salta */
.caso__paneles {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: clamp(24px, 3vw, 32px);
}
.caso__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-suave), visibility 0s linear 500ms;
}
.caso__panel.is-activo {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--ease-suave) 120ms, visibility 0s;
}
html:not(.js) .caso__panel { grid-area: auto; opacity: 1; visibility: visible; }
html:not(.js) .caso__panel + .caso__panel { margin-top: var(--e-6); }
html:not(.js) .selector { display: none; }

.caso__intro + .caso__intro { margin-top: 14px; }
.caso__intro {
  max-width: 820px;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--sobre-oscuro-72);
}
.caso__pasos {
  display: grid;
  gap: var(--e-4);
  margin-top: clamp(20px, 2.5vw, 28px);
}
.caso__pasos li { display: flex; flex-direction: column; gap: 10px; }
.caso__pasos .numero {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  line-height: 1;
  color: var(--azul);
}
.caso__pasos li > span:last-child { font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
@media (min-width: 640px) {
  .caso__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .caso__pasos { grid-template-columns: repeat(var(--columnas, 5), minmax(0, 1fr)); gap: var(--e-5); }
}

.tecnica {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.tecnica dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.55;
}
.tecnica dl > div { display: grid; gap: 2px; }
.tecnica dt { color: rgba(255, 255, 255, .55); }
.tecnica dd { margin: 0; color: var(--blanco); }
.tecnica__notas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tecnica__notas h3 { font-size: 12px; color: var(--azul); }
.tecnica__notas p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
@media (min-width: 720px) {
  .tecnica dl > div { grid-template-columns: 190px 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  .tecnica:not(.tecnica--sola) { grid-template-columns: 1.6fr 1fr; }
  .tecnica--sola dl { max-width: 900px; }
  .tecnica__notas { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 32px; }
}

.caso__pie {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.caso__con-video {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 1024px) {
  .caso__con-video { grid-template-columns: 1fr 1fr; }
}

/* Esquema conceptual de SEO (hero de SEO con IA) */
.esquema {
  border-radius: var(--r-marco);
  background: var(--panel);
  background-image: radial-gradient(circle at 1px 1px, var(--panel-punto) 1px, transparent 0);
  background-size: 16px 16px;
  color: var(--texto-claro);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.esquema__flujo {
  display: grid;
  gap: 14px;
  align-items: center;
}
.esquema__nodo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--nodo-borde);
  background: var(--nodo);
  font-size: 14px;
  line-height: 1.3;
}
.esquema__nodo svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--nodo-icono); }
.esquema__nodo small { display: block; font-size: 12px; color: var(--texto-apagado); }
.esquema__nodo--ia { border: 1.5px solid var(--azul); }
.esquema__nodo--ia svg { color: var(--azul); }
.esquema__capas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.esquema__capa {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px dashed var(--conector);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--texto-claro);
}
.esquema__flecha {
  justify-self: center;
  width: 22px;
  height: 22px;
  color: var(--conector);
  rotate: 90deg; /* en celular el esquema va de arriba hacia abajo */
}
.esquema__destinos { display: grid; gap: 10px; }
.esquema__pie {
  padding-top: 12px;
  border-top: 1px solid var(--panel-punto);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: #7C838F;
}
@media (min-width: 720px) {
  .esquema__flujo { grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.2fr) auto minmax(0, 1.3fr); }
  .esquema__flecha { rotate: none; }
  .esquema__capas { flex-direction: column; flex-wrap: nowrap; }
}
/* aparición escalonada del esquema */
.js .esquema .esquema__paso {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--d, 0) * 170ms);
}
.js .esquema.is-visible .esquema__paso { opacity: 1; transform: none; }

/* CTA con links a los otros servicios */
.relacionados {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
  margin-top: 4px;
}
.relacionados .link-flecha { white-space: nowrap; }
.relacionados span {
  width: 100%;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
}
@media (max-width: 639px) {
  .relacionados { justify-content: flex-start; }
}

/* ---------- Fase 3: trabajos, nosotros, contacto y privacidad ---------- */

/* Índice de trabajos: grilla de 2 x 2 */
.casos-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* en 320 px la columna no crece más que la pantalla */
  gap: clamp(40px, 4vw, 48px) clamp(24px, 3vw, 32px);
}
@media (min-width: 900px) {
  .casos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.video--icono { aspect-ratio: 16 / 9; }
.video--icono .icono { width: clamp(64px, 8vw, 96px); color: var(--azul); }

/* Resumen en texto debajo de cada video (las IA leen el texto, no el video) */
.video__resumen {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--gris-texto);
}
.hero .video-bloque { display: flex; flex-direction: column; }

/* El desafío y el resultado */
.bloque-texto {
  display: grid;
  gap: clamp(20px, 4vw, 80px);
  align-items: start;
}
.bloque-texto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--gris-texto);
}
.bloque-texto__cuerpo strong { color: var(--tinta); font-weight: 600; }
.seccion--oscura .bloque-texto__cuerpo { color: var(--sobre-oscuro-72); }
@media (min-width: 900px) {
  .bloque-texto { grid-template-columns: 1fr 1.4fr; }
}
.resultado {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.resultado li {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
}
.resultado li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--azul-texto);
}

/* Nosotros */
.retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  border-radius: var(--r-marco);
  background: #1D1F24;
  overflow: hidden;
}
.retrato .placeholder { position: absolute; left: 20px; right: 20px; bottom: 16px; }
@media (min-width: 1120px) {
  .hero__grilla--retrato { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.historia {
  display: grid;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
/* Símbolo en dos capas: el barco (animado en px reales) y la estrella (titila en su lugar) */
.historia__simbolo {
  position: relative;
  width: clamp(72px, 15.3vw, 220px); /* 72 px en celular, 220 px en escritorio */
  aspect-ratio: 42.6 / 42;
  color: var(--blanco);
  justify-self: start;
}
.historia__barco,
.historia__estrella {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.historia__barco svg { display: block; width: 100%; height: 100%; }
.historia__barco { transform-origin: 38% 96%; }
.historia__estrella { transform-origin: 78.9% 21.4%; fill: var(--azul); }
.historia__texto p a { color: var(--blanco); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--azul); }
.historia__texto p a:hover { color: var(--azul); }
.historia__texto { display: flex; flex-direction: column; gap: 18px; }
.historia__texto p { font-size: var(--t-lead); line-height: 1.65; color: var(--sobre-oscuro-72); }
.historia__texto p strong { color: var(--blanco); font-weight: 600; }
@media (min-width: 900px) {
  .historia { grid-template-columns: auto minmax(0, 760px); justify-content: start; }
  /* alineado arriba con el título (debajo de la etiqueta "El nombre") */
  .historia__marca { margin-top: 36px; }
}
.cartas-3 { display: grid; gap: var(--e-3); }
@media (min-width: 900px) {
  .cartas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
}
.cartas-3 .factor h3 { font-size: 16px; }
.cartas-3 .factor p { font-size: 16px; }

/* Contacto */
.contacto__grilla {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 1024px) {
  .contacto__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.contacto__canales { display: flex; flex-direction: column; gap: 20px; }
.contacto__whatsapp .btn { width: 100%; }
@media (min-width: 560px) {
  .contacto__whatsapp .btn { width: auto; }
}
.contacto__alternativas {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linea);
}
.contacto__alternativas div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 15px;
}
.contacto__alternativas dt {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gris-etiqueta);
}
.contacto__alternativas dd { margin: 0; font-family: var(--f-mono); font-size: 13px; }

.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--tinta);
  border-radius: var(--r-tarjeta);
  background: var(--blanco);
}
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label,
.campo__titulo {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--tinta);
}
.campo label span { font-family: var(--f-texto); font-weight: 400; text-transform: none; color: var(--gris-texto); font-size: 13px; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #9AA1AC;
  border-radius: 8px;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px; /* 16 px evita que el celular haga zoom al tocar el campo */
  line-height: 1.4;
  transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--tinta); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--azul-texto);
  box-shadow: 0 0 0 3px rgba(46, 100, 216, .25);
}
.campo__ayuda { font-size: 13px; color: var(--gris-texto); }
.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__aviso { font-size: 13px; line-height: 1.55; color: var(--gris-texto); }
.formulario__aviso a { color: var(--azul-texto); }
.formulario .btn { align-self: flex-start; }
.formulario__estado { font-size: 15px; line-height: 1.5; }
.formulario__estado:empty { display: none; }
.formulario__estado--error {
  padding: 12px 14px;
  border-left: 3px solid var(--tinta);
  background: var(--fondo-alterno);
}
.confirmacion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-tarjeta);
  background: var(--oscuro);
  color: var(--blanco);
}
.confirmacion h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.confirmacion p { color: var(--sobre-oscuro-72); }

/* Texto legal (privacidad) */
.aviso-pendiente {
  padding: 16px 20px;
  border: 1px dashed var(--tinta);
  border-radius: var(--r-caja);
  background: var(--fondo-alterno);
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
}
.texto-legal {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gris-texto);
}
.texto-legal h2 {
  margin-top: 28px;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  color: var(--tinta);
}
.texto-legal ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.texto-legal strong { color: var(--tinta); font-weight: 600; }
.texto-legal a { color: var(--azul-texto); }

/* ---------- Fase 4: guías y glosario ---------- */

/* Índice de guías */
.guias-grilla { display: grid; gap: var(--e-4); }
@media (min-width: 900px) {
  .guias-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guia-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.5vw, 32px);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--blanco);
}
.guia-tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gris-etiqueta);
}
.guia-tarjeta h2 { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.15; }
.guia-tarjeta h2 a { text-decoration: none; }
.guia-tarjeta h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-tarjeta); }
.guia-tarjeta p { font-size: 16px; line-height: 1.55; color: var(--gris-texto); }
.insignia--borrador { background: var(--ambar); color: var(--tinta); }
@media (hover: hover) {
  .guia-tarjeta:hover { border-color: var(--tinta); translate: 0 -4px; box-shadow: 0 16px 30px -24px rgba(11, 12, 14, .45); }
}

/* Artículo */
.articulo {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.articulo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--gris-etiqueta);
}
.articulo__meta a { color: var(--azul-texto); }
.respuesta {
  padding: clamp(18px, 2.5vw, 26px);
  border-left: 4px solid var(--azul-texto);
  border-radius: 0 var(--r-caja) var(--r-caja) 0;
  background: var(--fondo-alterno);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--tinta);
}
.indice {
  padding: 18px 22px;
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
}
.indice__titulo {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 8px;
}
.indice ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.indice a { color: var(--azul-texto); display: inline-block; padding: 4px 0; }
.articulo__cuerpo { display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.7; color: var(--gris-texto); }
.articulo__cuerpo h2 {
  margin-top: 24px;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  line-height: 1.15;
  color: var(--tinta);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.articulo__cuerpo ul, .articulo__cuerpo ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.articulo__cuerpo strong { color: var(--tinta); font-weight: 600; }
.articulo__cuerpo a { color: var(--azul-texto); }
.tabla-scroll { overflow-x: auto; }
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.tabla th, .tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla th {
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--tinta);
  background: var(--fondo-alterno);
}
.tabla td { color: var(--gris-texto); }
@media (max-width: 559px) {
  .tabla { font-size: 14px; }
  .tabla th, .tabla td { padding: 10px 6px; }
  .tabla th { font-size: 10px; }
}
.en-resumen {
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--r-tarjeta);
  background: var(--oscuro);
  color: var(--blanco);
}
.en-resumen h2 { margin: 0 0 12px; font-size: 16px; color: var(--azul); }
.en-resumen ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; color: var(--sobre-oscuro-72); }
.relacionadas { display: flex; flex-direction: column; gap: 6px; }
.relacionadas h2 { font-size: 14px; color: var(--tinta); margin-bottom: 4px; }

/* Glosario */
.glosario-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.glosario-indice a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 250ms var(--ease), color 250ms var(--ease);
}
.glosario-indice a:hover { border-color: var(--azul-texto); }
.terminos { display: grid; gap: var(--e-3); }
@media (min-width: 900px) {
  .terminos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
}
.termino {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  background: var(--blanco);
  scroll-margin-top: calc(var(--header-h) + 16px);
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.termino:target { border-color: var(--azul-texto); box-shadow: 0 0 0 3px rgba(46, 100, 216, .18); }
.termino h2 { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); margin-bottom: 10px; }
.termino p { font-size: 16px; line-height: 1.6; color: var(--gris-texto); }
.termino__ancla { font-family: var(--f-mono); font-size: 11px; color: var(--gris-etiqueta); text-decoration: none; }

/* ---------- 15. Página 404 ---------- */
.error {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: var(--seccion);
}
.error__grilla {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.error__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}
.error__codigo {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gris-etiqueta);
}
.error__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--linea);
}
.error__links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
}
.error__estrella {
  width: clamp(80px, 12vw, 160px);
  height: auto;
  color: var(--azul);
}

@media (min-width: 900px) {
  .error__grilla { grid-template-columns: 1.2fr 1fr; }
}

/* ---------- Botón volver arriba ---------- */
.arriba {
  --foco: var(--azul-texto);
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 45;
  width: 48px;
  height: 48px;
  padding: 0 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--tinta);
  color: var(--blanco);
  /* borde inferior de botón + un aro claro para que se vea sobre fondos oscuros */
  box-shadow: inset 0 -3px 0 var(--boton-oscuro-borde), 0 0 0 1px rgba(255, 255, 255, .22);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui), background-color 280ms var(--ease);
}
.arriba svg { width: 20px; height: 20px; transition: transform 280ms var(--ease); }
.arriba.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s, background-color 280ms var(--ease);
}
.arriba:hover { background: #24272D; }
.arriba:hover svg { transform: translateY(-2px); }
.arriba:active { transform: translateY(2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
body.menu-abierto .arriba { opacity: 0; visibility: hidden; }

@media (min-width: 1120px) {
  .arriba { right: 32px; bottom: 32px; }
}

/* ---------- Hover: recuadros que reaccionan al pasar el mouse ----------
   .alza combina la animación de entrada con la de hover sin que una pise a la otra.
   El hover usa "translate" (independiente del "transform" de la entrada). */
.alza,
.js .alza.reveal {
  transition:
    opacity var(--dur) var(--ease) calc(var(--i, 0) * var(--escalon)),
    transform var(--dur) var(--ease) calc(var(--i, 0) * var(--escalon)),
    translate var(--dur-ui) var(--ease),
    box-shadow var(--dur-ui) var(--ease),
    border-color var(--dur-ui) var(--ease),
    background-color var(--dur-ui) var(--ease);
}

/* Tarjetas de servicio: toda la tarjeta es clickeable */
.tarjeta { position: relative; }
.tarjeta .link-flecha::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-tarjeta);
}
.tarjeta:focus-within {
  translate: 0 -6px;
  box-shadow: 0 24px 40px -26px rgba(11, 12, 14, .6);
}

/* Pasos: línea azul que se dibuja arriba */
.paso { position: relative; }
.paso::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--azul-texto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease);
  z-index: 1;
}
.paso__numero { transition: transform var(--dur-ui) var(--ease); }

/* Trabajos: el marco se eleva y aparece "Ver caso" */
.trabajo { position: relative; }
.trabajo h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.trabajo .video {
  transition: translate var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.trabajo__ver {
  position: absolute;
  right: 20px;
  top: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--blanco);
  opacity: 0;
  translate: -8px 0;
  transition: opacity var(--dur-ui) var(--ease), translate var(--dur-ui) var(--ease);
}
.trabajo:focus-within .video { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.trabajo:focus-within .trabajo__ver { opacity: 1; translate: 0 0; }

.faq__texto { display: inline-block; transition: translate var(--dur-ui) var(--ease); }

/* Solo en dispositivos con mouse (en celular el hover queda "pegado") */
@media (hover: hover) {
  .logo:hover .logo__estrella { transform: rotate(90deg) scale(1.25); }
  .logo:hover .logo__barco { animation: logo-mece 1s var(--ease); }
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }

  .tarjeta:hover {
    translate: 0 -6px;
    box-shadow: 0 24px 40px -26px rgba(11, 12, 14, .6);
  }
  .tarjeta:hover .link-flecha span[aria-hidden] { transform: translateX(4px); }

  .factor:hover {
    translate: 0 -4px;
    border-color: var(--tinta);
    box-shadow: 0 16px 30px -24px rgba(11, 12, 14, .45);
  }

  .paso:hover { background-color: var(--fondo-alterno); }
  .paso:hover::before { transform: scaleX(1); }
  .paso:hover .paso__numero { transform: translateX(6px); }

  .trabajo:hover .video { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
  .trabajo:hover .trabajo__ver { opacity: 1; translate: 0 0; }
  .trabajo:hover h3 a { color: var(--azul); }

  .faq__boton:hover .faq__texto { translate: 6px 0; }
}

/* ---------- Íconos animados de los servicios ----------
   Se animan una vez al aparecer y cada vez que se pasa el mouse
   (clase .is-animando, la pone main.js y la saca al terminar). */
.icono { overflow: visible; }
.icono .icono__play,
.icono .icono__ia,
.icono .icono__destello {
  transition: fill var(--dur-ui) var(--ease), stroke var(--dur-ui) var(--ease);
}

/* Contenido: la claqueta se abre y cierra */
.icono__brazo {
  transform-box: view-box;
  transform-origin: 6px 19px;
  transform: rotate(-12deg);
}
.is-animando .icono__brazo { animation: ic-claqueta 1.1s var(--ease) both; }
.icono__play { transform-box: fill-box; transform-origin: center; }
.is-animando .icono__play { animation: ic-latido 1.1s var(--ease) both; }

@keyframes ic-claqueta {
  0% { transform: rotate(-12deg); }
  30%, 42% { transform: rotate(-30deg); }
  56% { transform: rotate(0deg); }
  66% { transform: rotate(-5deg); }
  74% { transform: rotate(0deg); }
  100% { transform: rotate(-12deg); }
}
@keyframes ic-latido {
  0%, 52% { transform: scale(1); }
  66% { transform: scale(1.3); fill: var(--azul-texto); stroke: var(--azul-texto); }
  100% { transform: scale(1); }
}

/* Automatizaciones: se dibujan las conexiones, aparecen los nodos y gira la IA */
.icono__nodo,
.icono__ia { transform-box: fill-box; transform-origin: center; }
.is-animando .icono__linea { animation: ic-trazo 500ms var(--ease-suave) both; animation-delay: var(--r, 0ms); }
.is-animando .icono__nodo { animation: ic-pop 500ms var(--ease) both; animation-delay: var(--r, 0ms); }
.is-animando .icono__ia { animation: ic-giro 900ms var(--ease) 120ms both; }

@keyframes ic-trazo {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes ic-pop {
  0% { transform: scale(.4); opacity: 0; }
  65% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes ic-giro {
  0% { transform: rotate(0) scale(1); }
  45% { transform: rotate(90deg) scale(1.3); fill: var(--azul-texto); stroke: var(--azul-texto); }
  100% { transform: rotate(180deg) scale(1); }
}

/* SEO: la lupa busca, el primer resultado crece y brilla la estrella */
.icono__lupa { transform-box: view-box; }
.icono__barra { transform-box: fill-box; transform-origin: 0 50%; }
.icono__destello { transform-box: fill-box; transform-origin: center; }
.is-animando .icono__lupa { animation: ic-busca 900ms var(--ease-suave) both; }
.is-animando .icono__barra { animation: ic-crece 600ms var(--ease) 450ms both; }
.is-animando .icono__destello { animation: ic-brillo 700ms var(--ease) var(--r, 600ms) both; }

@keyframes ic-busca {
  0% { transform: translate(0, 0); }
  30% { transform: translate(-6px, -4px); }
  60% { transform: translate(-2px, -9px); }
  100% { transform: translate(0, 0); }
}
@keyframes ic-crece {
  from { transform: scaleX(.35); }
  to { transform: scaleX(1); }
}
@keyframes ic-brillo {
  0% { transform: scale(0) rotate(-90deg); }
  60% { transform: scale(1.4) rotate(0); fill: var(--azul-texto); }
  100% { transform: scale(1) rotate(0); }
}

@media (hover: hover) {
  .tarjeta:hover .icono__play,
  .tarjeta:hover .icono__ia { fill: var(--azul-texto); stroke: var(--azul-texto); }
  .tarjeta:hover .icono__destello { fill: var(--azul-texto); }
}

/* Más animaciones para los íconos de capacidades (mismo sistema: clase .is-animando) */
.icono__vaiven { transform-box: view-box; transform-origin: 24px 8px; }
.icono__sacude { transform-box: view-box; transform-origin: 24px 39px; }
.icono__salto,
.icono__izq,
.icono__der { transform-box: view-box; }
.icono__ojo { transform-box: fill-box; transform-origin: center; }
.icono .icono__relleno,
.icono .icono__acento { transition: fill var(--dur-ui) var(--ease), stroke var(--dur-ui) var(--ease); }

.is-animando .icono__vaiven { animation: ic-vaiven 1s var(--ease) both; }
.is-animando .icono__sacude { animation: ic-sacude 800ms var(--ease) both; }
.is-animando .icono__salto { animation: ic-salto 900ms var(--ease) both; }
.is-animando .icono__ojo { animation: ic-parpadeo 1s linear both; }
.is-animando .icono__izq { animation: ic-izq 800ms var(--ease-suave) both; }
.is-animando .icono__der { animation: ic-der 800ms var(--ease-suave) both; }

@keyframes ic-vaiven {
  0% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  35% { transform: rotate(-12deg); }
  55% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}
@keyframes ic-sacude {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-7deg); }
  30% { transform: rotate(6deg); }
  45% { transform: rotate(-4deg); }
  60% { transform: rotate(2deg); }
}
@keyframes ic-salto {
  0%, 50%, 75%, 100% { transform: translateY(0); }
  30% { transform: translateY(-7px); }
  62% { transform: translateY(-2.5px); }
}
@keyframes ic-parpadeo {
  0%, 30%, 46%, 62%, 78%, 100% { transform: scaleY(1); }
  38%, 70% { transform: scaleY(.1); }
}
@keyframes ic-izq {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-3px); }
}
@keyframes ic-der {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(3px); }
}

@media (hover: hover) {
  .tarjeta:hover .icono__relleno { fill: var(--azul-texto); }
  .tarjeta:hover .icono__acento { stroke: var(--azul-texto); }
}

/* Diagrama: la estrella del Agente IA reacciona cuando le llega el pulso de luz.
   Mismo ciclo de 6 s que el pulso: llega al agente alrededor del 23 % del ciclo. */
.d-ia { transform-box: fill-box; transform-origin: center; }
.diagrama.is-activo .d-ia { animation: ia-pulso 6s var(--ease) infinite; }
.diagrama.is-activo .d-ia-nodo { animation: ia-nodo 6s linear infinite; }
.diagrama.is-pausado .d-ia,
.diagrama.is-pausado .d-ia-nodo { animation-play-state: paused; }

@keyframes ia-pulso {
  0%, 21% { transform: rotate(0) scale(1); }
  25% { transform: rotate(45deg) scale(1.45); fill: #FFFFFF; }
  31%, 47% { transform: rotate(90deg) scale(1); }
  51% { transform: rotate(135deg) scale(1.3); fill: #FFFFFF; }
  57%, 100% { transform: rotate(180deg) scale(1); }
}
@keyframes ia-nodo {
  0%, 21%, 31%, 47%, 57%, 100% { stroke-width: 1.5; filter: drop-shadow(0 0 0 rgba(134, 180, 255, 0)); }
  25% { stroke-width: 2.6; filter: drop-shadow(0 0 10px rgba(134, 180, 255, .6)); }
  51% { stroke-width: 2.2; filter: drop-shadow(0 0 8px rgba(134, 180, 255, .5)); }
}

/* Diagrama: cada nodo se ilumina cuando le llega el pulso de luz.
   --g es el momento de llegada dentro del ciclo de 6 s (el mismo del pulso). */
.d-icono { color: #C9CDD4; transform-box: fill-box; transform-origin: center; }
.diagrama.is-activo .d-nodo .d-caja { animation: nodo-caja 6s linear var(--g, 0s) infinite; }
.diagrama.is-activo .d-nodo .d-icono { animation: nodo-icono 6s var(--ease) var(--g, 0s) infinite; }
.diagrama.is-activo .d-nodo--alerta .d-caja { animation-name: nodo-caja-alerta; }
.diagrama.is-pausado .d-caja,
.diagrama.is-pausado .d-icono { animation-play-state: paused; }

@keyframes nodo-caja {
  0%, 16%, 100% { stroke: #3A404B; fill: #1B1E24; filter: drop-shadow(0 0 0 rgba(134, 180, 255, 0)); }
  4% { stroke: #86B4FF; fill: #1E2531; filter: drop-shadow(0 0 8px rgba(134, 180, 255, .55)); }
}
@keyframes nodo-caja-alerta {
  0%, 16%, 100% { stroke: #3A404B; fill: #1B1E24; filter: drop-shadow(0 0 0 rgba(242, 154, 74, 0)); }
  4% { stroke: #F29A4A; fill: #2A2320; filter: drop-shadow(0 0 8px rgba(242, 154, 74, .5)); }
}
@keyframes nodo-icono {
  0%, 16%, 100% { transform: scale(1); color: #C9CDD4; }
  5% { transform: scale(1.12); color: #FFFFFF; }
}

/* Esquema de SEO: recorrido en loop de 6 s (igual que el pulso del diagrama).
   Cada pieza reacciona en su momento, marcado por --t: web → flecha → capas → flecha → Google → IA. */
.esquema .esq-web,
.esquema .esq-lupa,
.esquema .esq-ia { transform-box: fill-box; transform-origin: center; }
.esquema__capa { transition: none; }
.esquema.is-activo .esq-web { animation: esq-latido 6s var(--ease) var(--t, 0s) infinite; }
.esquema.is-activo .esquema__flecha { animation: esq-flecha 6s var(--ease) var(--t, 0s) infinite; }
.esquema.is-activo .esquema__capa { animation: esq-capa 6s var(--ease) var(--t, 0s) infinite; }
.esquema.is-activo .esq-lupa { animation: esq-lupa 6s var(--ease) var(--t, 0s) infinite; }
.esquema.is-activo .esquema__nodo--ia { animation: esq-nodo-ia 6s linear var(--t, 0s) infinite; }
.esquema.is-activo .esq-ia { animation: esq-estrella 6s var(--ease) var(--t, 0s) infinite; }
.esquema.is-pausado .esq-web,
.esquema.is-pausado .esquema__flecha,
.esquema.is-pausado .esquema__capa,
.esquema.is-pausado .esq-lupa,
.esquema.is-pausado .esquema__nodo--ia,
.esquema.is-pausado .esq-ia { animation-play-state: paused; }

@keyframes esq-latido {
  0% { transform: scale(1); }
  5% { transform: scale(1.25); color: var(--azul); }
  12%, 100% { transform: scale(1); }
}
@keyframes esq-flecha {
  0% { transform: translateX(0); }
  5% { transform: translateX(5px); color: var(--azul); }
  12%, 100% { transform: translateX(0); }
}
@keyframes esq-capa {
  0% { border-color: var(--conector); background-color: transparent; }
  4% { border-color: var(--azul); background-color: rgba(134, 180, 255, .14); color: var(--blanco); }
  16%, 100% { border-color: var(--conector); background-color: transparent; }
}
@keyframes esq-lupa {
  0%, 100% { transform: translate(0, 0); }
  3% { transform: translate(-2px, -2px); color: var(--azul); }
  7% { transform: translate(2px, -1px); color: var(--azul); }
  11% { transform: translate(0, 0); }
}
@keyframes esq-estrella {
  0% { transform: rotate(0) scale(1); }
  5% { transform: rotate(45deg) scale(1.4); color: var(--blanco); }
  12%, 100% { transform: rotate(90deg) scale(1); }
}
@keyframes esq-nodo-ia {
  /* borde extra por dentro (sombra interna): no mueve el texto */
  0% { box-shadow: inset 0 0 0 0 var(--azul); }
  5% { box-shadow: inset 0 0 0 1.5px var(--azul); }
  12%, 100% { box-shadow: inset 0 0 0 0 var(--azul); }
}

@keyframes logo-mece {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg); }
  55% { transform: rotate(5deg); }
  80% { transform: rotate(-2deg); }
}

/* Nosotros: el velero flota y la estrella titila, en loop suave (solo en este bloque). */
.historia.is-activo .historia__barco { animation: velero-flota 6s ease-in-out infinite; }
.historia.is-activo .historia__estrella { animation: estrella-titila 3.5s ease-in-out -1.2s infinite; }
.historia.is-pausado .historia__barco,
.historia.is-pausado .historia__estrella { animation-play-state: paused; }

/* En px de pantalla: se ve igual en celular y en escritorio */
@keyframes velero-flota {
  0%, 50%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-3px) rotate(2.5deg); }
  75% { transform: translateY(-3px) rotate(-2.5deg); }
}
@keyframes estrella-titila {
  0%, 100% { opacity: .9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Nosotros: cómo trabajamos (4 tarjetas) y en qué creemos */
@media (min-width: 720px) and (max-width: 1199px) {
  .cartas-3.cartas-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cartas-3.cartas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.creencias {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: creencia;
}
.creencias li {
  counter-increment: creencia;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 20px 22px;
  border-radius: var(--r-caja);
  background: var(--blanco);
  border: 1px solid var(--linea);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
}
.creencias li::before {
  content: counter(creencia, decimal-leading-zero);
  font-family: var(--f-titulo);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 20px;
  color: var(--azul-texto);
}

/* ---------- 16. Animaciones ----------
   Solo se activan si JS está (clase .js en <html>) y el usuario
   no pidió reducir el movimiento. */

/* Entrada al hacer scroll */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--escalon));
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Diagrama: conectores que se dibujan, nodos que aparecen de a uno */
.js .diagrama .d-trazo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 650ms var(--ease-suave);
  transition-delay: calc(var(--d, 0) * 170ms);
}
.js .diagrama .d-aparece {
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--d, 0) * 170ms);
}
.js .diagrama.is-visible .d-trazo { stroke-dashoffset: 0; }
.js .diagrama.is-visible .d-aparece { opacity: 1; transform: none; }

/* Pulso: un trazo corto azul que recorre el flujo de izquierda a derecha */
.d-pulso {
  fill: none;
  stroke: var(--azul);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: .35 2;
  stroke-dashoffset: .35;
  opacity: 0;
}
.diagrama.is-activo .d-pulso {
  animation: pulso 6s linear infinite;
  animation-delay: var(--p, 0s);
}
.diagrama.is-pausado .d-pulso { animation-play-state: paused; }

@keyframes pulso {
  0% { stroke-dashoffset: .35; opacity: 0; animation-timing-function: var(--ease-suave); }
  2% { opacity: 1; }
  11% { opacity: 1; }
  13% { stroke-dashoffset: -1; opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

/* ---------- Animaciones de marca (segunda tanda) ---------- */

/* Rayo del disparador: se carga y dispara el flujo al comienzo de cada ciclo */
.d-rayo { transform-box: fill-box; transform-origin: 50% 50%; }
.diagrama.is-activo .d-rayo { animation: rayo 6s var(--ease) infinite; }
.diagrama.is-pausado .d-rayo { animation-play-state: paused; }
@keyframes rayo {
  0% { transform: scale(1); fill: #F29A4A; filter: drop-shadow(0 0 0 rgba(242, 154, 74, 0)); }
  2% { transform: scale(1.35) rotate(-8deg); fill: #FFD29E; filter: drop-shadow(0 0 6px rgba(242, 154, 74, .9)); }
  4% { transform: scale(.92) rotate(4deg); fill: #F29A4A; }
  6% { transform: scale(1.12); fill: #FFBF7A; filter: drop-shadow(0 0 4px rgba(242, 154, 74, .6)); }
  10%, 90% { transform: scale(1); fill: #F29A4A; filter: drop-shadow(0 0 0 rgba(242, 154, 74, 0)); }
  /* chispazo previo: avisa que está por arrancar */
  95% { transform: scale(1.06); fill: #FFBF7A; filter: drop-shadow(0 0 3px rgba(242, 154, 74, .5)); }
  100% { transform: scale(1); fill: #F29A4A; filter: drop-shadow(0 0 0 rgba(242, 154, 74, 0)); }
}

/* Ayuda por paso: al pasar el mouse (o tocar) un nodo, una frase en simple dice qué hace */
.diagrama { position: relative; }
.diagrama [data-ayuda] { cursor: help; }
.diagrama__ayuda {
  position: absolute;
  z-index: 2;
  width: max-content; /* sin esto se angosta cuando el nodo está cerca del borde derecho */
  max-width: min(230px, calc(100% - 16px));
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  pointer-events: none;
  opacity: 0;
  translate: -50% calc(-100% - 4px);
  transition: opacity 200ms var(--ease), translate 200ms var(--ease);
}
.diagrama__ayuda.is-visible { opacity: 1; translate: -50% calc(-100% - 10px); }
.diagrama__ayuda::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--flecha, 0px)); /* siempre sobre el nodo, aunque la burbuja se corra */
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: var(--blanco);
  transform: translateX(-50%) rotate(45deg);
}
/* Fila de arriba: la ayuda se abre abajo del nodo para no cortarse con el borde del panel */
.diagrama__ayuda.is-abajo { translate: -50% 4px; }
.diagrama__ayuda.is-abajo.is-visible { translate: -50% 10px; }
.diagrama__ayuda.is-abajo::after { bottom: auto; top: -5px; }
.diagrama__pista {
  display: none;
  margin: 0;
  padding: 0 20px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: #9AA1AC;
}
.js .diagrama__pista { display: block; }

/* Guiño del logo: la estrella del header brilla una vez al abrir la página */
.header .logo__estrella { animation: estrella-guino 1.3s var(--ease) .5s; }
@keyframes estrella-guino {
  0% { transform: rotate(0) scale(1); }
  45% { transform: rotate(45deg) scale(1.45); }
  100% { transform: rotate(90deg) scale(1); }
}

/* Esquema de SEO: "Tu web" y "Google" se iluminan como los nodos del diagrama */
.esquema.is-activo .esquema__nodo--luz { animation: esq-nodo-luz 6s linear var(--t, 0s) infinite; }
.esquema.is-pausado .esquema__nodo--luz { animation-play-state: paused; }
@keyframes esq-nodo-luz {
  0%, 14%, 100% { border-color: var(--nodo-borde); box-shadow: 0 0 0 rgba(134, 180, 255, 0); }
  4% { border-color: var(--azul); box-shadow: 0 0 16px rgba(134, 180, 255, .4); }
}

/* Íconos de contacto (WhatsApp, Instagram, correo): un solo archivo, assets/img/iconos.svg.
   Tamaños en px enteros para que el trazo quede nítido. */
.ic { width: 18px; height: 18px; flex-shrink: 0; }
.con-icono { display: inline-flex; align-items: center; gap: 8px; }
/* Un dato de contacto nunca se corta en dos líneas (el número se partía en el guion) */
.con-icono { white-space: nowrap; }
@media (max-width: 767px) {
  /* en celular la columna Contacto ocupa todo el ancho, así el número entra entero */
  .footer__columna:last-child { grid-column: 1 / -1; }
}
.btn .ic { width: 20px; height: 20px; }
.menu-panel__contacto .ic,
.cta__dato .ic { width: 16px; height: 16px; }
.contacto__alternativas dt .ic { width: 16px; height: 16px; color: var(--tinta); }

/* ---------- Pedido 06 (revisión de diseño) ---------- */
/* 14) la web es clara: controles nativos y barras de scroll en claro aunque el sistema esté en modo oscuro */
:root { color-scheme: light; }
.campo select option { background-color: var(--blanco); color: var(--tinta); }
/* 15) sin demora al tocar en celular */
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
/* 12) títulos con líneas parejas (sin una palabra sola al final) */
h1, h2, h3 { text-wrap: balance; }
/* 5) frase de cada servicio arriba del botón "Pedí una propuesta" */
.hero__invitacion { font-weight: 600; font-size: var(--t-cuerpo); color: var(--tinta); margin-bottom: -6px; }
/* 4) pasos del diagrama recorribles con teclado */
.diagrama [data-ayuda]:focus { outline: none; }
.diagrama [data-ayuda]:focus-visible .d-caja,
.diagrama [data-ayuda]:focus-visible .d-ia-nodo { stroke: var(--blanco); stroke-width: 2.5; }
/* 19) en celulares muy angostos el botón grande no pasa a dos líneas */
@media (max-width: 359px) {
  .btn--grande { padding-left: 14px; padding-right: 14px; gap: 8px; letter-spacing: 0; }
}

/* 1) problema del Inicio sin imagen: el texto ocupa una sola columna */
@media (min-width: 900px) {
  .problema__grilla--sin-imagen { grid-template-columns: minmax(0, 760px); }
}

/* 3) Botón de pausa de las animaciones en loop (diagrama, esquema de SEO y velero de Nosotros).
   Lo agrega main.js; sin JS no hay loop, así que tampoco hay botón. */
.esquema { position: relative; }
.boton-pausa {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #3A404B;
  border-radius: var(--r-caja);
  background: #1B1E24;
  color: #C9CDD4;
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.boton-pausa::after { content: ""; position: absolute; inset: -4px; } /* área tocable de 44 px */
.boton-pausa .ic { width: 16px; height: 16px; }
.boton-pausa:hover { color: var(--blanco); border-color: var(--azul); }
.boton-pausa--discreto {
  position: relative;
  right: auto;
  bottom: auto;
  width: 30px;
  height: 30px;
  background: transparent;
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .55);
}
.boton-pausa--discreto::after { inset: -7px; }
.boton-pausa--discreto .ic { width: 14px; height: 14px; }
.historia__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.diagrama__pista { padding-right: 60px; }
.esquema__pie { padding-right: 48px; }
/* pausa elegida por la persona: congela todo el loop donde está */
.is-detenido,
.is-detenido * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .boton-pausa { display: none; }
}

/* 6) Ritmo de fondos del Inicio: sin el gris intermedio. Las secciones claras seguidas
   se separan con una línea fina a lo ancho del contenido, en vez de cambiar de color. */
.seccion--sigue { padding-top: 0; }
.seccion--sigue > .contenedor {
  border-top: 1px solid var(--linea);
  padding-top: calc(var(--seccion) * .75);
}

/* ---------- Pedido 07 ---------- */
/* Diagrama de ejemplo: la IA reacciona una sola vez por ciclo (cuando le llega el mensaje) */
.diagrama--ejemplo.is-activo .d-ia { animation-name: ia-pulso-uno; }
.diagrama--ejemplo.is-activo .d-ia-nodo { animation-name: ia-nodo-uno; }
@keyframes ia-pulso-uno {
  0%, 21% { transform: rotate(0) scale(1); }
  25% { transform: rotate(45deg) scale(1.45); fill: #FFFFFF; }
  31%, 100% { transform: rotate(90deg) scale(1); }
}
@keyframes ia-nodo-uno {
  0%, 21%, 31%, 100% { stroke-width: 1.5; filter: drop-shadow(0 0 0 rgba(134, 180, 255, 0)); }
  25% { stroke-width: 2.6; filter: drop-shadow(0 0 10px rgba(134, 180, 255, .6)); }
}

/* ¿Por qué te conviene? */
.razones { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.razon { display: flex; gap: 14px; align-items: flex-start; }
.razon__estrella { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; fill: var(--azul-texto); }
.razon h3 { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.25; margin-bottom: 8px; }
.razon p { font-size: 16px; line-height: 1.55; color: var(--gris-texto); }
@media (min-width: 900px) {
  .razones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
}

/* Íconos de las capacidades nuevas de Automatizaciones (mismo sistema: .is-animando, menos de 1,4 s) */
.icono__puntos { opacity: 0; }
.icono__punto { transform-box: fill-box; transform-origin: center; }
.icono__fila { transform-box: view-box; }
.icono__campanita { transform-box: view-box; transform-origin: 39px 28.5px; }
.icono__escaneo { opacity: 0; transform-box: view-box; }
.icono__vibra { transform-box: view-box; transform-origin: 24px 24px; }
.icono__barra-v { transform-box: fill-box; transform-origin: 50% 100%; }
.is-animando .icono__puntos { animation: ic-puntos 1.2s linear both; }
.is-animando .icono__punto { animation: ic-salta 420ms var(--ease) var(--r, 0ms) 2 both; }
.is-animando .icono__puntos + .icono__check,
.is-animando .icono__fila + .icono__check { animation: ic-trazo 400ms var(--ease-suave) 750ms both; }
.is-animando .icono__fila { animation: ic-entra 500ms var(--ease) both; }
.is-animando .icono__campanita { animation: ic-campanita 900ms var(--ease) 300ms both; }
.is-animando .icono__escaneo { animation: ic-escanea 1.1s var(--ease-suave) both; }
.is-animando .icono__vibra { animation: ic-vibra 500ms linear both; }
.is-animando .icono__barra-v { animation: ic-crece-v 600ms var(--ease) var(--r, 0ms) both; }
@keyframes ic-puntos { 0% { opacity: 0; } 8%, 55% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes ic-salta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ic-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes ic-campanita {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(16deg); }
  45% { transform: rotate(-12deg); }
  70% { transform: rotate(6deg); }
}
@keyframes ic-escanea {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  85% { opacity: 1; transform: translateY(26px); }
  100% { opacity: 0; transform: translateY(26px); }
}
@keyframes ic-vibra {
  0%, 100% { transform: translateX(0) rotate(0); }
  15%, 55% { transform: translateX(-1.5px) rotate(-3deg); }
  35%, 75% { transform: translateX(1.5px) rotate(3deg); }
}
@keyframes ic-crece-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- 17. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal,
  .js .diagrama .d-aparece,
  .js .esquema .esquema__paso {
    opacity: 1;
    transform: none;
  }
  .js .diagrama .d-trazo { stroke-dashoffset: 0; }
  .d-pulso { display: none; }
  .alza,
  .trabajo .video { translate: none !important; }
}

/* ---------- Pedido 09: ninguna sección con más de un tercio vacío en 1440 px ---------- */

/* Hero con un recuadro a la derecha (Contacto: WhatsApp; Trabajos: cómo leer las etiquetas) */
.hero-lado {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero-lado__caja {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.5vw, 32px);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: inset 0 3px 0 var(--azul);
  background: var(--blanco);
}
.hero-lado__titulo { font-size: var(--t-h3); }
.hero-lado__caja > p { font-size: var(--t-lead); line-height: 1.55; color: var(--gris-texto); }
.hero-lado__caja .btn { align-self: stretch; }
.hero-lado__lista { display: flex; flex-direction: column; margin: 0; }
.hero-lado__lista div { padding: 12px 0; border-top: 1px solid var(--linea); }
.hero-lado__lista div:first-child { border-top: 0; padding-top: 4px; }
.hero-lado__lista dt {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul-texto);
}
.hero-lado__lista dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--gris-texto); }
@media (min-width: 1024px) {
  .hero-lado { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* Hero partido: título a la izquierda, texto a la derecha (Guías y Privacidad) */
@media (min-width: 1024px) {
  .hero__texto.hero-partido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: end;
  }
  .hero-partido > div:first-child { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }
  .hero-partido__texto { display: flex; flex-direction: column; gap: 14px; }
  .hero__texto.hero-partido .lead { max-width: none; }
}
.hero-partido > div:first-child,
.hero-partido__texto { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }

/* Índice lateral fijo en pantallas anchas (artículo de guía y Privacidad) */
.indice--lateral { display: none; }
@media (min-width: 1100px) {
  .lectura {
    display: grid;
    grid-template-columns: minmax(0, 760px) 260px;
    justify-content: space-between;
    align-items: start;
  }
  .lectura > .texto-legal { grid-column: 1; grid-row: 1; }
  .indice--lateral {
    display: block;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
  /* la guía: su índice pasa a la columna derecha y queda fijo al bajar */
  .articulo {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 760px) 260px;
    justify-content: space-between;
    row-gap: 0;
  }
  .articulo > * { grid-column: 1; margin-bottom: 18px; }
  .articulo > .indice {
    grid-column: 2;
    grid-row: 1 / span 40; /* ocupa todo el alto del artículo; las filas vacías miden 0 */
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

/* Gracias: página corta, centrada */
.error__texto--centrado { max-width: 760px; margin-inline: auto; text-align: center; align-items: center; }
.error__texto--centrado .hero__botones { justify-content: center; }

/* ---------- Pedido 09: más color en secciones planas ---------- */
/* Casos: el desafío como cita con línea azul Rigel, y cada resultado con su línea a la izquierda */
.bloque-texto__cuerpo { padding-left: clamp(18px, 2vw, 28px); border-left: 3px solid var(--azul); }
.resultado li { box-shadow: inset 3px 0 0 var(--azul); }
/* Nosotros, "En qué creemos": misma línea azul arriba que las tarjetas de método */
.creencias li { box-shadow: inset 0 3px 0 var(--azul); }
/* índice lateral: renglones parejos aunque el título ocupe dos líneas */
@media (min-width: 1100px) {
  .indice--lateral ol, .articulo > .indice ol { gap: 8px; font-size: 14px; line-height: 1.45; }
  .indice--lateral a, .articulo > .indice a { display: inline; padding: 0; }
}
.texto-legal h2 { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Pedido 10: la web se ve terminada aunque falte material ---------- */
/* Marco de video sin link todavía */
.video__preparacion {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-60);
}
/* Nosotros: composición de la marca (velero y estrella sobre la grilla de puntos) hasta tener la imagen real */
.retrato--marca {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  background-image: radial-gradient(circle at 1px 1px, var(--panel-punto) 1px, transparent 0);
  background-size: 16px 16px;
  color: var(--blanco);
}
.retrato__simbolo { width: 46%; height: auto; overflow: visible; }
.retrato__estrella { fill: var(--azul); }

/* ---------- Pedido 11: portada del video (se sirve desde el sitio; la CSP no permite imágenes externas) ---------- */
.video__portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.82); /* un poco más oscura, para que se lean el play y los textos de encima */
}
.video__play { position: relative; }
.video__play, .video__rec, .video__etiqueta, .trabajo__ver { z-index: 1; }
.video:has(.video__portada) .video__rec,
.video:has(.video__portada) .trabajo__ver { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }