/* Integración del rediseño en la SPA: solo lo imprescindible para lo que el
   diseño estático no tenía (envío real, idiomas como enlaces, avisos legales).
   No cambia el aspecto aprobado. */

/* El selector de idioma pasa de <button> a <a> (rastreable por buscadores):
   mismas reglas que languages.css aplicaba a los botones. */
.language-selector a { background: none; border: 0; padding: 8px 2px; color: #92a3b3; font: inherit; text-decoration: none; cursor: pointer; }
.language-selector a[aria-current] { color: #fff; border-bottom: 1px solid #58b7ff; }
.language-selector a:hover { color: #fff; }
.company-page .language-selector a[aria-current] { color: inherit; }
@media (max-width: 1080px) {
  .language-selector a { min-width: 32px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Campo trampa contra bots: fuera de la vista y del orden de tabulación. */
.ki-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Estados del formulario. */
.ki-form-status { margin: 12px 0 0; min-height: 1.4em; font-size: 15px; line-height: 1.45; }
.ki-form-status:empty { display: none; }
.ki-form-status.is-error { color: #ffb4a8; }
.company-page .ki-form-status.is-error { color: #a1260f; }
.ki-form-status a { color: inherit; text-decoration: underline; }
form [aria-invalid="true"] { outline: 2px solid #e5533d; outline-offset: 1px; }
button[aria-busy="true"] { cursor: progress; opacity: .8; }
.ki-form-done { padding: 8px 0 4px; outline: none; }
.ki-form-done p:last-child { margin: 8px 0 0; }

/* Textos legales (Privacidad, Aviso legal) con la maqueta de las páginas de empresa:
   cabecera compacta, índice lateral y apartados numerados como las fichas. */
.ki-legal .company-page-title { padding-bottom: 8px; }
.ki-legal .company-page-title h1 { margin: 10px 0 14px; }
.ki-legal-eyebrow { margin: 28px 0 0; }
.ki-legal-meta { margin: 0 0 6px; color: #91b8d4; font-size: 14px; }
.ki-legal .company-page-title .ki-draft-notice,
.ki-legal .company-page-title .translation-notice { max-width: 820px; margin: 14px 0 0; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.ki-legal-body.ki-legal-layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 760px); gap: 64px; align-items: start; padding-top: 40px; }
.ki-legal-toc { position: sticky; top: 24px; }
.ki-legal-toc details { border: 0; }
.ki-legal-toc summary { padding: 0 0 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #7bb6e7; list-style: none; cursor: default; }
.ki-legal-toc summary::-webkit-details-marker { display: none; }
.ki-legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-left: 1px solid #34414b; }
.ki-legal-toc li { counter-increment: toc; }
.ki-legal-toc a { display: grid; grid-template-columns: 26px 1fr; padding: 7px 0 7px 16px; color: #b6c7d2; font-size: 14px; line-height: 1.4; text-decoration: none; }
.ki-legal-toc a::before { content: counter(toc, decimal-leading-zero); color: #7bb6e7; font-size: 12px; padding-top: 1px; }
.ki-legal-toc a:hover, .ki-legal-toc a:focus-visible { color: #fff; }
.ki-legal-col { min-width: 0; }
.ki-legal-intro p { color: #b6c7d2; line-height: 1.75; margin: 0 0 16px; }
.ki-legal-sec { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; padding: 34px 0 30px; border-top: 1px solid #34414b; scroll-margin-top: 24px; }
.ki-legal-sec:first-of-type { border-top: 0; padding-top: 0; }
.ki-legal-num { color: #80c8ff; font-size: 26px; font-weight: 300; line-height: 1.2; }
.ki-legal-sec h2 { margin: 0 0 16px; font-size: 26px; font-weight: 300; line-height: 1.25; color: #fff; }
.ki-legal-text { grid-column: 2; }
.ki-legal-text h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 500; color: #e0eaf1; }
.ki-legal-text h3:first-child { margin-top: 0; }
.ki-legal-text p, .ki-legal-text li { color: #b6c7d2; font-size: 16px; line-height: 1.75; }
.ki-legal-text p { margin: 0 0 14px; }
.ki-legal-text strong { color: #e0eaf1; font-weight: 500; }
.ki-legal-text a { color: #91d0ff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ki-legal-text ul { margin: 0 0 16px; padding: 0; list-style: none; }
.ki-legal-text ul:not(.ki-kv):not(.ki-providers) li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.ki-legal-text ul:not(.ki-kv):not(.ki-providers) li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 8px; height: 1px; background: #80c8ff; }
/* Ficha de datos (Titular, NIF, Domicilio…) */
.ki-legal-text ul.ki-kv { padding: 8px 22px; border: 1px solid #34434f; border-radius: 8px; background: #101a23; }
.ki-legal-text ul.ki-kv li { padding: 12px 0; border-top: 1px solid #22303b; }
.ki-legal-text ul.ki-kv li:first-child { border-top: 0; }
.ki-legal-text ul.ki-kv strong { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #7bb6e7; font-weight: 500; }
/* Proveedores: nombre y función en dos columnas */
.ki-legal-text ul.ki-providers { border-top: 1px solid #34414b; }
.ki-legal-text ul.ki-providers li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #34414b; }
.ki-legal-text ul.ki-providers strong { color: #fff; }
@media (max-width: 900px) {
  .ki-legal-body.ki-legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px; }
  .ki-legal-toc { position: static; padding: 14px 16px; border: 1px solid #34434f; border-radius: 8px; background: #101a23; }
  .ki-legal-toc summary { padding: 0; cursor: pointer; list-style: revert; }
  .ki-legal-toc details[open] summary { padding-bottom: 10px; }
  .ki-legal-sec { grid-template-columns: 40px minmax(0, 1fr); padding: 28px 0 22px; }
  .ki-legal-num { font-size: 20px; }
  .ki-legal-sec h2 { font-size: 22px; }
  .ki-legal-text ul.ki-providers li { grid-template-columns: 1fr; gap: 2px; }
}

/* «Lo esencial» (resumen al principio de la Privacidad). */
.ki-legal-intro .ki-essentials { margin: 0 0 40px; padding: 22px 24px; border: 1px solid #34434f; border-left: 3px solid #80c8ff; border-radius: 8px; background: #101a23; }
.ki-essentials-title { margin: 0 0 12px !important; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #7bb6e7 !important; }
.ki-essentials ul { margin: 0; padding: 0; list-style: none; }
.ki-essentials li { padding: 9px 0; border-top: 1px solid #22303b; color: #b6c7d2; line-height: 1.6; }
.ki-essentials li:first-child { border-top: 0; padding-top: 0; }
.ki-essentials strong { color: #fff; font-weight: 500; }
/* Título de apartado como botón (solo actúa en móvil) */
.ki-legal-toggle { all: unset; box-sizing: border-box; display: block; width: 100%; color: inherit; font: inherit; cursor: default; }
.ki-legal-toggle:focus-visible { outline: 2px solid #78beff; outline-offset: 4px; }
.ki-totop { display: none; }
@media (max-width: 900px) {
  .ki-legal-toc { display: none; }
  .ki-legal-intro .ki-essentials { margin-bottom: 20px; padding: 18px; }
  .ki-legal-sec { padding: 0; border-top: 1px solid #34414b; align-items: center; }
  .ki-legal-sec:first-of-type { border-top: 1px solid #34414b; padding-top: 0; }
  .ki-legal-sec h2 { margin: 0; font-size: 19px; }
  .ki-legal-num { font-size: 16px; }
  .ki-legal-toggle { position: relative; padding: 18px 30px 18px 0; cursor: pointer; }
  .ki-legal-toggle::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid #80c8ff; border-bottom: 1.5px solid #80c8ff; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
  .ki-legal-sec.is-open .ki-legal-toggle::after { transform: translateY(-30%) rotate(-135deg); }
  .ki-legal-sec:not(.is-open) .ki-legal-text { display: none; }
  .ki-legal-sec.is-open .ki-legal-text { padding-bottom: 20px; }
  .ki-totop { display: grid; place-items: center; position: fixed; left: 16px; bottom: 18px; z-index: 50; width: 46px; height: 46px; border: 1px solid #438acb; border-radius: 50%; background: #0b2445; color: #edf7ff; font-size: 20px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; box-shadow: 0 0 0 5px rgb(53 144 242 / 12%); }
  .ki-totop.is-visible { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .ki-legal-toggle::after, .ki-totop { transition: none; } }

/* Aviso de entorno de pruebas (solo existe en staging). */
.ki-staging-badge { position: fixed; left: 12px; bottom: 12px; z-index: 2147483000; max-width: calc(100vw - 110px); padding: 6px 10px; border-radius: 6px; background: #ffd400; color: #111; font: 600 12px/1.3 system-ui, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.25); pointer-events: none; }

/* Modo edición: las secciones necesitan ancestro posicionado para sus controles. */
html.ki-edit-mode [data-section] { position: relative; }
html.ki-edit-mode [data-section][data-hidden="1"] { opacity: .35; }

/* Envoltorio neutro de los textos editables que comparten elemento con iconos u otros nodos. */
ki-t { display: inline; }

/* Borrador legal (solo staging). */
.ki-draft-notice { padding: 10px 14px; border-radius: 6px; background: #ffd400; color: #111; }

/* ── Ajustes de móvil (norma: todo adaptado a móvil) ──────────────────────────
   Solo pantallas estrechas; el escritorio del diseño aprobado no cambia.
   Zona táctil de unos 44 px en enlaces de texto pequeños SIN mover nada: relleno
   vertical compensado con margen negativo (ni cambia la maqueta ni hace visibles
   elementos que el diseño oculta en móvil). */
@media (max-width: 760px) {
  .company-footer nav a, .site-footer nav a, .site-footer > a, .company-footer > .company-brand,
  .company-page-title > a, .breadcrumb, .resource-links a, .product-parent, .hero-down {
    padding-block: 14px; margin-block: -14px;
  }
  /* La ruta (breadcrumb) conserva su separación del diseño (36 px) con la zona táctil ampliada. */
  .breadcrumb { margin-block: -14px 22px; }
  .group-introduction .breadcrumb { margin-block: -14px 18px; }
  .contact-note, .modal-shell small, .ki-form-status { font-size: 14px; line-height: 1.5; }
}

/* WhatsApp en móvil: oculto en la primera pantalla para no tapar los botones
   principales; aparece al bajar un poco (decisión de la usuaria, 5-oct-2026). */
@media (max-width: 760px) {
  :root body #ki-whatsapp { transition: opacity .25s ease, transform .25s ease; }
  :root body #ki-whatsapp.ki-wa-top { opacity: 0; transform: translateY(16px); pointer-events: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { :root body #ki-whatsapp { transition: none; } }

/* Menú de INTKA simplificado (5-oct-2026): Soluciones, Casos de uso y Recursos, más
   «Acceso clientes» y «Solicitar demostración». Con tres opciones ya caben el enlace a
   Kapitel Intelligence y el botón de demostración, que el diseño ocultaba en escritorio.
   Solo cabeceras de INTKA (.site-header en /intka, .intka-header en las interiores);
   la cabecera de Kapitel Intelligence no cambia. */
:root body .site-header .main-nav > .primary { display: inline-flex; }
:root body :is(.site-header, .intka-header) .brand { min-height: 44px; align-content: center; }
:root body :is(.site-header, .intka-header) .product-parent {
  display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding-block: 0; margin-block: 0;
}
.intka-header .product-parent { margin: 0 auto 0 38px; }
@media (max-width: 1100px) {
  .intka-header .product-parent { margin: 0 0 0 auto; }
  .intka-header nav.is-open { gap: 12px; align-items: flex-start; }
  .company-header.intka-header nav > a:first-child { display: inline-flex; }
  .intka-header .language-selector a { min-width: 32px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}