/* Findest — hoja de estilo de la web pública.
   Sistema "Intelligence" en base clara: blanco hueso + tarjetas blancas
   elevadas, disciplina de Apple (materiales, tipografía del sistema,
   springs, feedback instantáneo) + un acento de color reservado a
   momentos concretos. Todos los colores de texto/acento están calculados
   a mano para pasar AA (4.5:1) sobre fondo claro. Sin build, sin deps. */

:root {
  --bg:            #FAF9F6;
  --bg-elevated:   #FFFFFF;
  --text:          #1D1D1F;
  --text-2:        #56565C;
  --text-3:        #6B6B70;

  --line:          rgba(0, 0, 0, 0.09);
  --line-soft:     rgba(0, 0, 0, 0.06);
  --glass:         rgba(255, 255, 255, 0.72);
  --glass-hi:      rgba(255, 255, 255, 0.92);

  --blue:          #007AFF;
  --blue-hi:       #0064D6;
  --mint:          #147A52;
  --pink:          #C41D5D;
  --violet:        #7A1FD6;
  --amber:         #9A5B00;
  --danger:        #D70015;

  --glow-linear:   linear-gradient(100deg, #C41D5D 0%, #7A1FD6 35%, #0064D6 68%, #007A94 100%);

  --radius-sm:     14px;
  --radius:        20px;
  --radius-lg:     28px;
  --maxw:          1160px;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press:    cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm:     0 1px 2px rgba(20, 20, 25, 0.04), 0 6px 16px -10px rgba(20, 20, 25, 0.10);
  --shadow-lg:     0 4px 12px rgba(20, 20, 25, 0.05), 0 32px 70px -28px rgba(20, 20, 25, 0.16);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fondo: un único gradiente estático y contenido, no una malla de blobs. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 50% -18%, rgba(122, 31, 214, 0.06), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(0, 122, 255, 0.05), transparent 62%);
}

.shell { position: relative; z-index: 1; }

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

h1, h2, h3 {
  font-family: var(--font);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 700;
  color: var(--text);
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn, .card, .plan, .faq summary, .chip, .cloud-logo, .side-link {
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .btn-primary:active { transform: scale(0.97); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  /* Si el padre es un contenedor flex-columna (p. ej. `.hero-grid >
     div:first-child`), `inline-flex` se "blockifica" a `flex` por ser un
     flex item, y el `align-items: stretch` por defecto lo estira al ancho
     completo del contenedor — la píldora deja de ajustarse al texto y su
     fondo translúcido, casi invisible sobre el fondo de la página, se lee
     como un simple hueco en blanco encima del titular. `align-self:
     flex-start` no tiene efecto fuera de un contexto flex, así que es
     seguro dejarlo siempre puesto. */
  align-self: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 590;
  letter-spacing: 0.02em;
  color: var(--text-2);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-sm);
}

.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--glow-linear);
}

.lead { color: var(--text-2); font-size: 19px; line-height: 1.55; font-weight: 400; }

/* Texto con el acento "Intelligence" — reservado a un titular por sección. */
.grad-text {
  background: var(--glow-linear);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Visualmente oculto pero presente para lectores de pantalla — para
   encabezados de sección que agrupan contenido semánticamente (arreglando
   saltos de nivel H1→H3, etc.) sin forzar un titular visual nuevo donde
   el diseño no lo pedía. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ Skip link */

/* Oculto hasta que recibe foco por teclado (Tab desde el body) — permite
   saltar directo a <main> sin tener que pasar por todos los enlaces del
   header en cada página. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------- Navegación */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 249, 246, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.nav.scrolled { border-bottom-color: var(--line-soft); background: rgba(250, 249, 246, 0.92); }

/*
 * Logo pegado al borde izquierdo, CTA pegado al borde derecho (dos
 * elementos en el flex con justify-content:space-between — ver nota más
 * abajo sobre por qué no usar grid 1fr/auto/1fr), y los enlaces centrados
 * de verdad en el header con position:absolute + inset:0 + margin:auto
 * (no dependen del ancho de nada a cada lado). La barra ocupa todo el
 * ancho de la ventana (max-width:none aquí anula el .wrap heredado — el
 * resto del sitio sigue limitado a --maxw, solo el header va de pared a
 * pared).
 *
 * OJO: el centrado de .nav-links usaba antes `transform: translate(-50%,
 * -50%)`. Cualquier `transform` (aunque solo mueva 0px visualmente en un
 * eje) en un ANCESTRO de `.nav-dropdown-menu` crea un nuevo "containing
 * block" para elementos `position:fixed` — así que el mega-menú (fixed,
 * left:0, right:0) dejaba de posicionarse contra el viewport y pasaba a
 * posicionarse contra la caja de `.nav-links` (que solo mide lo que
 * ocupa el texto de los links, centrada en la página), quedando como una
 * tarjeta flotante compacta en vez de a todo el ancho. `inset:0` +
 * `margin:auto` + `width/height:fit-content` centra el bloque igual de
 * bien sin usar `transform` en ningún punto de la cadena de ancestros —
 * no volver a `transform` aquí sin mover el dropdown fuera de este árbol.
 */
.nav-inner {
  max-width: none;
  width: 100%;
  padding-inline: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
/* 34px: por debajo de los 40px del botón "Start for free" a propósito. A 40px
   el logo competía con el CTA en peso visual; algo más pequeño lee como marca
   y no como botón.
   La sombra es de DOS capas y va teñida de azul (rgba(0,64,148,...)), no del
   gris casi negro de antes (rgba(20,20,25,.35)): ese se leía como un aura
   oscura recortada alrededor del cuadrado — el bug que hubo que quitar. Una
   sombra del mismo tono que el objeto es lo que la hace leer como elevación.
   Capa 1 (1px, casi sin difuminar) = contacto con la superficie; capa 2
   (10px) = altura. Junto al degradado y al borde interior claro del propio
   SVG es lo que da el efecto 2.5D en vez de un PNG plano pegado. */
.brand-mark {
  width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 64, 148, 0.20))
          drop-shadow(0 4px 10px rgba(0, 64, 148, 0.16));
}

.nav-links {
  position: absolute; inset: 0; margin: auto;
  width: fit-content; height: fit-content;
  display: flex; align-items: center; gap: 24px;
}
.nav-links a { color: var(--text-2); font-size: 15px; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { font-size: 13.5px; padding: 9px 18px; }

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-burger:hover { background: var(--glass-hi); color: var(--text); }
.nav-burger:active { transform: scale(0.94); }
.nav-burger[aria-expanded="true"] { color: var(--blue-hi); border-color: rgba(0, 122, 255, 0.35); }
.nav-burger:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }

/* Grupo CTA compacta + hamburguesa, solo visible en móvil (ver media
   query). display:none aquí (no solo en el hijo) para que ni siquiera el
   contenedor cuente como ítem del flex de .nav-inner en escritorio — así
   no rompe el space-between entre .brand y .nav-cta. */
.nav-mobile-actions { display: none; }
.nav-mobile-cta { display: none; }

@media (max-width: 860px) {
  .nav-burger { display: inline-flex; }
  .nav-mobile-actions { display: flex; align-items: center; gap: 8px; }
  .nav-mobile-cta { display: inline-flex; font-size: 13px; padding: 8px 14px; }
  .nav-inner {
    display: flex; flex-wrap: wrap; height: auto; min-height: 64px; padding-block: 12px; row-gap: 4px;
  }
  .nav-links, .nav-cta { flex-basis: 100%; display: none; }

  /* Al abrirse, el panel pasa de sticky (ocupa 64px en el flujo) a fixed
     a pantalla completa: antes se quedaba con la altura de su contenido
     y dejaba ver el hero de la página por debajo. height:100dvh (no
     bottom:0) porque .nav ya lleva backdrop-filter y bottom:0 mediría
     mal si algún día un descendiente fixed se apoya en .nav como
     containing block — mismo criterio que el resto de fixed en .nav
     (ver nota de CLAUDE.md). overflow-y:auto por si el contenido no
     cabe en pantallas muy bajas; el scroll del body se bloquea desde
     app.js mientras está abierto. */
  .nav.open {
    position: fixed;
    inset: 0;
    height: 100dvh;
    overflow-y: auto;
    background: var(--bg);
  }
  /* Grid en vez del flex-wrap de arriba: con flex-wrap, cada línea
     (fila) se reparte el espacio sobrante entre sí (align-content), no
     dentro de una fila — así que un margin-top:auto en .nav-cta no
     empuja nada, porque "auto" en flex solo absorbe espacio en el eje
     principal (horizontal aquí), no entre líneas envueltas. Con grid sí
     se puede: fila 1 (auto) cabecera, fila 2 (1fr) enlaces —absorbe el
     espacio sobrante—, fila 3 (auto) idioma/entrar/crear cuenta, que
     así queda siempre pegada abajo del todo aunque la lista de enlaces
     sea corta. */
  .nav.open .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
  }
  .nav.open .nav-inner > .brand { grid-row: 1; grid-column: 1; align-self: center; }
  .nav.open .nav-inner > .nav-mobile-actions { grid-row: 1; grid-column: 2; align-self: center; }
  .nav.open .nav-links {
    grid-row: 2; grid-column: 1 / -1; align-self: start;
    position: static; inset: auto; margin: 0; width: auto; height: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    margin-top: 10px;
  }
  .nav.open .nav-links a { padding: 10px 8px; border-radius: 8px; width: 100%; }
  .nav.open .nav-links a:hover { background: rgba(0, 0, 0, 0.045); }
  .nav.open .nav-cta {
    grid-row: 3; grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    margin-top: 12px; padding-top: 14px; padding-bottom: 12px; border-top: 1px solid var(--line);
  }
  .nav.open .nav-cta .lang-switch { align-self: flex-start; }
  .nav.open .nav-cta .lang-menu { left: 0; right: auto; }
}

/* --------------------------------------------------------- Selector de idioma */

.lang-switch { position: relative; display: inline-flex; }

.lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.lang-trigger:hover { background: var(--glass-hi); color: var(--text); border-color: rgba(0, 0, 0, 0.16); }
.lang-trigger:active { transform: scale(0.94); }
.lang-trigger[aria-expanded="true"] { color: var(--blue-hi); border-color: rgba(0, 122, 255, 0.35); }
.lang-trigger:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Opaco del todo, no var(--glass-hi): a 0.92 de alpha, con blur+saturate
     encima, el texto de detrás se colaba por los bordes de la burbuja y
     se leía "sucio" en vez de una tarjeta flotante limpia — el mismo
     problema que ya se documentó una vez para el panel del mega-menú
     (ver comentario en .nav-dropdown-menu, más abajo). */
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  z-index: 80;
  animation: langMenuIn 0.16s var(--ease-out);
}
@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }

.lang-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text);
  font-size: 13.5px;
  transition: background 0.15s;
}
.lang-menu-item:hover { background: rgba(0, 0, 0, 0.045); }
.lang-menu-item.current { font-weight: 590; color: var(--blue-hi); }
.lang-menu-item svg { flex: none; }

/* --------------------------------------------------- Desplegable "Funciones" */

.nav-dropdown { position: relative; display: inline-flex; }

.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0;
  color: var(--text-2); font-size: 15px; font-family: inherit; cursor: pointer;
  transition: color 0.2s;
}
.nav-dropdown-trigger:hover { color: var(--text); }
.nav-dropdown-trigger svg { transition: transform 0.2s var(--ease-out); }
.nav-dropdown-trigger[aria-expanded="true"] { color: var(--text); }
.nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Pestañas "bocadillo": cada ítem de nivel superior (los triggers de
   desplegable Y los enlaces sueltos como Precios/Desarrolladores) lleva un
   fondo de píldora que solo aparece en hover/abierto — el mismo lenguaje
   que el selector de pestañas de producto de Notion, en vez del texto
   suelto de antes. Se añade como clase adicional sobre el elemento que ya
   existía (.nav-dropdown-trigger o el <a> suelto), no lo sustituye. */
.nav-pill {
  padding: 8px 13px;
  border-radius: 980px;
  transition: background 0.15s, color 0.15s;
}
a.nav-pill { color: var(--text-2); font-size: 15px; }
a.nav-pill:hover { color: var(--text); background: rgba(0, 0, 0, 0.045); }
.nav-dropdown-trigger.nav-pill:hover { background: rgba(0, 0, 0, 0.045); }
.nav-dropdown-trigger.nav-pill[aria-expanded="true"] { background: rgba(0, 0, 0, 0.06); }

/*
 * Burbuja anclada al propio trigger (mismo patrón que .lang-menu: el
 * trigger vive en un `.nav-dropdown { position:relative }`, así que
 * `position:absolute` en el panel se resuelve contra ESE ancestro, no
 * contra el viewport). Se cambió desde un panel a todo el ancho de la
 * ventana (position:fixed; left/right:0) porque el usuario lo pidió
 * explícitamente más pequeño, tipo "bocadillo" — tarjeta compacta que
 * cuelga bajo el botón, no una cortina de pared a pared. Como ya no hay
 * ningún fixed dentro de .nav, la nota histórica sobre `transform` en un
 * ancestro rompiendo `position:fixed` (ver `.nav-inner` arriba) deja de
 * aplicar a este panel — sigue aplicando a `.nav-links`, que es la que
 * usa esa técnica de centrado.
 */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  max-width: min(640px, calc(100vw - 64px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Opaco del todo. var(--glass-hi) (0.92 de alpha) con blur+saturate
     encima se veía "sucio" en una tarjeta pequeña flotando sobre
     contenido variado (texto del hero, imágenes) — el mismo problema
     que ya se documentó una vez para el panel a todo el ancho (ver
     historial), reintroducido sin querer al pasar a burbuja. Con alpha
     1 no hay nada que desenfocar detrás, así que el backdrop-filter
     también sobra. */
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  z-index: 80;
  animation: navMegaIn 0.16s var(--ease-out);
}
@keyframes navMegaIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .nav-dropdown-menu { animation: none; } }

.nav-mega {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 20px 22px;
}
.nav-mega-cols { display: flex; gap: 48px; }
.nav-mega-col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 190px; }

/* Desplegable "Conexiones": una sola categoría con 4 ítems no llenaba el
   mismo panel a todo lo ancho que usa "Funciones" (3 categorías reales) —
   se quedaba una sola columna flotando con más de la mitad del panel en
   blanco a la derecha, no una decisión de diseño sino contenido que no
   llenaba el molde. En vez de mantener el mega-menú a página completa solo
   para esto, los 4 ítems pasan a un grid de 2 columnas que ocupa el ancho
   real disponible. `.nav-mega-cols-grid` se combina con `.nav-mega-cols`
   (no la sustituye) para heredar todo lo demás del panel — el propio orden
   en la hoja de estilos (después) es lo que hace ganar `display:grid` sobre
   el `display:flex` de la regla base, misma especificidad. Mobile-first:
   1 columna por defecto (el drawer móvil no tiene ancho para 2), 2 columnas
   solo desde el breakpoint de escritorio. */
.nav-mega-cols-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
}
.nav-mega-label-span { grid-column: 1 / -1; margin-bottom: -4px; }
@media (min-width: 861px) {
  .nav-mega-cols-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); column-gap: 26px; }
}

.nav-mega-label {
  font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: -4px;
}

/* Todos los ítems del mega-menú al mismo tamaño y peso (antes había una
   variante .featured más grande/negrita que el resto dentro de la misma
   columna, sin ningún criterio visible para el usuario) — título +
   descripción en texto plano debajo, no un enlace aparte, siguiendo el
   patrón del menú móvil de Notion. El icono de marca es opcional (solo
   lo llevan los ítems de "Conexiones"): si el enlace no lo incluye, la
   fila queda como texto solo. */
.nav-mega-item { display: flex; align-items: flex-start; gap: 10px; transition: opacity 0.15s; }
.nav-mega-item:hover { opacity: 0.68; }
.nav-mega-item-icon {
  flex: none; width: 30px; height: 30px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.035);
}
.nav-mega-item-text { display: flex; flex-direction: column; gap: 2px; }
.nav-mega-item-title { font-size: 14.5px; font-weight: 630; letter-spacing: -0.01em; color: var(--text); }
.nav-mega-item-desc { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }

/* Desplegable "Producto": los 5 ítems (antes 3 columnas de texto: Automation/
   Intelligence/Trust) pasan a tarjetas con icono — mismo contenido, "más
   cuadritos" en vez de una lista. Mobile-first: 1 columna en el drawer
   móvil, 2 en escritorio (ancho reducido a propósito: la burbuja ya no
   estira de pared a pared, así que 2 columnas compactas caben mejor que 3
   anchas dentro de una tarjeta flotante). */
.nav-mega-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 380px;
  max-width: 100%;
}
@media (min-width: 861px) {
  .nav-mega-cards { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
.nav-mega-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.015);
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease-out);
}
.nav-mega-card:hover { background: var(--glass-hi); border-color: var(--line); transform: translateY(-1px); }
.nav-mega-card-icon {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
}
.nav-mega-card-title { font-size: 14px; font-weight: 630; letter-spacing: -0.01em; color: var(--text); }
.nav-mega-card-desc { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
@media (max-width: 860px) { .nav-mega-cards { width: auto; } }

.nav-mega-foot {
  display: block;
  margin: 8px 0 0;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; font-weight: 560; color: var(--blue-hi);
}

.nav-link-badge { display: inline-flex; align-items: center; gap: 6px; }
.nav-badge-new {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.12);
  color: var(--blue-hi);
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.02em;
}

@media (max-width: 860px) {
  .nav-dropdown { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .nav-dropdown-trigger { justify-content: space-between; padding: 10px 8px; width: 100%; }
  .nav-dropdown-menu {
    position: static; transform: none; width: auto; margin: 2px 0 4px 8px;
    padding: 4px 0 0;
    box-shadow: none; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    animation: none;
  }
  .nav-mega { flex-direction: column; gap: 18px; padding: 0; }
  .nav-mega-foot { margin: 14px 0 0; padding: 12px 0 0; }
}

/* ------------------------------------------------------------------ Botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 980px;
  font-size: 14.5px; font-weight: 590;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 100ms var(--ease-press), background 0.2s, border-color 0.2s, box-shadow 0.25s;
}

/* --blue (#007AFF) con texto blanco encima da ~4.0:1 — no pasa el 4.5:1
   que exige WCAG AA para texto normal. --blue-hi (#0064D6) sí pasa
   (~5.3:1), así que es el fondo por defecto del botón, no solo el de
   :hover como antes; el :hover pasa a un tono aún más oscuro para no
   perder el feedback de presión. */
.btn-primary {
  background: var(--blue-hi);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 22px -10px rgba(0, 100, 214, 0.55);
}
.btn-primary:hover { background: #004FAD; box-shadow: 0 10px 26px -8px rgba(0, 100, 214, 0.65); }

.btn-ghost {
  background: var(--glass);
  border-color: var(--line);
  color: var(--text);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.btn-ghost:hover { background: var(--glass-hi); }

.btn-lg { padding: 14px 26px; font-size: 15.5px; }

/* Triángulo de "reproducir" junto al texto de un botón ghost — el propio
   .btn ya trae gap:8px entre hijos flex, así que el icono solo necesita
   su círculo. */
.btn-play-icon {
  flex: none;
  width: 20px; height: 20px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  box-sizing: content-box;
}

/* -------------------------------------------------------------------- Héroe */

.hero { padding: 96px 0 60px; position: relative; }
@media (max-width: 900px) { .hero { padding: 60px 0 36px; } }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 56px;
  align-items: stretch;
}
.hero-grid > div:first-child { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero h1 {
  font-size: clamp(2.4rem, 5.1vw, 4.15rem);
  letter-spacing: -0.028em;
  margin: 0 0 18px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-note {
  margin-top: 20px; font-size: 13.5px; color: var(--text-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero-note svg { flex: none; color: var(--mint); }

/* -------------------------------------- Héroe de portada: centrado + demo */

.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-center h1 { max-width: 920px; }
.hero-center .lead { max-width: 640px; margin: 0 auto; }
.hero-center .hero-actions, .hero-center .hero-note { justify-content: center; }

/* Palabra resaltada dentro del H1, en vez del degradado: fondo píldora +
   punto de acento, el texto se queda del mismo color que el resto del
   titular (unidades em para escalar junto al clamp() del h1). */
.h1-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.24em;
  padding: 0.05em 0.44em 0.13em;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
}
.h1-pill-dot { width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--blue); flex: none; }

/* Sin `max-width` propio a propósito: el contenedor es hijo de `.wrap`, así que
   `width:100%` ya lo iguala al ancho de contenido de --maxw menos el padding
   lateral — exactamente el mismo ancho que el resto de secciones de la página.
   Poner aquí un valor fijo (antes 980px) lo dejaba más estrecho que todo lo
   demás y rompía la alineación vertical con el titular y los apartados de
   abajo. */
.hero-demo {
  width: 100%;
  margin: 56px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  /* var(--shadow-lg) por sí sola queda casi invisible aquí: es una sombra muy
     difusa (32px de blur) pensada para tarjetas pequeñas, y sobre un panel de
     ~1100px de ancho se diluye en el fondo. Se añade una capa corta y más
     marcada (8px de blur, offset pequeño) delante de las dos de --shadow-lg,
     que sigue aportando la caída larga y suave por debajo. */
  box-shadow: 0 2px 8px rgba(20, 20, 25, 0.10), var(--shadow-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .hero-demo { margin-top: 36px; } }

/* El vídeo demo ya trae su propia ventana redondeada sobre un fondo oscuro,
   así que el marco de navegador falso que había aquí (barra + puntos + pastilla
   de URL) sería un chrome dentro de otro chrome. El contenedor se queda solo
   con las esquinas redondeadas y la sombra, y el vídeo ocupa todo. */
.hero-demo-body {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #14103a; /* del mismo tono que el fondo del vídeo: evita un flash
                          claro entre que carga el póster y arranca el vídeo */
}
.hero-demo-body video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------- Visual "Findest + conexión" */

.integration-visual {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  height: 100%; min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.integration-badge {
  flex: none; width: 92px; height: 92px;
  display: grid; place-items: center;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.integration-badge svg { width: 42px; height: 42px; }
.integration-plus { flex: none; font-size: 26px; font-weight: 300; color: var(--text-3); }
@media (max-width: 980px) { .integration-visual { min-height: 220px; } }

/* --------------------------------------------------- Diagrama del pipeline */

.pipeline {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4px 4px 4px 26px;
}

.pipeline-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.pipeline-head .pill { width: 10px; height: 10px; border-radius: 50%; background: rgba(29,29,31,.14); }
.pipeline-head .label { margin-left: 8px; font-size: 12.5px; color: var(--text-3); font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.pipeline-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.stage { display: grid; grid-template-columns: 40px 1fr; gap: 15px; position: relative; }
.stage + .stage { margin-top: 6px; }

.stage-rail { position: relative; display: flex; flex-direction: column; align-items: center; }

.stage-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-2);
  position: relative; z-index: 2;
  transition: border-color 0.4s, box-shadow 0.4s, color 0.4s, background 0.4s;
}
.stage.is-active .stage-icon {
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: 0 0 0 5px rgba(0, 122, 255, 0.1);
  background: rgba(0, 122, 255, 0.08);
  color: var(--blue-hi);
}
.stage:last-child.is-active .stage-icon {
  border-color: rgba(20, 122, 82, 0.4);
  box-shadow: 0 0 0 5px rgba(20, 122, 82, 0.1);
  background: rgba(20, 122, 82, 0.08);
  color: var(--mint);
}

.stage-line { flex: 1; width: 2px; background: var(--line); margin: 6px 0; position: relative; overflow: hidden; border-radius: 2px; }
.stage-line::after {
  content: ""; position: absolute; inset-inline: 0; height: 40%;
  background: linear-gradient(180deg, transparent, var(--blue-hi), transparent);
  transform: translateY(-120%);
}
.stage.is-active .stage-line::after { animation: flow 1.1s var(--ease-out) forwards; }
@keyframes flow { to { transform: translateY(260%); } }

.stage-body { padding-bottom: 22px; min-width: 0; }
.stage:last-child .stage-body { padding-bottom: 0; }

.stage-title { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; color: var(--text); }
.stage-desc { font-size: 13.5px; color: var(--text-2); }

.stage-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 11px;
  border-radius: 8px; font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.015);
  color: var(--text-2);
  opacity: 0; transform: translateY(5px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.stage.is-active .stage-chip { opacity: 1; transform: none; }
.stage-chip .ok { color: var(--mint); }
.stage-chip strong { color: var(--text); font-weight: 590; }

/* -------------------------------------------------------- Tira de proveedores */

.cloud-strip { padding: 38px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cloud-strip-inner { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: space-between; }
.cloud-strip-label { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.cloud-logos { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.cloud-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 14.5px; font-weight: 550; transition: color 0.25s, transform 100ms var(--ease-press); }
.cloud-logo svg { color: var(--text-2); transition: color 0.25s; }
.cloud-logo:hover { color: var(--text); }
.cloud-logo:hover svg { color: var(--blue-hi); }
.cloud-logo:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- Secciones */

section { padding: 84px 0; position: relative; }
@media (max-width: 760px) { section { padding: 58px 0; } }

.section-head { max-width: 620px; margin-bottom: 46px; }
.section-head h2 { font-size: clamp(2rem, 3.9vw, 3rem); margin: 16px 0 14px; letter-spacing: -0.028em; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-soft), transparent); }

/* Tarjetas */

.cards { display: grid; gap: 16px; }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .cards.c3, .cards.c2 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-hi);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-sm);
  padding: 26px;
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.card:hover { border-color: rgba(0,0,0,0.16); transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.card-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 16px;
  border: 1px solid var(--line);
  background: rgba(0, 122, 255, 0.06);
  color: var(--blue-hi);
}
.card h3 { font-size: 16.5px; margin-bottom: 8px; font-weight: 620; letter-spacing: -0.015em; }
.card p { color: var(--text-2); font-size: 14.5px; }

/* Pasos numerados */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: 24px; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12.5px; font-weight: 600;
  color: var(--blue-hi);
  letter-spacing: 0.06em;
}
.step h3 { font-size: 17px; margin: 11px 0 8px; font-weight: 620; letter-spacing: -0.015em; }
.step p { color: var(--text-2); font-size: 14.5px; }
.step .bar { position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--blue); }

/* Cómo funciona: timeline alterna visual/texto, con maquetas reales de UI. */

.how-timeline { display: grid; gap: 72px; margin-top: 12px; }

.how-step { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.how-step.reverse { grid-template-columns: 1fr 1.05fr; }
.how-step.reverse .how-step-visual { order: 2; }
.how-step.reverse .how-step-text { order: 1; }
@media (max-width: 900px) {
  .how-step, .how-step.reverse { grid-template-columns: 1fr; gap: 28px; }
  .how-step.reverse .how-step-visual, .how-step.reverse .how-step-text { order: 0; }
}

.how-step-num {
  display: inline-block;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  background: var(--glow-linear);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 10px;
}
.how-step-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); letter-spacing: -0.025em; margin-bottom: 12px; }
.how-step-text p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.how-step-text ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.how-step-text li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--text); }
.how-step-text li svg { flex: none; color: var(--mint); }

.how-step-visual {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass-hi);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

/* Maqueta: tarjetas de conexión */
.mock-connect { display: grid; gap: 9px; }
.mock-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line-soft); background: rgba(0,0,0,0.015);
  font-size: 13.5px; font-weight: 550; color: var(--text);
}
.mock-row svg { flex: none; color: var(--text-2); }
.mock-status {
  margin-left: auto; font-size: 11.5px; font-weight: 650;
  padding: 4px 10px; border-radius: 999px;
}
.mock-status.ok { color: var(--mint); background: rgba(20,122,82,0.1); }
.mock-status.pending { color: var(--text-3); background: rgba(0,0,0,0.04); }

/* Maqueta: reenvío de correo */
.mock-forward { display: grid; gap: 12px; }
.mock-mail {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--line-soft); background: rgba(0,0,0,0.015);
  font-size: 13px;
}
.mock-mail-icon {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: rgba(0,122,255,0.08); color: var(--blue-hi);
}
.mock-mail-body { min-width: 0; }
.mock-mail-from { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-mail-to { color: var(--text-3); font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; margin-top: 2px; }
.mock-arrow { display: flex; justify-content: center; color: var(--text-3); }
.mock-done {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: var(--mint);
  padding: 9px; border-radius: 10px; background: rgba(20,122,82,0.07);
}

/* Selector de nube compacto (maqueta) */
.mini-cloud-switch { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mini-cloud-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 560;
  border: 1px solid var(--line); color: var(--text-2); background: rgba(0,0,0,0.015);
}
.mini-cloud-pill.active { border-color: rgba(0,122,255,0.4); color: var(--blue-hi); background: rgba(0,122,255,0.08); }

/* Navegador de carpetas en miniatura (mismo lenguaje que el Finder del panel) */
.mini-finder { display: flex; gap: 1px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); overflow: hidden; }
.mini-finder-col { flex: 1 1 0; min-width: 0; background: var(--bg-elevated); }
.mini-finder-head {
  padding: 8px 11px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--line-soft);
}
.mini-finder-row {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-finder-row.active { background: rgba(0,122,255,0.08); color: var(--blue-hi); font-weight: 560; }
.mini-finder-row.muted { color: var(--text-3); }
.mini-finder-row .chev { margin-left: auto; color: var(--text-3); }

/* Constructor de reglas (maqueta) */

.rule-demo {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.rule-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.rule-row + .rule-row { margin-top: 16px; }

.rule-word { color: var(--text-3); font-size: 14px; }

.token {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.02);
  font-size: 14px; font-weight: 540;
  color: var(--text);
}
.token.type   { border-color: rgba(154, 91, 0, 0.35);  color: var(--amber); background: rgba(154, 91, 0, 0.08); }
.token.folder { border-color: rgba(20, 122, 82, 0.35);  color: var(--mint);  background: rgba(20, 122, 82, 0.08); }
.token.drive  { border-color: rgba(0, 122, 255, 0.35);  color: var(--blue-hi); background: rgba(0, 122, 255, 0.08); }

/* La descripción en lenguaje natural de una regla: es prosa que escribe el
   usuario, no un token de un constructor de filtros, así que se lee como una
   cita y no como un campo de formulario. */
.rule-prose {
  margin: 14px 0 0; padding: 14px 16px;
  border-left: 2px solid var(--blue);
  border-radius: 0 10px 10px 0;
  background: rgba(0, 122, 255, 0.05);
  font-size: 15px; line-height: 1.5; color: var(--text);
}

.rule-out {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.rule-out code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; color: var(--text);
  padding: 8px 13px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.035); border: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------- Código (API) */

.code-sample {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #14161c;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.code-sample-head {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.code-sample-head span {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16);
}
.code-sample-head .label {
  margin-left: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.45);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.code-sample pre {
  margin: 0; padding: 16px 18px 20px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.7;
  color: #e3e6ee;
}
.code-sample .c-key { color: #7fb3ff; }
.code-sample .c-str { color: #9ee6a8; }
.code-sample .c-mut { color: rgba(255, 255, 255, 0.4); }

code:not(.code-sample code) {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.045);
  border: 1px solid var(--line-soft);
}

/* Reglas — demo interactivo */
/* Antes era una sola tarjeta blanca con tres filas de formulario y muchísimo
   aire — la sección se sentía vacía comparada con el resto de la página, y
   encima enseñaba un mecanismo que el producto ya no tiene (categorías fijas
   invoice/payslip/contract + interruptor de remitente). Las reglas reales son
   una frase en lenguaje natural que evalúa la IA — ver migraciones 0018/0019.
   Este rediseño arregla las dos cosas a la vez: cuenta la misma historia en
   dos tarjetas (la regla que escribes / lo que aterriza), con el lenguaje
   visual ya validado en las miniaturas de YouTube (icono de doc coloreado,
   chip de nube con marca, tick verde, insignia "Matched by AI"). */

.rule-play { width: 100%; }

.rd-chips {
  display: flex; justify-content: center; gap: 4px; padding: 4px;
  width: fit-content; margin: 0 auto 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.rd-chip {
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; font-weight: 590; color: var(--text-3);
  transition: background 0.18s, color 0.18s;
}
.rd-chip:hover { color: var(--text-2); }
.rd-chip.active { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-sm); }
.rd-chip:active { transform: scale(0.97); }

.rd-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }

.rd-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elevated); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.rd-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; font-weight: 640; color: var(--text-3); letter-spacing: 0.01em;
}
.rd-card-body { padding: 20px 18px; }

/* -- tarjeta izquierda: la regla ------------------------------------- */
.rd-rule-card { height: 100%; }
.rd-title { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 11px; }
.rd-desc {
  background: rgba(0, 0, 0, 0.022); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 13px 14px; font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.rd-cue { color: var(--text-3); }
.rd-dest { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.rd-dest-label { display: block; font-size: 13px; font-weight: 590; color: var(--text-2); margin-bottom: 10px; }

.rd-cloud-pills {
  display: inline-flex; gap: 4px; padding: 4px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.rd-cloud-pill {
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 590; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 0.18s, color 0.18s;
}
.rd-cloud-pill:hover { color: var(--text-2); }
.rd-cloud-pill.active { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-sm); }
.rd-cloud-pill:active { transform: scale(0.97); }
.rd-cloud-pill svg { flex: none; }

/* -- tarjeta derecha: la escena --------------------------------------- */
.rd-scene { display: flex; flex-direction: column; }

.rd-inbox-card { opacity: 0.82; }
.rd-inbox-card .rd-card-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }

.rd-flow {
  position: relative; height: 26px; margin-left: 34px;
  border-left: 1.5px dashed var(--line);
}
.rd-flow-dot {
  position: absolute; left: -3px; top: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft, rgba(0,122,255,.14));
  animation: rdFlow 2.2s ease-in-out infinite;
}
@keyframes rdFlow {
  0%   { top: 0;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 20px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rd-flow-dot { animation: none; opacity: 1; top: 10px; } }

.rd-ai-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 640; color: var(--blue);
}

.rd-doc { display: flex; align-items: center; gap: 10px; }
.rd-doc-ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.045); color: var(--text-3);
}
.rd-doc-ic-done { background: rgba(20, 122, 82, 0.12); color: var(--mint); }
.rd-doc-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-doc-name {
  display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-doc-sub {
  display: block; font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-doc-sub strong { color: var(--text-2); font-weight: 590; }
.rd-tick {
  flex: none; width: 19px; height: 19px; border-radius: 50%; margin-left: auto;
  background: var(--mint); display: grid; place-items: center;
}

.rd-filed-card { margin-top: 12px; border-color: rgba(0,122,255,0.18); }
.rd-filed-card .rd-card-body { padding: 15px 18px; }

.rd-doc-name.rd-updated, .rd-doc-sub.rd-updated { animation: rdUpdate 0.32s var(--ease-out); }
.rd-title.rd-updated, .rd-desc.rd-updated { animation: rdUpdate 0.32s var(--ease-out); }
@keyframes rdUpdate { from { opacity: 0; transform: translateY(4px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .rd-doc-name.rd-updated, .rd-doc-sub.rd-updated, .rd-title.rd-updated, .rd-desc.rd-updated { animation: none; }
}

@media (max-width: 860px) {
  .rd-grid { grid-template-columns: 1fr; }
  .rd-flow { margin-left: 24px; }
}
@media (max-width: 640px) {
  .rd-chips { flex-wrap: wrap; width: auto; }
  .rd-card-body { padding: 16px 14px; }
  .rd-title { font-size: 21px; }
}

/* Seguridad */

.trust-list { display: grid; gap: 18px; }
.trust-item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.trust-item svg { color: var(--mint); margin-top: 3px; }
.trust-item h3 { margin: 0 0 5px; font-size: 15px; font-weight: 610; letter-spacing: -0.01em; color: var(--text); }
.trust-item p { color: var(--text-2); font-size: 14.5px; }

/* Precios */

.pricing-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-hi); margin-top: 8px; }
.pricing-toggle button {
  border: none; background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 570;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s, background 0.25s;
}
.pricing-toggle button.active { background: var(--blue); color: #fff; }
.pricing-toggle .save { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(20,122,82,0.12); color: var(--mint); }
.pricing-toggle button.active .save { background: rgba(255,255,255,0.24); color: #fff; }

.plans .a { display: none; }
.plans[data-cycle="anual"] .m { display: none; }
.plans[data-cycle="anual"] .a { display: inline; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin-top: 34px; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; } }

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass-hi);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--shadow-sm);
  padding: 28px 24px; display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan.featured {
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
}
.plan.featured::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  padding: 1.4px;
  background: var(--glow-linear);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.plan-tag {
  position: absolute; top: -11px; left: 24px;
  font-size: 11px; font-weight: 660; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--glow-linear);
  color: #fff;
}
.plan h3 { font-size: 15px; font-weight: 610; color: var(--text-2); margin-bottom: 14px; }
.price { font-size: 3.4rem; font-weight: 700; letter-spacing: -0.04em; color: var(--text); }
/* Bug real: `.price span` sin excluir nada pisaba TAMBIÉN a `.m`/`.a` (los
   spans que llevan el número grande, "€9"/"€7.50") porque ambos son
   <span> — el número entero de precio salía a 18px en vez de heredar los
   3.4rem/700 de `.price`. Solo el span suelto de la unidad (" /mo") debía
   ser pequeño. */
.price span:not(.m):not(.a) { font-size: 18px; font-weight: 480; color: var(--text-3); letter-spacing: 0; }
.price-note { font-size: 14px; color: var(--text-3); margin-top: 8px; min-height: 19px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 11px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; color: var(--text-2); align-items: start; }
.plan li svg { color: var(--mint); margin-top: 4px; }
.plan .btn { margin-top: auto; width: 100%; }

/* FAQ */

.faq { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-size: 16px; font-weight: 560; letter-spacing: -0.01em;
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-hi); }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .answer { color: var(--text-2); font-size: 15px; padding: 0 0 22px; max-width: 780px; }

/* Tabla comparativa de planes */

.plan-compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass-hi); box-shadow: var(--shadow-sm); }
.plan-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.plan-compare-table th, .plan-compare-table td {
  padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.plan-compare-table tr:last-child td { border-bottom: none; }
.plan-compare-table thead th {
  color: var(--text-2); font-weight: 640; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--line);
}
.plan-compare-label {
  text-align: left !important; color: var(--text); font-weight: 550;
  white-space: normal;
}
.plan-compare-table td.popular, .plan-compare-table th.popular {
  background: rgba(0, 122, 255, 0.05); color: var(--blue-hi); font-weight: 600;
}

/* CTA final */

.cta-final {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 56px 34px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative; isolation: isolate; overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(560px 260px at 50% 0%, rgba(122, 31, 214, 0.08), transparent 70%);
}
.cta-final h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 14px; letter-spacing: -0.028em; }

/* Pie */

footer { padding: 48px 0 42px; border-top: 1px solid var(--line-soft); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot a, .foot p { color: var(--text-3); font-size: 13.5px; }
.foot a:hover { color: var(--text); }

/* Revelado al hacer scroll: materializa (blur+escala+opacidad), no solo fade. */

.reveal {
  opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(6px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; filter: blur(0); }

.reveal-scale { opacity: 0; transform: scale(0.94); filter: blur(8px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
.reveal-scale.visible { opacity: 1; transform: none; filter: blur(0); }

.reveal-left { opacity: 0; transform: translateX(-22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right { opacity: 0; transform: translateX(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal-right.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .reveal-left, .reveal-right { opacity: 1; transform: none; filter: none; transition: none; }
  .stage-line::after, .stage-chip { animation: none !important; transition: none !important; opacity: 1; }
}

/* Menos transparencia si el usuario lo pide: cristal más sólido, sin desenfoque. */
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav-dropdown-menu, .card, .pipeline, .rule-demo, .plan, .cta-final, .btn-ghost, .eyebrow {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--bg-elevated);
  }
}

/* Más contraste si el usuario lo pide: bordes definidos, superficies sólidas. */
@media (prefers-contrast: more) {
  .card, .panel, .pipeline, .rule-demo, .plan { border-width: 1.5px; border-color: var(--text-3); }
}

/* Páginas legales: prosa continua (Términos, Privacidad, Reembolsos). */
.legal { max-width: 720px; }
.legal .updated { color: var(--text-3); font-size: 13.5px; margin-bottom: 40px; }
.legal h2 { font-size: 22px; letter-spacing: -0.01em; margin: 48px 0 14px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 16.5px; margin: 28px 0 10px; color: var(--text); }
.legal p { color: var(--text-2); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.legal ul, .legal ol { color: var(--text-2); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--blue-hi); text-decoration: underline; }
.legal strong { color: var(--text); font-weight: 590; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text-2); }
.legal th { color: var(--text); font-weight: 590; }

/* ------------------------------------------------------------------- Blog */

.blog-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }

.blog-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-card-tag {
  display: inline-flex; align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  color: var(--blue-hi);
  font-size: 11px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
}
.blog-card h2 { font-size: 19px; letter-spacing: -0.01em; margin: 2px 0 0; }
.blog-card p { color: var(--text-2); font-size: 14.5px; line-height: 1.6; margin: 0; }
.blog-card-meta { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.blog-card-read { font-size: 13.5px; font-weight: 600; color: var(--blue-hi); margin-top: 6px; }

/* Cabecera de un post: mismo eyebrow+h1 que el resto del sitio, más una
   fila de metadatos (fecha, tiempo de lectura) debajo del titular. El
   cuerpo del artículo reutiliza `.legal` (prosa continua con h2/h3/p/ul) —
   visualmente es la misma tipografía que Términos/Privacidad, el nombre de
   la clase no importa para un post de blog. */
.blog-post-meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-3); font-size: 13.5px; margin: 18px 0 0;
}
.blog-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-3); font-size: 13.5px; font-weight: 560;
  margin-bottom: 18px;
}
.blog-back:hover { color: var(--blue-hi); }

/* ═══════════════════════════════════════════════════════════════════════
   Módulos propios de cada página de Conexiones.

   Las tres páginas de nube (Drive/OneDrive/Dropbox) compartían el MISMO
   esqueleto y ~80% del mismo texto, cambiando solo el nombre del proveedor
   — se leían como una plantilla rellenada tres veces, y para Google eran
   casi contenido duplicado. Cada una tiene ahora una sección con layout
   propio que solo tiene sentido para ese proveedor, así que la diferencia
   se nota antes de leer una palabra.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Drive: comparación de los dos scopes de OAuth de Google ----------- */
.scope-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 820px) { .scope-compare { grid-template-columns: 1fr; } }

.scope-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--glass-hi);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.scope-card.is-rejected { background: rgba(0, 0, 0, 0.018); border-style: dashed; }
.scope-card.is-chosen   { border-color: rgba(0, 122, 255, 0.34); background: rgba(0, 122, 255, 0.04); }

.scope-verdict {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 11.5px; font-weight: 640; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.scope-card.is-rejected .scope-verdict { color: var(--text-3); background: rgba(0, 0, 0, 0.05); }
.scope-card.is-chosen   .scope-verdict { color: var(--blue-hi); background: rgba(0, 122, 255, 0.12); }

.scope-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.scope-card p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 0; }
.scope-card .scope-consequence {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--text-3);
}

/* --- OneDrive: árbol de destinos posibles dentro de Microsoft 365 ------ */
.dest-tree { border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass-hi); box-shadow: var(--shadow-sm); padding: 12px 22px 20px; }
.dest-node { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding-top: 16px; position: relative; }
.dest-node-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(0,122,255,0.06); color: var(--blue-hi); }
.dest-node-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.dest-node-desc  { font-size: 13.5px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.dest-node.depth-1 { margin-left: 26px; }
.dest-node.depth-2 { margin-left: 52px; }
/* Línea de conexión en L, como un árbol de ficheros real. */
.dest-node.depth-1::before, .dest-node.depth-2::before {
  content: ""; position: absolute; left: -18px; top: 0; bottom: 50%;
  width: 12px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 7px;
}

/* --- Dropbox: quién ve el fichero según dónde aterriza ----------------- */
.perm-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass-hi); box-shadow: var(--shadow-sm); padding: 22px;
}
.perm-row + .perm-row { margin-top: 14px; }
@media (max-width: 760px) { .perm-row { grid-template-columns: 1fr; gap: 12px; } .perm-arrow { transform: rotate(90deg); justify-self: start; } }

.perm-folder { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 560; color: var(--text); }
.perm-folder code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; }
.perm-arrow { color: var(--text-3); flex: none; }
.perm-who { font-size: 13.5px; color: var(--text-2); }
.perm-who strong { color: var(--text); font-weight: 590; }
.perm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 620; padding: 4px 10px; border-radius: 999px; margin-bottom: 7px;
}
.perm-badge.only-you { color: var(--mint); background: rgba(20, 122, 82, 0.1); }
.perm-badge.team     { color: var(--amber); background: rgba(154, 91, 0, 0.1); }

/* --------------------------------------------------------- Aviso de cookies */
.cookie-banner {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 100;
  max-width: 640px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-hi);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.cookie-banner.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: opacity 0.15s linear; transform: none; } }

.cookie-banner-text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.cookie-banner-text a { color: var(--blue-hi); text-decoration: underline; }

.cookie-banner-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cookie-banner-actions .btn { font-size: 13.5px; padding: 9px 16px; }

@media (max-width: 560px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; }
}

/* ===========================================================================
   Componentes de las subpáginas de Funciones (Reglas, Clasificación con IA,
   Conexiones, Reintentos, Seguridad).

   Cada página de Funciones responde UNA pregunta que solo tiene sentido en
   ella, y cada una tiene su propio componente protagonista — si dos páginas
   comparten el esqueleto y solo cambian el sustantivo, no hacen falta las dos
   (es justo el error que ya se corrigió una vez en las páginas de nube).
   =========================================================================== */

/* --------------------------------------------------- Candado de Seguridad */

/* Un candado real no cierra deslizando la anilla de lado: la anilla GIRA
   sobre su bisagra hasta encajar. La versión anterior hacía una traslación
   horizontal, que es la razón por la que se leía como un .png moviéndose y
   no como un mecanismo.

   La animación es un solo gesto con causa (apple-design §13): el cuerpo da
   un pulso y la luz florece EXACTAMENTE en el fotograma en que la anilla
   asienta, no antes ni después — si el pulso llega tarde se pierde la
   sensación de que una cosa provocó la otra. Un único pase al cargar, sin
   bucle: el movimiento actúa, no respira. */

.lock-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
}
.lock-stage svg {
  width: 248px; height: 248px; overflow: visible;
  /* Sombra en gris neutro, no del azul de marca: el candado tiene que leerse
     como un objeto físico elevado sobre la página, sin tocar el blanco y
     negro que pide esta pieza. Dos capas, igual que el logo: contacto + elevación. */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.16)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.14));
}
@media (max-width: 980px) { .lock-stage svg { width: 184px; height: 184px; } }

/* La anilla pivota sobre la base de su pata DERECHA, que es donde está la
   bisagra en un candado real. El giro es POSITIVO (horario en SVG): así la
   pata izquierda se levanta FUERA del cuerpo y se abre hacia la derecha.
   Con giro negativo la pata izquierda bajaba hacia dentro del cuerpo y el
   candado se leía como roto, no como abierto — se vio mirando el fotograma
   inicial, no en la reproducción a velocidad real. */
.lk-shackle {
  transform-origin: 132px 114px;
  transform: rotate(34deg);
  animation: lkClose 900ms cubic-bezier(0.3, 0.9, 0.4, 1) 260ms forwards;
}
@keyframes lkClose {
  from { transform: rotate(34deg); }
  to   { transform: rotate(0deg); }
}

/* La anilla NO rebota más allá de 0: mecánicamente está topando contra el
   cuerpo. Quien absorbe el golpe es el cuerpo, que se aplasta y se recupera
   — es más honesto físicamente y es lo que da la sensación de "clic".
   Arranca exactamente cuando la anilla asienta (260 + 900 = 1160ms). */
.lk-body {
  transform-origin: 100px 141px;
  animation: lkSeat 520ms cubic-bezier(0.22, 1, 0.36, 1) 1160ms both;
}
@keyframes lkSeat {
  0%   { transform: scale(1, 1); }
  26%  { transform: scale(1.035, 0.962); }
  62%  { transform: scale(0.992, 1.007); }
  100% { transform: scale(1, 1); }
}

/* La luz florece una vez en el encaje y se va. Mismo arranque que el pulso:
   si llegara tarde se perdería la relación de causa entre las dos cosas. */
.lk-glow {
  transform-origin: 100px 141px;
  animation: lkGlow 700ms ease-out 1160ms both;
}
@keyframes lkGlow {
  0%   { opacity: 0; transform: scale(0.7); }
  30%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.34); }
}

/* Los ojos aparecen justo después de cerrar: primero se cierra, luego te
   mira. Al revés no se entiende la secuencia. */
.lk-eyes {
  transform-origin: 100px 141px;
  animation: lkEyes 460ms var(--ease-out) 1300ms both;
}
@keyframes lkEyes {
  from { opacity: 0; transform: scale(0.84); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lk-shackle, .lk-body, .lk-glow, .lk-eyes { animation: none; }
  .lk-shackle { transform: rotate(0deg); }
  .lk-eyes { opacity: 1; }
  .lk-glow { opacity: 0; }
}

/* ------------------------------------ Panel de decisión (Clasificación IA) */

/* El protagonista de la página de clasificación: enseña que TODAS las reglas
   entran en la MISMA llamada, que es justo lo que la hace acertar. */

.decide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 900px) {
  .decide { grid-template-columns: 1fr; gap: 14px; }
  .decide-mid { transform: rotate(90deg); justify-self: center; }
}

.decide-stack { display: flex; flex-direction: column; gap: 9px; }

.decide-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  font-weight: 560;
}
.decide-rule-n {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-3);
  font-size: 11px; font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.decide-rule.is-pick {
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.10), var(--shadow-sm);
}
.decide-rule.is-pick .decide-rule-n {
  background: var(--blue); color: #fff;
}

.decide-mid {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 0 4px;
  color: var(--text-3);
}

/* La respuesta del modelo es una tarjeta, no una fila más: si se dibuja igual
   que las reglas de la izquierda parece otra opción en vez del resultado. */
.decide-answer {
  border: 1px solid rgba(0, 122, 255, 0.28);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.07), var(--shadow-sm);
  overflow: hidden;
}
.decide-answer-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 660;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--blue-hi);
  background: rgba(0, 122, 255, 0.05);
}
.decide-answer-body { padding: 15px 14px; }
.decide-answer-rule {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 620; letter-spacing: -0.01em;
}
.decide-answer-rule .decide-rule-n { background: var(--blue); color: #fff; }
.decide-answer-note {
  font-size: 12.5px; color: var(--text-3); line-height: 1.6;
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.decide-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 122, 255, 0.28);
  background: rgba(0, 122, 255, 0.08);
  color: var(--blue-hi);
  font-size: 12.5px;
  font-weight: 640;
  white-space: nowrap;
}
.decide-note { font-size: 11.5px; color: var(--text-3); text-align: center; }

/* ---------------------------- Comparación del bug (Clasificación con IA) */

/* El fallo real del `includes()` es el mejor argumento que tiene el producto
   y merece un componente propio, no un párrafo: dos columnas, antes y ahora,
   con el veredicto en grande. */

.bugfix { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .bugfix { grid-template-columns: 1fr; } }

.bugfix-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bugfix-col.is-bad { border-color: rgba(215, 0, 21, 0.22); }
.bugfix-col.is-good { border-color: rgba(20, 122, 82, 0.26); }

.bugfix-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 660;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text-3);
}
.bugfix-col.is-bad .bugfix-head { color: var(--danger); background: rgba(215, 0, 21, 0.04); }
.bugfix-col.is-good .bugfix-head { color: var(--mint); background: rgba(20, 122, 82, 0.05); }

.bugfix-body { padding: 18px 17px; display: flex; flex-direction: column; gap: 13px; flex: 1; }

.bugfix-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  padding: 12px 13px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.035);
  color: var(--text-2);
  overflow-x: auto;
}
.bugfix-code b { color: var(--text); font-weight: 660; }
.bugfix-verdict {
  font-size: 14px;
  line-height: 1.5;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-2);
}
.bugfix-verdict strong { color: var(--text); font-weight: 640; }

/* ------------------------------------------- Criba previa (Clasificación) */

.sieve { display: flex; flex-direction: column; gap: 10px; }
.sieve-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.sieve-x {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(215, 0, 21, 0.09); color: var(--danger);
}
.sieve-ok { background: rgba(20, 122, 82, 0.11); color: var(--mint); }
.sieve-tx { min-width: 0; }
.sieve-t { display: block; font-size: 14.5px; font-weight: 590; letter-spacing: -0.01em; }
.sieve-d { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }

/* ------------------------------- Fuentes vs destinos (página Conexiones) */

/* La distinción que la gente no tiene clara: por dónde ENTRAN los documentos
   y dónde se GUARDAN son dos permisos distintos con riesgos distintos. */

.flowsplit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .flowsplit { grid-template-columns: 1fr; }
  .flowsplit-arrow { transform: rotate(90deg); justify-self: center; padding: 4px 0; }
}

.flowside {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  padding: 20px 18px;
}
.flowside-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 660;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.flowside-tag i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-3);
  font-style: normal;
}
.flowside.is-in .flowside-tag { color: var(--violet); }
.flowside.is-in .flowside-tag i { background: var(--violet); }
.flowside.is-out .flowside-tag { color: var(--blue-hi); }
.flowside.is-out .flowside-tag i { background: var(--blue-hi); }

.flowside h3 { font-size: 19px; margin-bottom: 7px; letter-spacing: -0.02em; }
.flowside > p { font-size: 14px; color: var(--text-2); line-height: 1.55; }

.flowlist { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
.flowlist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  font-size: 13.5px; font-weight: 560;
}
.flowlist-item svg { flex: none; }
.flowlist-item span { color: var(--text-3); font-weight: 500; font-size: 12.5px; margin-left: auto; }

.flowsplit-arrow {
  display: grid; place-items: center;
  color: var(--text-3);
  align-self: center;
}

/* ------------------------------------ Tabla de permisos (Conexiones) */

.permgrid { display: flex; flex-direction: column; gap: 10px; }
.permcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) {
  .permcard { grid-template-columns: auto 1fr; }
  .permcard-can { grid-column: 1 / -1; }
}
.permcard-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.04);
}
.permcard-tx { min-width: 0; }
.permcard-t { display: block; font-size: 15px; font-weight: 620; letter-spacing: -0.01em; }
.permcard-d { display: block; font-size: 13px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.permcard-can {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.permchip {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(20, 122, 82, 0.10); color: var(--mint);
  white-space: nowrap;
}
.permchip.is-no { background: rgba(215, 0, 21, 0.08); color: var(--danger); }

/* --------------------------------------- Escalera de estados (Reintentos) */

/* El componente protagonista de Reintentos: un documento no está "bien o
   mal", recorre estados, y los fallos son una rama del recorrido — no un
   callejón sin salida. */

.ladder { position: relative; display: flex; flex-direction: column; gap: 0; }

.rung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 0 0 22px;
  position: relative;
}
.rung:last-child { padding-bottom: 0; }

/* La línea que une los peldaños se dibuja detrás del punto, y el último
   peldaño no la lleva para que no sobresalga por debajo. */
.rung::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: -4px;
  width: 2px;
  background: var(--line);
}
.rung:last-child::before { display: none; }

.rung-dot {
  position: relative;
  z-index: 1;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elevated);
  border: 2px solid var(--line);
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.rung.is-done .rung-dot { background: var(--mint); border-color: var(--mint); color: #fff; }
.rung.is-fail .rung-dot { background: var(--bg-elevated); border-color: var(--danger); color: var(--danger); }

.rung-body { padding-top: 2px; }
.rung-name {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: rgba(0, 0, 0, 0.045);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}
.rung-desc { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-top: 8px; }

/* Rama de fallo: cuelga del peldaño, sangrada, para que se lea como un
   desvío del camino principal y no como otro paso más. */
.rung-branch {
  margin-top: 12px;
  padding: 13px 15px;
  border-left: 2px solid rgba(215, 0, 21, 0.3);
  background: rgba(215, 0, 21, 0.035);
  border-radius: 0 11px 11px 0;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.rung-branch strong { color: var(--text); font-weight: 640; }

/* ------------------------------------- Bifurcación de fallos (Reintentos) */

.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .fork { grid-template-columns: 1fr; } }

.forkcard {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.forkcard-ic {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
}
.forkcard.is-perm .forkcard-ic { background: rgba(215, 0, 21, 0.09); color: var(--danger); }
.forkcard.is-temp .forkcard-ic { background: rgba(154, 91, 0, 0.11); color: var(--amber); }
.forkcard h3 { font-size: 18px; letter-spacing: -0.02em; }
.forkcard p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.forkcard-do {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px; font-weight: 590;
}
.forkcard.is-perm .forkcard-do { color: var(--danger); }
.forkcard.is-temp .forkcard-do { color: var(--amber); }

/* --------------------------------------------- Apretón de manos (Conexión) */

.shake { display: flex; flex-direction: column; gap: 3px; }
.shake-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.shake-step:last-child { border-bottom: none; }
.shake-who {
  font-size: 11.5px; font-weight: 640;
  letter-spacing: 0.02em;
  color: var(--text-3);
  padding-top: 3px;
  min-width: 92px;
}
.shake-what { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.shake-what strong { color: var(--text); font-weight: 620; }

/* ------------------------------------------------ Nota de honestidad */

/* Se usa para lo que NO está resuelto. Que exista un componente para esto
   es intencional: la página de seguridad pierde credibilidad si solo
   enumera aciertos. */
.candid {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(154, 91, 0, 0.035);
  padding: 22px 24px;
}
.candid-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 660;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 11px;
}
.candid p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.candid p + p { margin-top: 10px; }

/* ----------------------------------------- Pares vago/preciso (página Reglas) */

/* Enseñar a escribir una regla es lo único que esta página puede hacer y
   ninguna otra: el motor ya está explicado en Clasificación, aquí lo útil es
   la diferencia entre una descripción que funciona y una que no. */

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
  overflow: hidden;
}
.pair + .pair { margin-top: 14px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

.pair-side { background: var(--bg-elevated); padding: 16px 18px; }
.pair-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 660;
  letter-spacing: 0.03em; text-transform: uppercase;
  margin-bottom: 9px;
}
.pair-side.is-weak .pair-tag { color: var(--text-3); }
.pair-side.is-strong .pair-tag { color: var(--mint); }
.pair-quote {
  font-size: 14.5px; line-height: 1.6;
  color: var(--text);
}
.pair-side.is-weak .pair-quote { color: var(--text-3); }
.pair-why {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-3);
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}