/* Entre Asesores, web pública v2.
   Fresca: luz, aire, blanco que respira y color mate sacado de los banners de la app.
   Toda la paleta vive aquí, en :root, para cambiarla tocando pocas líneas.
   La variante ?paleta=dorado añade la clase .paleta-dorado en <html>. */

@font-face { font-family: "Outfit"; font-weight: 300; font-display: swap; src: url("../fonts/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Neutros: blanco, papel y grises limpios (el gris medio es el de los botones de la app) */
  --fondo: #fbfaf7;
  --papel: #ffffff;
  --papel-calido: #f7f4ec;
  --humo: #f0eee8;
  /* Nunca negro (la CTO): la tinta es un gris oscuro, cálido y suave */
  --tinta: #4a4f5a;
  --tinta-2: #646a76;
  --gris: #848a95;
  --gris-claro: #b7bcc5;
  --linea: rgba(74, 79, 90, 0.10);
  --linea-fuerte: rgba(74, 79, 90, 0.2);
  /* El amarillo de la marca, mate: marca los enlaces al pasar y en la sección activa */
  --amarillo: #c9a84a;
  /* Texto de la barra: gris con contraste, que se note que es navegación (nunca negro) */
  --nav-texto: #5f6470;

  /* Mate, muestreado de los banners de la app (facturar, contable, cumplimiento, equipo, dirección) */
  --arena: #d9c5a6;        /* banner-fijas #dbc0a3, cabecera facturar #e8dbc8 */
  --arena-hondo: #b08d5e;  /* banner-fijas #8f7c5c */
  --terracota: #cfa48c;    /* banner-morosos #c4a697, variables #f4c99e */
  --terracota-hondo: #9c6b55; /* banner-morosos #6e483e */
  --salvia: #b3c0aa;       /* banner-listo #b6c2ac */
  --salvia-hondo: #7a8a72; /* gestión contable #555b3f */
  --azul: #a7afbd;         /* revisión contable #a6abb9, cumplimiento #979ba6 */
  --azul-hondo: #6b7689;
  --oliva: #6e6c53;        /* presupuestos #67654c */
  --oro-mate: #cdb46c;     /* la nota mínima de oro, una por pantalla como mucho */
  --oro-tinta: #8a6f2a;    /* el único oro con contraste como texto */

  /* Papeles de cada acento: el que manda en cada pantalla */
  --acento: var(--arena-hondo);
  --acento-suave: var(--arena);

  --sombra-lamina: 0 60px 120px rgba(50, 38, 12, 0.16), 0 10px 30px rgba(50, 38, 12, 0.08);
  --radio: 18px;
  --nav-alto: 60px;
  --nav-margen: 14px;
  --ancho: 1320px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --suave: cubic-bezier(0.4, 0, 0.2, 1);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --rapida: cubic-bezier(0.7, 0, 0.2, 1);
  --fuente: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
}
html.paleta-dorado {
  --acento: var(--oro-tinta);
  --acento-suave: var(--oro-mate);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Barra pegada arriba, de borde a borde: cristal crema que gana opacidad al bajar (nada asoma por encima) ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(247, 243, 235, 0.3);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(74, 79, 90, 0.08);
  transition: background-color 320ms var(--suave), box-shadow 320ms var(--suave);
}
/* Sólo sobre la portada (la página con la foto), mientras no se ha bajado: un punto más opaca, para que los nueve
   enlaces se lean igual de bien sobre la foto. En el resto de la web la barra no cambia. */
body:has(.ep) .barra:not(.cristal) { background: rgba(247, 243, 235, 0.55); }
/* Al bajar sigue siendo cristal: se ve lo de debajo, desenfocado */
.barra.cristal { background: rgba(247, 243, 235, 0.42); box-shadow: 0 6px 24px rgba(74, 79, 90, 0.05); }
/* La barra es de cristal en TODAS las páginas, como en la portada (la CTO, 12-oct: «lo quiero siempre así»).
   Antes, fuera de la portada, era casi opaca para no teñirse del tono de cada página; ahora se acepta ese tinte. */
.barra-caja {
  position: relative; width: min(1440px, 100%); margin-inline: auto; height: var(--nav-alto); padding: 0 var(--nav-margen);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: height 320ms var(--suave);
}

/* Los enlaces se reparten con holgura por todo su lado; el logo queda exactamente en el centro */
.menu { display: flex; align-items: center; justify-content: space-evenly; height: 100%; gap: 0; min-width: 0; padding: 0 4px; }
.menu > li { position: relative; height: 100%; display: flex; align-items: center; }
.menu-enlace {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; border-radius: 999px;
  font-size: 15.5px; font-weight: 500; color: var(--nav-texto); letter-spacing: 0.002em; white-space: nowrap;
  transition: color 220ms var(--suave);
}
.menu > li:hover > .menu-enlace, .menu > li.abierto > .menu-enlace, .menu-enlace.activo, .menu-enlace:focus-visible { color: var(--amarillo); }
.menu-enlace.activo::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--amarillo); transform: translateX(-50%);
}
/* Acceso: sin desplegable, un punto distinto y discreto, separado al final */
/* Acceso sale de la barra y se queda debajo, bajo Seguridad, sólo arriba de cada página (la CTO, 12-oct): así la
   barra reparte cuatro y cuatro a cada lado del logo. Al bajar (barra en cristal) se recoge. */
.menu > li.menu-acceso { position: absolute; top: calc(100% + 10px); right: var(--acceso-derecha, var(--nav-margen)); height: auto;
  transition: opacity 260ms var(--suave), transform 260ms var(--suave); }
.barra.cristal .menu > li.menu-acceso { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.menu-acceso .enlace-acceso { height: 32px; background: rgba(247, 243, 235, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.enlace-acceso { font-weight: 400; font-size: 14.5px; color: var(--gris); padding: 0 11px; box-shadow: inset 0 0 0 1px var(--linea); }
.enlace-acceso svg { width: 12px; height: 12px; opacity: 0.7; transition: transform 220ms var(--salida); }
.enlace-acceso:hover { color: var(--amarillo); box-shadow: inset 0 0 0 1px rgba(201, 168, 74, 0.5); }
.enlace-acceso:hover svg { transform: translate(1px, -1px); }

/* El logo entero de la marca (gris original), nítido, en el centro exacto; se encoge al bajar */
.marca { justify-self: center; position: relative; display: grid; place-items: center; height: 100%; padding: 0 18px; transition: transform 260ms var(--salida); }
.marca:hover { transform: translateY(-1px); }
.marca img { height: 50px; width: auto; transition: height 320ms var(--suave); }
/* Sólo «Entre» en oro: el mismo polígono del anuncio (construir_anuncio.mjs), pasado a % de 640x257 */
.marca .marca-entre {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  clip-path: polygon(0 0, 46.875% 0, 46.875% 14.008%, 33.125% 94.163%, 0 100%);
  opacity: 0; transition: opacity 900ms var(--suave) 700ms, height 320ms var(--suave);
}
.js .marca .marca-entre { opacity: 1; }
.barra.cristal .marca img { height: 42px; }
.barra.cristal .barra-caja { height: 52px; }

/* Desplegables (nivel Stripe): un panel único que cambia de tamaño y de sitio entre menús.
   El JS fija --mega-x, --mega-w y --mega-h; el CSS hace el morphing. */
.mega-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: var(--mega-w, 720px); height: var(--mega-h, 320px);
  transform: translateX(var(--mega-x, 0px)) translateY(8px);
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--linea); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(74, 79, 90, 0.14), 0 6px 18px rgba(74, 79, 90, 0.05);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 200ms var(--suave), transform 260ms var(--salida), visibility 0s linear 260ms;
}
.mega-panel.abierto {
  opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(var(--mega-x, 0px)) translateY(0);
  transition: opacity 200ms var(--suave), transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1), width 380ms cubic-bezier(0.2, 0.8, 0.2, 1), height 380ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.mega-contenido {
  position: absolute; left: 0; top: 0; width: 760px; padding: 16px;
  display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity 220ms var(--suave), transform 300ms var(--salida);
}
.mega-contenido.activo { opacity: 1; pointer-events: auto; transform: none; transition-delay: 60ms; }
.mega-clip { position: relative; border-radius: 14px; overflow: hidden; background: var(--humo); aspect-ratio: 16 / 10; }
.mega-clip video, .mega-clip img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mega-clip span {
  position: absolute; left: 12px; bottom: 10px; padding: 5px 11px; border-radius: 999px;
  background: rgba(74, 79, 90, 0.82); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; backdrop-filter: blur(6px);
}
.mega-clip.mega-foto img { object-position: center; }
.mega-lista { display: flex; flex-direction: column; gap: 1px; }
.mega-lista a { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 9px 36px 9px 10px; border-radius: 12px; transition: background-color 180ms var(--suave); }
.mega-lista a:hover, .mega-lista a:focus-visible { background: rgba(201, 168, 74, 0.09); outline: none; }
.mega-lista svg { width: 21px; height: 21px; flex: none; margin-top: 2px; }
.mega-lista b { display: block; font-weight: 500; font-size: 14.5px; color: var(--tinta); line-height: 1.3; }
.mega-lista small { display: block; font-size: 13px; color: var(--gris); line-height: 1.4; margin-top: 2px; }
.mega-lista a i { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: 0; transform: translateX(-6px); transition: opacity 180ms, transform 240ms var(--salida); }
.mega-lista a i::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 1.5px; background: var(--amarillo); }
.mega-lista a i::after { content: ""; position: absolute; right: 1px; top: 3px; width: 6px; height: 6px; border: 1.5px solid var(--amarillo); border-left: 0; border-bottom: 0; transform: rotate(45deg); }
.mega-lista a:hover i, .mega-lista a:focus-visible i { opacity: 1; transform: none; }

.hamburguesa, .barra-demo-mini { display: none; }
.hamburguesa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 12px; flex-direction: column; align-items: center; justify-content: center; }
.hamburguesa span { display: block; width: 22px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform 300ms var(--rapida), opacity 200ms; }
.hamburguesa span + span { margin-top: 6px; }
body.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
body.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.barra-demo-mini { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 14px; border-radius: 999px; align-items: center; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--tinta); }

/* Menú móvil: panel que entra desde la izquierda (radhiyoga), a pantalla completa, con acordeones */
.menu-movil {
  position: fixed; inset: 0; z-index: 45; background: #f5f4ef;
  padding: calc(var(--nav-alto) + var(--nav-margen) + 20px) var(--gutter) 24px;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-102%); transition: transform 520ms var(--rapida); visibility: hidden;
}
body.menu-abierto .menu-movil { transform: none; visibility: visible; }
body.menu-abierto { overflow: hidden; }
.acordeon { border-bottom: 1px solid var(--linea); transform: translateX(-16px); opacity: 0; transition: transform 520ms var(--salida), opacity 360ms; }
body.menu-abierto .acordeon { transform: none; opacity: 1; }
.acordeon:nth-child(2) { transition-delay: 40ms; } .acordeon:nth-child(3) { transition-delay: 80ms; } .acordeon:nth-child(4) { transition-delay: 120ms; }
.acordeon:nth-child(5) { transition-delay: 160ms; } .acordeon:nth-child(6) { transition-delay: 200ms; } .acordeon:nth-child(7) { transition-delay: 240ms; } .acordeon:nth-child(8) { transition-delay: 280ms; }
/* Fila = enlace a la página + flecha que abre sus apartados, por separado (como Stripe o Notion): con el enlace
   dentro del botón Safari mandaba el toque al botón y había que tocar dos veces para llegar a la página.
   Letra de 16 px, la de Notion (las webs de referencia van de 14 a 18 en el móvil; a 26 el menú gritaba y a 19
   todavía se veía grande, 11-oct). */
.acordeon-fila { display: flex; align-items: center; justify-content: space-between; }
.acordeon-fila > a { flex: 1; padding: 13px 0; font-size: 16px; font-weight: 400; letter-spacing: -0.01em; color: var(--tinta); }
.acordeon-boton { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -11px; }
.acordeon-boton svg { width: 20px; height: 20px; color: var(--gris); transition: transform 320ms var(--salida), color 220ms; }
.acordeon.abierto .acordeon-fila > a { color: var(--amarillo); }
.acordeon.abierto .acordeon-boton svg { transform: rotate(180deg); color: var(--amarillo); }
.acordeon-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--rapida); }
.acordeon.abierto .acordeon-cuerpo { grid-template-rows: 1fr; }
.acordeon-cuerpo > div { overflow: hidden; }
.acordeon-cuerpo .mega-lista { padding: 0 0 12px; }
.acordeon-cuerpo .mega-lista a { padding: 8px 4px; }
.acordeon-cuerpo .mega-lista a i { display: none; }
.menu-movil .pie-movil { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 16px; white-space: nowrap;
  transition: transform 160ms var(--salida), background-color 160ms var(--suave), color 160ms var(--suave);
}
.boton-tinta { background: var(--tinta); color: #fff; }
.boton-tinta:hover { background: #1c2029; transform: translateY(-1px); }
.boton-borde { box-shadow: inset 0 0 0 1px var(--linea-fuerte); color: var(--tinta); }
.boton-borde:hover { background: #fff; }

/* ---------- Portada: la foto a sangre ocupa toda la primera pantalla; el texto va dentro, a la izquierda del portátil ---------- */
.ep { position: relative; overflow: clip; height: 100svh; min-height: 640px; max-height: 1000px; background: #f1ebe0; }
.ep-escena { position: absolute; left: 0; top: 0; width: 2172px; height: 1222px; transform-origin: 0 0; will-change: transform; }
.ep-escena > picture, .ep-escena > picture img { position: absolute; inset: 0; width: 2172px; height: 1222px; display: block; }
/* La pantalla: esquinas redondeadas como un MacBook y recorte ANTES de la transformación; el fondo es el papel de la app */
.ep-pantalla { position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform-origin: 0 0; overflow: hidden; border-radius: 14px; background: #fdfdfd; }
/* Las pantallas son 16:10 (1440x900, img/pantallas-1610), como el hueco: llenan la pantalla sin franja ni recorte.
   El movimiento (GSAP) parte de la imagen entera (escala 1) y se acerca despacio: nunca deja ver un hueco. */
.ep-pantalla img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transform-origin: 50% 40%; will-change: transform, opacity; }
.ep-pantalla img.activa { opacity: 1; z-index: 2; }
.ep-pantalla img.saliendo { z-index: 1; }
.ep-brillo { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 32%, rgba(255, 255, 255, 0) 52%); }
.ep-muesca { position: absolute; z-index: 4; left: 45.9%; top: -1px; width: 11.1%; height: 2.4%; background: #0b0c0e; border-radius: 0 0 9px 9px; }
/* Sin velo que lave la foto: apenas un aliento de luz; la lectura la da la sombra del texto */
/* Degradado OSCURO (gris tinta cálido, nunca negro) en el lado izquierdo, más oscuro en el borde y aclarándose hacia
   la derecha, con un corte limpio justo antes del portátil: --corte lo calcula el JS a partir del borde izquierdo de la
   tapa medido en la foto (x=795 de 2172), así acompaña al portátil a cualquier ancho. El portátil queda limpio. */
/* El oscuro empieza por debajo de la barra (que es translúcida): así los enlaces de la izquierda no quedan gris sobre gris */
/* Gris tinta suave que se funde poco a poco hasta transparente ANTES del portátil (sin línea de corte): el ancho
   llega hasta la tapa (--corte) pero el degradado ya es transparente al 100 %, así el portátil queda limpio */
.ep-velo { position: absolute; left: 0; top: calc(var(--nav-alto) + env(safe-area-inset-top, 0px)); bottom: 0; width: var(--corte, 42%); z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(42, 44, 50, 0.6) 0%, rgba(42, 44, 50, 0.46) 45%, rgba(42, 44, 50, 0.2) 78%, rgba(42, 44, 50, 0) 100%); }
.ep-texto { position: absolute; z-index: 2; left: max(var(--gutter), calc((100% - 1400px) / 2 + 40px)); top: 50%; transform: translateY(-50%); width: min(500px, calc(var(--corte, 42%) - max(var(--gutter), calc((100% - 1400px) / 2 + 40px)) - 28px)); text-shadow: 0 1px 3px rgba(20, 22, 26, 0.45), 0 2px 18px rgba(20, 22, 26, 0.35); }
.ep-texto .titular { color: #f7f4ec; }
.ep-texto .titular > span { white-space: normal; }
.ep-texto .titular em { color: #e3cb7e; } /* dorado un punto más luminoso: sobre el velo suave llega al contraste */
.ep-texto .linea { color: rgba(247, 244, 236, 0.9); }
.ep-texto .firma { color: #e3cb7e; text-shadow: 0 1px 3px rgba(20, 22, 26, 0.45); }
.ep-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; text-shadow: none; }
.ep-acciones .boton-tinta { background: #f7f4ec; color: var(--tinta); }
.ep-acciones .boton-tinta:hover { background: #fff; }
.ep-acciones .ver-video { background: rgba(247, 244, 236, 0.14); color: #f7f4ec; box-shadow: inset 0 0 0 1px rgba(247, 244, 236, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ep-acciones .ver-video i { background: #f7f4ec; }
.ep-acciones .ver-video i svg { fill: var(--tinta); }
.ep-acciones .ver-video small { color: rgba(247, 244, 236, 0.7); }
/* Etiqueta de apartado: píldora de cristal pequeña, gris y amarillo */
.ep-etiqueta {
  position: absolute; z-index: 2; margin: 0; padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap;
  background: rgba(247, 243, 235, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.1), 0 4px 14px rgba(50, 38, 12, 0.08);
}
.ep-etiqueta b { font-weight: 500; color: #b8963a; }
/* Titular a la manera de Apple: calma, un solo peso, aire; una sola palabra en el amarillo de la marca.
   Cada línea es un span que no se parte: siempre dos líneas exactas. */
.titular {
  font-weight: 300; letter-spacing: -0.015em; line-height: 1.08; color: var(--tinta);
  font-size: clamp(32px, 3.1vw, 44px);
}
.titular > span { white-space: nowrap; }
.titular em { font-style: normal; color: #a8872f; } /* un pelín más oscuro que --amarillo para leerse sobre la foto */
.linea { margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); font-weight: 400; color: var(--tinta); max-width: 44ch; line-height: 1.5; }
/* El claim como en el cierre del vídeo: versalitas espaciadas en el amarillo de la marca */
.firma { margin: 0 0 16px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #b8963a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.ver-video {
  margin-top: 0;
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px 0 6px; border-radius: 999px;
  background: #fff; color: var(--tinta); font-weight: 500; font-size: 15px;
  box-shadow: 0 14px 34px rgba(42, 47, 58, 0.12), 0 0 0 1px var(--linea);
  transition: transform 220ms var(--salida), box-shadow 220ms;
}
.ver-video:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(42, 47, 58, 0.16), 0 0 0 1px var(--linea); }
.ver-video i { width: 42px; height: 42px; border-radius: 50%; background: var(--tinta); display: inline-flex; align-items: center; justify-content: center; }
.ver-video i svg { width: 14px; height: 14px; margin-left: 2px; }
.ver-video small { font-weight: 400; color: var(--gris); }

/* El portátil: tapa de aluminio con marco fino y cámara, pantalla 16:10 con la app en vídeo,
   base con bisagra y muesca, sombra suave en el suelo. Entero, con aire, y con una perspectiva
   sutil que se endereza al bajar (JS). */
/* La escena: la foto panorámica (3:1) recortada por un marco con esquinas redondeadas y que sangra casi
   de lado a lado. El JS dimensiona .pf-escena para que la foto cubra el marco centrada en el portátil, y
   calcula la matrix3d que lleva el vídeo a las 4 esquinas de la pantalla. */
/* Estados iniciales de la entrada (sólo con JS; sin JS se ve todo) */
.js .ep .ep-texto { opacity: 0; }
.js .ep .ep-escena { opacity: 0; filter: blur(6px); }
/* La entrada de la portada, en CSS (13-oct): antes la hacía gsap y la foto principal no aparecía hasta que el móvil
   había bajado y ejecutado todos los scripts (más de 6 s en 4G lenta, auditoría de velocidad). Misma coreografía
   que tenía: la escena se posa y se enfoca en 1,3 s y el texto sube 18 px en 1,1 s con 0,3 s de retraso, con la
   curva expo.out de gsap. Arranca cuando js/portada.js ha colocado la escena (.colocada). El desplazamiento va en
   «translate», aparte del «transform» con el que se centra el texto, para no pisarlo. */
.js .ep.colocada .ep-escena { animation: ep-posa 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js .ep.colocada .ep-texto { animation: ep-texto-entra 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
@keyframes ep-posa { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes ep-texto-entra { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
/* Hasta que sitio.js no la coloca, la escena está a tamaño real y la pantalla de la app suelta arriba a la
   izquierda: no se pinta. Hace falta además de la opacidad porque con «reducir movimiento» la escena sale visible. */
.js .ep:not(.colocada) .ep-escena { visibility: hidden; }

/* ---------- Modal de demostración: cristal claro, gris y amarillo ---------- */
.modal-demo { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(247, 243, 235, 0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.modal-demo[hidden] { display: none; }
.modal-demo-caja { position: relative; width: min(460px, 100%); padding: 34px 32px 28px; border-radius: 22px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 30px 80px rgba(74, 79, 90, 0.16), inset 0 0 0 1px rgba(74, 79, 90, 0.08); }
.modal-demo-cerrar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gris); transition: color 200ms, background-color 200ms; }
.modal-demo-cerrar:hover { color: var(--amarillo); background: rgba(201, 168, 74, 0.1); }
.modal-demo-cerrar svg { width: 18px; height: 18px; }
.modal-demo h2 { font-size: 28px; font-weight: 300; letter-spacing: -0.01em; color: var(--tinta); margin: 10px 0 22px; }
.demo-form { display: grid; gap: 14px; }
/* El display:grid de arriba anulaba el atributo hidden: tras enviar seguían a la vista el formulario y el resultado */
.demo-form[hidden] { display: none; }
.demo-form label { display: grid; gap: 6px; }
.demo-form label span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.demo-form input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linea-fuerte); background: rgba(255, 255, 255, 0.9); font: inherit; color: var(--tinta); transition: border-color 200ms, box-shadow 200ms; }
.demo-form input:focus { outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(201, 168, 74, 0.18); }
.demo-form input.mal { border-color: #c98a84; }
.demo-error { min-height: 18px; font-size: 13.5px; color: #9c6b55; }
.campo-error { display: none; font-size: 12.5px; color: #9c6b55; }
.demo-form input.mal + .campo-error { display: block; }
.demo-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.demo-privacidad { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tinta-2); }
.demo-privacidad input { width: 16px; height: 16px; accent-color: var(--amarillo); }
.demo-privacidad a { color: var(--oro-tinta); text-decoration: underline; text-underline-offset: 3px; }
.demo-privacidad.mal span { color: #9c6b55; }
.demo-form .boton { justify-content: center; margin-top: 4px; }
.demo-form .boton[disabled] { opacity: 0.6; cursor: wait; }
.demo-resultado { padding: 18px 0 4px; font-size: 17px; line-height: 1.5; color: var(--tinta); }
.demo-resultado a { color: var(--oro-tinta); text-decoration: underline; text-underline-offset: 3px; }
.demo-resultado i { display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--amarillo); margin-bottom: 16px; }
.etiqueta { display: inline-block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #b8963a; font-weight: 500; }

/* ---------- Modal del vídeo ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(42, 47, 58, 0.8); backdrop-filter: blur(10px); }
.modal.abierto { display: flex; }
.modal video { width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 14px; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); }
.modal .cerrar { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.modal .cerrar:hover { background: rgba(255, 255, 255, 0.22); }
.modal .cerrar svg { width: 18px; height: 18px; }

/* ---------- Pie: compacto (logo, tres columnas y franja legal) con la «A» recortada al fondo ---------- */
.pie { position: relative; overflow: clip; padding: 44px 0 22px; background: var(--papel-calido); color: var(--gris); font-size: 14.5px; }
.pie-a { position: absolute; right: -3%; bottom: -22%; width: clamp(200px, 20vw, 300px); height: auto; opacity: 0.06; pointer-events: none; }
.pie .contenedor { position: relative; display: grid; grid-template-columns: 1.1fr 2fr; gap: 24px 48px; align-items: start; }
.pie-logo { position: relative; display: inline-block; margin-bottom: 12px; }
.pie-logo img { height: 34px; width: auto; opacity: 0.9; }
.pie-logo .marca-entre { position: absolute; left: 0; top: 0; opacity: 1; clip-path: polygon(0 0, 46.875% 0, 46.875% 14.008%, 33.125% 94.163%, 0 100%); }
.pie-marca p { font-size: 16px; font-weight: 400; color: var(--tinta); letter-spacing: -0.01em; }
.pie-marca small { display: block; margin-top: 4px; font-size: 13px; color: var(--gris-claro); }
.pie-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pie-columnas b { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 10px; }
.pie-columnas ul { display: grid; gap: 6px; }
.pie-columnas a { color: var(--gris); transition: color 200ms var(--suave); }
.pie-columnas a:hover { color: var(--amarillo); }
.pie-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--gris-claro); }
.pie-legal a { color: var(--gris); transition: color 200ms; }
.pie-legal a:hover { color: var(--amarillo); }

/* ---------- Páginas legales ---------- */
.barra-caja-simple { grid-template-columns: 1fr auto 1fr; padding: 0 10px; }
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--gris); transition: color 200ms; }
.volver svg { width: 16px; height: 16px; }
.volver:hover { color: var(--amarillo); }
.barra-caja-simple .enlace-acceso { justify-self: end; }
.pagina-legal { background: var(--fondo); }
.legal { padding: calc(var(--nav-alto) + var(--nav-margen) + 72px) 0 96px; }
.legal-cuerpo { max-width: 760px; }
.legal-cuerpo h1 { font-size: clamp(34px, 4vw, 52px); font-weight: 300; letter-spacing: -0.015em; margin-bottom: 8px; color: var(--tinta); }
.legal-cuerpo .fecha { color: var(--gris); font-size: 14px; margin-bottom: 44px; }
.legal-cuerpo h2 { font-size: 1.35rem; font-weight: 500; color: var(--tinta); margin: 44px 0 14px; letter-spacing: -0.01em; }
.legal-cuerpo h3 { font-size: 1.05rem; font-weight: 500; color: var(--tinta); margin: 26px 0 8px; }
.legal-cuerpo p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--tinta-2); }
.legal-cuerpo ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.legal-cuerpo li { margin-bottom: 6px; font-size: 16px; line-height: 1.6; color: var(--tinta-2); }
.legal-cuerpo strong { font-weight: 500; color: var(--tinta); }
.legal-cuerpo a { color: var(--oro-tinta); text-decoration: underline; text-underline-offset: 3px; }
.legal-cuerpo table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 18px; }
.legal-cuerpo th, .legal-cuerpo td { border: 1px solid var(--linea-fuerte); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-cuerpo th { background: var(--papel); font-weight: 500; }

/* ---------- Tamaños ---------- */
@media (max-width: 1180px) {
  .menu, .mega-panel { display: none; }
  .barra-caja { grid-template-columns: 1fr; }
  .hamburguesa { display: inline-flex; }
}
@media (max-width: 900px) {
  .pie .contenedor { grid-template-columns: 1fr; gap: 40px; }
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-a { right: -20%; bottom: -8%; width: 70vw; }
  .ep { min-height: 600px; max-height: 760px; }
  .ep-texto { left: var(--gutter); top: calc(var(--nav-alto) + var(--nav-margen) + 28px); transform: none; width: calc(100% - 2 * var(--gutter)); }
  /* Texto arriba sobre la luz crema (la foto no llega: el fondo de la portada es la misma luz); el portátil entero debajo */
  /* En móvil el texto va encima: el oscuro baja desde arriba y corta justo antes de la tapa (--corte-y, JS) */
  .ep-velo { left: 0; right: 0; top: calc(var(--nav-alto) + env(safe-area-inset-top, 0px)); bottom: auto; width: auto; height: calc(var(--corte-y, 46%) - var(--nav-alto)); background: linear-gradient(180deg, rgba(42, 44, 50, 0.66) 0%, rgba(42, 44, 50, 0.52) 55%, rgba(42, 44, 50, 0.22) 85%, rgba(42, 44, 50, 0) 100%); }
  .ep-texto { width: calc(100% - 2 * var(--gutter)); }
  .ep-acciones { margin-top: 22px; gap: 10px; }
  .ep-acciones .boton, .ep-acciones .ver-video { height: 46px; font-size: 15px; }
  .ep-etiqueta { display: none; }
  .ver-video { height: 46px; font-size: 14px; }
  .ver-video i { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
  :root { --nav-alto: 52px; --nav-margen: 10px; }
  .marca img, .barra.cristal .marca img { height: 34px; }
  .barra.cristal .barra-caja { height: var(--nav-alto); }
  /* Tipografía que sigue al ancho: a 256 px el titular de 30 px ocupaba media pantalla */
  .titular { font-size: clamp(25px, 8vw, 38px); }
  .linea { font-size: clamp(15px, 4.2vw, 16.5px); }
  .firma { font-size: clamp(11px, 3.3vw, 13px); letter-spacing: 0.14em; margin-bottom: 12px; }
  .ep-muesca { border-radius: 0 0 5px 5px; }
  .ver-video small { display: none; }
  .menu-movil a.grande { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .js .ep .ep-texto { opacity: 1; transform: translateY(-50%); }
  .js .ep .ep-escena { opacity: 1; filter: none; }
  .js .ep.colocada .ep-texto { animation-delay: 0s; }
  .ep-pantalla img { transition: opacity 400ms; }
  .js [data-entra], .js [data-posa] { opacity: 1; transform: none; filter: none; }
}

/* =========================================================================================
   PIEZAS COMUNES de las páginas (las usan index, asesoria, despacho, equipo, negocio y las de la
   segunda Fable): el «respiro» (titular 300 con la palabra golpe en oro tinta), la «lámina» (la app
   como hoja sobre la mesa, con su rótulo pizarra), la entrada de bloques y la escena fija.
   ========================================================================================= */
.respiro { font-weight: 300; font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.02em; line-height: 1.08; color: var(--tinta); }
.respiro em { font-style: normal; font-weight: 500; color: var(--oro-tinta); }
.respiro.grande { font-size: clamp(36px, 4.6vw, 68px); }
/* 60ch y no 44: la CTO escribe debajo de cada titular «una línea de 15 palabras», y con 44ch frases de 13-14
   palabras («…las herramientas que tu / equipo usa cada día.») saltaban a dos líneas dejando dos palabras
   colgando aunque la columna tuviera sitio de sobra. En las columnas estrechas de los tramos manda la columna. */
.linea-seccion { margin-top: 16px; font-size: clamp(16px, 1.25vw, 19px); color: var(--tinta-2); max-width: 60ch; line-height: 1.5; }

/* ---------- Cortes de línea (12-oct, la CTO: «frases que caben en una línea y se pasan a dos… quedan raras») ----------
   Arreglo para toda la web, no frase a frase:
   - Titulares con «balance»: las líneas se reparten parejas y no queda una palabra sola en la última
     («Subvenciones que / encajan con cada / cliente.» pasa a «Subvenciones que encajan / con cada cliente.»).
   - Subtítulos, rótulos y frases del menú también con «balance», no con «pretty»: son textos de una a tres
     líneas, y «pretty» sólo evita la última línea de UNA palabra, así que en cajas anchas dejaba colas de dos
     («…en días hábiles, con / su acuse.», «…prepara el IVA / del autónomo.»). «Balance» reparte las líneas
     parejas y nunca añade una: lo que cabe en una línea sigue en una.
   - La palabra golpe en oro (el <em> del titular) va entera: si el titular se parte, el oro empieza línea y no
     se queda medio en una y medio en otra («Laboral, trabajador a / trabajador.» pasa a «Laboral, / trabajador
     a trabajador.»). Si el oro no cabe en una línea, se parte dentro con «balance». Las cajas que ya tienen
     white-space: nowrap (portada, cabecera de Oficina Digital) siguen igual.
   Los navegadores sin text-wrap lo ignoran y quedan como hasta ahora. */
.respiro, .titular, .golpe-texto h2, .paso-texto h3, .siguiente b, .porque-respuesta p, .modal-demo h2, .legal-cuerpo h1 { text-wrap: balance; }
.respiro em, .golpe-texto h2 em { display: inline-block; text-wrap: balance; }
.linea, .linea-seccion, .paso-texto p, .golpe-texto p, .rotulo, .mega-lista b, .mega-lista small, .mega-clip span, .claves li span, .claves li b,
.ania-proteccion, .cab-indice a, .demo-privacidad span, .demo-resultado { text-wrap: balance; }
.seccion-cabecera { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.tracked { display: block; margin-top: 18px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gris); }
.respiro-pantalla { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px var(--gutter); }
.respiro-pantalla.doble .segunda { margin-top: 10px; }
.lamina { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: #fff; box-shadow: var(--sombra-lamina), 0 0 0 1px rgba(74, 79, 90, 0.08); aspect-ratio: 16 / 9; }
.lamina video, .lamina img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
/* Rótulo de cristal claro (nada negro): texto gris y punto amarillo */
.rotulo {
  position: absolute; left: 14px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 11px; border-radius: 999px;
  background: rgba(247, 243, 235, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--tinta-2); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.1), 0 6px 18px rgba(50, 38, 12, 0.1);
  clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 550ms var(--salida) 500ms;
}
.rotulo i { width: 7px; height: 7px; border-radius: 50%; background: var(--amarillo); flex: none; }
.lamina.puesta .rotulo { clip-path: inset(0 0 0 0 round 999px); }
.js [data-entra] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--suave), transform 900ms var(--salida); }
.js [data-entra].visto { opacity: 1; transform: none; }
.js [data-posa] { opacity: 0; transform: perspective(1800px) rotateX(12deg) rotateY(-9deg) translateY(70px) scale(0.9); filter: blur(6px); transition: opacity 900ms var(--suave), transform 1300ms var(--salida), filter 900ms var(--suave); }
.js [data-posa].puesta { opacity: 1; transform: none; filter: none; }
section[id] { scroll-margin-top: calc(var(--nav-alto) + 12px); }
/* Escena fija: el texto cambia y la lámina cambia de clip al bajar */
.escena { position: relative; height: calc(var(--pasos, 3) * 100vh); }
.escena-fija { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: clip; }
.escena-int { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.escena-invertida { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }
.escena-invertida .escena-texto { order: 2; }
.escena-texto { position: relative; min-height: 220px; }
.paso-texto { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--suave), transform 500ms var(--salida); pointer-events: none; }
.paso-texto.activo { opacity: 1; transform: none; }
.indice { display: block; font-size: 12px; letter-spacing: 0.3em; color: var(--oro-tinta); margin-bottom: 12px; }
.paso-texto h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.015em; color: var(--tinta); line-height: 1.15; }
.paso-texto p { margin-top: 12px; font-size: 17px; color: var(--tinta-2); max-width: 34ch; }
.escena-lamina video { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--suave); }
.escena-lamina video.activo { opacity: 1; }
.escena-lamina .rotulo span { display: none; }
.escena-lamina .rotulo span.activo { display: inline; }
.cine { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: #1b1d22; aspect-ratio: 16 / 9; box-shadow: var(--sombra-lamina); }
.cine video { width: 100%; height: 100%; display: block; }
.cine-boton { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--tinta); font-weight: 500; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25); transition: transform 200ms var(--salida); }
.cine-boton:hover { transform: translate(-50%, -50%) translateY(-2px); }
.cine-boton i { width: 40px; height: 40px; border-radius: 50%; background: var(--tinta); display: inline-flex; align-items: center; justify-content: center; }
.cine-boton i svg { width: 14px; height: 14px; margin-left: 2px; }
.cine.reproduciendo .cine-boton { display: none; }

/* ---------- Portada · OPINIONES: una cita grande cada vez, editorial; fondo salvia mate ---------- */
.opiniones { background: #e4e8e0; padding: clamp(64px, 7vw, 104px) 0; }
.opiniones-int { max-width: 1180px; margin-inline: auto; text-align: center; }
.opiniones-int .cita figcaption, .opiniones-int .citas-mando { justify-content: center; }
.citas { position: relative; min-height: 300px; margin-top: 28px; }
/* Relevo sin cruce: la que sale se va rápido y la que entra espera a que se haya ido; con los dos fundidos a la vez
   las dos citas se leían una encima de otra durante medio segundo */
.cita { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity 320ms var(--suave), transform 320ms var(--suave); pointer-events: none; }
.cita.activa { opacity: 1; transform: none; pointer-events: auto; transition: opacity 650ms var(--suave) 340ms, transform 850ms var(--salida) 340ms; }
.cita blockquote { margin: 0; font-size: clamp(24px, 2.9vw, 42px); font-weight: 300; line-height: 1.2; letter-spacing: -0.018em; color: var(--tinta); text-wrap: balance; }
.comilla { color: var(--amarillo); font-weight: 500; margin-right: 2px; }
/* La firma va a la izquierda aunque la sección esté centrada: centrados, nombre y cargo arrancaban cada uno a una altura distinta del círculo */
.cita figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; text-align: left; }
.cita figcaption i { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c); color: #fff; font-style: normal; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; flex: none; }
.cita figcaption b { display: block; font-weight: 500; font-size: 15.5px; color: var(--tinta); }
.cita figcaption small { display: block; font-size: 13.5px; color: var(--gris); margin-top: 1px; }
.citas-mando { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.citas-flecha { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gris); box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.16); transition: color 200ms, box-shadow 200ms; }
.citas-flecha:hover { color: var(--amarillo); box-shadow: inset 0 0 0 1px var(--amarillo); }
.citas-flecha svg { width: 18px; height: 18px; }
.citas-puntos { display: inline-flex; gap: 8px; }
.citas-puntos button { width: 8px; height: 8px; border-radius: 50%; background: rgba(74, 79, 90, 0.22); transition: background-color 300ms, transform 300ms var(--salida); }
.citas-puntos button.activo { background: var(--amarillo); transform: scale(1.3); }

/* ---------- Portada · POR QUÉ SE CREÓ: secuencia fija; tres golpes a pantalla completa con su imagen ---------- */
.historia { position: relative; background: #1f2229; }
/* Tres bloques normales, uno tras otro (nada sticky ni pin): cada uno se anima al entrar en pantalla */
.golpe { position: relative; height: 92vh; min-height: 560px; overflow: clip; }
.js .golpe[data-entra] { opacity: 1; transform: none; }
.golpe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 9s linear; }
.golpe.visto img { transform: scale(1.0); }
.golpe-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31, 34, 41, 0.72) 0%, rgba(31, 34, 41, 0.5) 45%, rgba(31, 34, 41, 0.15) 100%); }
.golpe-luz .golpe-velo { background: radial-gradient(ellipse 70% 80% at 30% 55%, rgba(255, 246, 214, 0.85) 0%, rgba(247, 242, 233, 0.6) 50%, rgba(247, 242, 233, 0.25) 100%); }
/* El texto saliente se va rápido (hacia arriba) y el entrante llega después (desde abajo): nunca hay dos textos legibles a la vez */
.golpe-texto { position: absolute; left: max(var(--gutter), calc((100% - 1320px) / 2)); right: var(--gutter); top: 50%; transform: translateY(-50%) translateY(28px); max-width: 760px; color: #f7f4ec; opacity: 0; transition: opacity 800ms var(--suave) 150ms, transform 1100ms var(--salida) 150ms; }
.golpe.visto .golpe-texto { opacity: 1; transform: translateY(-50%); }
.golpe-texto h2 { font-size: clamp(38px, 5.4vw, 80px); font-weight: 300; line-height: 1.02; letter-spacing: -0.025em; }
.golpe-texto h2 em { font-style: normal; font-weight: 500; color: var(--oro-mate); }
/* 46ch: con 40 «…para ganar más y no perder / clientes.» dejaba la última palabra sola teniendo sitio en la caja */
.golpe-texto p { margin-top: 22px; font-size: clamp(17px, 1.5vw, 22px); color: rgba(247, 244, 236, 0.82); max-width: 46ch; }
.golpe-luz .golpe-texto { color: var(--tinta); }
.golpe-luz .golpe-texto h2 em { color: #a8872f; }
.golpe-luz .golpe-texto p { color: var(--tinta-2); }
.golpe-luz .etiqueta { display: block; margin-bottom: 16px; }
/* Cierre de la portada: el DESPUÉS (la Oficina Digital) en claro, texto a la izquierda y la pantalla a la derecha */
.manana { padding: clamp(80px, 10vw, 140px) 0; background: var(--papel-calido); }
.manana-int { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px 72px; align-items: center; }
.manana .etiqueta { display: block; margin-bottom: 14px; }
.manana-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px; }
.manana-acciones .ir-siguiente { margin-top: 0; }
@media (max-width: 900px) { .manana-int { grid-template-columns: 1fr; } }

/* ---------- Portada · Por qué: azul grisáceo mate; los papeles vuelan a la caja de la IA cualquiera al bajar ---------- */
.porque { background: #e3e6eb; padding: clamp(72px, 9vw, 128px) 0; overflow: clip; }
.porque-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: center; }
.porque-escena { position: relative; height: 380px; }
.papeles { position: absolute; inset: 0; }
.papel {
  position: absolute; left: calc(6% + var(--i) * 7%); top: calc(8% + var(--i) * 16%); padding: 10px 14px; border-radius: 10px;
  background: #fff; color: var(--tinta-2); font-size: 13.5px; white-space: nowrap; box-shadow: 0 10px 26px rgba(74, 79, 90, 0.12), inset 0 0 0 1px var(--linea);
  transform: translate(calc(var(--p, 0) * 300px), calc(var(--p, 0) * (190px - var(--i) * 60px))) scale(calc(1 - var(--p, 0) * 0.5)); opacity: calc(1 - var(--p, 0) * 0.85);
  transition: transform 120ms linear, opacity 120ms linear;
}
.caja-ia { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 240px; padding: 22px 20px; border-radius: 16px; border: 1.5px dashed var(--azul-hondo); color: var(--tinta-2); text-align: center; }
.caja-ia b { display: block; font-weight: 500; font-size: 17px; color: var(--tinta); }
.caja-ia small { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracota-hondo); }
.porque-respuesta { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; margin-top: 16px; padding-top: 36px; border-top: 1px solid rgba(74, 79, 90, 0.14); }
.porque-respuesta img { width: 52px; height: auto; }
.porque-respuesta p { font-size: clamp(22px, 2.4vw, 34px); font-weight: 300; color: var(--tinta); letter-spacing: -0.015em; }
.porque-respuesta em { font-style: normal; font-weight: 500; color: var(--oro-tinta); }

/* ---------- Portada · AnIA: papel cálido; retrato en círculo con sus cuatro claves, la consulta y la protección ---------- */
.ania { background: var(--papel-calido); padding: clamp(72px, 9vw, 128px) 0; }
.ania-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: center; }
.ania-escena { position: relative; min-height: 460px; }
.ania-retrato { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--oro-mate), 0 24px 60px rgba(50, 38, 12, 0.18); z-index: 2; }
.ania-retrato img { width: 100%; height: 100%; object-fit: cover; }
.claves { position: absolute; inset: 0; z-index: 2; }
.claves li { position: absolute; width: 200px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(74, 79, 90, 0.1), inset 0 0 0 1px var(--linea); opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--suave) calc(var(--n) * 160ms + 300ms), transform 700ms var(--salida) calc(var(--n) * 160ms + 300ms); }
.visto .claves li { opacity: 1; transform: none; }
.claves li b { display: block; font-weight: 500; font-size: 14.5px; color: var(--tinta); }
.claves li span { display: block; font-size: 13px; color: var(--gris); line-height: 1.35; margin-top: 2px; }
.claves li img { float: right; width: 18px; height: 18px; margin: 2px 0 0 6px; }
.claves li[style*="--n:0"] { left: 0; top: 0; }
.claves li[style*="--n:1"] { right: 0; top: 0; }
.claves li[style*="--n:2"] { left: 0; bottom: 0; }
.claves li[style*="--n:3"] { right: 0; bottom: 0; }
.claves-hilos { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--oro-mate); z-index: 1; }
.claves-hilos path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--suave) 200ms; }
.visto .claves-hilos path { stroke-dashoffset: 0; }
.ania-lamina { grid-column: 1 / -1; margin-top: 24px; }
.ania-proteccion { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 16px; color: var(--tinta-2); }
.ania-proteccion i { width: 10px; height: 10px; border-radius: 50%; background: var(--salvia-hondo); flex: none; box-shadow: 0 0 0 4px rgba(122, 138, 114, 0.18); }

@media (max-width: 900px) {
  .citas { min-height: 380px; }
  .golpe { height: 86svh; min-height: 520px; }
  /* En móvil el texto del golpe va abajo: el velo oscurece de arriba abajo para que el dorado se lea donde está
     el texto (antes era al revés y «como un jurista» se perdía sobre el mármol claro) */
  .golpe-velo { background: linear-gradient(180deg, rgba(31, 34, 41, 0.2) 0%, rgba(31, 34, 41, 0.42) 40%, rgba(31, 34, 41, 0.78) 100%); }
  .golpe-texto { top: auto; bottom: 64px; transform: translateY(28px); }
  .golpe.visto .golpe-texto { transform: none; }
  .porque-int, .ania-int { grid-template-columns: 1fr; }
  .porque-escena { height: 300px; }
  .caja-ia { width: 180px; padding: 16px 12px; }
  .papel { font-size: 12px; }
  .ania-escena { min-height: 520px; }
  .claves li { width: 46%; }
  .escena-int, .escena-invertida { grid-template-columns: 1fr; gap: 20px; align-content: center; }
  .escena-invertida .escena-texto { order: 0; }
  .escena-texto { min-height: 150px; }
  .paso-texto h3 { font-size: 22px; }
  .paso-texto p { font-size: 15.5px; }
  .respiro-pantalla { min-height: 48vh; }
}

/* =========================================================================================
   MÓVIL Y TABLETA (10-oct). La CTO veía el móvil «una cutrez» (letras enormes a 256 px, imágenes mal) y el
   escritorio perfecto: todo lo de aquí abajo vive en media queries de 1024 px o menos, así el escritorio no cambia.
   ========================================================================================= */
@media (max-width: 1024px) {
  /* Opiniones: las tres citas apiladas en la misma celda de una rejilla. La caja mide lo que la cita más larga,
     sin el mínimo fijo que en móvil dejaba un hueco grande entre la cita y las flechas */
  .citas { display: grid; min-height: 0; }
  .cita { position: relative; inset: auto; grid-area: 1 / 1; }
  /* En una tableta en vertical (1366 px de alto) cada golpe medía 1.250 px: una foto entera sin nada que leer */
  .golpe { max-height: 900px; }
}
/* Portada en móvil y tableta vertical: el texto arriba, en su sitio, y el portátil entero debajo. Antes la foto se
   encajaba en una caja de alto fijo: a 256 px el titular caía encima de la pantalla, a 390 sobraba una franja vacía
   bajo el portátil, a 820 los botones pisaban la tapa y a 1024 en vertical el texto quedaba en una columnita junto
   al portátil. Ahora la portada mide el texto más la parte de la foto que queda bajo la tapa (la foto mide 1222/790
   del ancho del portátil y la tapa empieza al 53 % de su alto); sitio.js usa esta misma condición y pega la foto
   abajo. La tableta en horizontal (1024x768) se queda con la portada de escritorio, que le cabe. */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  .ep {
    height: auto; min-height: 0; max-height: none;
    padding-top: calc(var(--nav-alto) + var(--nav-margen) + 26px);
    padding-bottom: calc((100vw - 16px) * 0.724 + 10px);
  }
  /* Por encima de la foto queda el fondo: en el tono de la pared de la foto (muestreado de su borde superior) y con
     el borde de la foto fundido, para que no se vea la costura bajo el velo */
  .ep { background: #d5d0c8; }
  .ep-escena > picture { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px); mask-image: linear-gradient(180deg, transparent 0, #000 160px); }
  .ep-texto { position: relative; left: auto; top: auto; width: auto; max-width: 620px; margin-inline: var(--gutter); }
  .ep-velo { left: 0; right: 0; top: calc(var(--nav-alto) + env(safe-area-inset-top, 0px)); bottom: auto; width: auto; height: calc(var(--corte-y, 46%) - var(--nav-alto)); background: linear-gradient(180deg, rgba(42, 44, 50, 0.66) 0%, rgba(42, 44, 50, 0.52) 55%, rgba(42, 44, 50, 0.22) 85%, rgba(42, 44, 50, 0) 100%); }
  .ep-etiqueta { display: none; }
  /* En tableta el texto tiene todo el ancho: el titular crece con él (en móvil lo ajusta el bloque de 640) */
  .ep-texto .titular { font-size: clamp(32px, 4.6vw, 48px); }
  .ep-texto .linea { font-size: clamp(17px, 2.1vw, 20px); }
  .ep-acciones { margin-top: 22px; gap: 10px; }
  .ep-acciones .boton, .ep-acciones .ver-video { height: 46px; font-size: 15px; }
  .ep-acciones .ver-video i { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
  /* Las mismas medidas de móvil de arriba, con la especificidad del bloque de tableta para ganarle */
  .ep-texto .titular { font-size: clamp(25px, 8vw, 38px); }
  .ep-texto .linea { font-size: clamp(15px, 4.2vw, 16.5px); }
  .ep-acciones { margin-top: 20px; }
  .ep-acciones .boton { padding: 0 18px; }

  .respiro { font-size: clamp(25px, 7.6vw, 34px); }
  .respiro.grande { font-size: clamp(27px, calc((100vw - 40px) / 8), 42px); }
  .linea-seccion { font-size: clamp(15px, 4.2vw, 16.5px); }
  .seccion-cabecera { margin-bottom: 24px; }

  /* Opiniones: la cita a la medida del móvil (a 26 px ocupaba siete líneas en 256 px) */
  .opiniones { padding: 64px 0 56px; }
  .citas { margin-top: 20px; }
  .cita blockquote { font-size: clamp(19px, 6vw, 26px); line-height: 1.25; }
  .cita figcaption { margin-top: 22px; gap: 12px; text-align: left; }
  .cita figcaption i { width: 40px; height: 40px; font-size: 13px; }
  .citas-mando { margin-top: 26px; }

  /* Los tres golpes de la historia: titular proporcionado y el texto un poco más arriba del borde */
  .golpe { min-height: 480px; }
  .golpe-texto { bottom: 44px; }
  .golpe-texto h2 { font-size: clamp(27px, 8.6vw, 40px); }
  .golpe-texto p { margin-top: 16px; font-size: 16px; }
  .golpe-luz .etiqueta { margin-bottom: 12px; }

  .manana { padding: 64px 0; }
  .manana-acciones { margin-top: 24px; gap: 16px 24px; }

  /* Láminas: el rótulo de cristal tapaba media pantalla de la app. En móvil va DEBAJO de la imagen, como un pie de
     foto con su punto dorado; la imagen se ve entera. Sin excepciones (la CTO, 13-oct: en ordenador dentro, en
     móvil fuera). */
  /* min-width: 0 porque, sin el recorte, una lámina dentro de una rejilla pediría el ancho del vídeo y la ensancharía */
  .lamina { min-width: 0; }
  /* El hueco de debajo es para el pie de foto, que puede ir en dos líneas (va fuera de la caja de la lámina) */
  .lamina { overflow: visible; margin-bottom: 46px; }
  .lamina > img, .lamina > video { border-radius: inherit; }
  /* Con más peso que .lamina-kanban .rotulo (paginas.css) y .cab-mosaico .rotulo (cabeceras.css), que cargan después */
  .lamina > .rotulo, .lamina.lamina-kanban > .rotulo, .cab-mosaico .lamina > .rotulo {
    top: calc(100% + 10px); bottom: auto; left: 2px; right: 0; padding: 0; gap: 8px; border-radius: 0;
    background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    font-size: 13px; line-height: 1.3; color: var(--tinta-2);
    clip-path: inset(0 100% 0 0);
  }
  .lamina.puesta > .rotulo, .lamina.lamina-kanban.puesta > .rotulo, .cab-mosaico .lamina.puesta > .rotulo { clip-path: inset(0 0 0 0); }
  /* El kanban amplía su vídeo 1,65 veces desde abajo y lo recortaba el overflow de la lámina, que también se comía
     el pie de foto. Ahora lo recorta el propio vídeo: en sus coordenadas, antes de escalar, lo visible es el 1/1,65
     central de abajo (19,7 % fuera por cada lado, 39,4 % arriba); el redondeo, dividido por la misma escala. */
  .lamina-kanban > video { border-radius: 0; clip-path: inset(39.394% 19.697% 0 19.697% round calc(var(--radio) / 1.65)); }

  /* Modal «Pide tu demostración»: cabe y se puede escribir aunque la pantalla sea muy baja o estrecha; si no
     cabe de alto, se desplaza dentro en vez de cortarse por arriba */
  .modal-demo { padding: 10px; align-items: flex-start; overflow-y: auto; overflow-x: hidden; }
  /* Los campos tienen un ancho propio (~260 px) que ensanchaba el formulario y la ventana se iba de lado */
  .demo-form { grid-template-columns: minmax(0, 1fr); }
  .demo-form label { min-width: 0; }
  .demo-form input:not([type="checkbox"]) { width: 100%; min-width: 0; }
  .modal-demo-caja { margin-block: auto; padding: 26px 20px 20px; border-radius: 18px; }
  .modal-demo-cerrar { top: 8px; right: 8px; }
  .modal-demo h2 { font-size: clamp(22px, 7vw, 26px); margin: 6px 0 16px; padding-right: 30px; }
  .demo-form { gap: 11px; }
  .demo-form input:not([type="checkbox"]) { height: 44px; font-size: 16px; } /* 16 px: iOS no hace zoom al escribir */
  /* La casilla de privacidad al lado de su frase y en minúsculas: con la regla general de las etiquetas del formulario
     (rejilla y versalitas) la casilla quedaba sola en una fila y la frase gritaba en mayúsculas */
  .demo-form .demo-privacidad { display: flex; align-items: flex-start; gap: 10px; }
  .demo-form .demo-privacidad span { font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); line-height: 1.4; }
  .demo-form .demo-privacidad.mal span { color: #9c6b55; }
  .demo-privacidad input { margin-top: 2px; flex: none; }

  /* Menú móvil: los apartados sólo con su nombre, sin la frase de debajo, para que la lista abierta quepa a la vista */
  .acordeon-fila > a { padding: 11px 0; }
  .acordeon-cuerpo .mega-lista small { display: none; }
  .acordeon-cuerpo .mega-lista a { padding: 7px 4px; align-items: center; }
  .acordeon-cuerpo .mega-lista b { font-size: 13.5px; font-weight: 400; color: var(--tinta-2); }
  .acordeon-cuerpo .mega-lista svg { width: 18px; height: 18px; margin-top: 0; }

  /* Vídeo del anuncio: la cruz no se monta encima del vídeo */
  .modal { padding: 12px; }
  .modal .cerrar { top: 10px; right: 10px; }

  /* Páginas legales: tablas y enlaces largos (nombres de cookies, direcciones) no empujan la página de lado */
  .legal { padding: calc(var(--nav-alto) + var(--nav-margen) + 40px) 0 64px; }
  .legal-cuerpo h1 { font-size: clamp(28px, 8.5vw, 34px); }
  .legal-cuerpo .fecha { margin-bottom: 32px; }
  .legal-cuerpo h2 { font-size: 1.2rem; margin: 34px 0 12px; }
  .legal-cuerpo p, .legal-cuerpo li { font-size: 15.5px; }
  .legal-cuerpo a { overflow-wrap: anywhere; }
  .legal-cuerpo table { display: block; overflow-x: auto; font-size: 13px; -webkit-overflow-scrolling: touch; }
  .legal-cuerpo th, .legal-cuerpo td { padding: 7px 8px; overflow-wrap: anywhere; min-width: 84px; }
}
@media (max-width: 400px) {
  /* Pantallas muy estrechas: los dos botones de la portada, uno debajo de otro y del mismo ancho */
  .ep-acciones { flex-direction: column; align-items: stretch; gap: 10px; }
  .ep-acciones .boton, .ep-acciones .ver-video { justify-content: center; }
  .ep-acciones .ver-video { padding: 0 18px 0 6px; }
  .manana-acciones .boton { width: 100%; }
}

/* Los clips en movimiento se pueden pinchar: abren el anuncio entero (js/sitio.js) */
figure video, .mega-clip video { cursor: pointer; }
/* Reproductor del anuncio sin el tiempo ni la duración a la vista (la CTO, 12-oct): Chrome, Edge y Safari los
   pintan con estos pseudoelementos; Firefox no los expone y allí seguirán viéndose. */
.modal video::-webkit-media-controls-current-time-display,
.modal video::-webkit-media-controls-time-remaining-display { display: none !important; }

/* Modal de demostración más compacto (la CTO, 12-oct: «es súper alto y no cabe»): en escritorio los cuatro campos
   van de dos en dos y se aprieta el aire; el velo de fondo pierde opacidad y desenfoque para que la página se siga
   viendo detrás. En móvil sigue la regla de una columna de más abajo. */
.modal-demo { background: rgba(247, 243, 235, 0.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-demo-caja { width: min(580px, 100%); padding: 26px 28px 22px; background: rgba(255, 255, 255, 0.97); }
.modal-demo h2 { font-size: 24px; margin: 6px 0 16px; }
.demo-form { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.demo-form .demo-privacidad, .demo-form .demo-error, .demo-form .boton { grid-column: 1 / -1; }
.demo-form label { gap: 4px; }
.demo-form input { height: 40px; }
.demo-form label { min-width: 0; }
.demo-form input:not([type="checkbox"]) { width: 100%; min-width: 0; }
/* La casilla de privacidad en una línea, con su texto en letra normal (la regla general de los campos la apilaba y la ponía en versalitas) */
.demo-form label.demo-privacidad { display: flex; align-items: center; gap: 10px; }
.demo-form label.demo-privacidad span { font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
@media (max-width: 640px) { .demo-form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Foto de fondo en un apartado de cada dos (la CTO, 13-oct: «algo súper sutil», como la portada) ----------
   La foto la pone cada sección con style="--fondo: url(...)". Va por debajo del texto y de las pantallas, casi
   transparente y fundida arriba y abajo para que no se note dónde empieza el apartado. Mientras una foto no exista,
   el apartado se ve como siempre: no hay hueco ni marco que delate que falta. */
.con-fondo { position: relative; isolation: isolate; }
.con-fondo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fondo) center / cover no-repeat; opacity: 0.07; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
/* En el móvil el texto va encima de la foto, no al lado: más tenue todavía */
@media (max-width: 760px) { .con-fondo::before { opacity: 0.05; } }

/* Enlace a la página de AnIA desde su apartado de la portada (13-oct, SEO): discreto, gris y en amarillo al pasar */
.ania-mas { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; color: var(--gris); transition: color 200ms var(--suave); }
.ania-mas i { font-style: normal; transition: transform 300ms var(--salida); }
.ania-mas:hover { color: var(--amarillo); }
.ania-mas:hover i { transform: translateX(4px); }

/* Página 404 (13-oct): el mismo lenguaje que las cabeceras, con aire y dos salidas */
.error-404 { min-height: 72vh; display: flex; align-items: center; padding: calc(var(--nav-alto) + 80px) 0 96px; background: var(--papel-calido); }
.error-404-int .respiro { margin-top: 14px; }
.error-404-int .linea-seccion { margin-top: 16px; color: var(--gris); }
.error-404-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* «Ya no basta con tener la mejor IA.» escribiéndose en la portada (js/portada.js, 13-oct): las letras esperan
   transparentes en su sitio y el cursor, del dorado del titular, parpadea delante de la siguiente */
.linea-escribe .l { opacity: 0; }
.linea-escribe .l.v { opacity: 1; }
.cursor-escribe { display: inline-block; width: 2px; height: 1.05em; margin: 0 1px -0.16em; background: #e3cb7e; border-radius: 1px; animation: cursor-parpadea 1s steps(1) infinite; }
.cursor-escribe.fuera { opacity: 0; animation: none; transition: opacity 600ms var(--suave); }
@keyframes cursor-parpadea { 50% { opacity: 0; } }

/* Opiniones más compactas (la CTO, 13-oct: «el bloque es demasiado alto»): las cuatro citas se apilan en la misma
   celda de una rejilla, así la caja mide lo que la más larga y no queda hueco entre la cita y las flechas; antes
   era una altura fija pensada para la frase más larga a 52 px */
.citas { display: grid; min-height: 0; }
.cita { grid-area: 1 / 1; position: relative; inset: auto; }

/* «AnIA razona como un senior» más compacta (la CTO, 13-oct: «también es demasiado alto»): el mismo aire que las
   opiniones y los cuatro puntos algo más juntos */
.ania { padding: clamp(64px, 7vw, 96px) 0; }
.ania .fichas-claves { gap: 14px 24px; margin-top: 22px; }
.ania .ania-proteccion { margin-top: 20px; }
.ania-mas { margin-top: 12px; }