/* Genia · web pública. La estructura copia Aside (cielo, columna con filetes, tarjetas)
   y la tinta copia Intercom (titulares, etiquetas en mono, marcas); los textos van en Geist, como en Aside. */

:root {
  --tinta: #0B1F38;
  --marca: #123E70;
  --marca-oscura: #0E3159;
  --texto-2: #4E5E73;
  --texto-3: #7D8A9C;
  --gris-titulo: #B4C0CE;
  --linea: rgba(11, 31, 56, 0.07);
  --linea-fuerte: rgba(11, 31, 56, 0.1);
  --tinte: #F7F9FC;
  --display: "Instrument Sans", system-ui, sans-serif;
  --ui: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  /* Como Intercom: el contenido ocupa diez de doce columnas y crece con la pantalla (1248 px a 1440, 1648 a 1920) */
  --columna: min(calc(83.333% + 48.67px), 1650px);
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 4px; }

/* ---------- Botones (Intercom) ---------- */
.botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* Botones como los de Aside: redondeados, con relieve y sombra; el principal lleva una flecha que se mueve */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-family: var(--ui); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 0.25s var(--suave), box-shadow 0.25s var(--suave), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.boton-primario {
  color: #FFFFFF; background: linear-gradient(180deg, #1D4E87 0%, #123E70 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(11, 31, 56, 0.22), 0 6px 16px -6px rgba(18, 62, 112, 0.55);
}
.boton-primario:hover {
  background: linear-gradient(180deg, #225794 0%, #154479 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(11, 31, 56, 0.2), 0 12px 24px -8px rgba(18, 62, 112, 0.6);
}
.boton-primario:not(.boton-nav):not(.boton-enviar)::after {
  content: ""; width: 14px; height: 14px; margin-right: -3px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--suave);
}
.boton-primario:hover::after { transform: translateX(3px); }
.boton-secundario {
  color: var(--tinta); background: #FFFFFF; border: 1px solid rgba(11, 31, 56, 0.12);
  box-shadow: 0 1px 2px rgba(11, 31, 56, 0.06);
}
.boton-secundario:hover { border-color: rgba(11, 31, 56, 0.22); box-shadow: 0 4px 12px -4px rgba(11, 31, 56, 0.16); }
.boton-cristal { background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.boton-cristal:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.9); }
.boton:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 999px; }

/* ---------- Etiquetas en mono con su cuadradito (Intercom) ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; height: 28px;
  font-family: var(--mono); font-size: 12px; line-height: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--tinta); font-weight: 400;
}
.cuadro { width: 8px; height: 8px; background: var(--marca); flex-shrink: 0; }
.etiqueta-centro { justify-content: center; }

/* ---------- Titulares ---------- */
.titulo-54 { font-family: var(--display); font-weight: 400; font-size: 54px; line-height: 54px; letter-spacing: -0.03em; }
.titulo-44 { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; text-align: center; }
.titulo-30 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 40px; letter-spacing: -0.01em; }
.gris { color: var(--gris-titulo); }
.entradilla { font-family: var(--ui); font-size: 17px; line-height: 26px; color: var(--texto-2); max-width: 587px; }
.entradilla-19 { font-family: var(--ui); font-size: 18px; line-height: 28px; color: var(--texto-3); }

/* ---------- Hero (Aside) ---------- */
.hero { padding: 0; }
.cielo {
  position: relative; display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  background: #DCEBF7 url(img/cielo.webp) 50% 20% / cover no-repeat;
}
.nav { position: relative; width: 100%; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 8px 32px 0 34px; z-index: 3; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: -0.02em; }
.logo img { width: 30px; height: 30px; }
.nav-enlaces { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 40px; }
.nav-enlaces a { font-size: 14px; line-height: 20px; font-weight: 500; transition: opacity 0.2s; }
.nav-enlaces a:hover { opacity: 0.6; }
.boton-nav { height: 38px; padding: 0 16px; font-size: 14px; }
.nav-menu { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.nav-menu span { display: block; width: 18px; height: 1.5px; background: var(--tinta); transition: transform 0.25s var(--suave); }
.nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu-movil {
  position: absolute; top: 66px; left: 12px; right: 12px; z-index: 4;
  display: flex; flex-direction: column; gap: 4px; padding: 12px;
  background: #FFFFFF; border-radius: 16px; box-shadow: rgba(11, 31, 56, 0.16) 0 16px 40px;
}
.menu-movil[hidden] { display: none; }
.menu-movil a:not(.boton) { padding: 12px 10px; font-size: 16px; font-weight: 500; border-radius: 8px; }
.menu-movil a:not(.boton):hover { background: var(--tinte); }
.menu-movil .boton { margin-top: 6px; }

.hero-cabecera { display: flex; flex-direction: column; align-items: center; padding-top: 66px; text-align: center; }
.etiqueta-hero {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 11px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(11, 31, 56, 0.1);
  font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(11, 31, 56, 0.72);
  transition: background-color 0.2s;
}
.etiqueta-hero:hover { background: rgba(255, 255, 255, 0.75); }
.hero h1 { margin-top: 32px; font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 52px; letter-spacing: -0.01em; }
.hero .botones { margin-top: 32px; justify-content: center; }
.hero-ventana {
  margin-top: 64px; width: min(1273px, calc(100% - 135px));
  height: calc(576px * var(--z, 1)); overflow: hidden; border-radius: 10px 10px 0 0;
  box-shadow: rgba(11, 31, 56, 0.12) 0 20px 50px;
}

/* ---------- Columna con filetes (Aside) y marcas (Intercom) ---------- */
.col { position: relative; width: var(--columna); margin-inline: auto; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); }
.col-ancho { width: var(--columna); margin-inline: auto; }
.sec::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--linea); pointer-events: none; }
.marcas {
  position: absolute; top: -5px; left: -5px; right: -5px; height: 8px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--marca), var(--marca)) left / 8px 8px no-repeat,
    linear-gradient(var(--marca), var(--marca)) right / 8px 8px no-repeat;
}
.marcas-abajo { top: auto; bottom: -4px; }
.capitulo-tinte { background: var(--tinte); }

/* ---------- Presentamos ---------- */
.presentamos { display: grid; grid-template-columns: 11.64% 25.68% minmax(0, 51.2%) 1fr; align-items: start; min-height: 440px; padding: 104px 0; }
.presentamos .etiqueta { grid-column: 2; }
.presentamos-textos { grid-column: 3; max-width: 760px; display: flex; flex-direction: column; gap: 32px; }
.presentamos-textos p { font-family: var(--display); font-size: 20px; line-height: 28px; color: var(--texto-3); }
.presentamos-textos strong { font-weight: 400; color: var(--tinta); }

/* ---------- Tareas ---------- */
.tareas { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 88px 39px 72px; }
.tareas-lista {
  width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 32px; row-gap: 56px; padding: 24px 24px;
}
.tareas-lista li { height: 32px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; color: #8C97A6; transition: color 0.2s; }
.tareas-lista li:hover { color: var(--tinta); }

/* ---------- Lo que puede hacer ---------- */
.capacidad { display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, #F9F9FD 0, #FFFFFF 616px); }
.capacidad-cabecera { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 96px; }
.capacidad-cabecera .titulo-44 { width: min(900px, 100%); }
.muro { width: min(1246px, 100%); }
.sin-integraciones { display: flex; justify-content: center; padding: 96px 24px 96px; width: 100%; }
.sin-integraciones p { max-width: 718px; text-align: center; font-family: var(--ui); font-size: 18px; line-height: 28px; }

.tarjetas { width: 100%; display: flex; gap: 24px; padding: 0 25px 96px; }
.tarjeta { flex: 1 1 0; min-width: 0; }
.ui { position: relative; }
.ui-escala:not(.pestanas-medios) > div, .pestanas-medios > [data-panel] > div { zoom: var(--z, 1); flex-shrink: 0; }
.tarjeta .ui { transition: transform 0.5s var(--suave); }
.tarjeta:hover .ui { transform: translateY(-3px); }
.ui-llena, .ui-llena > div { height: 100% !important; }
.tarjeta p { padding: 20px 16px 0; color: var(--texto-3); }
.tarjeta strong { font-weight: 500; color: var(--tinta); }
.tarjetas-4 { padding-bottom: 40px; }

/* ---------- Capítulos (Intercom: Encargos y Rutinas) ---------- */
.capitulo { display: flex; flex-direction: column; gap: 80px; padding: 112px 39px; }
.capitulo-cabecera { display: flex; gap: 16px; align-items: flex-start; }
.capitulo-texto { flex: 0 1 59.5%; display: flex; flex-direction: column; }
.etiquetas { display: flex; gap: 24px; padding: 2px 0 22px; }
.etiquetas .etiqueta { height: auto; }
.capitulo .entradilla { padding-top: 24px; }
.capitulo .botones { padding-top: 24px; }
.capitulo-dibujo { flex: 1 1 0; display: flex; justify-content: center; }
.capitulo-dibujo img { width: 315px; mix-blend-mode: multiply; }

.pestanas-medios { position: relative; overflow: hidden; border: 1px solid #E2E8F0; background: #EDF1F6; }
.pestanas-medios > [data-panel] { position: absolute; inset: 0; display: flex; justify-content: center; opacity: 0; transform: scale(1.012); transition: opacity 0.6s var(--suave), transform 0.9s var(--suave); }
.pestanas-medios > [data-panel].activo { opacity: 1; transform: none; }
.demo-ancha { height: calc(530px * var(--z, 1)); background: #E9EDF2 url(img/ui/01M374BGT6XKWKSPVYQ3R779MR.webp) 50% 45% / cover no-repeat; }
.demo-cuadrada { height: calc(702px * var(--z, 1)); background: #EFE6D8 url(img/ui/pared-rutinas.webp) 50% 50% / cover no-repeat; }

.pestanas-lista { display: flex; }
.pestana { position: relative; flex: 1 1 0; display: flex; gap: 24px; padding: 24px 24px 48px; transition: background-color 0.3s; }
.pestana:hover { background: rgba(0, 0, 0, 0.015); }
.pestana.activo { background: rgba(0, 0, 0, 0.03); }
.pestana .cuadro { margin-top: 4px; background: #8AA2C2; transition: background-color 0.3s; }
.pestana.activo .cuadro { background: var(--marca); }
.pestana-texto { display: flex; flex-direction: column; gap: 8px; }
.pestana-titulo { font-family: var(--display); font-size: 20px; line-height: 24px; letter-spacing: -0.01em; color: rgba(11, 31, 56, 0.6); transition: color 0.3s; }
.pestana-desc { font-family: var(--ui); font-size: 16px; line-height: 24px; color: rgba(11, 31, 56, 0.42); transition: color 0.3s; }
.pestana.activo .pestana-titulo { color: var(--tinta); }
.pestana.activo .pestana-desc { color: rgba(11, 31, 56, 0.7); }
.progreso { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--marca); transform: scaleX(0); transform-origin: left; }
.activo > .progreso.corre { animation: progreso var(--intervalo, 7000ms) linear forwards; }
.pausado .activo > .progreso.corre { animation-play-state: paused; }
@keyframes progreso { to { transform: scaleX(1); } }

.pestanas-acordeon { display: flex; }
.pestanas-acordeon .pestanas-medios { flex: 0 0 60%; }
.pestanas-acordeon .pestanas-lista { flex: 1 1 40%; flex-direction: column; }
.pestanas-acordeon .pestana { padding: 24px; min-height: 128px; }

/* ---------- Bloques de texto centrados ---------- */
.bloque-703 { width: min(703px, 100%); display: flex; flex-direction: column; gap: 12px; }

/* ---------- Memoria ---------- */
.memoria { display: flex; flex-direction: column; align-items: center; padding-top: 64px; background: linear-gradient(180deg, #FFFFFF 18%, #F5F7FA 100%); overflow: hidden; }
.memoria .bloque-703 { padding: 0 24px; box-sizing: content-box; }
.memoria-escena { margin-top: 52px; width: 100%; display: flex; justify-content: center; overflow: hidden; }
.memoria-escena .ui { flex-shrink: 0; }

/* ---------- Tu visto bueno ---------- */
.visto-cabecera { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 96px 24px 64px 11.64%; }
.visto-cabecera .titulo-44 { text-align: left; }
.visto-cabecera .entradilla-19 { max-width: 760px; }
.secreto { font-family: var(--mono); font-size: 0.91em; letter-spacing: 0.02em; color: #8AA2C2; }
.secreto.tecleando::after { content: ""; display: inline-block; width: 2px; height: 0.8em; margin-left: 3px; background: #8AA2C2; vertical-align: -0.05em; animation: cursor 0.8s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.secreto-punto { font-family: var(--mono); font-size: 0.91em; color: #8AA2C2; }

/* ---------- Testimonios ---------- */
.testimonios { padding: 80px 39px; }
.testimonio-pestanas { display: flex; }
.testimonio-pestana {
  position: relative; flex: 1 1 0; padding: 16px; overflow: hidden;
  border: 1px solid var(--linea-fuerte); border-bottom: 0; margin-right: -1px; background: #F3F6FA;
  font-family: var(--display); font-size: 12px; line-height: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(11, 31, 56, 0.6);
  transition: background-color 0.3s, color 0.3s;
}
.testimonio-pestana:last-child { margin-right: 0; }
.testimonio-pestana:hover { color: var(--tinta); }
.testimonio-pestana.activo { background: #FFFFFF; color: var(--tinta); }
.testimonio-marco { position: relative; height: 435px; background: #FFFFFF; border: 1px solid var(--linea-fuerte); overflow: hidden; }
.esquinas {
  position: absolute; inset: 16px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--marca), var(--marca)) left top / 8px 8px no-repeat,
    linear-gradient(var(--marca), var(--marca)) right top / 8px 8px no-repeat,
    linear-gradient(var(--marca), var(--marca)) left bottom / 8px 8px no-repeat,
    linear-gradient(var(--marca), var(--marca)) right bottom / 8px 8px no-repeat;
}
.testimonio { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--suave), visibility 0.5s; }
.testimonio.activo { opacity: 1; visibility: visible; }
.testimonio-logo { position: absolute; left: 32px; top: 32px; font-family: var(--display); font-size: 22px; line-height: 32px; letter-spacing: -0.01em; color: #6B7684; }
.testimonio-logo-mayus { font-family: var(--display); font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.testimonio blockquote { position: absolute; left: 21.9%; top: 128px; width: 46.6%; max-width: 680px; font-family: var(--display); font-size: 28px; line-height: 28px; letter-spacing: -0.034em; transform: translateY(8px); transition: transform 0.7s var(--suave); }
.testimonio.activo blockquote { transform: none; }
.testimonio figcaption { position: absolute; left: 21.9%; bottom: 40px; display: flex; flex-direction: column; font-family: var(--display); font-size: 14px; line-height: 20px; color: rgba(11, 31, 56, 0.5); }
.testimonio figcaption span { color: var(--tinta); }
.testimonio-nota { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--texto-3); }
.testimonio img { position: absolute; right: 32px; bottom: 32px; width: 209px; height: 259px; object-fit: cover; mix-blend-mode: multiply; }

/* ---------- Genia en la nube ---------- */
.nube { display: flex; min-height: 468px; }
.nube-texto { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; padding: 48px 48px 48px 64px; }
.nube-titulo { font-size: 30px; line-height: 36px; font-weight: 400; }
.nube-titulo span { display: block; max-width: 520px; color: #9AA6B6; }
.boton-gris { margin-top: 16px; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #F1F3F6; font-size: 15px; font-weight: 500; transition: background-color 0.2s, transform 0.25s var(--suave); }
.boton-gris:hover { transform: translateY(-1px); }
.boton-gris:hover { background: #E6EAF0; }
.nube-puntos { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; max-width: 519px; }
.nube-puntos dt { font-weight: 500; }
.nube-puntos dd { color: var(--texto-3); }
.nube-imagen { flex: 0 0 45%; align-self: stretch; overflow: hidden; background: #0E2C52; }

/* ---------- Privacidad ---------- */
.privacidad-cabecera { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 96px 24px 80px; text-align: center; }
.privacidad-cabecera .entradilla-19 { max-width: 560px; }
.privacidad .tarjetas { border-bottom: 1px solid var(--linea); }
.privacidad-pie { height: 96px; }

/* ---------- Cierre ---------- */
.cierre { padding-top: 96px; }
.cierre-banner {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px;
  min-height: 468px; padding: 150px 24px 80px; border-radius: 22px; overflow: hidden; text-align: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0) 1.5px) 0 0 / 14px 14px,
    linear-gradient(32deg, #F4F9FE 0%, #F4F9FE 16%, rgba(244, 249, 254, 0) 36%),
    linear-gradient(-32deg, #F4F9FE 0%, #F4F9FE 16%, rgba(244, 249, 254, 0) 36%),
    radial-gradient(ellipse 40% 55% at 50% 100%, #2F7FDF 0%, rgba(47, 127, 223, 0) 100%),
    linear-gradient(180deg, #CFE5FB 0%, #E4F1FD 38%, #9CCBF6 72%, #4B95EA 100%);
}
.cierre h2 { font-family: var(--display); font-weight: 400; font-size: 80px; line-height: 80px; letter-spacing: -0.03em; }

/* ---------- Pie ---------- */
.pie { padding: 96px 0 64px; display: flex; flex-direction: column; gap: 48px; }
.pie-columnas { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 48px; border-bottom: 1px solid var(--linea); }
.pie-columnas nav, .pie-cta { width: 240px; display: flex; flex-direction: column; gap: 8px; }
.pie-cta { width: 160px; }
.pie h3 { font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(11, 31, 56, 0.6); margin-bottom: 4px; }
.pie a { font-size: 14px; line-height: 24px; transition: opacity 0.2s; }
.pie a:hover { opacity: 0.6; }
.pie-final { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: -48px; padding-top: 24px; font-size: 14px; line-height: 20px; color: var(--texto-3); }
.pie-marca { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); font-weight: 500; }

/* ---------- Barra que aparece al volver a subir ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 60px;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--linea); transform: translateY(-101%); transition: transform 0.35s var(--suave);
}
.barra.visible { transform: none; }
.barra-dentro { width: var(--columna); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo-barra { font-size: 20px; }
.logo-barra img { width: 24px; height: 24px; }
.barra-enlaces { display: flex; gap: 32px; }
.barra-enlaces a { font-size: 14px; line-height: 20px; font-weight: 500; transition: opacity 0.2s; }
.barra-enlaces a:hover { opacity: 0.6; }

/* ---------- Animaciones: cortas, sin esconder el contenido más de lo justo ---------- */
.entra { animation: entra 0.7s var(--suave) both; animation-delay: var(--retardo, 0ms); }
.entra-ventana { animation: entra-ventana 0.95s var(--suave) 120ms both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes entra-ventana { from { opacity: 0; transform: translateY(28px) scale(0.985); } }
.js [data-aparece], .js [data-aparece-grupo] > * { opacity: 0; transform: translateY(14px); transition: opacity 0.65s var(--suave), transform 0.65s var(--suave); transition-delay: var(--retardo, 0ms); }
.js .visible[data-aparece], .js .visible[data-aparece-grupo] > * { opacity: 1; transform: none; }
/* Las imágenes no saltan al llegar: aparecen con un fundido sobre un fondo del mismo tono */
.js img.carga { opacity: 0; transition: opacity 0.5s var(--suave); }
.js img.carga.lista { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .entra-ventana { animation: none; }
  .js [data-aparece], .js [data-aparece-grupo] > * { opacity: 1; transform: none; transition: none; }
  .js img.carga { opacity: 1; transition: none; }
  .pestanas-medios img, .testimonio, .testimonio blockquote, .barra { transition: none; }
}

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1180px) {
  .presentamos { grid-template-columns: 6% 24% minmax(0, 1fr) 5%; }
  .tarjetas-4 { flex-wrap: wrap; }
  .tarjetas-4 .tarjeta { flex: 1 1 calc(50% - 12px); }
  .testimonio blockquote, .testimonio figcaption { left: 48px; }
  .testimonio blockquote { width: calc(100% - 340px); max-width: none; font-size: 24px; line-height: 26px; }
  .cierre h2 { font-size: 64px; line-height: 66px; }
}

/* ---------- Tableta y móvil ---------- */
@media (max-width: 860px) {
  :root { --columna: calc(100% - 32px); }
  .nav { padding: 4px 12px 0 18px; }
  .nav-enlaces, .boton-nav { display: none; }
  .barra-enlaces { display: none; }
  .barra .boton-nav { display: inline-flex; }
  .barra { height: 56px; }
  .nav-menu { display: inline-flex; }
  .hero-cabecera { padding: 48px 20px 0; }
  .hero h1 { font-size: 34px; line-height: 38px; margin-top: 24px; }
  .hero h1 br { display: none; }
  .hero .botones { margin-top: 24px; }
  .hero-ventana { margin-top: 44px; width: calc(100% - 32px); }

  .presentamos { display: flex; flex-direction: column; gap: 20px; min-height: 0; padding: 64px 24px; }
  .presentamos-textos p { font-size: 18px; line-height: 26px; }

  .tareas { padding: 64px 16px 48px; }
  .tareas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; column-gap: 12px; padding: 8px 0; }
  .tareas-lista li { font-size: 15px; }

  .titulo-44 { font-size: 32px; line-height: 36px; }
  .titulo-44 br { display: none; }
  .titulo-54 { font-size: 38px; line-height: 40px; }
  .titulo-30 { font-size: 24px; line-height: 32px; }
  .capacidad-cabecera { padding: 64px 20px 0; }
  .muro { margin-top: 12px; }
  .sin-integraciones { padding: 48px 20px; }
  .sin-integraciones p { font-size: 17px; line-height: 26px; }

  .tarjetas, .tarjetas-4 { flex-direction: column; gap: 32px; padding: 0 16px 64px; }
  .tarjeta, .tarjetas-4 .tarjeta { flex: none; }
  .tarjeta p { padding: 16px 4px 0; }

  .capitulo { gap: 40px; padding: 64px 16px; }
  .capitulo-cabecera { flex-direction: column; gap: 32px; }
  .capitulo-texto { flex: none; }
  .capitulo-dibujo { flex: none; width: 100%; }
  .capitulo-dibujo img { width: 220px; }
  .pestanas-lista { flex-direction: column; }
  .pestana { flex: none; padding: 20px 16px; gap: 16px; }
  .pestanas-acordeon { flex-direction: column; }
  .pestanas-acordeon .pestanas-medios, .pestanas-acordeon .pestanas-lista { flex: none; }
  .pestanas-acordeon .pestana { min-height: 0; }


  .memoria { padding-top: 56px; }
  .memoria-escena { margin-top: 32px; justify-content: flex-start; }
  .memoria-escena .ui { margin-left: -560px; }

  .visto-cabecera { padding: 64px 20px 40px; }

  .testimonios { padding: 56px 16px; }
  .testimonio-pestana { padding: 14px 8px; font-size: 11px; text-align: center; }
  .testimonio-marco { height: 470px; }
  .testimonio-logo { left: 28px; top: 28px; font-size: 20px; }
  .testimonio blockquote { left: 28px; right: 28px; top: 84px; width: auto; font-size: 21px; line-height: 25px; }
  .testimonio figcaption { left: 28px; right: 136px; bottom: 36px; }
  .testimonio img { width: 96px; height: 120px; right: 28px; bottom: 28px; }

  .nube { flex-direction: column; }
  .nube-texto { padding: 48px 20px; }
  .nube-titulo { font-size: 24px; line-height: 30px; }
  .nube-puntos { margin-top: 32px; }
  .nube-imagen { flex: none; height: 466px; }

  .privacidad-cabecera { padding: 64px 20px 48px; }
  .cierre { padding-top: 48px; }
  .cierre-banner { min-height: 0; padding: 96px 20px 88px; gap: 28px; }
  .cierre h2 { font-size: 40px; line-height: 42px; }

  .pie { padding: 64px 0 40px; }
  .pie-columnas { flex-wrap: wrap; row-gap: 32px; }
  .pie-columnas nav, .pie-cta { width: calc(50% - 6px); }
  .pie-final { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Pide una demo
   ========================================================= */
.cielo-demo { padding-bottom: 72px; }
.demo-hero { width: min(1180px, calc(100% - 96px)); display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; padding-top: 72px; }
.demo-intro { flex: 1 1 520px; max-width: 560px; padding-top: 24px; }
.demo-intro .etiqueta-hero { color: rgba(11, 31, 56, 0.72); }
.demo-intro h1 { margin-top: 24px; font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 52px; letter-spacing: -0.015em; }
.demo-entradilla { margin-top: 20px; font-family: var(--ui); font-size: 18px; line-height: 28px; color: var(--tinta); max-width: 500px; }
.demo-puntos { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.demo-puntos li { display: flex; gap: 12px; font-size: 16px; line-height: 24px; }
.check { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 11px; background: rgba(255, 255, 255, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23123E70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; border: 1px solid rgba(18, 62, 112, 0.18); }

.demo-tarjeta {
  flex: 0 0 480px; position: relative; background: #FFFFFF; border-radius: 18px; padding: 32px;
  box-shadow: rgba(11, 31, 56, 0.06) 0 1px 2px, rgba(11, 31, 56, 0.14) 0 24px 60px -12px; scroll-margin-top: 24px;
}
.formulario-cabecera h2, .formulario-hecho h2 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 32px; letter-spacing: -0.015em; }
.formulario-cabecera p { margin-top: 4px; color: var(--texto-3); }
.campos { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo label, .campo legend { font-size: 14px; line-height: 20px; font-weight: 500; padding: 0; }
.opcional { font-weight: 400; color: var(--texto-3); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #D5DCE6; background: #FFFFFF;
  font: inherit; font-size: 15px; color: var(--tinta); transition: border-color 0.15s, box-shadow 0.15s;
}
.campo textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 22px; resize: vertical; }
.campo textarea::placeholder { color: #A3AFBF; }
.campo input:hover, .campo textarea:hover { border-color: #B9C4D3; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(18, 62, 112, 0.14); }
.campo [aria-invalid="true"] { border-color: #C0362C !important; box-shadow: 0 0 0 3px rgba(192, 54, 44, 0.1) !important; }
.campo-error { font-size: 13px; line-height: 18px; color: #C0362C; }
.campo-error:empty { display: none; }
.opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 2px; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span {
  display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; border: 1px solid #D5DCE6;
  font-size: 14px; font-weight: 500; transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.opcion:hover span { border-color: #B9C4D3; }
.opcion input:checked + span { border-color: var(--marca); background: rgba(18, 62, 112, 0.06); color: var(--marca); }
.opcion input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.opciones[aria-invalid="true"] .opcion span { border-color: #C0362C; }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--texto-2); cursor: pointer; }
.acepto input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--marca); }
.acepto a, .formulario-legal a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.boton-enviar { width: 100%; height: 48px; margin-top: 24px; font-size: 16px; position: relative; }
.boton-enviar[disabled] { cursor: progress; opacity: 0.85; }
.enviar-cargando { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; animation: girar 0.7s linear infinite; }
.enviando .enviar-texto { opacity: 0; }
.enviando .enviar-cargando { display: block; position: absolute; }
@keyframes girar { to { transform: rotate(360deg); } }
.formulario-legal { margin-top: 16px; font-size: 12px; line-height: 18px; color: var(--texto-3); }
.formulario-aviso { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #FDF3F2; border: 1px solid #F3D3CF; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; }
.formulario-aviso[hidden] { display: none; }

.formulario-hecho { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 420px; justify-content: center; outline: none; }
.formulario-hecho[hidden] { display: none; }
.formulario-hecho p { color: var(--texto-2); max-width: 360px; }
.formulario-hecho .boton { margin-top: 12px; }
.hecho-icono { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 28px; background: rgba(46, 125, 79, 0.1); color: #2E7D4F; animation: aparece-hecho 0.6s var(--suave); }
@keyframes aparece-hecho { from { transform: scale(0.6); opacity: 0; } }

.demo-pasos { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 96px 39px; }
.pasos { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--linea); }
.pasos li { padding: 28px 28px 8px; border-right: 1px solid var(--linea); }
.pasos li:last-child { border-right: 0; }
.paso-numero { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--marca); }
.pasos h3 { margin-top: 16px; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.pasos p { margin-top: 8px; color: var(--texto-3); }

.demo-preguntas { display: flex; flex-direction: column; align-items: center; padding: 96px 24px 112px; }
.preguntas { margin-top: 32px; border-top: 1px solid var(--linea-fuerte); }
.preguntas details { border-bottom: 1px solid var(--linea-fuerte); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--display); font-size: 19px; line-height: 26px; letter-spacing: -0.01em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex-shrink: 0; width: 12px; height: 12px; background: linear-gradient(var(--marca), var(--marca)) center / 12px 1.5px no-repeat, linear-gradient(var(--marca), var(--marca)) center / 1.5px 12px no-repeat; transition: transform 0.3s var(--suave); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 32px 22px 0; color: var(--texto-2); font-family: var(--ui); font-size: 16px; line-height: 26px; }
.preguntas details[open] p { animation: abre 0.4s var(--suave); }
@keyframes abre { from { opacity: 0; transform: translateY(-4px); } }
.pagina-demo .pie { padding-top: 64px; }

@media (max-width: 1100px) {
  .demo-hero { flex-direction: column; align-items: center; gap: 40px; width: min(640px, calc(100% - 40px)); }
  .demo-intro { flex: none; max-width: none; text-align: center; padding-top: 8px; }
  .demo-entradilla { margin-inline: auto; }
  .demo-puntos { text-align: left; max-width: 520px; margin-inline: auto; }
  .demo-tarjeta { flex: none; width: 100%; }
}
@media (max-width: 860px) {
  .cielo-demo { padding-bottom: 16px; }
  .demo-hero { padding-top: 32px; width: calc(100% - 24px); }
  .demo-intro { padding: 0 8px; }
  .demo-intro h1 { font-size: 34px; line-height: 38px; }
  .demo-entradilla { font-size: 17px; line-height: 26px; }
  .demo-puntos { margin-top: 28px; }
  .demo-tarjeta { padding: 24px 20px; border-radius: 22px; }
  .campo-fila { grid-template-columns: 1fr; gap: 16px; }
  .opciones { grid-template-columns: repeat(2, 1fr); }
  .demo-pasos { padding: 64px 16px; }
  .demo-pasos .titulo-44 br { display: none; }
  .pasos { grid-template-columns: 1fr; margin-top: 16px; }
  .pasos li { border-right: 0; border-bottom: 1px solid var(--linea); padding: 24px 8px; }
  .demo-preguntas { padding: 64px 16px 72px; }
  .preguntas summary { font-size: 17px; line-height: 24px; }
  .preguntas details p { padding-right: 0; }
}

/* =========================================================
   Páginas legales y 404
   ========================================================= */
.cielo-corto { padding-bottom: 72px; }
.cabecera-pagina { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 72px 24px 0; text-align: center; }
.cabecera-pagina h1 { font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 52px; letter-spacing: -0.015em; }
.cabecera-pagina .fecha { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(11, 31, 56, 0.6); }
.cabecera-pagina .etiqueta-hero { color: rgba(11, 31, 56, 0.72); }

.legal { display: flex; justify-content: center; padding: 88px 24px 112px; }
.legal-texto { width: min(703px, 100%); color: var(--texto-2); font-size: 16px; line-height: 26px; }
.legal-texto > p:first-child { font-family: var(--ui); font-size: 19px; line-height: 30px; color: var(--tinta); }
.legal-texto h2 { margin: 48px 0 12px; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -0.015em; color: var(--tinta); scroll-margin-top: 24px; }
.legal-texto h2 .num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: var(--marca); margin-right: 12px; vertical-align: 3px; }
.legal-texto h3 { margin: 28px 0 8px; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 24px; color: var(--tinta); }
.legal-texto p { margin: 0 0 12px; }
.legal-texto ul { margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.legal-texto li { position: relative; padding-left: 20px; }
.legal-texto li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; background: var(--marca); }
.legal-texto strong { font-weight: 500; color: var(--tinta); }
.legal-texto a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.legal-texto a:hover { text-decoration-thickness: 2px; }
.legal-texto .pendiente { background: #FFF3C4; color: #6B4E00; border-radius: 4px; padding: 1px 6px; }
.tabla { margin: 8px 0 20px; border: 1px solid var(--linea-fuerte); border-radius: 12px; overflow: hidden; }
.tabla table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 23px; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(11, 31, 56, 0.6); background: var(--tinte); }
.tabla td:first-child { color: var(--tinta); font-weight: 500; width: 30%; }
.ficha { margin: 8px 0 20px; display: grid; grid-template-columns: 180px 1fr; border: 1px solid var(--linea-fuerte); border-radius: 12px; overflow: hidden; }
.ficha dt, .ficha dd { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.ficha dt { font-family: var(--mono); font-size: 12px; line-height: 23px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(11, 31, 56, 0.6); background: var(--tinte); }
.ficha dd { color: var(--tinta); }
.ficha dt:last-of-type, .ficha dd:last-of-type { border-bottom: 0; }
.legal-indice { margin: 28px 0 8px; padding: 20px 24px; border-radius: 12px; background: var(--tinte); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 15px; line-height: 22px; }
.legal-indice a { color: var(--tinta); text-decoration: none; }
.legal-indice a:hover { color: var(--marca); }
.legal-indice span { font-family: var(--mono); font-size: 12px; color: var(--marca); margin-right: 8px; }

.pagina-404 .cielo { min-height: 100vh; min-height: 100svh; padding-bottom: 72px; }
.error-404 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 48px 24px 24px; text-align: center; }
.error-404 .numero { font-family: var(--mono); font-size: 14px; letter-spacing: 0.2em; color: rgba(11, 31, 56, 0.6); }
.error-404 h1 { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 66px; letter-spacing: -0.03em; }
.error-404 p { max-width: 460px; font-family: var(--ui); font-size: 18px; line-height: 28px; color: var(--tinta); }
.error-404 .botones { margin-top: 12px; justify-content: center; }
.error-404 .nube-perdida { width: 96px; height: 96px; animation: flota 5s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(11, 31, 56, 0.18)); }
@keyframes flota { 50% { transform: translateY(-10px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .error-404 .nube-perdida { animation: none; } }

@media (max-width: 860px) {
  .cielo-corto { padding-bottom: 48px; }
  .cabecera-pagina { padding-top: 40px; }
  .cabecera-pagina h1 { font-size: 34px; line-height: 38px; }
  .legal { padding: 56px 20px 72px; }
  .legal-texto > p:first-child { font-size: 17px; line-height: 27px; }
  .legal-texto h2 { margin-top: 40px; font-size: 21px; line-height: 27px; }
  .legal-indice { grid-template-columns: 1fr; padding: 16px 18px; }
  .tabla { overflow-x: auto; }
  .tabla table { min-width: 520px; }
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { border-bottom: 0; padding-bottom: 2px; }
  .ficha dd { padding-top: 2px; }
  .error-404 h1 { font-size: 42px; line-height: 46px; }
}

/* ---------- El tiempo que ahorra (Intercom · Fin: «Fin outperforms every competitor. Every time.») ----------
   Rótulos «Fig» en mono, cajas de 1 px con líneas discontinuas que se apagan, rejilla 8/8 y barras punteadas con su valor en una cajita */
.tiempo { padding: 96px 39px 112px; }
.tiempo-etiqueta { display: flex; width: 100%; height: auto; padding-bottom: 16px; border-bottom: 1px solid rgba(11, 31, 56, 0.16); }
.tiempo-titulo { margin-top: 48px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 72px; letter-spacing: -0.035em; }
.tiempo-titulo span { display: block; }
.tiempo-titulo span:last-child { text-align: right; white-space: nowrap; }
.figuras { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.figura { display: flex; flex-direction: column; min-width: 0; }
.figura-pie { display: flex; padding: 0 12px 12px; font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 0.094rem; text-transform: uppercase; }
.figura-pie span:last-child { flex: 1; }
.figura-caja { position: relative; flex: 1; border: 1px solid rgba(11, 31, 56, 0.2); }
.figura-caja::before, .figura-caja::after {
  content: ""; position: absolute; left: -1px; right: -1px; height: 48px; pointer-events: none;
  border-left: 1px dashed rgba(11, 31, 56, 0.2); border-right: 1px dashed rgba(11, 31, 56, 0.2);
}
.figura-caja::before { bottom: calc(100% + 30px); -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.figura-caja::after { top: calc(100% + 2px); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* Fig 1.A: el gráfico (alto de la zona de barras: 280 px = 3 h 30 min) */
.figura-grafico .figura-caja { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 24px; padding: 32px 24px 8px 16px; }
.grafico { position: relative; height: 340px; }
.grafico-rejilla { position: absolute; left: 44px; top: 0; width: calc(100% - 44px); height: 281px; overflow: visible; }
.grafico-rejilla line { stroke: #D2D8E0; stroke-width: 1; stroke-dasharray: 8 8; }
.grafico-rejilla .eje { stroke: rgba(11, 31, 56, 0.38); stroke-dasharray: none; }
.grafico-y { position: absolute; left: 0; width: 31px; text-align: right; font-family: var(--mono); font-size: 11px; line-height: 11px; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; color: rgba(11, 31, 56, 0.6); }
.grafico-barras { position: absolute; left: 44px; right: 0; top: 0; height: 280px; display: flex; align-items: flex-end; }
.grupo { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6%; }
.pieza { position: relative; width: 36%; height: calc(var(--min) / 210 * 280px); }
.pieza.genia { height: max(3px, calc(var(--min) / 210 * 280px)); }
.columna {
  position: absolute; inset: 0; border: 1px solid rgba(11, 31, 56, 0.38); border-bottom: 0;
  background: radial-gradient(circle at 1px 1px, rgba(11, 31, 56, 0.24) 1px, transparent 1.3px) 3px 3px / 8px 8px, #F3F5F8;
  transition: clip-path 1.7s cubic-bezier(0.45, 0, 0.25, 1); transition-delay: calc(0.15s + var(--i, 0) * 0.12s);
}
.genia .columna { border-color: var(--marca); background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.5) 1px, transparent 1.3px) 3px 3px / 8px 8px, var(--marca); transition-duration: 0.35s; }
.valor {
  position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; height: 26px; padding: 0 6px;
  background: #FFFFFF; border: 1px solid rgba(11, 31, 56, 0.38);
  font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: 0.03em; white-space: nowrap; color: rgba(11, 31, 56, 0.6);
  transition: opacity 0.35s var(--suave), transform 0.35s var(--suave); transition-delay: calc(1.75s + var(--i, 0) * 0.12s);
}
.genia .valor { top: auto; bottom: calc(100% + 6px); border-color: var(--marca); color: rgba(11, 31, 56, 0.85); transition-delay: calc(0.45s + var(--i, 0) * 0.12s); }
.grupo-nombre { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(11, 31, 56, 0.6); }
.js .grafico .columna { clip-path: inset(100% 0 0 0); }
.js .grafico .valor { opacity: 0; transform: translateY(4px); }
.js .grafico.en-marcha .columna { clip-path: inset(0); }
.js .grafico.en-marcha .valor { opacity: 1; transform: none; }
.grafico-nota { display: flex; flex-direction: column; gap: 20px; padding-top: 2px; font-size: 14px; line-height: 20px; color: var(--texto-3); }
.leyenda { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 0.094rem; text-transform: uppercase; color: var(--tinta); }
.leyenda li { display: flex; align-items: center; gap: 8px; }
.leyenda li::before { content: ""; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid rgba(11, 31, 56, 0.38); background: #F3F5F8; }
.leyenda .genia::before { border-color: var(--marca); background: var(--marca); }

/* Fig 1.B: la cifra */
.figura-dato .figura-caja { display: flex; flex-direction: column; padding: 16px 20px 20px; }
.dato-numero { font-family: var(--display); font-weight: 400; font-size: 132px; line-height: 1; letter-spacing: -0.05em; margin-left: -6px; }
.dato-numero span { font-size: 0.62em; letter-spacing: 0; margin-left: 4px; vertical-align: 0.32em; color: var(--marca); }
.dato-etiqueta { margin-top: 12px; font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 0.094rem; text-transform: uppercase; color: var(--marca); }
.dato-frase { margin-top: auto; padding-top: 32px; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.dato-frase mark { background: var(--marca); color: #FFFFFF; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dato-pie { margin-top: 20px; font-size: 14px; line-height: 20px; color: var(--texto-3); }
.tiempo-nota { margin-top: 64px; font-size: 13px; line-height: 18px; color: var(--texto-3); }

@media (prefers-reduced-motion: reduce) {
  .js .grafico .columna { clip-path: none; transition: none; }
  .js .grafico .valor { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1180px) {
  .tiempo-titulo { font-size: 60px; line-height: 62px; }
  .dato-numero { font-size: 104px; }
}
@media (max-width: 1060px) {
  .figuras { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .figura-caja::before, .figura-caja::after { display: none; }
  .dato-frase { padding-top: 24px; }
}
@media (max-width: 860px) {
  .tiempo { padding: 64px 16px 72px; }
  .tiempo-titulo { margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 0; font-size: 40px; line-height: 42px; }
  .tiempo-titulo span:last-child { text-align: left; }
  .tiempo-titulo br { display: none; }
  .figuras { margin-top: 40px; gap: 32px; }
  .figura-pie { padding: 0 0 10px; }
  .figura-grafico .figura-caja { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 12px 16px 8px; }
  .grafico-y { width: 26px; }
  .grafico-rejilla, .grafico-barras { left: 34px; }
  .grafico-rejilla { width: calc(100% - 34px); }
  .pieza { width: 38%; }
  .valor { height: 22px; padding: 0 4px; font-size: 10px; letter-spacing: 0; }
  .genia .valor { left: 50%; transform: translateX(-50%); }
  .js .grafico .genia .valor { transform: translate(-50%, 4px); }
  .js .grafico.en-marcha .genia .valor { transform: translateX(-50%); }
  .grupo-nombre { font-size: 10px; line-height: 13px; letter-spacing: 0.02em; }
  .dato-numero { font-size: 96px; }
  .dato-frase { font-size: 21px; line-height: 28px; }
  .tiempo-nota { margin-top: 32px; }
}