/* ============================================================================
   PUENTE v5 · LAYOUT — una página, no un shell.
   ----------------------------------------------------------------------------
   v4 llevó a la web el lienzo negro con paneles flotantes de la app y el
   propietario lo rechazó: la web no tiene que PARECER Studio, tiene que ser
   una web de primer nivel del sector con la fuente, el azul y el logo de la
   casa. Lo que hacen las mejores webs de herramientas de vídeo con IA: fondo
   claro con un lavado de color detrás del titular, cabecera fina que se vuelve
   translúcida al hacer scroll, tira de novedad arriba, secciones que fluyen sin
   cajas, y algún bloque oscuro grande como contrapunto.
   ========================================================================== */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--text-primary);
}

/* ── Sección ──────────────────────────────────────────────────────────────
   `.panel` se conserva como nombre (lo usan todas las plantillas) pero ya no
   flota: es una sección de página. `--sunken` es una banda muy suave;
   `--hero` lleva el lavado de color detrás; `--dark` es el bloque oscuro de
   contrapunto (extensiones, CTA final). */
.panel {
  position: relative;
  background: transparent;
  overflow: clip;
}
.panel--sunken { background: var(--page-band); }
.panel--hero   { isolation: isolate; }
.panel--hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -420px;
  width: 1600px;
  height: 980px;
  transform: translateX(-50%);
  background: var(--page-wash);
  pointer-events: none;
}
.panel--bare   { background: transparent; }
.panel--dark {
  /* Los tokens de dentro son los del tema oscuro (ver tokens.css): un bloque
     oscuro dentro de la página clara, con sus propios grises. */
  margin-inline: var(--space-2xl);
  border-radius: var(--radius-hero);
  background: var(--page-bg);
  color: var(--text-primary);
}
@media (max-width: 640px) { .panel--dark { margin-inline: var(--space-md); } }

/* ── Tira de novedad (encima de la cabecera) ─────────────────────────────── */
.promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-height: 38px;
  padding: var(--space-sm) var(--space-xl);
  background: var(--accent-blue);
  color: var(--text-on-accent);
  font-size: var(--text-sm);
  text-align: center;
}
.promo-bar a { color: inherit; font-weight: 600; }
.promo-bar__tag {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Columna de contenido — la MISMA que la de Studio (1060 dentro de 1120). */
.col {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--space-2xl);
}
.col--wide   { max-width: var(--col-wide); }
.col--narrow { max-width: var(--col-narrow); }

/* Ritmo vertical. `--pad` permite que una sección respire distinto sin
   inventar clases nuevas por cada caso. */
.pad    { padding-block: var(--space-4xl); }
.pad-lg { padding-block: calc(var(--space-4xl) * 1.4); }

/* Cabecera de sección: titular y una línea. Alineada a la
   IZQUIERDA por defecto — el centrado sistemático de todas las secciones era
   media firma del «hecho con plantilla». */
.sec-head { display: flex; flex-direction: column; gap: var(--space-md); max-width: 62ch; }
.sec-head p { color: var(--text-secondary); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.sec-head--center { margin-inline: auto; align-items: center; text-align: center; }

/* ============================================================================
   CABECERA — fina, pegajosa, transparente hasta el scroll.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  flex: 0 0 auto;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-normal) var(--ease-out), background-color var(--dur-normal) var(--ease-out);
}
.site-header.is-scrolled {
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--page-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: var(--header-h);
  max-width: var(--col-wide);
  margin-inline: auto;
  padding-inline: var(--space-2xl);
}
.site-header__bar .nav > .nav-menu { justify-content: center; }

.brand { display: inline-flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; }
.brand img, .brand .site-logo { width: auto; height: 26px; }

/* ── Navegación ───────────────────────────────────────────────────────────── */
.nav { flex: 1 1 auto; min-width: 0; }
.nav > .nav-menu { display: flex; align-items: center; gap: 2px; }
.nav-menu li { position: relative; }
.nav-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a { background: var(--bg-pill); color: var(--text-primary); }

/* Submenú: el mismo popover que el menú de cuenta. Se abre con hover Y con
   foco de teclado, así que se puede recorrer sin ratón. */
.nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 236px;
  padding: var(--space-sm);
  background: var(--bg-modal);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu,
.nav-menu li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* La flecha del desplegable. Es un botón de verdad (no un adorno) para que
   `aria-expanded` signifique algo y se pueda abrir con el teclado. */
.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}
.nav-caret svg { width: 14px; height: 14px; }
.nav-caret:hover { color: var(--text-primary); }
.menu-item-has-children:hover > .nav-caret svg,
.menu-item-has-children.is-open > .nav-caret svg { transform: rotate(180deg); }
.nav-caret svg { transition: transform var(--dur-fast) var(--ease-out); }
.nav-menu > li > a[aria-current="page"] { background: var(--bg-pill); color: var(--text-primary); }
.nav-menu .sub-menu a[aria-current="page"] { background: var(--bg-pill); color: var(--text-primary); }
.nav-menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-button);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-menu .sub-menu a:hover { background: var(--bg-pill); color: var(--text-primary); }
/* ── Zona derecha: [idioma · tema] │ sesión ───────────────────────────────
   Los ajustes de la vista (idioma y tema) son una cosa y la cuenta es otra:
   van en grupos distintos, con más aire entre ellos que dentro, y un filete
   fino de por medio. Pegados —como estaban— se leían como un solo mando de
   tres botones y el propietario no distinguía dónde acababa uno. */
.header-tools { display: flex; align-items: center; gap: var(--space-lg); flex: 0 0 auto; }

.header-prefs {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-right: var(--space-lg);
  border-right: 1px solid var(--hairline-strong);
}

.lang-switch {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-pill);
  border-radius: var(--radius-pill);
}
.lang-switch a {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-switch a:hover { color: var(--text-primary); }
.lang-switch a.is-active { background: var(--bg-active); color: var(--text-primary); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: var(--radius-button);
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-pill); color: var(--text-primary); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 17px; height: 17px; }

/* ── Botón de tema: UN icono, y es a dónde vas ─────────────────────────────
   En claro se ve la luna («pásame a oscuro»), en oscuro el sol. Lo decide el
   CSS a partir de `data-theme`, que el script anti-parpadeo pone antes del
   primer pixel: así el icono correcto ya está en el primer fotograma y no hay
   que esperar a un JavaScript con `defer`. Los dos SVG se apilan en la misma
   celda para que el botón no cambie de tamaño al alternar. */
.theme-toggle { display: grid; }
.theme-toggle svg { grid-area: 1 / 1; }
.theme-toggle [data-theme-icon-sun] { display: none; }
[data-theme="dark"] .theme-toggle [data-theme-icon-moon] { display: none; }
[data-theme="dark"] .theme-toggle [data-theme-icon-sun]  { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .theme-toggle svg { transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
}

/* La sesión se pinta en dos capas superpuestas para que la barra NO salte
   cuando `session.js` recibe la respuesta: el hueco ya está reservado. */
.session { position: relative; display: flex; align-items: center; gap: var(--space-sm); min-height: 32px; }
.session [hidden] { display: none !important; }

/* Menú móvil */
.menu-toggle { display: none; }

/* El selector de idioma del menú desplegable solo existe en móvil (ver
   `header.php`): en escritorio manda el del grupo de ajustes de la barra. */
.lang-switch.nav-prefs { display: none; }

@media (max-width: 900px) {
  .menu-toggle { display: grid; }
  .nav {
    position: absolute;
    top: calc(100% + 6px);
    left: var(--space-lg);
    right: var(--space-lg);
    z-index: var(--z-dropdown);
    padding: var(--space-lg);
    background: var(--bg-modal);
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav > .nav-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-menu > li > a { height: 40px; font-size: var(--text-sm); }
  .nav-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--divider);
    border-radius: 0;
    margin-left: var(--space-lg);
    padding: 0 0 0 var(--space-sm);
  }

  /* El idioma baja al menú desplegable, con su etiqueta y separado del resto:
     antes desaparecía sin sustituto y en un móvil no había forma de cambiarlo. */
  .header-prefs { padding-right: var(--space-md); border-right: 0; }
  .header-prefs .lang-switch { display: none; }
  .lang-switch.nav-prefs {
    display: inline-flex;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--hairline-strong);
    border-radius: 0;
    background: transparent;
    width: 100%;
    gap: var(--space-sm);
  }
  .lang-switch.nav-prefs a { background: var(--bg-pill); padding: 8px 16px; }
  .lang-switch.nav-prefs a.is-active { background: var(--bg-active); }
}
@media (max-width: 480px) {
  /* En móvil la barra se queda con el CTA fuerte; «Iniciar sesión» sigue en
     el menú de cuenta y en el propio panel de compra. */
  .session__out .btn--outline { display: none; }
}

/* ============================================================================
   PIE — cuatro columnas (marca · Producto · Recursos · Legal).
   La quinta, «Extensiones», se retiró en ago-2026 por decisión del propietario:
   repetía los ocho enlaces del menú y hacía el pie más largo que corto. A las
   fichas se llega por «Suite AutoKuak».
   ========================================================================== */
.site-footer {
  flex: 0 0 auto;
  background: var(--page-band);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-4xl) var(--space-2xl);
}
.footer-grid {
  display: grid;
  /* La marca ocupa más y las tres listas se reparten el resto: con cuatro
     columnas y la misma rejilla de antes quedaba un hueco vacío a la derecha. */
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-3xl) var(--space-2xl);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-md); max-width: 30ch; }
.footer-brand p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.footer-col h3 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}
.footer-col li + li { margin-top: var(--space-md); }
.footer-col a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--text-primary); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.footer-bottom nav { display: flex; gap: var(--space-xl); flex-wrap: wrap; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   PIEZAS COMPARTIDAS ENTRE PÁGINAS
   ========================================================================== */

/* Cabecera de página interna (precios, contacto, legales, 404). Es la misma
   `.page-head` de Studio: titular grande y subtítulo. */
.page-head { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 62ch; }
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.025em; }

/* Franja de acciones al final de una página, dentro de un panel hero. */
.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}
.cta-panel__text { max-width: 46ch; display: flex; flex-direction: column; gap: var(--space-md); }
.cta-panel__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* Texto largo (legales, artículos, contenido de Gutenberg). Medida de lectura
   real y jerarquía tranquila. */
.prose { max-width: 68ch; color: var(--text-secondary); line-height: var(--leading-relaxed); }
.prose > * + * { margin-top: var(--space-xl); }
.prose h2 { color: var(--text-primary); font-size: var(--text-2xl); margin-top: var(--space-4xl); }
.prose h3 { color: var(--text-primary); font-size: var(--text-lg); margin-top: var(--space-3xl); }
.prose ul, .prose ol { padding-left: var(--space-2xl); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li + li { margin-top: var(--space-sm); }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose img { border-radius: var(--radius-card); }
.prose blockquote {
  padding-left: var(--space-xl);
  border-left: 2px solid var(--accent-blue);
  color: var(--text-primary);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { padding: var(--space-md); border-bottom: 1px solid var(--hairline); text-align: left; }
.prose th { color: var(--text-primary); font-weight: 600; }

/* Tabla con desbordamiento propio: el cuerpo de la página NUNCA scrollea en
   horizontal, la tabla sí. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  :root { --space-4xl: 56px; }
  .col { padding-inline: var(--space-xl); }
}