/* =========================================================
01. Design Tokens
========================================================= */
:root {
  --enhance-accent: var(--accent-cyan-hero);
  --enhance-accent-2: #8f7cff;
  --enhance-accent-warm: #f5b84b;
  --enhance-surface: rgba(255, 255, 255, 0.06);
  --enhance-surface-strong: rgba(255, 255, 255, 0.1);
  --enhance-border: rgba(255, 255, 255, 0.14);
  --enhance-gradient-accent: linear-gradient(135deg, var(--enhance-accent) 0%, var(--enhance-accent-2) 100%);
  --enhance-gradient-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  --enhance-shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.28);
  --enhance-shadow-focus: 0 0 0 4px rgba(245, 184, 75, 0.2);
  --enhance-radius-lg: 28px;
  --enhance-radius-md: 18px;
  --enhance-radius-sm: 10px;
  --enhance-transition: 220ms ease;
  --enhance-transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);
  --enhance-container: min(1120px, calc(100vw - 48px));
  --enhance-container-wide: min(1240px, calc(100vw - 48px));
  --enhance-space-section: clamp(64px, 8vw, 120px);
  --enhance-title-fluid: clamp(2rem, 6vw, 5rem);
  --enhance-text-fluid: clamp(1rem, 1.8vw, 1.125rem);
  --enhance-glass-blur: 14px;
}

/* =========================================================
02. Global Responsive Safeguards
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  /* `clip` recorta igual que `hidden` pero no convierte el body en contenedor
     de scroll, que es lo que impedía funcionar a los `position: sticky`
     (escenario 3D de la motxilla). El html sigue con hidden como respaldo. */
  overflow-x: clip;
}

/* Aquí vivía `section[id] { scroll-margin-top: clamp(78px, 8vw, 104px) }`. Se
   SUMABA al `scroll-padding-top` de style.css y dejaba las 13 secciones 111 px
   por debajo de la cabecera en escritorio (91 en móvil). El freno de los
   anclajes es uno solo y está en `html` de style.css. No devolverlo aquí. */

img,
picture,
video,
svg,
iframe,
object,
embed {
  max-width: 100%;
}

img,
video {
  height: auto;
}

:where(.hero, .about, .reconeixements, .authority-conversion, .ponencies, .portfolio, .radio-section, .verifier-section, .toolkit-section, .timeline-section, .services, .contact),
:where(.hero-content, .about-content, .authority-shell, .authority-card-grid, .ponencies-grid, .ponencies-insight-grid, .portfolio-grid, .radio-content, .verifier-content, .toolkit-content, .timeline-wrapper, .services-grid, .contact-grid),
:where(.portfolio-card, .authority-card, .authority-cta-panel, .ponencia-card, .ponencies-insight-panel, .radio-player-console, .verifier-dashboard, .timeline-card, .service-card, .contact-card, .contact-form) {
  min-width: 0;
}

:where(.portfolio-media, .lightbox-content, .radio-player-console, .verifier-dashboard, .contact-info-panel, .contact-form) {
  max-width: 100%;
}

:where(a[href^="mailto:"], a[href^="tel:"], .contact-card-info a) {
  overflow-wrap: anywhere;
}

/* =========================================================
03. Accessibility Helpers
========================================================= */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, textarea, select, [role="button"], [role="tab"], [role="slider"]) {
  touch-action: manipulation;
}

:where(a, button, input, textarea, select, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="slider"]):focus-visible {
  outline-color: var(--enhance-accent-warm);
  box-shadow: var(--enhance-shadow-focus);
}

/* =========================================================
04. Header Enhancement Layer
========================================================= */
#mainHeader {
  background:
    linear-gradient(180deg, rgba(10, 15, 29, 0.86), rgba(10, 15, 29, 0.62));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
}

#mainHeader.scrolled {
  background:
    linear-gradient(180deg, rgba(7, 12, 24, 0.96), rgba(7, 12, 24, 0.9));
  border-bottom-color: rgba(var(--accent-cyan-hero-rgb), 0.16);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
}

#mainHeader .nav-container {
  width: 100%;
  max-width: 100%;
  min-height: 72px;
  padding: 14px 24px;
  gap: clamp(14px, 2vw, 28px);
}

#mainHeader .logo {
  position: relative;
  min-width: max-content;
  letter-spacing: 0;
  /* El rabo de la "g" de Rigall salia cortado. El motivo no es que algo lo
     recorte: es que el logo pinta un degradado con background-clip: text, y ese
     degradado solo existe dentro de la caja del elemento. Con line-height: 1 la
     caja media 17,4px y los glifos 22,4, asi que lo que sobresalia se quedaba
     sin color y parecia cortado. Con 1.2 seguian sobrando 0,8px; el relleno
     vertical termina de darle sitio. */
  line-height: 1.2;
  padding: 2px 0;
  text-decoration: none;
  transition: transform var(--enhance-transition), filter var(--enhance-transition);
}

/* MENU PRINCIPAL de texto plano de politica-privacidad.html. Esa pagina no
   carga script.js, asi que NO puede usar .nav-links: sus reglas cuentan con la
   hamburguesa para reabrir el menu en movil, y aqui no hay quien la abra.
   Estos estilos estan replicados en commercial-pages.css para las 12 fichas,
   que cargan aquella hoja en vez de esta. Si se cambia uno, cambiar el otro. */
/* El prefijo #mainHeader .nav-container > no es decorativo: hay una regla
   "#mainHeader .nav-container > nav { display: contents }" que disuelve el <nav>
   de la portada para que su lista se reparta en la rejilla de dos columnas de
   la cabecera. Sin superar esa especificidad, este menu tambien se disolvia y
   sus siete enlaces se convertian en celdas sueltas: la cabecera de privacidad
   pasaba de 73px a 247px de alto. */
#mainHeader .nav-container > nav.simple-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.simple-nav a {
  position: relative;
  padding: 4px 0;
  color: var(--text-secondary);
  font-size: var(--fs-600);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.simple-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-gradient);
  transition: var(--transition-fast);
}

.simple-nav a:hover,
.simple-nav a:focus-visible {
  color: var(--text-primary);
}

.simple-nav a:hover::after,
.simple-nav a:focus-visible::after {
  width: 100%;
}

.simple-nav-cta {
  padding: 8px 18px !important;
  border-radius: 30px;
  background: var(--accent-gradient);
  color: var(--text-primary) !important;
  font-weight: 600;
}

.simple-nav-cta::after { display: none !important; }

/* Mismo punto de corte que usa la portada para pasar a hamburguesa. Ver la
   explicacion en commercial-pages.css: el mapa del pie cubre la navegacion. */
@media (max-width: 1150px) {
  #mainHeader .nav-container > nav.simple-nav { display: none; }
}

/* SELECTOR DE IDIOMA (portada y politica de privacidad). <details> nativo, sin
   JavaScript para abrir y cerrar. Antes eran tres codigos sueltos separados por
   barras: apretaban la barra superior y no comunicaban que fueran idiomas.
   Los mismos estilos estan replicados en commercial-pages.css para las 12
   fichas, que cargan aquella hoja. Si se cambia uno, cambiar el otro.

   Los <button> de dentro conservan la clase .lang-btn porque de ella dependen
   script.js y el guion en linea i18n-nav. Sus estilos viejos de pildora se
   neutralizan aqui dentro del panel. */
.lang-switch {
  position: relative;
  flex-shrink: 0;
}

/* El <li> mantiene la clase .lang-switcher porque de ella dependen las reglas
   del menu movil. Pero su relleno y su filete izquierdo eran para los tres
   botones sueltos de antes: sumaban 10px de alto —la cabecera pasaba de 73 a
   76px y dejaba de cuadrar con las fichas— y el filete ya no separa nada,
   porque el selector tiene su propio borde. */
#mainHeader li.lang-switcher {
  padding: 0;
  border-left: none;
  margin-left: 0;
}

/* El idioma se pinta el ULTIMO por la derecha, pero solo en escritorio y solo
   con CSS. En el HTML sigue ANTES del boton de contacto, y eso no es un
   descuido: hay reglas del menu movil que cuelgan de "> li:last-child" para
   centrar ese boton y anclarlo abajo. Moverlo en el HTML —como se hizo en
   a8c97d3— convertia al idioma en el ultimo hijo, el boton perdia su centrado
   y se estiraba de borde a borde. Con order se consigue el orden visual sin
   tocar cual es el ultimo hijo. */
@media (min-width: 1151px) {
  #mainHeader .nav-links > li.lang-switcher { order: 1; }
}

.lang-switch > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Un peldano por debajo de los enlaces del menu (--fs-400 contra --fs-600) y
     con menos relleno: el idioma es un control secundario y no debe competir.
     Antes iba a --fs-500 con 5px 11px y, sumado a la pildora del <li>, pesaba
     mas que un enlace del menu. */
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: var(--fs-400);
  /* Explicito porque este componente vive en paginas con bodys distintos: la
     portada da line-height 1.6 y las fichas el normal del navegador, y el
     boton salia 5px mas bajo alli. */
  line-height: 1.6;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--enhance-transition), color var(--enhance-transition), background var(--enhance-transition);
  list-style: none;
}

.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ''; }

/* Tamano de los iconos FIJADO EN CSS, no confiar en el del SVG. En la portada
   el globo y la flecha los dibuja lucide.createIcons() y salen a su 24x24 por
   defecto: la pildora crecia hasta comerse visualmente a los enlaces del menu.
   En las fichas van en linea a 15/14px desde el build. Con esta regla las dos
   variantes quedan identicas y a escala del boton reducido. */
.lang-switch > summary svg {
  width: 12px;
  height: 12px;
  /* flex-basis incluido, no solo width: hay una regla global de iconos
     ":where(i[data-lucide], svg.lucide)" con flex: 0 0 20px, y en una fila
     flex el flex-basis manda sobre width. Solo con width los iconos seguian
     ocupando 20px aunque la regla del ancho ganara la cascada. */
  flex: 0 0 12px;
}

.lang-switch-chevron svg {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.lang-switch > summary:hover,
.lang-switch > summary:focus-visible,
.lang-switch[open] > summary {
  color: var(--text-primary);
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.5);
  background: rgba(var(--accent-cyan-hero-rgb), 0.08);
}

/* Cada opcion lleva el nombre completo y el codigo corto. En el desplegable de
   escritorio se lee el nombre; en el pastillero del menu movil, donde no cabe,
   se cambian por CSS (ver el bloque de la hamburguesa). */
.lang-code { display: none; }

.lang-switch-chevron {
  display: inline-flex;
  transition: transform var(--enhance-transition);
}

.lang-switch[open] .lang-switch-chevron { transform: rotate(180deg); }

.lang-switch-panel {
  position: absolute;
  top: calc(100% + 8px);
  /* Anclado a la derecha: el selector es el ultimo de la barra y hacia la
     izquierda se saldria de la pantalla. */
  right: 0;
  z-index: 1200;
  min-width: 160px;
  padding: 6px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(var(--depth-2-rgb), 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
}

/* Anulan la pildora pequena que .lang-btn traia de la version anterior. */
.lang-switch-panel .lang-btn {
  width: 100%;
  padding: 9px 12px !important;
  border-radius: 8px;
  text-align: left;
  font-size: var(--fs-500) !important;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}

/* Cada opcion se ilumina al pasar por encima para que se vea que es pulsable.
   La actual queda EXCLUIDA con :not(): ya estas en ese idioma, pulsarla no hace
   nada, y encenderla invitaria a un clic inutil. Por eso ademas lleva el cursor
   por defecto en vez de la manita. */
.lang-switch-panel .lang-btn:not(.active):hover,
.lang-switch-panel .lang-btn:not(.active):focus-visible {
  color: var(--text-primary);
  background: rgba(var(--accent-cyan-rgb), 0.14);
  box-shadow: 0 0 16px rgba(var(--accent-cyan-rgb), 0.4);
}

.lang-switch-panel .lang-btn.active,
.lang-switch-panel a[aria-current="page"] {
  cursor: default;
}

.lang-switch-panel .lang-btn.active,
.lang-switch-panel a[aria-current="page"] {
  color: #04111d;
  background: var(--accent-cyan);
  font-weight: 700;
}

/* EL SELECTOR DENTRO DE LA HAMBURGUESA: los tres codigos CA / ES / EN en un
   pastillero centrado, al final del menu y justo encima del boton de contacto.
   El desplegable con globo se probo arriba del todo y resultaba intrusivo,
   ademas de empujar el menu hacia abajo.

   Aqui el pastillero es EL PROPIO PANEL del <details>, no el <li>. Se intento
   primero con display: contents para que los botones colgaran del <li> y
   heredaran las reglas moviles antiguas, pero el <li> se quedaba en 10px de
   ancho y los tres botones se apilaban. Con el panel convertido en caja normal
   —posicion estatica y en fila— el resultado es predecible y no depende de
   como se aplanen los contenedores. */
@media (max-width: 1150px) {
  #mainHeader .nav-links.mobile-open > li.lang-switcher {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    margin: 16px 0 4px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    counter-increment: none;
  }

  /* Los elementos del menu llevan su numero ("01", "02"...) en un ::before.
     En este no toca, y ademas ocupaba sitio a la izquierda y descentraba el
     pastillero unos 70px. */
  #mainHeader .nav-links.mobile-open > li.lang-switcher::before {
    content: none !important;
    display: none !important;
  }

  #mainHeader .nav-links.mobile-open .lang-switch {
    position: static;
    width: auto;
    flex: 0 0 auto;
    /* Los margenes automaticos centran la pildora dentro del <li>. */
    margin-inline: auto;
    /* Y esto es lo que hacia falta para que centraran: un <details> CERRADO no
       cuenta su contenido al calcular su tamano, asi que la caja media 0 de
       ancho y el pastillero se salia por la derecha —quedaba justo a partir del
       centro del menu en vez de centrado sobre el—. */
    content-visibility: visible !important;
    display: flex;
  }

  #mainHeader .nav-links.mobile-open .lang-switch > summary {
    display: none;
  }

  #mainHeader .nav-links.mobile-open .lang-switch-panel {
    /* El <details> esta cerrado y el navegador oculta su contenido con
       content-visibility, aunque le forcemos un display. Sin esto los tres
       codigos ocupaban su sitio pero no se pintaban: la caja medía 140x49 y
       dentro no se leia nada. */
    content-visibility: visible !important;
    position: static;
    transform: none;
    display: inline-flex;
    gap: 4px;
    min-width: 0;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50px;
    background: var(--surface-1);
    box-shadow: none;
    backdrop-filter: none;
  }

  /* En el pastillero caben los codigos, no los nombres completos. */
  #mainHeader .nav-links.mobile-open .lang-switcher .lang-name {
    display: none !important;
  }

  #mainHeader .nav-links.mobile-open .lang-switcher .lang-code {
    display: inline !important;
  }
}

/* La privacidad usa enlaces en vez de botones (no tiene JavaScript). */
.lang-switch-panel a {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: var(--fs-500);
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch-panel a:not([aria-current="page"]):hover,
.lang-switch-panel a:not([aria-current="page"]):focus-visible {
  color: var(--text-primary);
  background: rgba(var(--accent-cyan-rgb), 0.14);
  box-shadow: 0 0 16px rgba(var(--accent-cyan-rgb), 0.4);
}

#mainHeader .logo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 12%;
  bottom: -8px;
  height: 1px;
  background: var(--enhance-gradient-accent);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: left;
  transition: opacity var(--enhance-transition), transform var(--enhance-transition);
}

#mainHeader .logo:hover,
#mainHeader .logo:focus-visible {
  filter: drop-shadow(0 0 14px rgba(var(--accent-cyan-hero-rgb), 0.28));
  transform: translateY(-1px);
}

#mainHeader .logo:hover::after,
#mainHeader .logo:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

#mainHeader .nav-links {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: clamp(10px, 1.65vw, 22px);
  min-width: 0;
}

#mainHeader .nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 2px;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1;
  text-decoration: none;
  transition:
    color var(--enhance-transition),
    transform var(--enhance-transition),
    background-color var(--enhance-transition),
    border-color var(--enhance-transition),
    box-shadow var(--enhance-transition);
}

#mainHeader .nav-links a::after {
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--enhance-gradient-accent);
}

#mainHeader .nav-links a:hover,
#mainHeader .nav-links a:focus-visible,
#mainHeader .nav-links a.active {
  color: var(--text-primary);
}

#mainHeader .nav-links a:hover,
#mainHeader .nav-links a:focus-visible {
  transform: translateY(-1px);
}

/* ===== FASE 10C – Desktop Dropdown Menus ===== */
#mainHeader .has-dropdown {
  position: relative;
}

#mainHeader .has-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  transition: transform 0.25s ease;
}

#mainHeader .has-dropdown:hover > a::after,
#mainHeader .has-dropdown:focus-within > a::after {
  transform: rotate(180deg);
}

#mainHeader .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 190px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: rgba(var(--depth-3-rgb), 0.92);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.12);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 20px rgba(var(--accent-cyan-hero-rgb), 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1100;
}

#mainHeader .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}

#mainHeader .has-dropdown:hover > .dropdown-menu,
#mainHeader .has-dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

#mainHeader .dropdown-menu li {
  margin: 0;
  padding: 0;
}

#mainHeader .dropdown-menu a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 18px !important;
  min-height: auto !important;
  color: rgba(226, 232, 240, 0.75) !important;
  font-size: var(--fs-500) !important;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

#mainHeader .dropdown-menu a::after {
  display: none !important;
}

#mainHeader .dropdown-menu a:hover,
#mainHeader .dropdown-menu a:focus-visible {
  color: var(--accent-cyan, var(--accent-cyan-chat)) !important;
  background: rgba(var(--accent-cyan-hero-rgb), 0.06);
  border-left-color: var(--accent-cyan, var(--accent-cyan-chat));
  padding-left: 22px !important;
  transform: none;
}
/* ===== END FASE 10C Desktop Dropdowns ===== */

#mainHeader .contact-btn {
  min-height: 42px;
  padding: 10px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.95), rgba(143, 124, 255, 0.96));
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(var(--accent-cyan-hero-rgb), 0.18);
}

/* Solo resplandor EXTERIOR en cian, como "Sol·licitar proposta" del hero.
   Antes la sombra caia hacia abajo en violeta y ademas se aclaraba el borde:
   el conjunto se leia como un cambio del propio boton. El fondo y el texto no
   se tocan en ningun estado. */
#mainHeader .contact-btn:hover,
#mainHeader .contact-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 28px rgba(var(--accent-cyan-rgb), 0.5),
    0 8px 30px rgba(var(--accent-cyan-rgb), 0.32);
}

#mainHeader .lang-switcher {
  min-width: max-content;
  padding: 4px 2px;
  border-radius: 999px;
}

#mainHeader .lang-btn {
  border-radius: 999px;
  transition: color var(--enhance-transition), background-color var(--enhance-transition), box-shadow var(--enhance-transition);
}

#mainHeader .lang-btn.active {
  color: var(--enhance-accent);
  text-shadow: 0 0 16px rgba(var(--accent-cyan-hero-rgb), 0.26);
}

#mainHeader .burger {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: none;
  align-items: center;
  justify-content: center;
}

#mainHeader .burger svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

#mainHeader .burger .close-icon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(-90deg) !important;
}

#mainHeader .burger .burger-icon {
  opacity: 1;
}

#mainHeader .burger:hover,
#mainHeader .burger:focus-visible {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.42);
  background: rgba(var(--accent-cyan-hero-rgb), 0.1);
  box-shadow: 0 0 0 4px rgba(var(--accent-cyan-hero-rgb), 0.1);
}

#mainHeader .burger[aria-expanded="true"] {
  border-radius: 50% !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.35) !important;
  background: rgba(var(--accent-cyan-chat-rgb), 0.08) !important;
  box-shadow: 0 0 16px rgba(var(--accent-cyan-chat-rgb), 0.15) !important;
}

#mainHeader .burger[aria-expanded="true"] .burger-icon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(90deg) !important;
}

#mainHeader .burger[aria-expanded="true"] .close-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.72) rotate(0deg) !important;
  color: var(--accent-cyan, var(--accent-cyan-chat)) !important;
}

@media (min-width: 1151px) {
  #mainHeader .nav-container {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(16px, 2vw, 30px);
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(24px, 4vw, 64px) !important;
    padding-right: clamp(24px, 4vw, 64px) !important;
  }

  #mainHeader .nav-links {
    width: 100%;
    justify-content: flex-end;
    gap: clamp(8px, 1.05vw, 16px);
  }

  #mainHeader .nav-links a {
    font-size: clamp(0.875rem, 1.02vw, 0.9375rem);
  }

  #mainHeader .contact-btn {
    padding-inline: 14px !important;
  }
}

@media (min-width: 1151px) and (max-width: 1320px) {
  #mainHeader .nav-container {
    column-gap: 18px;
  }

  #mainHeader .logo {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
  }

  #mainHeader .nav-links {
    width: 100%;
    justify-content: flex-end;
    gap: clamp(7px, 0.8vw, 11px);
  }

  #mainHeader .nav-links a {
    font-size: clamp(0.8125rem, 1.02vw, 0.875rem);
  }

  #mainHeader .contact-btn {
    padding-inline: 11px !important;
  }

  #mainHeader .lang-switcher {
    padding-inline: 0;
  }
}

@media (max-width: 1150px) {
  #mainHeader {
    max-width: 100%;
    width: 100%;
  }

  #mainHeader .nav-container {
    min-height: 66px;
    padding: 10px 16px;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #mainHeader .logo {
    position: relative;
    z-index: 1001 !important;
  }

  #mainHeader .burger {
    position: relative;
    z-index: 1001 !important;
    display: flex !important;
  }

  #mainHeader .logo {
    font-size: clamp(1.05rem, 4.6vw, 1.22rem);
    max-width: calc(100% - 60px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mainHeader .nav-links.mobile-open {
    position: fixed;
    z-index: 1000 !important;
    /* El panel EMPIEZA DEBAJO de la cabecera, no en 0. Antes arrancaba arriba
       del todo con 100px de relleno para "dejar sitio" al logo, pero el relleno
       es parte de la zona de desplazamiento: al hacer scroll, los enlaces se
       veian a traves de el, pasando por encima y por debajo del nombre. Y no se
       puede tapar con la cabecera porque este panel es HIJO suyo: el fondo de
       un elemento nunca pinta por encima de sus hijos, por mucho z-index que se
       le ponga (ese fue el primer intento, fallido). Empezando en 67px —el alto
       real de la cabecera en movil— el recorte del overflow corta el contenido
       justo en el borde del logo, que es lo que se pedia. */
    top: 67px !important;
    right: 0;
    left: auto !important;
    width: 290px;
    /* Los !important no son adorno: el bloque generico "#mainHeader .nav-links"
       de mas abajo (menu elastico) fija top: 0 y height: 100vh con !important,
       y sin igualar armas esta regla perdia aunque sea mas especifica. Fue el
       segundo intento fallido de este arreglo. */
    height: calc(100vh - 67px) !important;
    max-height: calc(100vh - 67px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 5px !important;
    border: none;
    border-radius: 0;
    border-left: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.16) !important;
    background: linear-gradient(180deg, rgba(8, 12, 27, 0.98) 0%, rgba(5, 8, 18, 0.99) 100%) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    counter-reset: menu-counter;
    
    /* Entrada del panel deslizable */
    animation: slideInDrawer 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes slideInDrawer {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  /* Animación CSS de Entrada Escalonada para los Enlaces (Staggered Entrance) */
  @keyframes mobileMenuFadeIn {
    from {
      opacity: 0;
      transform: translateX(15px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  #mainHeader .nav-links.mobile-open li {
    width: 100%;
    display: flex;
    justify-content: stretch;
    opacity: 0;
    animation: mobileMenuFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Staggering delays */
  #mainHeader .nav-links.mobile-open li:nth-of-type(1) { animation-delay: 0.04s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(2) { animation-delay: 0.08s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(3) { animation-delay: 0.12s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(4) { animation-delay: 0.16s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(5) { animation-delay: 0.20s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(6) { animation-delay: 0.24s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(7) { animation-delay: 0.28s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(8) { animation-delay: 0.32s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(9) { animation-delay: 0.36s; }

  #mainHeader .nav-links.mobile-open a {
    width: 100%;
    min-height: auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(226, 232, 240, 0.8) !important;
    font-size: var(--fs-500) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border-left: 3px solid transparent !important;
  }

  /* Counter prefix */
  #mainHeader .nav-links.mobile-open li {
    counter-increment: menu-counter;
  }

  #mainHeader .nav-links.mobile-open a::before {
    content: counter(menu-counter, decimal-leading-zero);
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-300);
    font-weight: 700;
    color: rgba(var(--accent-cyan-chat-rgb), 0.45);
    margin-right: 12px;
    transition: color 0.3s ease;
  }

  #mainHeader .nav-links.mobile-open a::after {
    display: none;
  }

  /* :not(.contact-btn) en los tres selectores: esta regla es para los ENLACES
     del menu, pero el boton de contacto tambien es un <a> y la sufria. Al pasar
     el raton, su degradado se sustituia por este fondo casi transparente y el
     texto se volvia cian: el "negativo" que reporto Montserrat. Ese boton tiene
     su propio hover mas abajo, solo con resplandor exterior. */
  #mainHeader .nav-links.mobile-open a:not(.contact-btn):hover,
  #mainHeader .nav-links.mobile-open a:not(.contact-btn):focus-visible,
  #mainHeader .nav-links.mobile-open a:not(.contact-btn).active {
    background: rgba(var(--accent-cyan-chat-rgb), 0.04) !important;
    color: var(--accent-cyan, var(--accent-cyan-chat)) !important;
    padding-left: 18px !important;
    border-left: 3px solid var(--accent-cyan, var(--accent-cyan-chat)) !important;
    border-radius: 0 8px 8px 0 !important;
    text-shadow: 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.3);
  }

  #mainHeader .nav-links.mobile-open a:not(.contact-btn):hover::before,
  #mainHeader .nav-links.mobile-open a:not(.contact-btn).active::before {
    color: var(--accent-cyan, var(--accent-cyan-chat)) !important;
    text-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.5);
  }

  #mainHeader .nav-links.mobile-open .contact-btn {
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 12px;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--enhance-gradient-accent) !important;
    box-shadow: 0 8px 20px rgba(var(--accent-cyan-hero-rgb), 0.18) !important;
    color: #fff !important;
    font-size: var(--fs-500) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease !important;
    counter-increment: none;
    border-left: none !important;
  }

  #mainHeader .nav-links.mobile-open .contact-btn::before {
    display: none !important;
  }

  /* Destello azul EXTERIOR, como los botones "Sol·licitar proposta" del hero
     (.btn-primary:hover). Antes la sombra caia hacia abajo en violeta y con
     mucho desenfoque, lo que se leia como si el boton se oscureciera en vez de
     iluminarse. Ahora el resplandor rodea el boton: un halo pegado al borde mas
     un brillo amplio, los dos en cian, y el degradado del fondo no cambia. */
  #mainHeader .nav-links.mobile-open .contact-btn:hover,
  #mainHeader .nav-links.mobile-open .contact-btn:focus-visible {
    transform: translateY(-2px);
    /* SOLO resplandor exterior. Se quito el halo de 3px pegado al borde que
       habia aqui: al ir tan ceñido se leia como si cambiara el color del propio
       boton. El degradado del fondo no se toca en ningun estado. */
    box-shadow:
      0 0 28px rgba(var(--accent-cyan-rgb), 0.5),
      0 8px 30px rgba(var(--accent-cyan-rgb), 0.32) !important;
  }

  /* El texto quedaba pegado a la izquierda, 36px descentrado: el boton es flex
     y heredaba justify-content: flex-start y text-align: left de las reglas
     generales de los enlaces del menu movil. */
  #mainHeader .nav-links.mobile-open .contact-btn {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Con el menu abierto, la cabecera se vuelve opaca para que el borde donde el
     panel corta su contenido sea una franja solida, no un cristal translucido
     con la pagina moviendose detras.
     OJO: esto NO es lo que impide que el menu pase por encima del logo. Eso lo
     hace el propio panel empezando en top: 67px (ver .nav-links.mobile-open):
     el panel es HIJO de la cabecera, y el fondo de un elemento nunca pinta por
     encima de sus hijos, por mucho z-index que se le ponga. El primer intento
     de arreglarlo solo con z-index fallo exactamente por eso. */
  body.menu-open #mainHeader {
    background: #080c1b;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #mainHeader .nav-links.mobile-open .lang-switcher {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
    margin: 16px 0 4px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 50px !important;
    background: var(--surface-1) !important;
    gap: 4px;
    width: auto !important;
    margin-inline: auto !important;
    counter-increment: none;
  }

  #mainHeader .nav-links.mobile-open .lang-switcher span {
    display: none !important;
  }

  #mainHeader .nav-links.mobile-open .lang-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
    font-size: var(--fs-400) !important;
    border-radius: 50px !important;
    background: transparent !important;
    border: none !important;
    color: #b9c4d2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease !important;
  }
  
  #mainHeader .nav-links.mobile-open .lang-btn.active {
    background: var(--surface-4) !important;
    color: var(--accent-cyan, var(--accent-cyan-chat)) !important;
    font-weight: 600 !important;
  }

  body.nav-open .cyber-chatbot-widget {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transform: translateY(10px);
  }

  body.nav-open .cyber-chatbot-widget *,
  body.nav-open .chatbot-proactive-bubble,
  body.nav-open .chatbot-trigger,
  body.nav-open .chatbot-window {
    pointer-events: none !important;
  }

  /* ===== FASE 10C – Mobile Dropdown (Flat / Always Open) ===== */
  #mainHeader .nav-links.mobile-open .has-dropdown {
    flex-wrap: wrap;
  }

  #mainHeader .nav-links.mobile-open .has-dropdown > a::after {
    display: none !important;
  }

  #mainHeader .nav-links.mobile-open .dropdown-menu {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 4px 0 !important;
    margin: 0 !important;
    min-width: auto;
  }

  #mainHeader .nav-links.mobile-open .dropdown-menu li {
    width: 100%;
    display: flex;
    opacity: 0;
    animation: mobileMenuFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
  }

  #mainHeader .nav-links.mobile-open .dropdown-menu a {
    width: 100%;
    padding: 7px 14px 7px 36px !important;
    font-size: var(--fs-400) !important;
    color: rgba(226, 232, 240, 0.55) !important;
    border-left: 2px solid rgba(var(--accent-cyan-hero-rgb), 0.12) !important;
    border-radius: 0 !important;
    margin-left: 14px;
  }

  #mainHeader .nav-links.mobile-open .dropdown-menu a::before {
    content: '›' !important;
    font-family: inherit !important;
    font-size: var(--fs-600) !important;
    font-weight: 400;
    color: rgba(var(--accent-cyan-hero-rgb), 0.35);
    margin-right: 8px;
  }

  #mainHeader .nav-links.mobile-open .dropdown-menu a:hover,
  #mainHeader .nav-links.mobile-open .dropdown-menu a:focus-visible {
    color: var(--accent-cyan, var(--accent-cyan-chat)) !important;
    border-left-color: var(--accent-cyan, var(--accent-cyan-chat)) !important;
    background: rgba(var(--accent-cyan-chat-rgb), 0.04) !important;
    padding-left: 40px !important;
  }
  /* ===== END FASE 10C Mobile Dropdown ===== */
}

@media (max-width: 420px) {
  #mainHeader .nav-container {
    padding-inline: 12px;
  }

  #mainHeader .nav-links.mobile-open {
    /* Antes 95px, que era el hueco para la cabecera; ya no hace falta porque el
       panel entero empieza debajo de ella (ver el bloque principal). */
    padding: 18px 10px 0 !important;
    gap: 6px !important;
  }

  #mainHeader .nav-links.mobile-open a {
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: var(--fs-300) !important;
  }

  #mainHeader .nav-links.mobile-open a::before {
    font-size: var(--fs-100) !important;
    margin-bottom: 2px !important;
  }
}

/* =========================================================
05. Hero Enhancement Layer
========================================================= */
.hero {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 72px);
  margin-top: 72px;
  padding:
    68px max(24px, calc((100vw - 1240px) / 2 + 24px))
    72px;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.86fr);
  align-items: center;
  gap: clamp(36px, 6rem, 72px);
  isolation: isolate;
  overflow: clip;
  background:
    linear-gradient(112deg, rgba(10, 15, 29, 0.98) 0%, rgba(10, 15, 29, 0.88) 47%, rgba(7, 12, 24, 0.96) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 40px);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(10, 15, 29, 0.98) 0%, rgba(10, 15, 29, 0.78) 44%, rgba(10, 15, 29, 0.52) 64%, rgba(10, 15, 29, 0.92) 100%),
    url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") 82% center / min(48rem, 54vw) auto no-repeat;
  opacity: 0.48;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 0%, rgba(10, 15, 29, 0.48) 68%, rgba(10, 15, 29, 0.98) 100%),
    linear-gradient(90deg, rgba(var(--accent-cyan-hero-rgb), 0.08), transparent 34%, rgba(143, 124, 255, 0.08));
  pointer-events: none;
}

.hero-content {
  max-width: 690px;
}

.hero-tagline {
  width: fit-content;
  min-height: 34px;
  margin-bottom: 18px;
  padding: 7px 12px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.24);
  border-radius: 999px;
  background: rgba(var(--accent-cyan-hero-rgb), 0.08);
  color: var(--enhance-accent);
  font-size: var(--fs-500);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.hero-tagline::before {
  display: none;
}

/* Helper for desktop line breaks */
.desktop-only {
  display: none;
}

@media (min-width: 1025px) {
  .desktop-only {
    display: inline;
  }
  .hero-title {
    white-space: nowrap;
    max-width: none !important;
    font-size: clamp(2.5rem, 4vw, 3.8rem) !important;
  }
}

.hero-title {
  max-width: 650px;
  margin: 0 0 22px;
  color: var(--text-primary);
  font-size: 4rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* El acento del hero lo pinta PREMIUM 10 (mas abajo): azul plano con el
   resplandor en dos capas. Aqui vivia el degradado cian -> #8f7cff que le
   dejaba el final en lila y, por el background-clip:text, le cortaba el rabo
   de la ultima letra. Poner "color" NO lo desactivaba: -webkit-text-fill-color
   es otra propiedad y seguia dejando la letra transparente con el degradado
   asomando por debajo. Por eso sobrevivio a caefc57. */

.hero-subtitle {
  max-width: 62ch;
  margin: 0 0 14px;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-800);
  font-weight: 500;
  line-height: 1.55;
}

.hero-desc {
  max-width: 56ch;
  margin: 0 0 20px;
  color: rgba(148, 163, 184, 0.94);
  font-size: var(--fs-700);
  line-height: 1.62;
}

.hero-authority-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 620px;
  margin: 0 0 26px;
}

.hero-authority-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-bright);
  font-size: var(--fs-500);
  font-weight: 800;
  line-height: 1;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.hero-cta .btn {
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 999px;
}

.hero-cta .btn-primary {
  background: var(--enhance-gradient-accent);
  box-shadow: 0 18px 42px rgba(var(--accent-cyan-hero-rgb), 0.2);
}

.hero-cta .btn-secondary {
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--surface-3);
}

.hero-target-audiences {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-500);
  color: var(--text-soft);
  line-height: 1.4;
  /* Este margen negativo venia de cuando el recuadro seguia directamente a los
     botones. Al colarse en medio la nota de "Resposta personal en un maxim de
     2 dies laborables", el recuadro le subia encima 6px y le cortaba los rabos
     de la p, la j y la accentuada. Se deja el mismo aire que la nota tiene por
     arriba, para que quede centrada entre los botones y el recuadro. */
  margin-top: 10px;
  margin-bottom: 26px;
  padding: 8px 14px;
  border-left: 2px solid var(--accent-cyan-chat);
  background: rgba(var(--accent-cyan-chat-rgb), 0.03);
  border-radius: 0 8px 8px 0;
  max-width: 520px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-proof-strip {
  max-width: 650px;
  margin-top: 0;
}

.hero-media {
  justify-content: flex-end;
  min-width: 0;
}

.hero-media-wrapper {
  position: relative;
  width: min(100%, 540px);
  max-width: 540px;
  min-height: 608px;
  display: grid;
  place-items: start center;
  gap: 0;
}

.hero-media-wrapper::before {
  content: '';
  position: absolute;
  inset: 22px 8px 68px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.12);
  border-radius: var(--enhance-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  transform: rotate(-2deg);
  pointer-events: none;
}

.hero-img-container {
  width: min(390px, 78%);
  height: 510px;
  border-radius: var(--enhance-radius-lg);
  padding: 3px;
  overflow: visible;
  background: var(--enhance-gradient-accent);
  box-shadow: var(--enhance-shadow-soft), 0 0 44px rgba(var(--accent-cyan-hero-rgb), 0.14);
  animation: heroPortraitFloat 7s ease-in-out infinite;
  z-index: 2;
}

.hero-img-container::before {
  inset: -10px;
  border-radius: calc(var(--enhance-radius-lg) + 6px);
  filter: blur(18px);
  opacity: 0.54;
  animation: none;
}

.hero-img-container img {
  border-radius: calc(var(--enhance-radius-lg) - 5px);
  object-position: center top;
}

.portrait-data-card {
  right: -22px;
  bottom: 28px;
  width: min(248px, 78%);
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.2);
  background: rgba(var(--depth-2-rgb), 0.84);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.hero-floating-modules {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  display: block;
}

.hero-float-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--enhance-border);
  border-radius: 999px;
  background: rgba(var(--depth-2-rgb), 0.78);
  color: var(--text-bright);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: var(--fs-400);
  font-weight: 900;
  line-height: 1;
}

.hero-float-ia {
  top: 50px;
  left: -20px;
}

.hero-float-comunicacion {
  top: 130px;
  right: -30px;
}

.hero-float-verification {
  bottom: 210px;
  left: -15px;
}

.hero-float-ponencias {
  bottom: 120px;
  right: -25px;
}

.hero-float-rtve {
  top: 220px;
  left: -40px;
}

.hero-float-docencia {
  bottom: 40px;
  right: -10px;
}

.hero-console-row {
  position: absolute;
  right: 8px;
  bottom: -40px;
  width: min(360px, 78%);
  margin-top: 0;
  z-index: 5;
}

.hero-console {
  max-height: 128px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(var(--depth-2-rgb), 0.86);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.hero-cyborg-avatar {
  width: 58px;
  height: 58px;
}

@keyframes heroPortraitFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 34px;
  }

  .hero-title {
    font-size: 3.75rem;
  }

  .hero-media-wrapper {
    min-height: 540px;
  }

  .hero-img-container {
    height: 450px;
  }
}

@media (max-width: 992px) {
  .hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-top: 48px;
    padding-bottom: 54px;
    gap: 30px;
  }

  .hero-content {
    max-width: 760px;
  }

  .hero-title {
    max-width: 13.5ch;
    font-size: 3.35rem;
  }

  .hero-media {
    width: 100%;
    justify-content: center;
  }

  .hero-media-wrapper {
    width: min(100%, 720px);
    max-width: 720px;
    min-height: 285px;
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  .hero-media-wrapper::before {
    inset: 12px;
    transform: none;
  }

  .hero-img-container {
    width: min(250px, 100%);
    height: 285px;
    animation: none;
  }

  .portrait-data-card,
  .hero-console-row {
    display: none;
  }

  .hero-floating-modules {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    z-index: 3;
  }

  .hero-float-card {
    position: static;
    min-width: 0;
    min-height: 50px;
    border-radius: var(--enhance-radius-md);
  }
}

@media (max-width: 768px) {
  .hero {
    margin-top: 67px;
    padding: 30px 24px 42px;
    gap: 22px;
    text-align: left;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(10, 15, 29, 0.9), rgba(10, 15, 29, 0.98)),
      url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") center top / cover no-repeat;
    opacity: 0.26;
  }

  .hero-title {
    max-width: 12.5ch;
    margin-bottom: 16px;
    font-size: 2.75rem;
    line-height: 1.02;
  }

  .hero-tagline {
    min-height: 32px;
    margin-bottom: 14px;
    font-size: var(--fs-400);
  }

  .hero-subtitle {
    margin-bottom: 12px;
    font-size: var(--fs-800);
    line-height: 1.48;
  }

  .hero-desc {
    margin-bottom: 16px;
    font-size: var(--fs-600);
    line-height: 1.5;
  }

  .hero-authority-chips {
    gap: 7px;
    margin-bottom: 18px;
  }

  .hero-authority-chips span {
    min-height: 32px;
    padding: 8px 10px;
    font-size: var(--fs-400);
  }

  .hero-cta {
    gap: 10px;
    margin-bottom: 18px;
  }

  .hero-cta .btn {
    min-height: 48px;
    padding: 12px 16px;
  }

  .hero-proof-strip {
    grid-template-columns: 0.9fr 0.9fr 1.2fr;
    gap: 8px;
  }

  .proof-pill {
    min-height: 76px;
    padding: 10px 8px;
  }

  .proof-kicker {
    font-size: var(--fs-100);
    letter-spacing: 0.04em;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
  }

  .hero-media-wrapper {
    min-height: 190px;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 14px;
  }

  .hero-img-container {
    width: 148px;
    height: 178px;
    border-radius: 18px;
  }

  .hero-img-container img {
    border-radius: 14px;
  }

  .hero-floating-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-float-card {
    min-height: 40px;
    padding: 8px;
    font-size: var(--fs-300);
  }
}

@media (max-width: 420px) {
  .hero {
    padding: 24px 18px 34px;
    gap: 12px;
  }

  .hero-title {
    max-width: 13.5ch;
    font-size: 2.04rem;
  }

  .hero-subtitle {
    font-size: var(--fs-600);
  }

  .hero-cta {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .hero-proof-strip {
    display: none;
  }

  .hero-media-wrapper {
    min-height: 140px;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
  }

  .hero-img-container {
    width: 104px;
    height: 128px;
    border-radius: 16px;
  }

  .hero-floating-modules {
    gap: 7px;
    padding-right: 54px;
  }

  .hero-float-card {
    min-height: 36px;
    padding: 7px 8px;
    overflow: hidden;
    font-size: var(--fs-200);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.hero-floating-modules {
  display: none !important;
}

@media (max-width: 992px) {
  .hero-target-audiences {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-left: 0;
    border-top: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.12);
    border-radius: 0;
    max-width: 100%;
  }

  .hero-media-wrapper {
    width: min(250px, 100%);
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

@media (max-width: 768px) {
  .hero-media-wrapper {
    width: 148px;
  }
}

@media (max-width: 420px) {
  .hero-media-wrapper {
    width: 104px;
  }
}

/* =========================================================
06. Contact Enhancement Layer
========================================================= */
.contact {
  width: 100%;
  max-width: none;
  padding:
    clamp(40px, 5vw, 64px)
    max(24px, calc((100vw - 1240px) / 2 + 24px))
    var(--enhance-space-section);
  overflow: clip;
  background: transparent !important;
}

.contact > .contact-grid {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.contact > .section-tag,
.contact > .section-title {
  position: relative;
  z-index: 1;
}

.contact > .section-title {
  /* En catalan el titular necesita 828px para caber en una sola linea y el
     tope estaba en 820: fallaba por ocho pixeles y "esdeveniment" caia sola a
     la segunda fila. 900 deja margen para los tres idiomas. */
  max-width: 900px;
  margin-bottom: 42px;
  margin-left: 0;
}

.contact-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: clamp(28px, 5vw, 60px);
}

.contact-info-panel,
.contact-form {
  position: relative;
  min-width: 0;
  border: 1px solid var(--enhance-border);
  border-radius: var(--enhance-radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  box-shadow: var(--enhance-shadow-soft);
  backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
}

.contact-info-panel {
  justify-content: flex-start;
  gap: 30px;
  padding: clamp(24px, 4vw, 40px);
}

.contact-copy {
  display: grid;
  gap: 16px;
}

.contact-copy .hero-subtitle {
  max-width: 36rem;
  margin: 0;
  color: var(--text-bright);
  font-family: var(--font-heading);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.22;
}

.contact-lead {
  max-width: 40rem;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-700);
  line-height: 1.65;
}

.contact-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 8px;
}

.contact-service-list span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-bright);
  font-size: var(--fs-500);
  font-weight: 800;
  line-height: 1;
}

.contact-cards {
  gap: 14px;
  margin-top: 0;
}

.contact-card {
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: var(--enhance-radius-md);
  background: rgba(var(--depth-2-rgb), 0.48);
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.34);
  background: rgba(var(--accent-cyan-hero-rgb), 0.075);
}

.contact-icon {
  flex: 0 0 auto;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.18);
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.14), rgba(143, 124, 255, 0.12));
}

.contact-card-info {
  min-width: 0;
}

.contact-card-info h3 {
  letter-spacing: 0;
}

.contact-card-info a {
  color: var(--text-bright);
  text-decoration: none;
}

.contact-card-info a:hover,
.contact-card-info a:focus-visible {
  color: var(--enhance-accent);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

@media (min-width: 993px) {
  .contact-actions {
    margin-bottom: 38px;
  }
}

.contact-quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-bright);
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--enhance-transition), border-color var(--enhance-transition), background-color var(--enhance-transition);
}

.contact-quick-primary {
  border-color: transparent;
  background: var(--enhance-gradient-accent);
  color: #fff;
}

.contact-quick-link:hover,
.contact-quick-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.38);
}

.contact-form {
  padding: clamp(24px, 4vw, 38px);
}

.contact-form form {
  display: grid;
  gap: 18px;
}

.contact-form-fields {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.contact-form-head {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.contact-form-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.1;
}

.contact-form-head p,
.contact-form-note {
  margin: 0;
  color: rgba(148, 163, 184, 0.94);
  font-size: var(--fs-600);
  line-height: 1.55;
}

.contact-form .form-group {
  margin-bottom: 0;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-form label,
.contact-intent-label {
  color: var(--text-body);
  font-size: var(--fs-500);
  font-weight: 850;
}

.contact-intent-group {
  display: grid;
  gap: 10px;
}

.contact-intent-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.contact-intent-btn {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--enhance-radius-sm);
  background: var(--surface-3);
  color: var(--text-body);
  text-align: left;
  line-height: 1.15;
}

.contact-intent-btn strong {
  display: block;
  min-width: 0;
  color: var(--text-bright);
  font-size: var(--fs-500);
  font-weight: 900;
  line-height: 1.16;
}

.contact-intent-btn span {
  display: block;
  min-width: 0;
  color: rgba(203, 213, 225, 0.74);
  font-size: var(--fs-300);
  line-height: 1.3;
}

.contact-intent-wide {
  grid-column: 1 / -1;
}

.contact-intent-btn:hover,
.contact-intent-btn:focus-visible,
.contact-intent-btn.active {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.44);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.15), rgba(143, 124, 255, 0.12));
  color: var(--text-primary);
}

.contact-intent-btn.active span {
  color: var(--text-body);
}

.contact-form .form-control {
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--enhance-radius-sm);
  background: rgba(var(--depth-2-rgb), 0.56);
  color: var(--text-primary);
  transition: border-color var(--enhance-transition), box-shadow var(--enhance-transition), background-color var(--enhance-transition);
}

.event-date-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: stretch;
}

.contact-form input[type="date"].form-control {
  color-scheme: dark;
  cursor: pointer;
}

.contact-form input[type="date"].form-control::-webkit-calendar-picker-indicator {
  padding: 6px;
  cursor: pointer;
  filter: invert(85%) sepia(24%) saturate(1004%) hue-rotate(142deg) brightness(101%);
}

.event-date-undecided-btn {
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--enhance-radius-sm);
  background: rgba(var(--depth-3-rgb), 0.62);
  color: var(--text-body);
  cursor: pointer;
  font: 750 var(--fs-400) / 1 var(--font-sans, system-ui, sans-serif);
  transition: border-color var(--enhance-transition), background-color var(--enhance-transition), color var(--enhance-transition), box-shadow var(--enhance-transition);
}

.event-date-undecided-btn:hover,
.event-date-undecided-btn:focus-visible,
.event-date-undecided-btn.is-active {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.56);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.18), rgba(143, 124, 255, 0.13));
  color: var(--text-primary);
}

.event-date-undecided-btn.is-active {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-hero-rgb), 0.18), 0 0 18px rgba(var(--accent-cyan-hero-rgb), 0.08);
}

.event-date-help {
  margin: 7px 0 0;
  color: rgba(148, 163, 184, 0.88);
  font-size: var(--fs-300);
  line-height: 1.4;
}

.contact-form select.form-control {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(248, 250, 252, 0.78) 50%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.78) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 21px,
    calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.contact-form textarea.form-control {
  min-height: 142px;
  resize: vertical;
}

.contact-proposal-guide {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.16);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.08), rgba(143, 124, 255, 0.045)),
    rgba(7, 12, 24, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.contact-proposal-guide h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: var(--fs-600);
  line-height: 1.22;
}

.contact-proposal-guide p {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-size: var(--fs-500);
  line-height: 1.4;
}

.contact-proposal-guide ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-proposal-guide li {
  position: relative;
  min-width: 0;
  padding-left: 14px;
  color: var(--text-body);
  font-size: var(--fs-400);
  line-height: 1.35;
}

.contact-proposal-guide li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--enhance-accent);
  box-shadow: 0 0 10px rgba(var(--accent-cyan-hero-rgb), 0.5);
}

.contact-form .form-control:focus {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.48);
  background: rgba(var(--depth-2-rgb), 0.72);
  box-shadow: 0 0 0 4px rgba(var(--accent-cyan-hero-rgb), 0.11);
  outline: none;
}

.contact-form .btn-primary {
  min-height: 54px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--enhance-gradient-accent);
  box-shadow: 0 18px 42px rgba(var(--accent-cyan-hero-rgb), 0.2);
}

@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .contact {
    padding: 64px 24px 110px;
    background:
      radial-gradient(circle at 16% 22%, rgba(var(--accent-cyan-hero-rgb), 0.14), transparent 30%),
      radial-gradient(circle at 88% 20%, rgba(143, 124, 255, 0.14), transparent 32%),
      linear-gradient(180deg, rgba(10, 15, 29, 0.3), rgba(7, 12, 24, 0.3)) !important;
  }

  .contact > .section-title {
    margin-bottom: 30px;
  }
}

@media (max-width: 520px) {
  .contact {
    padding-inline: 18px;
  }

  .contact-info-panel,
  .contact-form {
    padding: 22px;
    border-radius: var(--enhance-radius-md);
  }

  .contact-form-row,
  .contact-intent-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-actions,
  .contact-quick-link {
    width: 100%;
  }

  .contact-card {
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }
}

@media (max-width: 380px) {
  .contact {
    padding-inline: 16px;
  }

  .contact-info-panel,
  .contact-form {
    padding: 18px;
  }
}

/* =========================================================
07. Portfolio Enhancement Layer
========================================================= */
.portfolio {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  padding:
    var(--enhance-space-section)
    max(24px, calc((100vw - 1240px) / 2 + 24px));
  overflow: clip;
  background: transparent !important;
}

.portfolio::before,
.portfolio::after {
  display: none !important;
}

.portfolio::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%);
  opacity: 0.32;
}

.portfolio::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.08), transparent 46%);
  opacity: 0.62;
}

.portfolio > .portfolio-filters,
.portfolio > .portfolio-live-summary,
.portfolio > .portfolio-grid,
.portfolio > .portfolio-show-more-wrapper {
  position: relative;
  z-index: 1;
  width: min(100%, 1160px);
  margin-inline: auto;
}

.portfolio > .section-tag,
.portfolio > .section-title {
  position: relative;
  z-index: 1;
}

.portfolio > .section-title {
  max-width: 780px;
  margin-bottom: 28px;
  margin-left: 0;
}

.portfolio-filters {
  width: fit-content;
  max-width: min(100%, 860px);
  margin-bottom: 16px;
  padding: 7px;
  gap: 7px;
  border-color: var(--enhance-border);
  border-radius: 999px;
  background: rgba(var(--depth-2-rgb), 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.18);
}

.portfolio > .portfolio-filters {
  width: fit-content;
}

.filter-btn {
  min-height: 38px;
  padding: 9px 13px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(var(--depth-2-rgb), 0.45);
  color: var(--text-body);
  font-size: var(--fs-500);
}

.filter-btn:hover,
.filter-btn:focus-visible,
.filter-btn.active {
  border-color: transparent;
  background: var(--enhance-gradient-accent);
  color: #fff;
  box-shadow: 0 14px 30px rgba(var(--accent-cyan-hero-rgb), 0.18);
}

.portfolio-live-summary {
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--text-soft);
}

.portfolio-live-summary span {
  min-width: 0;
}

#portfolioCount {
  color: var(--text-primary);
}

.portfolio-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.portfolio-card {
  min-width: 0;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.032)),
    rgba(7, 12, 24, 0.58);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.portfolio-card:hover,
.portfolio-card:focus-within,
.portfolio-card.is-previewing {
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--accent-cyan-hero-rgb), 0.12);
}

.portfolio-media {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.portfolio-media::before {
  background:
    linear-gradient(180deg, rgba(7, 12, 24, 0.08), transparent 34%, rgba(7, 12, 24, 0.64)),
    radial-gradient(circle at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.22) 72%);
  mix-blend-mode: normal;
  opacity: 0.68;
  z-index: 2;
}

.portfolio-card:hover .portfolio-media::before,
.portfolio-card:focus-within .portfolio-media::before,
.portfolio-card.is-previewing .portfolio-media::before {
  opacity: 0.76;
}

.portfolio-media img,
.portfolio-media video {
  transform-origin: center;
}

.portfolio-card:hover .portfolio-media img,
.portfolio-card.is-previewing .portfolio-media img {
  opacity: 0.36;
  transform: scale(1.045);
}

.portfolio-card:hover .portfolio-media video,
.portfolio-card.is-previewing .portfolio-media video {
  opacity: 0.94;
  transform: scale(1.035);
}

.play-badge,
.zoom-badge {
  z-index: 7;
  width: 46px;
  height: 46px;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(var(--depth-2-rgb), 0.72);
  color: #fff;
}

.portfolio-tag-overlay {
  z-index: 8;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 28px);
  padding: 5px 9px;
  border-color: var(--enhance-border);
  border-radius: 999px;
  background: rgba(var(--depth-2-rgb), 0.72);
  color: var(--text-bright);
  font-size: var(--fs-100);
  letter-spacing: 0;
}

.mojo-viewfinder {
  z-index: 5;
}

.portfolio-info {
  min-height: 174px;
  padding: 15px 16px 16px;
  gap: 0;
}

.portfolio-meta {
  align-items: center;
  margin-bottom: 8px;
  color: rgba(148, 163, 184, 0.92);
  font-size: var(--fs-300);
}

.portfolio-meta span:last-child {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-4);
}

.portfolio-title {
  margin-bottom: 8px;
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  line-height: 1.24;
}

.portfolio-desc {
  display: -webkit-box;
  margin-bottom: 13px;
  color: var(--text-soft);
  font-size: var(--fs-500);
  line-height: 1.46;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.portfolio-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  min-height: 36px;
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--accent-cyan-hero-rgb), 0.075);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1;
  transition: transform var(--enhance-transition), border-color var(--enhance-transition), background-color var(--enhance-transition), box-shadow var(--enhance-transition), gap var(--enhance-transition);
}

.portfolio-link::after {
  content: '\2192';
  font-weight: 900;
}

.portfolio-link:hover,
.portfolio-link:focus-visible {
  gap: 10px;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.56);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.16), rgba(143, 124, 255, 0.13));
  color: #fff;
  outline: none;
  box-shadow: 0 10px 24px rgba(var(--accent-cyan-hero-rgb), 0.12);
  transform: translateY(-1px);
}

.portfolio-show-more-wrapper {
  margin-top: 28px;
}

.portfolio-show-more {
  min-height: 46px;
  border-radius: 999px;
}

.lightbox {
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--accent-cyan-hero-rgb), 0.13), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(143, 124, 255, 0.12), transparent 32%),
    rgba(2, 6, 14, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lightbox-content {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--enhance-radius-md);
  background: rgba(var(--depth-1-rgb), 0.96);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
}

.lightbox-close,
.lightbox-nav,
.lightbox-counter {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(var(--depth-2-rgb), 0.82);
}

.lightbox.portfolio-mode .lightbox-details {
  color: var(--text-body);
}

.lightbox.portfolio-mode .details-title {
  color: var(--text-primary);
}

.lightbox.portfolio-mode .details-category,
.lightbox.portfolio-mode .details-meta {
  color: var(--enhance-accent);
}

@media (max-width: 1200px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .portfolio {
    padding: 60px 24px 78px;
    background:
      radial-gradient(circle at 12% 10%, rgba(var(--accent-cyan-hero-rgb), 0.2), transparent 27%),
      radial-gradient(circle at 82% 18%, rgba(143, 124, 255, 0.17), transparent 31%),
      radial-gradient(circle at 48% 92%, rgba(14, 165, 233, 0.1), transparent 34%),
      linear-gradient(145deg, rgba(3, 7, 18, 0.3) 0%, rgba(11, 17, 32, 0.3) 46%, rgba(4, 10, 24, 0.3) 100%) !important;
  }

  .portfolio::before,
  .portfolio::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Ocultar información superpuesta del visor en móviles para mayor limpieza visual */
  .vf-top-info,
  .vf-audio-spectrogram {
    display: none !important;
  }

  /* Adaptar etiqueta informativa de la tarjeta en móvil para evitar desbordamientos */
  .portfolio-tag-overlay {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: var(--fs-100);
    max-width: calc(100% - 20px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .portfolio-filters {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--enhance-radius-md);
  }

  .filter-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .portfolio-live-summary {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-card {
    border-radius: var(--enhance-radius-md);
  }

  .portfolio-info {
    min-height: 0;
    padding: 14px;
  }

  .portfolio-link {
    min-height: 38px;
  }
}

@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .portfolio-card {
    display: flex;
    flex-direction: column;
  }

  .portfolio-desc {
    display: none !important; /* Hide description on mobile for compact cards */
  }

  .portfolio-title {
    font-size: var(--fs-500) !important;
    line-height: 1.3 !important;
    margin-block: 4px 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em !important; /* Align card title heights */
  }

  .portfolio-meta {
    font-size: var(--fs-200) !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
  }

  .portfolio-info {
    padding: 8px 10px 10px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .portfolio-link {
    min-height: 36px !important;
    font-size: var(--fs-400) !important;
    padding: 6px 8px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 420px) {
  .portfolio {
    padding-inline: 18px;
  }

  .portfolio-filters {
    gap: 7px;
    padding: 7px;
  }

  .filter-btn {
    min-height: 40px;
    padding: 9px 10px;
    font-size: var(--fs-400);
  }

  .portfolio-media {
    aspect-ratio: 16 / 9;
  }

  .portfolio-info {
    padding: 14px;
  }

  .portfolio-meta {
    flex-wrap: wrap;
  }

  .portfolio-title {
    font-size: var(--fs-600);
  }

  .portfolio-desc {
    font-size: var(--fs-500);
    line-height: 1.45;
  }

  .portfolio-link {
    min-height: 40px;
    padding-inline: 14px;
  }

  .lightbox-content {
    width: calc(100vw - 24px);
    border-radius: var(--enhance-radius-sm);
  }

  .lightbox.portfolio-mode .details-desc {
    display: block;
    max-height: 4.8em;
    overflow: auto;
    font-size: var(--fs-500);
    line-height: 1.45;
  }
}

/* =========================================================
08. Radio IA Enhancement Layer
========================================================= */
.radio-section {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  padding:
    clamp(72px, 8vw, 112px)
    max(24px, calc((100vw - 1240px) / 2 + 24px));
  overflow: clip;
  background: transparent !important;
}

.radio-section::before,
.radio-section::after {
  display: none !important;
}

.radio-section > .radio-signal-strip,
.radio-section > .radio-container {
  position: relative;
  z-index: 1;
  width: min(100%, 1160px);
  margin-inline: auto;
}

.radio-section > .section-tag,
.radio-section > .section-title {
  position: relative;
  z-index: 1;
}

.radio-section > .section-title {
  max-width: 820px;
  margin-bottom: 24px;
  margin-left: 0;
}

.radio-signal-strip {
  gap: 10px;
  max-width: min(100%, 920px);
  margin-bottom: 24px;
}

.radio-signal-pill {
  min-width: 0;
  min-height: 50px;
  padding: 11px 14px;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.072), rgba(var(--accent-cyan-hero-rgb), 0.038)),
    rgba(7, 12, 24, 0.58);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.radio-signal-pill span {
  color: #06121f;
  background: linear-gradient(135deg, var(--enhance-accent), var(--enhance-accent-2));
  border-color: transparent;
  box-shadow: 0 0 18px rgba(var(--accent-cyan-hero-rgb), 0.24);
}

.radio-signal-pill strong {
  color: var(--text-bright);
  font-size: var(--fs-500);
}

.radio-container {
  grid-template-columns: minmax(300px, 0.88fr) minmax(400px, 1.12fr);
  gap: clamp(18px, 2vw, 24px);
}

.radio-playlist-wrapper,
.radio-player-console {
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: var(--enhance-radius-lg);
  box-shadow: var(--enhance-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.radio-playlist-wrapper {
  height: 500px;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--accent-cyan-hero-rgb), 0.12), transparent 38%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(7, 12, 24, 0.7));
}

.radio-playlist-wrapper::before {
  opacity: 0.24;
}

.playlist-header {
  padding: 17px 18px 14px;
  background:
    linear-gradient(90deg, rgba(7, 12, 24, 0.84), rgba(15, 23, 42, 0.66)),
    rgba(255, 255, 255, 0.02);
}

.playlist-title {
  font-size: var(--fs-800);
}

.playlist-subtitle {
  color: var(--text-soft);
}

.playlist-live-badge {
  min-height: 28px;
  color: #9ff6bd;
  background: rgba(34, 197, 94, 0.09);
}

.radio-discovery-controls {
  padding: 0 16px 12px;
}

.radio-search-input {
  min-height: 39px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--enhance-radius-sm);
  background: rgba(var(--depth-1-rgb), 0.48);
}

.radio-topic-filters {
  gap: 7px;
}

.radio-topic-btn {
  min-height: 32px;
  padding: 7px 10px;
  border-color: rgba(255, 255, 255, 0.11);
  background: var(--surface-3);
  color: rgba(226, 232, 240, 0.78);
  font-size: var(--fs-300);
}

.radio-topic-btn:hover,
.radio-topic-btn:focus-visible,
.radio-topic-btn.active {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.45);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.16), rgba(143, 124, 255, 0.1));
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--accent-cyan-hero-rgb), 0.1);
}

.radio-playlist {
  gap: 8px;
  padding: 14px 16px 16px;
}

.playlist-track {
  min-height: 56px;
  gap: 12px;
  padding: 10px 12px;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: var(--enhance-radius-sm);
  background: var(--surface-2);
}

.playlist-track:hover {
  transform: translateX(3px);
}

.playlist-track.active {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.48);
  background:
    linear-gradient(90deg, rgba(var(--accent-cyan-hero-rgb), 0.18), rgba(143, 124, 255, 0.09)),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 12px 30px rgba(var(--accent-cyan-hero-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.track-number {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: var(--fs-400);
}

.track-title {
  font-size: var(--fs-500);
  line-height: 1.24;
}

.track-date {
  font-size: var(--fs-300);
}

.track-wave-icon {
  width: 16px;
}

.radio-player-console {
  min-width: 0;
  padding: 17px;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--accent-cyan-hero-rgb), 0.18), transparent 36%),
    radial-gradient(circle at 92% 12%, rgba(143, 124, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(3, 7, 18, 0.82));
}

.radio-player-console::before {
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.28), transparent 42%, rgba(143, 124, 255, 0.2));
}

.radio-console-body {
  gap: 14px;
}

.radio-console-topline {
  color: rgba(203, 213, 225, 0.66);
}

.radio-console-topline strong {
  color: var(--enhance-accent);
}

.vu-meters-container {
  gap: 12px;
  padding: 10px 12px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--enhance-radius-sm);
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.72), rgba(7, 12, 24, 0.5)),
    radial-gradient(circle at 50% 100%, rgba(var(--accent-cyan-hero-rgb), 0.08), transparent 54%);
}

.vu-meter {
  height: 78px;
  border-radius: 8px;
}

.vu-needle {
  height: 47px;
}

.console-now-playing {
  gap: 9px;
  padding: 13px 14px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.78), rgba(7, 12, 24, 0.62)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 7px);
}

.radio-player-console:not(.playing) .now-playing-badge::before {
  animation: none;
  opacity: 0.42;
  box-shadow: none;
}

.radio-player-console.playing .now-playing-badge::before {
  animation: radioStatusPulse 1.4s ease-in-out infinite;
}

.now-playing-title-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.now-playing-theme-wrapper {
  max-width: 48%;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.now-playing-title {
  font-size: clamp(1rem, 1.25vw, 1.14rem);
}

.now-playing-desc {
  display: -webkit-box;
  margin: -2px 0 0;
  color: var(--text-soft);
  font-size: var(--fs-500);
  line-height: 1.45;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.radio-spectrum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 16px;
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--enhance-radius-sm, 10px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.radio-spectrum::before {
  display: none !important;
}

.radio-spectrum::after {
  display: none !important;
}

.radio-spectrum span {
  display: block !important;
  width: 3px;
  height: 60%;
  border-radius: 999px;
  background: linear-gradient(to top, var(--accent-cyan, var(--accent-cyan)), var(--enhance-accent, var(--enhance-accent-2)));
  opacity: 0.35;
  transform-origin: bottom;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
  animation: spectrumStandby 1.8s ease-in-out infinite;
}

.radio-spectrum span:nth-child(2n) { height: 40%; animation-delay: -0.2s; }
.radio-spectrum span:nth-child(3n) { height: 75%; animation-delay: -0.4s; }
.radio-spectrum span:nth-child(4n) { height: 50%; animation-delay: -0.6s; }
.radio-spectrum span:nth-child(5n) { height: 65%; animation-delay: -0.8s; }
.radio-spectrum span:nth-child(6n) { height: 35%; animation-delay: -1.0s; }
.radio-spectrum span:nth-child(7n) { height: 80%; animation-delay: -1.2s; }

@keyframes spectrumStandby {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.25;
  }
  50% {
    transform: scaleY(0.7);
    opacity: 0.45;
  }
}

.radio-player-console.playing .radio-spectrum {
  background: rgba(var(--accent-cyan-hero-rgb), 0.05);
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.15);
  box-shadow: inset 0 0 10px rgba(var(--accent-cyan-hero-rgb), 0.05);
}

.radio-player-console.playing .radio-spectrum span {
  opacity: 0.95;
  background: linear-gradient(to top, var(--accent-cyan, var(--accent-cyan)), #ff5ebc) !important;
  animation: spectrumActive 0.75s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 3px rgba(var(--accent-cyan-hero-rgb), 0.6));
}

.radio-player-console.playing .radio-spectrum span:nth-child(2n) { animation-delay: -0.15s; animation-duration: 0.6s; }
.radio-player-console.playing .radio-spectrum span:nth-child(3n) { animation-delay: -0.32s; animation-duration: 0.85s; }
.radio-player-console.playing .radio-spectrum span:nth-child(4n) { animation-delay: -0.45s; animation-duration: 0.5s; }
.radio-player-console.playing .radio-spectrum span:nth-child(5n) { animation-delay: -0.22s; animation-duration: 0.7s; }
.radio-player-console.playing .radio-spectrum span:nth-child(6n) { animation-delay: -0.58s; animation-duration: 0.9s; }
.radio-player-console.playing .radio-spectrum span:nth-child(7n) { animation-delay: -0.1s; animation-duration: 0.65s; }

@keyframes spectrumActive {
  0% {
    transform: scaleY(0.2);
  }
  100% {
    transform: scaleY(1.3);
  }
}

.radio-progress-container {
  margin-top: 0;
}

.progress-bar-wrapper {
  height: 9px;
}

.radio-preview-btn,
.radio-play-btn {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--enhance-radius-sm);
}

/* Icon Dual Wrapper */
.preview-btn-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 16px;
  height: 16px;
}

.radio-preview-btn.state-ready .play-icon-standard,
.radio-preview-btn.state-paused .play-icon-standard {
  display: inline-flex !important;
}
.radio-preview-btn.state-ready .pause-icon-standard,
.radio-preview-btn.state-paused .pause-icon-standard {
  display: none !important;
}

.radio-preview-btn.state-playing .play-icon-standard {
  display: none !important;
}
.radio-preview-btn.state-playing .pause-icon-standard {
  display: inline-flex !important;
}

/* Ready State */
.radio-preview-btn.state-ready {
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.42) !important;
  color: var(--accent-cyan, var(--accent-cyan)) !important;
  background: rgba(var(--accent-cyan-hero-rgb), 0.08) !important;
}
.radio-preview-btn.state-ready:hover {
  background: rgba(var(--accent-cyan-hero-rgb), 0.16) !important;
  box-shadow: 0 4px 15px rgba(var(--accent-cyan-hero-rgb), 0.2) !important;
  transform: translateY(-2px);
}

/* Playing State */
.radio-preview-btn.state-playing {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(16, 185, 129, 0.6)) !important;
  border-color: rgba(34, 197, 94, 0.8) !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.2) !important;
  animation: playingGlowPulse 1.5s ease-in-out infinite alternate;
}
.radio-preview-btn.state-playing:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(16, 185, 129, 0.7)) !important;
  box-shadow: 0 0 22px rgba(34, 197, 94, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}

/* Paused State */
.radio-preview-btn.state-paused {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.5)) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), inset 0 0 6px rgba(255, 255, 255, 0.1) !important;
}
.radio-preview-btn.state-paused:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(217, 119, 6, 0.6)) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

@keyframes playingGlowPulse {
  0% {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4), inset 0 0 6px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.3);
  }
}

.radio-play-btn {
  background: var(--enhance-gradient-accent);
}

@keyframes radioStatusPulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.28);
  }
}

@keyframes radioBarLift {
  0% {
    transform: scaleY(0.42);
    opacity: 0.42;
  }

  100% {
    transform: scaleY(1.08);
    opacity: 0.92;
  }
}

@media (max-width: 992px) {
  .radio-container {
    grid-template-columns: 1fr;
  }

  .radio-playlist-wrapper {
    height: 390px;
  }
}

@media (max-width: 768px) {
  .radio-section {
    padding: 60px 24px 78px;
    background:
      radial-gradient(circle at 16% 12%, rgba(var(--accent-cyan-hero-rgb), 0.18), transparent 28%),
      radial-gradient(circle at 86% 18%, rgba(143, 124, 255, 0.16), transparent 32%),
      radial-gradient(circle at 50% 88%, rgba(34, 197, 94, 0.08), transparent 34%),
      linear-gradient(150deg, rgba(3, 7, 18, 0.3) 0%, rgba(9, 14, 28, 0.3) 48%, rgba(4, 12, 24, 0.3) 100%) !important;
  }

  .radio-section::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 70px 0 auto !important;
    height: 420px !important;
    background:
      linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
    background-size: 54px 54px !important;
    opacity: 0.28 !important;
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  .radio-section::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 74px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 26%, transparent 72%, rgba(var(--accent-cyan-hero-rgb), 0.045)) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%) !important;
    opacity: 0.52 !important;
  }

  .radio-section > .radio-signal-strip,
  .radio-section > .radio-container {
    width: 100%;
  }

  .radio-signal-strip {
    grid-template-columns: 1fr;
    margin-bottom: 18px;
  }

  .radio-signal-pill {
    min-height: 44px;
    padding: 9px 12px;
  }

  .radio-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
  }

  .radio-playlist-wrapper {
    order: 1;
    height: auto;
    border-radius: var(--enhance-radius-md);
    overflow: hidden;
  }

  .radio-playlist-wrapper::after {
    content: '';
    position: absolute;
    top: 132px;
    right: 0;
    bottom: 0;
    width: 44px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(7, 12, 24, 0.92));
  }

  .playlist-header {
    padding: 13px 14px 9px;
  }

  .playlist-title {
    font-size: var(--fs-600);
  }

  .radio-discovery-controls {
    padding: 0 14px 10px;
  }

  .radio-topic-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
  }

  .radio-playlist {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 10px 14px 15px;
    scroll-padding-inline: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .playlist-track {
    flex: 0 0 min(74vw, 270px);
    min-height: 102px;
    align-items: flex-start;
    padding: 13px;
    scroll-snap-align: start;
    transform: none;
  }

  .playlist-track:hover {
    transform: none;
  }

  .radio-player-console {
    order: 2;
    padding: 13px;
    border-radius: var(--enhance-radius-md);
  }

  .vu-meters-container {
    display: none;
  }

  .console-now-playing {
    padding: 12px;
  }

  .now-playing-desc {
    font-size: var(--fs-400);
    -webkit-line-clamp: 2;
  }

  .now-playing-title-wrapper {
    mask-image: linear-gradient(to right, transparent, #000 6px, #000 calc(100% - 6px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6px, #000 calc(100% - 6px), transparent);
  }

  .now-playing-title.marquee-active {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    text-overflow: clip !important;
    width: auto !important;
    animation: marqueeExitEnter 8s linear infinite !important;
  }

  .now-playing-theme-wrapper {
    mask-image: linear-gradient(to right, transparent, #000 4px, #000 calc(100% - 4px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4px, #000 calc(100% - 4px), transparent);
  }

  .now-playing-theme.marquee-active {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
    text-align: left !important;
    animation: marqueeExitEnter 6s linear infinite !important;
  }

  .radio-spectrum {
    height: 22px;
  }

  .radio-controls-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .radio-preview-btn,
  .radio-play-btn {
    width: 100%;
    min-height: 42px;
    font-size: var(--fs-500);
  }
}

@keyframes marqueeExitEnter {
  0% {
    transform: translateX(calc(var(--marquee-container-width, 100%) + 15px));
  }
  100% {
    transform: translateX(calc(-100% - 40px));
  }
}

@media (max-width: 420px) {
  .radio-section {
    padding-inline: 18px;
  }

  .radio-signal-pill strong {
    white-space: normal;
  }

  .playlist-live-badge {
    display: none;
  }

  .radio-playlist-wrapper::after {
    top: 126px;
    width: 34px;
  }

  .playlist-track {
    flex-basis: 78vw;
  }

  .track-title {
    font-size: var(--fs-500);
  }

  .now-playing-title {
    font-size: var(--fs-600);
  }

  .now-playing-meta {
    gap: 8px;
  }
}

/* =========================================================
09. Fake News Lab Enhancement Layer
========================================================= */
/* Reserved for future verifier visual refinements. */


/* =========================================================
16. Authority Conversion Layer
========================================================= */
.authority-conversion {
  position: relative;
  isolation: isolate;
  padding: 48px 24px 42px;
  text-align: left;
}

.authority-conversion::before {
  display: none !important;
}

.authority-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.authority-conversion > .section-tag,
.authority-conversion > .section-title,
.authority-subtitle {
  position: relative;
  z-index: 1;
}

.authority-conversion > .section-title {
  max-width: 860px;
  margin-bottom: 12px;
  text-wrap: balance;
  margin-left: 0;
}

.authority-subtitle {
  max-width: 820px;
  margin-bottom: 20px;
  color: var(--text-body);
  font-size: var(--fs-700);
  line-height: 1.6;
  text-align: left;
  text-wrap: balance;
  margin-left: 0;
}

.authority-shell {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.02)),
    rgba(6, 10, 22, 0.28);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px) saturate(132%);
  -webkit-backdrop-filter: blur(12px) saturate(132%);
}

.authority-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}

.authority-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--enhance-radius-sm);
  background:
    linear-gradient(180deg, rgba(var(--accent-cyan-hero-rgb), 0.055), rgba(255, 255, 255, 0.022)),
    rgba(7, 12, 24, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: transform var(--enhance-transition), border-color var(--enhance-transition), background-color var(--enhance-transition);
}

.authority-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(var(--accent-cyan-hero-rgb), 0.8), rgba(143, 124, 255, 0.45));
  opacity: 0.78;
}

.authority-card:hover,
.authority-card:focus-within {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.36);
  background:
    linear-gradient(180deg, rgba(var(--accent-cyan-hero-rgb), 0.075), rgba(143, 124, 255, 0.035)),
    rgba(7, 12, 24, 0.34);
  transform: translateY(-2px);
}

.authority-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.24);
  border-radius: 10px;
  background: rgba(var(--accent-cyan-hero-rgb), 0.075);
  color: var(--accent-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.authority-icon i[data-lucide],
.authority-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.authority-card h3 {
  margin: 0;
  color: var(--text-bright);
  font-family: var(--font-heading);
  font-size: var(--fs-600);
  font-weight: 850;
  line-height: 1.25;
}

.authority-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-500);
  line-height: 1.48;
}

.authority-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.authority-trust-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.16);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-body);
  font-size: var(--fs-400);
  font-weight: 800;
  line-height: 1.15;
}

.authority-cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.18);
  border-radius: var(--enhance-radius-sm);
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.09), rgba(143, 124, 255, 0.045)),
    rgba(7, 12, 24, 0.3);
}

.authority-cta-panel p {
  margin: 0;
  color: var(--text-bright);
  font-size: var(--fs-700);
  font-weight: 850;
  line-height: 1.32;
  text-align: left;
}

.authority-cta-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.authority-cta-actions .btn {
  min-height: 42px;
  padding: 10px 16px;
  white-space: normal;
}

.authority-secondary-cta {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.18);
}

@media (max-width: 1040px) {
  .authority-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .authority-conversion {
    padding: 30px 12px 28px;
  }

  .authority-conversion::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 4px 7px 7px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.12) !important;
    border-radius: var(--enhance-radius-md) !important;
    background:
      linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.065), rgba(143, 124, 255, 0.035) 54%, rgba(255, 255, 255, 0.018)),
      rgba(7, 12, 24, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(8px) saturate(124%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(124%) !important;
  }

  .authority-conversion > .section-title {
    margin-bottom: 10px;
  }

  .authority-subtitle {
    margin-bottom: 12px;
    font-size: var(--fs-600);
    line-height: 1.42;
    text-align: left;
    text-wrap: wrap;
  }

  .authority-shell {
    padding: 10px;
    border-radius: var(--enhance-radius-sm);
  }

  .authority-card-grid {
    display: flex !important;
    overflow-x: auto !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 calc(50% - 119px) 8px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .authority-card-grid::-webkit-scrollbar {
    display: none !important;
  }

  .authority-card {
    flex: 0 0 238px !important;
    scroll-snap-align: center !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .authority-card h3 {
    font-size: var(--fs-600);
  }

  .authority-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--fs-500);
    line-height: 1.38;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .authority-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .authority-trust-strip {
    justify-content: flex-start;
    gap: 6px;
    margin-top: 10px;
  }

  .authority-trust-strip span {
    min-height: 26px;
    padding: 5px 7px;
    font-size: var(--fs-200);
  }

  .authority-cta-panel {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
  }

  .authority-cta-panel p {
    font-size: var(--fs-500);
  }

  .authority-cta-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .authority-cta-actions .btn {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    font-size: var(--fs-500);
  }
}

@media (max-width: 390px) {
  .authority-card {
    flex-basis: 226px;
  }

  .authority-cta-actions {
    padding-right: 54px;
  }

  .authority-trust-strip span {
    font-size: var(--fs-200);
  }
}

/* =========================================================
15. Ponencies Conversion Section
========================================================= */
.ponencies {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 7vw, 92px) 24px;
  overflow: clip;
}

.ponencies::before {
  display: none !important;
}

.ponencies-grid,
.ponencies-insight-grid,
.ponencies-final-cta {
  position: relative;
  z-index: 1;
  width: min(100%, 1160px);
  margin-inline: auto;
}

.ponencies > .section-tag,
.ponencies > .section-title,
.ponencies-subtitle {
  position: relative;
  z-index: 1;
}

.ponencies > .section-title {
  max-width: 900px;
  margin-bottom: 14px;
  text-wrap: balance;
  margin-left: 0;
}

.ponencies-subtitle {
  max-width: 840px;
  margin-bottom: 20px;
  color: var(--text-body);
  font-size: var(--fs-800);
  line-height: 1.65;
  text-align: left;
  margin-left: 0;
}

.ponencies-focus-text {
  max-width: 840px;
  margin-bottom: 32px;
  color: #f8fafc;
  font-size: var(--fs-800);
  line-height: 1.7;
  font-style: italic;
  background: var(--accent-tint-1);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
  border-left: 4px solid var(--accent-cyan);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 12px rgba(var(--accent-cyan-rgb), 0.05);
}

.ponencies-focus-text strong {
  color: var(--accent-cyan-chat);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.3);
}

.ponencies-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ponencia-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.032)),
    rgba(7, 12, 24, 0.36);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(var(--enhance-glass-blur)) saturate(138%);
  -webkit-backdrop-filter: blur(var(--enhance-glass-blur)) saturate(138%);
  transition: transform var(--enhance-transition), border-color var(--enhance-transition), box-shadow var(--enhance-transition), background-color var(--enhance-transition);
}

.ponencia-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--enhance-radius-md) var(--enhance-radius-md) 0 0;
  background: var(--enhance-gradient-accent);
  opacity: 0.68;
}

.ponencia-card:hover,
.ponencia-card:focus-within {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.38);
  box-shadow: var(--enhance-shadow-soft), 0 0 0 1px rgba(var(--accent-cyan-hero-rgb), 0.08);
  transform: translateY(-3px);
}

.ponencia-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ponencia-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.22);
  border-radius: 50%;
  background: rgba(var(--accent-cyan-hero-rgb), 0.08);
  color: var(--enhance-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  font-weight: 900;
}

.ponencia-card-topline svg {
  width: 24px;
  height: 24px;
  color: rgba(var(--accent-cyan-hero-rgb), 0.82);
  filter: drop-shadow(0 0 12px rgba(var(--accent-cyan-hero-rgb), 0.22));
}

.ponencia-card-title {
  margin: 0 0 10px;
  color: var(--text-bright);
  font-size: var(--fs-800);
  line-height: 1.24;
  text-wrap: balance;
}

.ponencia-card > p {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: var(--fs-600);
  line-height: 1.56;
}

.ponencia-card-result {
  margin: 0 0 18px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--enhance-radius-sm);
  background: var(--surface-3);
}

.ponencia-card-result span {
  display: block;
  margin-bottom: 5px;
  color: var(--enhance-accent);
  font-size: var(--fs-300);
  font-weight: 900;
  text-transform: uppercase;
}

.ponencia-card-result p {
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-500);
  line-height: 1.45;
}

.ponencia-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  min-width: 0;
  margin-top: auto;
  padding: 10px 14px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--accent-cyan-hero-rgb), 0.08);
  color: var(--text-primary);
  font-size: var(--fs-500);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: gap var(--enhance-transition), border-color var(--enhance-transition), background var(--enhance-transition), color var(--enhance-transition), transform var(--enhance-transition);
}

.ponencia-card-cta svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.ponencia-card-cta:hover,
.ponencia-card-cta:focus-visible {
  gap: 12px;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.58);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.16), rgba(143, 124, 255, 0.13));
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.ponencies-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
  margin-top: 20px;
}

.ponencies-insight-panel {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.028)),
    rgba(7, 12, 24, 0.3);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.ponencies-insight-panel h3 {
  margin: 0 0 14px;
  color: var(--text-bright);
  font-size: var(--fs-700);
  line-height: 1.25;
}

.ponencies-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ponencies-badges span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-body);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1.25;
}

.ponencies-takeaway-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ponencies-takeaway-list li {
  position: relative;
  min-width: 0;
  padding-left: 20px;
  color: var(--text-body);
  font-size: var(--fs-600);
  line-height: 1.45;
}

.ponencies-takeaway-list li::before {
  content: '';
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--enhance-gradient-accent);
  box-shadow: 0 0 14px rgba(var(--accent-cyan-hero-rgb), 0.3);
}

.ponencies-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.18);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.11), rgba(143, 124, 255, 0.08)),
    rgba(7, 12, 24, 0.34);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px) saturate(136%);
  -webkit-backdrop-filter: blur(14px) saturate(136%);
}

.ponencies-final-cta p {
  margin: 0;
  color: var(--text-bright);
  font-size: var(--fs-800);
  font-weight: 850;
  line-height: 1.3;
  text-wrap: balance;
}

.ponencies-final-cta .btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  white-space: normal;
}

.ponencies-final-cta .btn svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

@media (max-width: 860px) {
  .ponencies {
    padding-inline: 18px;
  }

  .ponencies-grid,
  .ponencies-insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ponencies-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .ponencies {
    padding: 48px 14px 96px;
  }

  .ponencies::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 4px 7px 7px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--enhance-radius-md) !important;
    background:
      linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.075), rgba(143, 124, 255, 0.045) 46%, rgba(255, 255, 255, 0.025)),
      rgba(7, 12, 24, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(8px) saturate(126%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(126%) !important;
  }

  .ponencies-subtitle {
    margin-bottom: 20px;
    font-size: var(--fs-600);
    line-height: 1.56;
    text-align: left;
  }

  .ponencies-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding: 0 calc(50% - 140px) 12px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
  .ponencies-grid::-webkit-scrollbar {
    display: none !important;
  }

  .ponencia-card {
    flex: 0 0 280px !important;
    scroll-snap-align: center !important;
    padding: 18px !important;
    border-radius: var(--enhance-radius-sm) !important;
  }

  .ponencies-insight-grid {
    gap: 14px !important;
  }

  .ponencies-insight-panel,
  .ponencies-final-cta {
    padding: 16px;
    border-radius: var(--enhance-radius-sm);
  }

  .ponencia-card::before {
    border-radius: var(--enhance-radius-sm) var(--enhance-radius-sm) 0 0;
  }

  .ponencia-card-title {
    font-size: var(--fs-800);
  }

  .ponencia-card-cta {
    width: 100%;
  }

  .ponencies-badges {
    gap: 7px;
  }

  .ponencies-badges span {
    width: 100%;
    border-radius: var(--enhance-radius-sm);
  }

  .ponencies-final-cta p {
    font-size: var(--fs-700);
  }

  .ponencies-final-cta .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* =========================================================
10. Services Enhancement Layer
========================================================= */
.services {
  position: relative;
  isolation: isolate;
  padding-top: clamp(56px, 7vw, 86px);
  overflow: clip;
  background: transparent !important;
}

.services::before {
  display: none !important;
}

.services > .services-need-panel,
.services > .services-grid,
.services > .services-format-help {
  position: relative;
  z-index: 1;
  width: min(100%, 1160px);
  margin-inline: auto;
}

.services > .section-tag,
.services > .section-title,
.services > .services-subtitle {
  position: relative;
  z-index: 1;
}

.services > .section-title {
  max-width: 820px;
  margin-bottom: 14px;
  margin-left: 0;
}

.services-subtitle {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--text-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.62;
  text-align: left;
  margin-left: 0;
}

.services-need-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--enhance-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(7, 12, 24, 0.38);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
}

.services-need-copy {
  min-width: 0;
}

.services-need-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--enhance-accent);
  font-size: var(--fs-400);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.services-need-copy p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-600);
  line-height: 1.5;
}

.services-need-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.service-need-btn {
  min-width: 0;
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--enhance-radius-md);
  background: var(--surface-3);
  color: var(--text-body);
  text-align: left;
  cursor: pointer;
  transition: transform var(--enhance-transition), border-color var(--enhance-transition), background-color var(--enhance-transition), box-shadow var(--enhance-transition);
}

.service-need-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.2), rgba(143, 124, 255, 0.16));
  color: var(--enhance-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 900;
}

.service-need-btn strong {
  display: block;
  min-width: 0;
  font-size: var(--fs-400);
  line-height: 1.25;
}

.service-need-btn:hover,
.service-need-btn:focus-visible,
.service-need-btn.is-selected {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.42);
  background: rgba(var(--accent-cyan-hero-rgb), 0.09);
  color: #fff;
  outline: none;
  box-shadow: 0 14px 34px rgba(var(--accent-cyan-hero-rgb), 0.11);
  transform: translateY(-2px);
}

.services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
  max-width: 1160px;
  padding: 0;
}

.service-contract-card {
  min-width: 0;
  min-height: 100%;
  padding: 24px;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: var(--enhance-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
    rgba(7, 12, 24, 0.42);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
}

.service-contract-card::before {
  height: 3px;
  background: var(--enhance-gradient-accent);
  opacity: 0.62;
}

.service-contract-card:hover,
.service-contract-card:focus-within,
.service-contract-card.is-selected {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.38);
  box-shadow: var(--enhance-shadow-soft), 0 0 0 1px rgba(var(--accent-cyan-hero-rgb), 0.1);
}

.service-contract-card.is-selected {
  background:
    linear-gradient(180deg, rgba(var(--accent-cyan-hero-rgb), 0.105), rgba(255, 255, 255, 0.035)),
    rgba(7, 12, 24, 0.46);
}

.service-contract-card .service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.18);
  background: rgba(var(--accent-cyan-hero-rgb), 0.08);
}

.service-contract-card .service-icon::after {
  color: var(--enhance-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.service-contract-card[data-service-intent="ponencia"] .service-icon::after {
  content: 'IA';
}

.service-contract-card[data-service-intent="mojo"] .service-icon::after {
  content: 'MOJO';
}

.service-contract-card[data-service-intent="ia"] .service-icon::after {
  content: 'VER';
}

.service-contract-card[data-service-intent="moderacio"] .service-icon::after {
  content: 'ACTE';
}

.service-contract-card .service-icon:has(svg)::after {
  display: none;
}

.service-card-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--enhance-accent);
  font-size: var(--fs-300);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-contract-card h3 {
  margin-bottom: 10px;
  font-size: clamp(1.08rem, 1.4vw, 1.34rem);
  line-height: 1.18;
}

.service-contract-card > p {
  margin-bottom: 16px;
  color: var(--text-soft);
  font-size: var(--fs-600);
  line-height: 1.54;
}

.service-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.service-proof-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--enhance-radius-sm);
  background: var(--surface-3);
}

.service-proof-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-bright);
  font-size: var(--fs-300);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-proof-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-500);
  line-height: 1.4;
}

.service-link.service-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin-top: auto;
  padding: 10px 14px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--accent-cyan-hero-rgb), 0.08);
  color: var(--text-primary);
}

.service-link.service-cta::after {
  content: '\2192';
  font-weight: 900;
}

.service-link.service-cta:hover,
.service-link.service-cta:focus-visible {
  gap: 12px;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.55);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.16), rgba(143, 124, 255, 0.12));
  color: #fff;
  outline: none;
}

.services-format-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.18);
  border-radius: var(--enhance-radius-lg);
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.075), rgba(143, 124, 255, 0.045)),
    rgba(7, 12, 24, 0.36);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%);
}

.services-help-copy {
  min-width: 0;
}

.services-help-copy h3 {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.22;
}

.services-help-copy p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-600);
  line-height: 1.5;
}

.services-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.service-unclear-cta {
  min-height: 42px;
  padding-inline: 16px;
  white-space: normal;
}

.services-topics-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-body);
  font-size: var(--fs-500);
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--enhance-transition), border-color var(--enhance-transition), background-color var(--enhance-transition), color var(--enhance-transition);
}

.services-topics-link:hover,
.services-topics-link:focus-visible {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.42);
  background: rgba(var(--accent-cyan-hero-rgb), 0.09);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

@media (max-width: 920px) {
  .services-need-panel {
    grid-template-columns: 1fr;
  }

  .services-need-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-format-help {
    grid-template-columns: 1fr;
  }

  .services-help-actions {
    justify-content: flex-start;
  }
}

.timeline {
  padding-bottom: 40px;
}

@media (max-width: 768px) {
  .services {
    padding-top: 48px;
  }
  .timeline {
    padding-bottom: 24px;
  }
}

@media (max-width: 640px) {
  .services {
    background:
      radial-gradient(circle at 16% 14%, rgba(var(--accent-cyan-hero-rgb), 0.09), transparent 28%),
      radial-gradient(circle at 86% 28%, rgba(143, 124, 255, 0.08), transparent 32%) !important;
  }

  .services::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 4px 7px 7px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: var(--enhance-radius-lg) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 38%),
      radial-gradient(circle at 50% 0%, rgba(var(--accent-cyan-hero-rgb), 0.06), transparent 50%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(8px) saturate(126%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(126%) !important;
    opacity: 0.72 !important;
  }

  .services-need-panel {
    padding: 14px;
    border-radius: var(--enhance-radius-md);
  }

  .services-need-options,
  .services-grid,
  .service-proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-need-btn {
    min-height: 58px;
  }

  .service-contract-card {
    padding: 18px;
    border-radius: var(--enhance-radius-md);
  }

  .service-link.service-cta {
    width: 100%;
  }
}

/* =========================================================
11. Timeline Enhancement Layer
========================================================= */
.timeline {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.timeline .section-tag,
.timeline .section-title {
  position: relative;
  z-index: 1;
}

.timeline .timeline-slider-wrapper {
  width: var(--enhance-container-wide);
  max-width: 100%;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: clamp(18px, 3vw, 28px) 0 clamp(10px, 2vw, 20px);
  border-radius: var(--enhance-radius-lg);
}

.timeline .timeline-slider-wrapper::before {
  display: none !important;
}

.timeline .timeline-slider-wrapper::after {
  content: '';
  position: absolute;
  /* Arranca DEBAJO del dial: la escala ya se difumina sola por los lados y
     dos veladuras encima de lo mismo apagarian los anos de los extremos. */
  inset: calc(clamp(18px, 3vw, 28px) + 72px) 0 10px;
  pointer-events: none;
  border-radius: var(--enhance-radius-lg);
  background:
    linear-gradient(90deg, rgba(5, 9, 20, 0.42), transparent 12%, transparent 88%, rgba(5, 9, 20, 0.42));
  z-index: 3;
}

/* EL DIAL
   ---------------------------------------------------------------------
   Reparto de trabajo, y es lo que hace que esto vaya fino: por fotograma,
   script.js escribe UNA sola variable en cada marca (--k, de 0 a 1, segun
   lo cerca que este de la aguja). Todo lo demas —altura de la raya, brillo,
   opacidad y tamano del ano— sale de esa variable aqui en el CSS.

   Por eso las reglas de :hover pueden fijar valores directos sin pelearse
   con la animacion: el guion no toca esas propiedades, solo la variable. */
.timeline .timeline-dial {
  height: 66px;
  margin: 0 clamp(44px, 7vw, 96px);
  /* Los anos se desvanecen por los lados en vez de cortarse en seco. */
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Un halo tenue detras de la aguja: da centro a la franja sin dibujar nada. */
.timeline .timeline-dial {
  background: radial-gradient(150px 60px at 50% 26%, rgba(var(--accent-cyan-hero-rgb), 0.07), transparent 72%);
}

/* LAS GRADUACIONES FINAS
   Van dentro de la cinta, no en la caja, para que se desplacen CON los anos.
   Si se quedaran quietas se verian dos capas independientes y se perderia la
   sensacion de estar girando una rueda. Son dos degradados repetidos —una
   rayita cada 12 px y otra mas alta cada 60— y no cuestan ningun elemento.
   El ancho sobrado a los dos lados es para que nunca se acabe la escala. */
.timeline .timeline-dial-track::before,
.timeline .timeline-dial-track::after {
  content: '';
  position: absolute;
  left: -160vw;
  width: 400vw;
  pointer-events: none;
}

.timeline .timeline-dial-track::before {
  top: 15px;
  height: 7px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 12px);
}

.timeline .timeline-dial-track::after {
  top: 11px;
  height: 11px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 60px);
}

.timeline .timeline-dial::after {
  content: '';
  position: absolute;
  top: 31px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

/* LAS DOS CAPAS DEL FONDO
   Corren MAS DESPACIO que la escala principal: 0.28 y 0.14 contra el 0.5 de
   DIAL_PARALLAX. Esa diferencia de velocidad es TODA la profundidad; a la misma
   velocidad se verian pegadas a la de delante y no habria fondo, solo mas rayas.

   Van sin filter: blur() a proposito, aunque el resto del dial sea profundidad
   de campo. Desenfocar de verdad una banda de 400vw se paga en CADA fotograma,
   y a este tamano no se distingue de bajar el contraste y separar mas las
   rayitas, que sale gratis. Lo lejano se dice con contraste, no con desenfoque.

   El marcado lo crea script.js, no el HTML: sin JavaScript esta franja no debe
   ensenar nada, y en el marcado se quedarian dos bandas de rayas quietas
   debajo de una escala vacia. */
.timeline .timeline-dial-deep {
  position: absolute;
  left: -160vw;
  width: 400vw;
  pointer-events: none;
}

.timeline .timeline-dial-deep-mid {
  top: 17px;
  height: 9px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 27px);
}

.timeline .timeline-dial-deep-far {
  top: 20px;
  height: 5px;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-cyan-hero-rgb), 0.075) 0 1px, transparent 1px 53px);
}

.timeline .timeline-dial-mark {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* PROFUNDIDAD DE CAMPO: lo que no esta sintonizado se desenfoca y pierde
     color, como un objetivo abriendo el diafragma. Sale de la MISMA --k que ya
     gobierna altura y encendido, asi que no cuesta ni un calculo mas por
     fotograma. Son siete marcas: el desenfoque aqui si es asumible, al
     contrario que en las bandas del fondo. */
  filter:
    blur(calc((1 - var(--k, 0)) * 2.3px))
    saturate(calc(0.3 + 0.7 * var(--k, 0)));
}

/* Al pasar por encima se enfoca: si alguien va a pulsar un ano, tiene que poder
   leerlo antes. */
.timeline .timeline-dial-mark:hover {
  filter: none;
}

.timeline .timeline-dial-tick {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 2px;
  height: calc(15px + 17px * var(--k, 0));
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(-50%);
}

/* El cian va en una capa aparte y se enciende con la misma variable: asi no
   hace falta mezclar colores a mano en cada fotograma. */
.timeline .timeline-dial-tick::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--enhance-accent), var(--enhance-accent-2));
  box-shadow: 0 0 14px rgba(var(--accent-cyan-hero-rgb), 0.75);
  opacity: var(--k, 0);
}

.timeline .timeline-dial-year {
  position: absolute;
  top: 40px;
  left: 50%;
  color: var(--text-bright);
  font-size: var(--fs-400);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  /* Mas caida que antes (0.34): con el desenfoque detras, un ano lejano que
     conserve opacidad se lee como un borron sucio en vez de como fondo. */
  opacity: calc(0.16 + 0.84 * var(--k, 0));
  transform: translateX(-50%) scale(calc(0.88 + 0.16 * var(--k, 0)));
}

.timeline .timeline-dial-mark.is-current .timeline-dial-year {
  color: var(--enhance-accent);
}

.timeline .timeline-dial-mark:hover .timeline-dial-tick::after {
  opacity: 1;
}

.timeline .timeline-dial-mark:hover .timeline-dial-year {
  opacity: 1;
}

.timeline .timeline-dial-needle {
  top: 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(var(--accent-cyan-hero-rgb), 0.9), rgba(var(--accent-cyan-hero-rgb), 0));
}

.timeline .timeline-dial-needle::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--enhance-accent), var(--enhance-accent-2));
  box-shadow: 0 0 14px rgba(var(--accent-cyan-hero-rgb), 0.85);
  transform: translateX(-50%) rotate(45deg);
}

/* El destello de sintonia: solo cuando la ficha centrada cambia. */
.timeline .timeline-dial-needle::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-cyan-hero-rgb), 0.3), transparent 68%);
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
}

.timeline .timeline-dial.is-tuned .timeline-dial-needle::after {
  animation: timelineTuned 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes timelineTuned {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.55); }
}

.timeline .timeline-viewport {
  padding: 22px 0 28px;
  z-index: 2;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.timeline .timeline-track {
  gap: clamp(20px, 2.8vw, 34px);
  padding-inline: max(clamp(44px, 7vw, 96px), calc(50% - var(--tl-card-w) / 2));
}

.timeline .timeline-slider-wrapper {
  --tl-card-w: clamp(300px, 29vw, 356px);
}

.timeline .timeline-card {
  opacity: 0.66;
  transform: translateY(4px) scale(0.965);
  transition:
    transform var(--enhance-transition-slow),
    opacity var(--enhance-transition),
    filter var(--enhance-transition);
}

.timeline .timeline-card:hover,
.timeline .timeline-card:focus-visible {
  opacity: 0.92;
  filter: saturate(112%);
}

.timeline .timeline-card.active {
  opacity: 1;
  transform: translateY(-8px) scale(1.01);
}

.timeline .timeline-card-content {
  display: flex;
  min-height: 224px;
  padding: clamp(18px, 2vw, 24px);
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--enhance-radius-md);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)),
    rgba(6, 10, 22, 0.34);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(16px) saturate(132%);
  -webkit-backdrop-filter: blur(16px) saturate(132%);
}

.timeline .timeline-card-content::before {
  height: 2px;
  background:
    linear-gradient(90deg, transparent, var(--enhance-accent), var(--enhance-accent-2), transparent);
  opacity: 0.22;
}

.timeline .timeline-card.active .timeline-card-content {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.36);
  background:
    radial-gradient(circle at 22% 0%, rgba(var(--accent-cyan-hero-rgb), 0.16), transparent 42%),
    radial-gradient(circle at 100% 20%, rgba(143, 124, 255, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(6, 10, 22, 0.44);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(var(--accent-cyan-hero-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.timeline .timeline-date {
  margin-bottom: 8px;
  color: var(--enhance-accent);
  letter-spacing: 0.08em;
}

.timeline .timeline-category {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  margin-bottom: 12px;
  padding: 5px 9px;
  align-items: center;
  border: 1px solid rgba(245, 184, 75, 0.24);
  border-radius: 999px;
  background: rgba(245, 184, 75, 0.08);
  color: #ffd891;
  font-size: var(--fs-300);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.timeline .timeline-card-content h3 {
  margin-bottom: 7px;
  color: #fff;
  font-size: clamp(1.04rem, 1.8vw, 1.24rem);
  line-height: 1.18;
}

.timeline .timeline-institution {
  margin-bottom: 12px;
  color: rgba(194, 181, 255, 0.92);
  font-size: var(--fs-500);
  line-height: 1.35;
}

.timeline .timeline-card-content p {
  color: rgba(226, 232, 240, 0.78);
  font-size: clamp(0.86rem, 1.2vw, 0.92rem);
  line-height: 1.52;
  overflow-wrap: break-word;
}

.timeline .timeline-nav-btn {
  /* El relleno de arriba de la caja mas medio dial: las flechas quedan a la
     altura de la aguja, flanqueando la escala. */
  top: calc(clamp(18px, 3vw, 28px) + 33px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(8, 13, 27, 0.46);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(128%);
  -webkit-backdrop-filter: blur(14px) saturate(128%);
}

.timeline .timeline-nav-btn:hover,
.timeline .timeline-nav-btn:focus-visible {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.52);
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.88), rgba(143, 124, 255, 0.84));
  color: #03111f;
  outline: none;
  box-shadow:
    0 0 0 5px rgba(var(--accent-cyan-hero-rgb), 0.12),
    0 18px 38px rgba(0, 0, 0, 0.32);
}

.timeline .timeline-nav-btn:disabled {
  opacity: 0.34;
  background: rgba(var(--depth-2-rgb), 0.3);
  border-color: rgba(255, 255, 255, 0.045);
}

.timeline .timeline-slider-wrapper > .swipe-hint-overlay {
  display: none !important;
}

.timeline .timeline-card:focus-visible .timeline-card-content {
  outline: 2px solid var(--enhance-accent-warm);
  outline-offset: 6px;
  box-shadow:
    var(--enhance-shadow-focus),
    0 18px 44px rgba(0, 0, 0, 0.24);
}

@media (max-width: 768px) {
  .timeline {
    background:
      radial-gradient(circle at 12% 18%, rgba(var(--accent-cyan-hero-rgb), 0.12), transparent 34%),
      radial-gradient(circle at 86% 42%, rgba(143, 124, 255, 0.1), transparent 36%),
      linear-gradient(180deg, rgba(6, 10, 22, 0.08), rgba(6, 10, 22, 0.02)) !important;
  }

  .timeline .timeline-slider-wrapper {
    width: min(100%, calc(100vw - 28px));
    margin-top: 26px;
    padding-top: 14px;
    border-radius: 22px;
  }

  .timeline .timeline-slider-wrapper::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 76px 0 0 !important; /* justo debajo del dial (14 + 58) */
    pointer-events: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
      radial-gradient(circle at 18% 12%, rgba(var(--accent-cyan-hero-rgb), 0.09), transparent 34%),
      radial-gradient(circle at 78% 24%, rgba(143, 124, 255, 0.08), transparent 32%) !important;
    box-shadow: var(--enhance-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    backdrop-filter: blur(12px) saturate(128%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(128%) !important;
  }

  .timeline .timeline-slider-wrapper::after {
    border-radius: 22px;
  }

  .timeline .timeline-dial {
    height: 58px;
    /* 46px deja sitio a las flechas, que en movil se pegan a los bordes. */
    margin: 0 46px;
  }

  .timeline .timeline-dial-tick {
    height: calc(11px + 17px * var(--k, 0));
  }

  .timeline .timeline-dial-year {
    top: 34px;
    font-size: var(--fs-300);
  }

  .timeline .timeline-dial-needle {
    height: 40px;
  }

  .timeline .timeline-viewport {
    padding: 18px 0 24px;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .timeline .timeline-track {
    gap: 16px;
    padding-inline: max(22px, calc(50% - var(--tl-card-w) / 2));
  }

  .timeline .timeline-slider-wrapper {
    --tl-card-w: min(78vw, 304px);
  }

  .timeline .timeline-card.active {
    transform: translateY(-4px) scale(1);
  }

  .timeline .timeline-card-content {
    min-height: 0 !important;
    padding: 18px !important;
  }

  .timeline .timeline-nav-btn {
    display: flex !important;
    top: 43px; /* 14px de relleno + medio dial de 58 */
    width: 42px;
    height: 42px;
  }

  .timeline .timeline-nav-btn.prev {
    left: -2px;
  }

  .timeline .timeline-nav-btn.next {
    right: -2px;
  }
}

@media (max-width: 420px) {
  .timeline .section-title {
    padding-inline: 14px;
  }

  .timeline .timeline-slider-wrapper {
    width: min(100%, calc(100vw - 20px));
  }

  .timeline .timeline-track {
    gap: 14px;
    padding-inline: max(18px, calc(50% - var(--tl-card-w) / 2));
  }

  .timeline .timeline-slider-wrapper {
    /* max(270px...) porque a 480px o menos manda un min-width: 270px. */
    --tl-card-w: max(270px, min(80vw, 292px));
  }

  .timeline .timeline-card-content {
    padding: 16px !important;
  }

  .timeline .timeline-card-content h3 {
    font-size: var(--fs-800);
  }

  .timeline .timeline-card-content p {
    font-size: var(--fs-500);
    line-height: 1.48;
  }

  .timeline .timeline-category {
    font-size: var(--fs-200);
  }
}

/* =========================================================
12. Reduced Motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #neuralCanvas {
    display: none;
  }
}

/* Responsive modern formats for the hero background; originals remain as fallbacks. */
.hero::before {
  background-image:
    linear-gradient(90deg, rgba(10, 15, 29, 0.98) 0%, rgba(10, 15, 29, 0.78) 44%, rgba(10, 15, 29, 0.52) 64%, rgba(10, 15, 29, 0.92) 100%),
    image-set(
      url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-1600.avif") type("image/avif"),
      url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-1600.webp") type("image/webp"),
      url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") type("image/png")
    );
  background-position: center, 82% center;
  background-size: auto, min(48rem, 54vw) auto;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .hero::before {
    background-image:
      linear-gradient(180deg, rgba(10, 15, 29, 0.88), rgba(10, 15, 29, 0.96)),
      image-set(
        url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-960.avif") type("image/avif"),
        url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-960.webp") type("image/webp"),
        url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") type("image/png")
      );
    background-position: center, center top;
    background-size: auto, cover;
  }
}

/* =========================================================
13. Premium Aesthetics & Interactivity Additions
========================================================= */

/* Ambient glows variable-driven styles */
.cyber-glow-1, .cyber-glow-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  transition: background 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease;
  will-change: background, opacity;
}
.cyber-glow-1 {
  top: 5%;
  left: 15%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, var(--bg-glow-1, rgba(139, 92, 246, 0.08)) 0%, transparent 70%);
}
.cyber-glow-2 {
  bottom: 5%;
  right: 5%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, var(--bg-glow-2, rgba(var(--accent-cyan-rgb), 0.08)) 0%, transparent 70%);
}

/* Define section specific background glows on body */
body {
  --bg-glow-1: rgba(139, 92, 246, 0.08);
  --bg-glow-2: rgba(var(--accent-cyan-rgb), 0.08);
}
body[data-active-section="hero"] {
  --bg-glow-1: rgba(139, 92, 246, 0.09);
  --bg-glow-2: rgba(var(--accent-cyan-rgb), 0.09);
}
body[data-active-section="about"] {
  --bg-glow-1: rgba(var(--accent-cyan-hero-rgb), 0.05);
  --bg-glow-2: rgba(139, 92, 246, 0.04);
}
body[data-active-section="reconeixements"] {
  --bg-glow-1: rgba(245, 158, 11, 0.08);
  --bg-glow-2: rgba(139, 92, 246, 0.06);
}
body[data-active-section="portfolio"] {
  --bg-glow-1: rgba(143, 124, 255, 0.1);
  --bg-glow-2: rgba(var(--accent-cyan-hero-rgb), 0.1);
}
body[data-active-section="radio"] {
  --bg-glow-1: rgba(34, 197, 94, 0.09);
  --bg-glow-2: rgba(var(--accent-cyan-rgb), 0.09);
}
body[data-active-section="verifier"] {
  --bg-glow-1: rgba(239, 68, 68, 0.08);
  --bg-glow-2: rgba(245, 158, 11, 0.08);
}
body[data-active-section="toolkit"] {
  --bg-glow-1: rgba(139, 92, 246, 0.1);
  --bg-glow-2: rgba(244, 63, 94, 0.07);
}
body[data-active-section="timeline"] {
  --bg-glow-1: rgba(var(--accent-cyan-hero-rgb), 0.08);
  --bg-glow-2: rgba(143, 124, 255, 0.07);
}
body[data-active-section="services"] {
  --bg-glow-1: rgba(143, 124, 255, 0.08);
  --bg-glow-2: rgba(244, 63, 94, 0.07);
}
body[data-active-section="contact"] {
  --bg-glow-1: rgba(var(--accent-cyan-rgb), 0.1);
  --bg-glow-2: rgba(139, 92, 246, 0.1);
}

/* Navigation indicator pill sliding */
.nav-links {
  position: relative;
}
.nav-links::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--nav-indicator-width, 0px);
  height: 38px;
  box-sizing: border-box;
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  z-index: 0;
  transition:
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--nav-indicator-x, 0px), -50%, 0);
}
.nav-links.indicator-visible::before {
  opacity: 1;
}
.nav-links a {
  position: relative;
  z-index: 1;
}
.nav-links a::after {
  display: none !important;
}

@media (min-width: 1151px) {
  #mainHeader .has-dropdown > a::after {
    display: inline-block !important;
  }

  #mainHeader .nav-links > li > a.active:not(.contact-btn) {
    color: #d9fbff;
    text-shadow: 0 0 13px rgba(var(--accent-cyan-hero-rgb), 0.24);
  }

  /* Selector de idioma discreto. Antes este <li> pintaba SU PROPIA pildora
     (borde cian, degradado y sombra) alrededor de la del summary: un marco
     dentro de otro, y el control competia en peso con el menu. Decision de
     Montserrat (1 de agosto de 2026): UN solo marco, el del summary, y mas
     pequeno que los enlaces del menu. El <li> queda como caja invisible que
     solo alinea; la rayita divisoria de ::before se conserva, que separa sin
     abultar. */
  #mainHeader .lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: max-content;
    min-height: 38px;
    margin-left: clamp(7px, 0.75vw, 13px);
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
    box-shadow: none;
  }

  #mainHeader .lang-switcher::before {
    content: '';
    position: absolute;
    top: 50%;
    left: clamp(-14px, -0.8vw, -9px);
    width: 1px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(var(--accent-cyan-hero-rgb), 0.32),
      rgba(143, 124, 255, 0.22),
      transparent
    );
    transform: translateY(-50%);
  }

  #mainHeader .lang-switcher .lang-divider {
    display: none;
  }

  #mainHeader .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(226, 232, 240, 0.56);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.055em;
    text-shadow: none;
    transition:
      color 0.22s ease,
      background-color 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease,
      transform 0.22s ease;
  }

  #mainHeader .lang-btn:hover,
  #mainHeader .lang-btn:focus-visible {
    color: #f8fdff;
    border-color: rgba(var(--accent-cyan-hero-rgb), 0.22);
    background: rgba(var(--accent-cyan-hero-rgb), 0.08);
    transform: translateY(-1px);
  }

  #mainHeader .lang-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-cyan-hero-rgb), 0.72);
    outline-offset: 2px;
  }

  #mainHeader .lang-btn.active {
    color: #eaffff;
    border-color: rgba(var(--accent-cyan-hero-rgb), 0.34);
    background:
      linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.2), rgba(143, 124, 255, 0.14));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      0 0 16px rgba(var(--accent-cyan-hero-rgb), 0.12);
    text-shadow: 0 0 12px rgba(var(--accent-cyan-hero-rgb), 0.32);
  }
}

/* FASE 10 - Footer Sitemap Links */
.footer-links-map {
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
}
.footer-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 24px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links-grid a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-500);
  font-family: var(--font-primary);
  font-weight: 400;
  transition: color 0.3s ease;
}
.footer-links-grid a:hover,
.footer-links-grid a:focus-visible {
  color: var(--accent-cyan);
  outline: none;
}/* Mobile menu elastic and items cascading */
@media (max-width: 1150px) {
  #mainHeader .nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 100px 24px 40px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    background: 
      radial-gradient(circle at 10% 20%, rgba(var(--accent-cyan-hero-rgb), 0.18), transparent 45%),
      radial-gradient(circle at 90% 80%, rgba(143, 124, 255, 0.16), transparent 45%),
      linear-gradient(180deg, rgba(7, 12, 24, 0.99), rgba(10, 15, 29, 0.98)) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    box-shadow: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1000 !important; /* Prioridad de apilamiento superior garantizada */
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    clip-path: circle(0px at 92% 33px);
    /* Transición elástica de salida rápida al cerrar. Retrasamos visibility: hidden al final */
    transition: clip-path 0.45s cubic-bezier(0.3, 0.07, 0.19, 0.97), 
                opacity 0.35s ease-in, 
                visibility 0s linear 0.45s !important;
  }
  #mainHeader .nav-links.mobile-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    clip-path: circle(150% at 92% 33px) !important;
    transform: none !important;
    /* Transición elástica de entrada suave al abrir. Hacemos visibility: visible al instante */
    transition: clip-path 0.72s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0s linear 0s !important;
  }
  #mainHeader .nav-links::before {
    display: none !important;
  }
  /* Animación de salida predeterminada */
  #mainHeader .nav-links li {
    opacity: 0;
    transform: perspective(500px) rotateX(15deg) translateY(24px) scale(0.9);
    transition: transform 0.3s cubic-bezier(0.3, 0.07, 0.19, 0.97), 
                opacity 0.25s ease-in;
  }
  /* Animación de entrada activa en cascada */
  #mainHeader .nav-links.mobile-open li {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg) translateY(0) scale(1);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #mainHeader .nav-links.mobile-open li:nth-of-type(1) { transition-delay: 0.04s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(2) { transition-delay: 0.08s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(3) { transition-delay: 0.12s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(4) { transition-delay: 0.16s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(5) { transition-delay: 0.20s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(6) { transition-delay: 0.24s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(7) { transition-delay: 0.28s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(8) { transition-delay: 0.32s; }
  #mainHeader .nav-links.mobile-open li:nth-of-type(9) { transition-delay: 0.36s; }
}

/* Presets Badge Style */









/* Scanning Pulse Panels */
@keyframes panelGlowPulse {
  0%, 100% { 
    border-color: rgba(var(--accent-cyan-rgb), 0.16); 
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.26), 0 0 12px rgba(var(--accent-cyan-rgb), 0.08); 
  }
  50% { 
    border-color: rgba(var(--accent-cyan-rgb), 0.52); 
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32), 0 0 28px rgba(var(--accent-cyan-rgb), 0.35); 
  }
}

/* Cascading Evidence List */

@keyframes findingSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Verdict Banner Glow & Reveal */





/* Lucide general icon size fixes */
i[data-lucide] {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  stroke-width: 2px;
  vertical-align: -0.125em;
}


.service-icon i[data-lucide] {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--enhance-accent);
}
.contact-icon i[data-lucide] {
  width: 22px;
  height: 22px;
  color: var(--enhance-accent);
}
.social-icon i[data-lucide] {
  width: 18px;
  height: 18px;
  color: inherit;
}
.play-badge i[data-lucide],
.zoom-badge i[data-lucide] {
  width: 20px;
  height: 20px;
}

/* Radio Search Wrapper */
.radio-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}
.radio-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.radio-search-wrapper .radio-search-input {
  padding-left: 40px !important;
  margin-bottom: 0 !important;
  width: 100%;
}

/* Lock Icon inside locked note */

/* =========================================================
   17. RECONEIXEMENTS (PREMIS) ALIGNMENT OVERRIDE
   ========================================================= */
.reconeixements {
  text-align: left !important;
}
.reconeixements .section-tag,
.reconeixements .section-title {
  text-align: left !important;
  margin-left: 0 !important;
}

/* =========================================================
   15. EINES I EXPERTESA (TOOLKIT) PREMIUM ENHANCEMENTS
   ========================================================= */


/* Container for Tab Buttons - Desktop and Tablet */

/* Medium screens: optimize padding and font size to prevent overflow */
@media (min-width: 769px) and (max-width: 1150px) {
  
  
}

/* Pill Style Tab Buttons */


/* Active states with glowing styles */



/* Glassmorphic Showcase Cards */


/* Active tab border glow for cards in hover */



/* Themed Icon Badges */

/* Specific tab styles for logo icons */



/* Hover effect scaling up and glowing icon */




/* Themed Tag Badges */







/* Mobile Touch Target and Overlay Accessibility Optimizations */
@media (max-width: 768px) {
  /* Portfolio Filters */
  .filter-btn {
    min-height: 44px;
    padding: 10px 18px;
  }

  /* Radio Topic Filters */
  .radio-topic-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Chatbot options and buttons */
  .chatbot-options {
    /* Dos filas de accesos rapidos (antes 64px: recortaba la segunda). */
    max-height: 120px;
    padding: 10px 16px;
  }
  .chat-option-btn {
    min-height: 44px;
    padding: 8px 16px;
    font-size: var(--fs-500);
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
  }

  /* Lightbox close and action buttons */
  .lightbox-close {
    min-height: 44px;
    padding: 10px 14px 10px 16px;
  }
  .lightbox-action {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Social links in footer */
  .social-icon {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   MOBILE APP VIEW POLISH (REDUCCIÓN DE SCROLL Y COMPACTACIÓN GENERAL)
   ========================================================================== */

@media (max-width: 768px) {
  
  
  /* 1. Títulos Principales Autoadaptables */
  /* Aqui habia un text-align: center que solo actuaba por debajo de 768px. En
     escritorio los doce titulos de seccion van a la izquierda, y en movil su
     propia etiqueta (.section-tag) y su parrafo tambien: el titulo era lo unico
     que se iba al centro, en medio de dos elementos alineados a la izquierda.
     Al no declarar alineacion, hereda la de su seccion y las dos vistas dicen lo
     mismo. Los titulos no tienen margenes automaticos, asi que quitarlo no mueve
     el bloque, solo el texto dentro de el. */
  .section-title {
    font-size: clamp(1.35rem, 5vw, 1.8rem) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
  }

  /* 2. Tira Compacta de Indicadores Radio y Fakes (01, 02, 03) */
  .radio-signal-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .radio-signal-pill {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 4px !important;
    min-height: auto !important;
    gap: 4px !important;
    border-radius: var(--enhance-radius-sm, 8px) !important;
  }

  .radio-signal-pill span {
    width: 18px !important;
    height: 18px !important;
    font-size: var(--fs-100) !important;
    line-height: 18px !important;
    min-width: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .radio-signal-pill strong {
    font-size: var(--fs-200) !important;
    line-height: 1.1 !important;
    display: block !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  /* 3. Reducción de Logos de Colaboradores */
  .logos-grid {
    gap: 12px 18px !important;
  }

  .logo-item {
    height: 28px !important;
  }

  .logo-item img {
    max-width: 80px !important;
  }

  /* 4. Miniaturización de Badges de Portafolio en 2 Columnas */
  .play-badge,
  .zoom-badge {
    width: 32px !important;
    height: 32px !important;
    border-width: 1px !important;
  }

  .play-badge i[data-lucide],
  .zoom-badge i[data-lucide],
  .icon-play,
  .icon-zoom {
    width: 14px !important;
    height: 14px !important;
  }

  /* Spacing optimizations between About and Reconeixements on mobile */
  .about {
    padding-bottom: 24px !important;
  }
  .reconeixements {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* 4b. Reconeixements Grid Single Column Layout en Móviles */
  .reconeixements-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    margin-top: 30px !important;
  }
  
  .authority-logos-section {
    padding: 24px 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .authority-logos-title {
    font-size: var(--fs-900) !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  .authority-logos-subtitle {
    font-size: var(--fs-500) !important;
    line-height: 1.42 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 0 10px !important;
  }

  /* 5. Tarjetas de Premios y Reconocimientos Horizontales y Compactas */
  .achievement-cards-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .achievement-card {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: var(--enhance-radius-md, 12px) !important;
    max-width: 100% !important;
  }

  .achievement-media {
    width: 90px !important;
    height: 90px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    position: relative !important;
    margin: 0 !important;
  }

  .achievement-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    max-height: none !important;
  }

  .achievement-media-double {
    width: 90px !important;
    height: 90px !important;
  }

  .achievement-media-double img:first-child {
    width: 70% !important;
    height: 90% !important;
    object-fit: cover !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
  }

  .achievement-media-double .achievement-secondary-img {
    display: block !important;
    width: 60% !important;
    height: 60% !important;
    object-fit: cover !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    border: 2px solid var(--bg-primary, #070c18) !important;
  }

  .achievement-card-content,
  .achievement-info {
    align-items: flex-start !important;
    flex: 1 !important;
    text-align: left !important;
  }

  .achievement-card h3 {
    font-size: var(--fs-600) !important;
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
  }

  .achievement-card p {
    font-size: var(--fs-400) !important;
    line-height: 1.35 !important;
    color: var(--text-muted) !important;
  }

  .achievement-card .achievement-tag {
    font-size: var(--fs-200) !important;
    margin-bottom: 2px !important;
    padding: 2px 6px !important;
    background: var(--surface-3) !important;
    border-radius: 4px !important;
  }

  /* 6. Ampliación de la Foto del Hero */
  .hero-media-wrapper {
    min-height: auto !important;
    grid-template-columns: clamp(140px, 42vw, 175px) minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .hero-img-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 148 / 178 !important;
    border-radius: var(--enhance-radius-md) !important;
  }

  .hero-img-container img {
    border-radius: var(--enhance-radius-sm) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 8. Ajustes de la Línea de Tiempo (Trajectòria) */
  .timeline-card-content {
    min-height: 200px !important;
    padding: 16px !important;
  }
  
  .timeline-card-content h3 {
    font-size: var(--fs-800) !important;
  }
  
  .timeline-card-content p {
    font-size: var(--fs-500) !important;
    line-height: 1.4 !important;
  }

  /* 8b. Experiencia Real (Authority Logos) Scroll Horizontal en Móviles */
  .authority-cards-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding: 10px calc(50% - 140px) 20px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
  .authority-cards-grid::-webkit-scrollbar {
    display: none !important;
  }
  .authority-logo-card {
    flex: 0 0 280px !important;
    scroll-snap-align: center !important;
    height: auto !important;
    padding: 24px 20px !important;
    border-radius: 12px !important;
  }

  /* 9. Contacto: Selectores Rápidos 2x2 */
  .contact-form-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  
  .contact-intent-options {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .contact-intent-btn {
    padding: 8px 10px !important;
    font-size: var(--fs-500) !important;
    min-height: 40px !important;
  }

  /* 10. Toolkit: Pestañas Horizontales Deslizables */
  
  
  
  
  
  /* 11. Toolkit: Cuadrícula Compacta de Herramientas (2 Columnas) */
  
  
  
  
  
  
  
  /* 12. Servicios: Cuadrícula 2x2 en móviles estrechos */
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .service-card {
    padding: 14px 10px !important;
    border-radius: var(--enhance-radius-md, 12px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .service-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
  }

  .service-icon i[data-lucide] {
    width: 16px !important;
    height: 16px !important;
  }

  .service-card h3 {
    font-size: var(--fs-500) !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  .service-card p {
    font-size: var(--fs-300) !important;
    line-height: 1.3 !important;
    color: var(--text-muted) !important;
  }

  /* 13. Verificador Presets en Fila Horizontal en Móviles */
  
  
  
  
  /* 14. Animación CSS de Rebote Lateral (Indicador de Scroll Horizontal) */
  @keyframes horizontalScrollHintBounce {
    0%, 100% {
      transform: translateX(0);
    }
    30% {
      transform: translateX(-18px);
    }
    60% {
      transform: translateX(4px);
    }
  }

  .scroll-hint-bounce {
    animation: horizontalScrollHintBounce 1.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

@media (max-width: 480px) {
  /* 7. Estadísticas sobre mí en Cuadrícula 2x2 */
  .about-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 20px 14px !important;
    margin-top: 30px !important;
  }

  .stat-num {
    font-size: 1.8rem !important;
    min-height: 2.2rem !important;
    margin-bottom: 4px !important;
  }

  .stat-label {
    font-size: var(--fs-300) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
  }

  .stat-item::after {
    display: none !important;
  }

  /* Título de sección aún más pequeño en pantallas diminutas */
  .section-title {
    font-size: clamp(1.15rem, 5.5vw, 1.35rem) !important;
  }
}

/* =========================================================
16. Mobile Scroll Swipe Hint
========================================================= */
.swipe-hint-overlay {
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  margin-left: -72px;
  /* Sin fondo a proposito. Aqui habia un degradado que terminaba en
     rgba(10, 15, 29, .95), casi opaco, sobre los 72px pegados al borde derecho:
     apagaba la ficha que asoma al lado hasta dejarla ilegible. Y como la pista
     se relanza cada vez que el bloque vuelve a entrar en pantalla, no era un
     destello sino algo que reaparecia una y otra vez. La pista se monta sobre
     nueve contenedores, pero solo llega a salir en seis: los filtros del
     portafoli y els temes de radio no se desplazan a lo ancho en un movil, y
     .about-service-grid ya no existe en la pagina. La flecha que pulsa se ve
     sola sin oscurecer nada detras: ya lleva su propio circulo, aro y sombra. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  flex-shrink: 0;
}

.swipe-hint-overlay.show {
  opacity: 1;
}

.swipe-hint-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--depth-2-rgb), 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.4); /* Cian translúcido */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan, var(--accent-cyan)); /* Icono cian de la marca */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 8px rgba(var(--accent-cyan-rgb), 0.25);
  animation: swipePulse 2s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
}

.swipe-hint-icon svg {
  width: 20px;
  height: 20px;
}

@keyframes swipePulse {
  0% {
    transform: translateX(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 4px rgba(var(--accent-cyan-rgb), 0.15);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 12px rgba(var(--accent-cyan-rgb), 0.45);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 4px rgba(var(--accent-cyan-rgb), 0.15);
    opacity: 0.6;
  }
}

.has-scroll-hint {
  position: relative;
}

@media (min-width: 993px) {
  .swipe-hint-overlay {
    display: none !important;
  }
}

/* =========================================================
17. Mojo Gear (Backpack Walkthrough) Styles
========================================================= */
.mojo-gear {
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
  /* clip en X (no crea contenedor de scroll) para no romper el sticky del
     escenario 3D; `overflow: hidden` sí lo rompería. */
  overflow: visible;
  overflow-x: clip;
}

.gear-intro {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-800);
  line-height: 1.6;
}

.gear-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Backpack Canvas */
.gear-backpack-canvas {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backpack-bg-shape {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-cyan-rgb), 0.18) 0%, rgba(139, 92, 246, 0.05) 50%, transparent 70%);
  filter: blur(20px);
  z-index: 1;
  pointer-events: none;
  animation: backpackBgPulse 6s infinite ease-in-out;
}

@keyframes backpackBgPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

.backpack-silhouette-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.backpack-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(var(--accent-cyan-rgb), 0.25));
}

/* Hotspots */
.gear-hotspot {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--accent-cyan);
  background: rgba(var(--depth-2-rgb), 0.9);
  color: var(--accent-cyan);
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-500);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.4);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0;
}

.gear-hotspot .pulse-ring {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--accent-cyan);
  border-radius: 50%;
  opacity: 0.6;
  animation: hotspotRingPulse 2.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
}

@keyframes hotspotRingPulse {
  0% { transform: scale(1); opacity: 0.8; }
  80% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.gear-hotspot:hover,
.gear-hotspot.active {
  background: var(--accent-cyan);
  color: #0b0f19;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px var(--accent-cyan);
  transform: translate(-50%, -50%) scale(1.2);
}

.gear-hotspot.active .pulse-ring {
  border-color: var(--accent-violet);
  animation-duration: 1.5s;
}

/* Grid Selector */
.gear-grid-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.gear-selector-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gear-selector-card .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.gear-selector-card .card-title {
  font-size: var(--fs-600);
  font-weight: 700;
  transition: all 0.3s ease;
}

.gear-selector-card:hover {
  background: var(--accent-tint-1);
  border-color: rgba(var(--accent-cyan-rgb), 0.4);
  color: #fff;
  transform: translateY(-2px);
}

.gear-selector-card:hover .card-icon {
  color: var(--accent-cyan);
  transform: scale(1.1);
}

.gear-selector-card.active {
  background: var(--accent-tint-2);
  border-color: var(--accent-cyan);
  color: #fff;
  box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.15);
}

.gear-selector-card.active .card-icon {
  color: var(--accent-cyan);
  transform: scale(1.1);
}

/* Detail Panel */
.gear-detail-panel {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 30px;
  background: rgba(var(--depth-2-rgb), 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
  border-radius: 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease;
  position: relative;
  z-index: 3;
}

.gear-detail-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-violet), transparent);
  opacity: 0.6;
}

.detail-placeholder {
  text-align: center;
  padding: 40px 20px;
}

.detail-placeholder p {
  color: var(--text-muted);
  font-size: var(--fs-700);
  letter-spacing: 0.02em;
}

.detail-content {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.detail-content.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.detail-header {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.detail-category {
  font-size: var(--fs-400);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.detail-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}

.detail-body-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
}

.detail-description {
  color: var(--text-secondary);
  font-size: var(--fs-600);
  line-height: 1.6;
}

.detail-description p {
  margin-bottom: 16px;
}

.detail-description strong {
  color: #fff;
  font-weight: 700;
}

.detail-why-box {
  background: var(--surface-1);
  border-left: 3px solid var(--accent-violet);
  padding: 12px 16px;
  border-radius: 0 12px 12px 0;
  margin-top: 14px;
}

.detail-why-box h4 {
  font-size: var(--fs-500);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-violet);
  margin-bottom: 4px;
}

.detail-why-box p {
  font-size: var(--fs-600);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.detail-specs-box {
  background: var(--accent-tint-1);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
  padding: 20px;
  border-radius: 16px;
  height: fit-content;
}

.detail-specs-box h4 {
  font-size: var(--fs-500);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.detail-specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-specs-list li {
  font-size: var(--fs-500);
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 16px;
  position: relative;
  margin-bottom: 8px;
}

.detail-specs-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent-cyan);
  font-weight: 700;
}

.detail-specs-list li:last-child {
  margin-bottom: 0;
}

/* Tip Box */
.detail-tip-box {
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
  padding: 16px 20px;
  border-radius: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.detail-tip-box .tip-icon {
  color: var(--accent-cyan);
  flex-shrink: 0;
  margin-top: 2px;
}

.detail-tip-box .tip-text {
  font-size: var(--fs-600);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.detail-tip-box .tip-text strong {
  color: var(--accent-cyan);
}

/* Responsive Mojo Gear */
@media (max-width: 992px) {
  .gear-container {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0;
  }
  
  .gear-backpack-canvas {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .mojo-gear {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .gear-intro {
    font-size: var(--fs-600);
    margin-bottom: 34px;
    padding: 0 16px;
  }
  
  .gear-grid-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .gear-selector-card {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 12px;
  }
  
  .gear-selector-card .card-title {
    font-size: var(--fs-500);
  }
  
  .gear-detail-panel {
    padding: 20px;
    border-radius: 20px;
    margin-top: 30px;
  }
  
  .detail-title {
    font-size: var(--fs-900);
  }
  
  .detail-body-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .detail-description {
    font-size: var(--fs-600);
  }
}

@media (max-width: 480px) {
  .gear-backpack-canvas {
    height: 300px;
  }
  
  .gear-grid-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gear-selector-card {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 10px;
  }

  .gear-selector-card .card-title {
    font-size: var(--fs-500);
  }

  .gear-selector-card .card-icon svg {
    width: 16px;
    height: 16px;
  }
  
  .gear-hotspot {
    width: 26px;
    height: 26px;
    font-size: var(--fs-300);
  }

  .gear-detail-panel {
    padding: 16px;
    border-radius: 16px;
    margin-top: 20px;
    min-height: auto;
  }
}

/* =========================================================
17b. Motxilla 3D: escenario WebGL con recorrido por scroll
========================================================= */
.gear-stage {
  --gear-intro: 60vh;
  --gear-step: 100vh;
  --gear-tail: 45vh;
  --gear-card-bottom: clamp(170px, 26vh, 220px);
  /* La cabecera del sitio es fija: el escenario empieza justo por debajo. */
  --gear-nav: 78px;
  position: relative;
  margin: 0 auto;
}

.gear-stage-track {
  position: relative;
  height: calc(var(--gear-intro) + var(--gear-step) * 6 + var(--gear-tail));
}

.gear-stage-sticky {
  position: sticky;
  top: var(--gear-nav);
  height: calc(100vh - var(--gear-nav));
  overflow: hidden;
  border-radius: 26px;
  /* Panel de cristal: deja asomar el fondo animado del sitio por los bordes
     pero mantiene el centro oscuro para que la motxilla recorte con nitidez. */
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
  background: radial-gradient(ellipse 84% 72% at 38% 48%,
    rgba(6, 11, 22, 0.97) 0%,
    rgba(6, 11, 22, 0.9) 45%,
    rgba(6, 11, 22, 0.52) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@supports (height: 100svh) {
  .gear-stage-sticky {
    height: calc(100svh - var(--gear-nav));
  }
}

.gear-stage-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 52% at 32% 46%, rgba(var(--accent-cyan-rgb), 0.18), transparent 70%),
    radial-gradient(ellipse 44% 44% at 76% 40%, rgba(139, 92, 246, 0.15), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(var(--accent-cyan-rgb), 0.07), transparent 70%);
}

.gear-scene-mount {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 68% center;
  background-size: cover;
}

.gear-scene-mount :is(canvas, .gear-scroll-video) {
  display: block;
  width: 100%;
  height: 100%;
}

.gear-scroll-video {
  object-fit: cover;
  object-position: 68% center;
  pointer-events: none;
  background: #020812;
  transform: translateZ(0);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.gear-scroll-video.is-ready {
  opacity: 1;
}

/* Barra de progreso del recorrido */
.gear-stage-rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 4;
  background: var(--surface-4);
}

.gear-stage-rail-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
  box-shadow: 0 0 14px rgba(var(--accent-cyan-rgb), 0.8);
}

/* Cabecera flotante */
.gear-stage-hud {
  position: absolute;
  z-index: 3;
  top: clamp(18px, 3.4vh, 40px);
  left: clamp(18px, 4vw, 52px);
  right: clamp(18px, 4vw, 52px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}

.gear-stage-kicker {
  display: block;
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent-cyan);
}

.gear-stage-segments {
  display: flex;
  gap: 5px;
  width: min(300px, 46vw);
  margin-top: 12px;
}

.gear-stage-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--surface-5);
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.gear-stage-seg.is-done {
  background: var(--accent-cyan);
}

.gear-stage-seg.is-active {
  background: var(--accent-cyan);
  height: 5px;
  box-shadow: 0 0 12px rgba(var(--accent-cyan-rgb), 0.8);
}

.gear-stage-counter {
  margin: 0;
  text-align: right;
  font-family: var(--font-primary), sans-serif;
  line-height: 1;
}

.gear-stage-counter-n {
  display: block;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  font-weight: 800;
  color: var(--text-primary);
}

.gear-stage-counter-total {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
}

/* Fichas del accesorio activo */
.gear-stage-cards {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 2.8vw, 36px);
  bottom: var(--gear-card-bottom);
  width: min(390px, calc(100% - 32px));
  pointer-events: none;
}

.gear-stage-card {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(var(--depth-2-rgb), 0.76);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
  opacity: 0;
  overflow: hidden;
  will-change: opacity, transform;
}

.gear-stage-card.is-active {
  opacity: 1;
}

.gear-stage-card-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.75;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-violet), transparent);
}

.gear-stage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gear-stage-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-cyan);
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.15em;
}

.gear-stage-card-idx {
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.gear-stage-card-title {
  font-family: var(--font-primary), sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 12px 0 8px;
  color: var(--text-primary);
}

.gear-stage-card-text {
  margin: 0 0 15px;
  font-size: var(--fs-600);
  line-height: 1.6;
  color: var(--text-secondary);
}

.gear-stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gear-stage-chips li {
  font-size: var(--fs-300);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 5px 9px;
}

/* Pistas de uso */
.gear-stage-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(16px, 3vh, 30px);
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
  pointer-events: none;
  animation: gearHintBob 2.4s infinite ease-in-out;
  transition: opacity 0.4s ease;
}

@keyframes gearHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* Abajo a la izquierda: la esquina derecha la ocupa el chat flotante. */
.gear-stage-skip {
  position: absolute;
  z-index: 5;
  left: clamp(14px, 3vw, 24px);
  bottom: clamp(14px, 3vh, 24px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--enhance-border);
  background: rgba(var(--depth-2-rgb), 0.72);
  color: var(--text-secondary);
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-300);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.gear-stage-skip:is(:hover, :focus-visible) {
  color: var(--accent-cyan);
  border-color: rgba(var(--accent-cyan-rgb), 0.5);
  background: var(--accent-tint-2);
}

/* Sin vídeo, con ahorro de datos, movimiento reducido o si falla la carga:
   sin recorrido por scroll. Las seis fichas se despliegan como rejilla. */
.gear-stage[data-scene="off"] .gear-stage-track {
  height: auto;
}

.gear-stage[data-scene="off"] .gear-stage-sticky {
  position: static;
  height: auto;
  padding: clamp(20px, 3vw, 30px);
}

.gear-stage[data-scene="off"] :is(.gear-scene-mount, .gear-stage-rail, .gear-stage-hud, .gear-stage-hint, .gear-stage-skip) {
  display: none;
}

.gear-stage[data-scene="off"] .gear-stage-cards {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  width: auto;
}

.gear-stage[data-scene="off"] .gear-stage-card {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 992px) {
  .gear-stage {
    --gear-intro: 58vh;
    --gear-step: 92vh;
    --gear-tail: 38vh;
  }
}

@media (max-width: 780px) {
  @keyframes gearCardSheen {
    0% {
      opacity: 0;
      transform: translate3d(-150%, 0, 0) skewX(-18deg);
    }
    22% {
      opacity: 0.3;
    }
    100% {
      opacity: 0;
      transform: translate3d(470%, 0, 0) skewX(-18deg);
    }
  }

  .gear-stage {
    --gear-intro: 58vh;
    --gear-step: 88vh;
    --gear-tail: 30vh;
    --gear-card-bottom: 78px;
    margin-inline: -10px;
  }

  .gear-stage-sticky {
    border-radius: 20px;
  }

  .gear-scene-mount {
    inset: 54px 0 auto;
    height: min(42vh, 330px);
    background-position: 46% center;
  }

  @supports (height: 100svh) {
    .gear-scene-mount {
      height: min(42svh, 330px);
    }
  }

  .gear-scroll-video {
    object-position: 46% center;
  }

  .gear-stage-hud {
    top: 16px;
    left: 16px;
    right: 16px;
  }

  .gear-stage-segments {
    width: min(220px, 52vw);
    margin-top: 9px;
  }

  .gear-stage-cards {
    top: calc(54px + min(42vh, 330px) + 10px);
    bottom: auto;
    left: 14px;
    right: 14px;
    width: auto;
  }

  @supports (height: 100svh) {
    .gear-stage-cards {
      top: calc(54px + min(42svh, 330px) + 10px);
    }
  }

  .gear-stage-card {
    inset: 0 0 auto;
    padding: 18px 18px 19px;
    border-radius: 18px;
  }

  /* Revelado editorial ligado al progreso del vídeo. Sólo se animan opacity y
     transform; así la tarjeta no provoca recálculos ni compite con el MP4. */
  .gear-stage[data-scene="on"] .gear-stage-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -28%;
    bottom: -28%;
    left: -38%;
    width: 28%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-150%, 0, 0) skewX(-18deg);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(var(--accent-cyan-rgb), 0.08),
      rgba(255, 255, 255, 0.2),
      rgba(139, 92, 246, 0.1),
      transparent
    );
  }

  .gear-stage[data-scene="on"] .gear-stage-card.is-presented::before {
    animation: gearCardSheen 820ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  .gear-stage[data-scene="on"] .gear-stage-card > :not(.gear-stage-card-line) {
    position: relative;
    z-index: 1;
  }

  .gear-stage[data-scene="on"] .gear-stage-card-line {
    z-index: 2;
    opacity: var(--gear-line-reveal, 0);
    transform: scaleX(var(--gear-line-reveal, 0));
    transform-origin: left center;
  }

  .gear-stage[data-scene="on"] .gear-stage-card-head {
    opacity: var(--gear-head-reveal, 0);
    transform: translate3d(0, var(--gear-head-y, 8px), 0);
  }

  .gear-stage-card-title {
    margin: 10px 0 7px;
    font-size: var(--fs-800);
  }

  .gear-stage[data-scene="on"] .gear-stage-card-title {
    opacity: var(--gear-title-reveal, 0);
    transform: translate3d(0, var(--gear-title-y, 10px), 0);
  }

  .gear-stage-card-text {
    font-size: var(--fs-500);
    line-height: 1.55;
    margin-bottom: 12px;
  }

  .gear-stage[data-scene="on"] .gear-stage-card-text {
    opacity: var(--gear-text-reveal, 0);
    transform: translate3d(0, var(--gear-text-y, 9px), 0);
  }

  .gear-stage-chips li {
    font-size: var(--fs-300);
    padding: 4px 8px;
  }

  .gear-stage[data-scene="on"] .gear-stage-chips li:nth-child(1) {
    opacity: var(--gear-chip-one-reveal, 0);
    transform: translate3d(0, var(--gear-chip-one-y, 7px), 0);
  }

  .gear-stage[data-scene="on"] .gear-stage-chips li:nth-child(2) {
    opacity: var(--gear-chip-two-reveal, 0);
    transform: translate3d(0, var(--gear-chip-two-y, 7px), 0);
  }

  .gear-stage[data-scene="on"] .gear-stage-chips li:nth-child(3) {
    opacity: var(--gear-chip-three-reveal, 0);
    transform: translate3d(0, var(--gear-chip-three-y, 7px), 0);
  }

  .gear-stage-hint {
    bottom: 14px;
    font-size: var(--fs-100);
    letter-spacing: 0.16em;
  }

  /* Comparte franja con el rótulo «DESPLAÇA'T», que va centrado, así que lo que
     manda es el LARGO DE LA ETIQUETA y ese cambia con el idioma. Medido a 360 y
     375 px: en catalán quedaban 5 y 13 px de aire, en inglés 6 y 13, y en
     castellano —«Saltar la animación», 126 px contra los 109 del catalán— se
     solapaban 13 y 6 px. Por eso el defecto solo se ve en castellano.
     Un peldaño menos de letra (el mismo que ya usa el rótulo) y pegada más al
     borde. Si algún día se traduce a un idioma más largo, medir otra vez. */
  .gear-stage-skip {
    left: 6px;
    bottom: 12px;
    padding: 6px 10px;
    font-size: var(--fs-100);
  }
}

@media (max-width: 420px) {
  .gear-stage {
    --gear-card-bottom: 76px;
  }

  .gear-scene-mount {
    top: 50px;
    height: min(40vh, 285px);
  }

  .gear-stage-cards {
    top: calc(50px + min(40vh, 285px) + 8px);
  }

  @supports (height: 100svh) {
    .gear-scene-mount {
      height: min(40svh, 285px);
    }

    .gear-stage-cards {
      top: calc(50px + min(40svh, 285px) + 8px);
    }
  }

  .gear-stage-card-text {
    font-size: var(--fs-500);
  }

  /* En pantallas muy estrechas la tercera etiqueta sobra: cabe justo. */
  .gear-stage-chips li:nth-child(3) {
    display: none;
  }
}

/* La animación por scroll es larga: quien pide menos movimiento no la recibe. */
@media (prefers-reduced-motion: reduce) {
  .gear-stage-hint {
    animation: none;
  }

  .gear-stage-card::before {
    display: none;
  }

  .gear-stage-card :is(
    .gear-stage-card-line,
    .gear-stage-card-head,
    .gear-stage-card-title,
    .gear-stage-card-text,
    .gear-stage-chips li
  ) {
    opacity: 1;
    transform: none;
  }
}

/* 12. Footer: Centrado y simetría en móviles */
@media (max-width: 576px) {
  .footer-top,
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .footer-bottom {
    padding-top: 20px !important;
  }
}

/* Phase 12 services mobile readability override */
@media (max-width: 640px) {
  .services .services-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .services .service-contract-card {
    padding: 18px !important;
    border-radius: var(--enhance-radius-md) !important;
  }

  .services .service-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 14px !important;
  }

  .services .service-icon i[data-lucide] {
    width: 22px !important;
    height: 22px !important;
  }

  .services .service-contract-card h3 {
    font-size: var(--fs-800) !important;
    line-height: 1.2 !important;
  }

  .services .service-contract-card > p,
  .services .service-proof-grid p {
    font-size: var(--fs-500) !important;
    line-height: 1.45 !important;
  }
}

/* Phase 17 services conversion formats mobile compact override */
@media (max-width: 640px) {
  .services {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .services > .section-title {
    margin-bottom: 10px !important;
  }

  .services-subtitle {
    margin-bottom: 14px !important;
    font-size: var(--fs-600) !important;
    line-height: 1.42 !important;
    text-align: left !important;
  }

  .services-need-panel {
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding: 12px !important;
  }

  .services-need-copy p {
    font-size: var(--fs-500) !important;
    line-height: 1.35 !important;
  }

  .services-need-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .service-need-btn {
    min-height: 50px !important;
    padding: 8px !important;
  }

  .service-need-btn span {
    width: 20px !important;
    height: 20px !important;
    margin-bottom: 6px !important;
    font-size: var(--fs-100) !important;
  }

  .service-need-btn strong {
    font-size: var(--fs-300) !important;
    line-height: 1.18 !important;
  }

  /* La ficha se ancla al CENTRO, no al borde izquierdo.
     Antes la ficha media 276px pegada a la izquierda: le quedaban 24px de hueco
     por un lado y 90px por el otro, asi que nunca llegaba a estar centrada y al
     arrastrar el carrusel se veia descuadrado.
     Para que una ficha pueda centrarse tambien siendo la primera o la ultima, el
     carril necesita un colchon lateral de exactamente medio hueco sobrante; de
     ahi que el padding se calcule y no sea un numero fijo. Y para que ese calculo
     sea exacto el carril va a ancho completo de pantalla, con el margen negativo
     que lo saca de los margenes de la seccion. */
  .services .services-grid {
    --ficha: min(300px, calc(100vw - 90px));
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    padding: 12px calc((100vw - var(--ficha)) / 2) 16px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-padding-inline: calc((100vw - var(--ficha)) / 2) !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .services .services-grid::-webkit-scrollbar {
    display: none !important;
  }

  .services .service-contract-card {
    flex: 0 0 var(--ficha) !important;
    min-height: auto !important;
    scroll-snap-align: center !important;
    padding: 14px !important;
    border-radius: var(--enhance-radius-md) !important;
    /* Las vecinas se quedan un punto mas pequenas para que el ojo vaya al centro.
       Se encogen, NO se apagan: bajarles la opacidad es justo lo que hacia que
       esta seccion se leyera desvaida (ver el velo de .swipe-hint-overlay). La
       ficha activa vuelve a escala 1 exacta, sin fraccion, para que su texto se
       rasterice nitido. */
    transform: scale(.93);
    transform-origin: center center;
    transition:
      transform .35s cubic-bezier(.22, .61, .36, 1),
      border-color .35s ease,
      box-shadow .35s ease;
  }

  .services .service-contract-card.is-current {
    transform: scale(1);
    border-color: rgba(34, 211, 238, .4) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .4) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .services .service-contract-card {
      transition: none;
    }
  }

  .services .service-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 10px !important;
  }

  .services .service-icon i[data-lucide] {
    width: 18px !important;
    height: 18px !important;
  }

  .services .service-card-kicker {
    margin-bottom: 6px !important;
    font-size: var(--fs-200) !important;
  }

  .services .service-contract-card h3 {
    margin-bottom: 8px !important;
    font-size: var(--fs-700) !important;
    line-height: 1.16 !important;
  }

  .services .service-contract-card > p {
    display: -webkit-box !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    font-size: var(--fs-500) !important;
    line-height: 1.4 !important;
  }

  .services .service-proof-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .services .service-proof-grid div {
    padding: 9px !important;
  }

  .services .service-proof-grid span {
    margin-bottom: 3px !important;
    font-size: var(--fs-100) !important;
  }

  .services .service-proof-grid p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: var(--fs-400) !important;
    line-height: 1.35 !important;
  }

  .services .service-link.service-cta {
    min-height: 40px !important;
    padding: 9px 12px !important;
    font-size: var(--fs-500) !important;
  }

  .services-format-help {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding: 14px !important;
    border-radius: var(--enhance-radius-md) !important;
  }

  .services-help-copy h3 {
    font-size: var(--fs-700) !important;
    line-height: 1.18 !important;
  }

  .services-help-copy p {
    font-size: var(--fs-500) !important;
    line-height: 1.4 !important;
  }

  .services-help-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .service-unclear-cta,
  .services-topics-link {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .services-help-actions {
    padding-right: 52px !important;
  }
}

/* Phase 18 contact conversion mobile compact override */
@media (max-width: 640px) {
  .contact {
    padding-top: 38px !important;
    padding-inline: 16px !important;
    padding-bottom: 96px !important;
  }

  .contact > .section-title {
    margin-bottom: 16px !important;
    text-wrap: balance;
  }

  .contact-grid {
    gap: 14px !important;
  }

  .contact-info-panel,
  .contact-form {
    padding: 14px !important;
    border-radius: var(--enhance-radius-md) !important;
  }

  .contact-copy {
    gap: 10px !important;
  }

  .contact-copy .hero-subtitle {
    font-size: var(--fs-700) !important;
    line-height: 1.22 !important;
  }

  .contact-lead {
    font-size: var(--fs-500) !important;
    line-height: 1.42 !important;
  }

  .contact-service-list {
    gap: 7px !important;
    margin-top: 2px !important;
  }

  .contact-service-list span {
    min-height: 30px !important;
    padding: 7px 9px !important;
    font-size: var(--fs-300) !important;
  }

  .contact-cards {
    gap: 8px !important;
  }

  .contact-card {
    padding: 12px !important;
    gap: 10px !important;
  }

  .contact-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  .contact-card-info h3 {
    font-size: var(--fs-200) !important;
  }

  .contact-card-info p,
  .contact-card-info a {
    font-size: var(--fs-500) !important;
    line-height: 1.25 !important;
  }

  .contact-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .contact-quick-link {
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 10px !important;
    font-size: var(--fs-400) !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .contact-form form {
    gap: 12px !important;
  }

  .contact-form-head {
    gap: 6px !important;
    margin-bottom: 0 !important;
  }

  .contact-form-head h3 {
    font-size: var(--fs-800) !important;
    line-height: 1.15 !important;
  }

  .contact-form-head p,
  .contact-form-note {
    font-size: var(--fs-400) !important;
    line-height: 1.35 !important;
  }

  .contact-intent-group,
  .contact-form-fields {
    gap: 10px !important;
  }

  .contact-intent-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .contact-intent-btn {
    min-height: 58px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  .contact-intent-wide {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
  }

  .contact-intent-btn strong {
    font-size: var(--fs-400) !important;
    line-height: 1.12 !important;
  }

  .contact-intent-btn span {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: var(--fs-200) !important;
    line-height: 1.18 !important;
  }

  .contact-form-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .contact-form .form-control {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: var(--fs-500) !important;
    border-radius: 10px !important;
  }

  .contact-form select.form-control {
    background-position:
      calc(100% - 18px) 18px,
      calc(100% - 12px) 18px !important;
  }

  .contact-form textarea.form-control {
    min-height: 108px !important;
  }

  .contact-proposal-guide {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .contact-proposal-guide h3 {
    margin-bottom: 6px !important;
    font-size: var(--fs-600) !important;
  }

  .contact-proposal-guide p {
    margin-bottom: 7px !important;
    font-size: var(--fs-400) !important;
  }

  .contact-proposal-guide ul {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .contact-proposal-guide li {
    padding-left: 16px !important;
    font-size: var(--fs-400) !important;
    line-height: 1.35 !important;
  }

  .contact-form .btn-primary {
    min-height: 46px !important;
    font-size: var(--fs-500) !important;
  }
}

/* Phase 14 chatbot premium mobile assistant layer */
.cyber-chatbot-widget,
.cyber-chatbot-widget * {
  box-sizing: border-box;
}

.chatbot-window {
  width: min(380px, calc(100vw - 32px));
  background:
    linear-gradient(145deg, rgba(10, 18, 35, 0.78), rgba(5, 10, 22, 0.66)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015));
  border-color: rgba(116, 227, 255, 0.18);
  border-radius: 18px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(var(--accent-cyan-chat-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chatbot-header,
.chatbot-input-form,
.chatbot-options {
  background: rgba(var(--depth-2-rgb), 0.58);
}

.chatbot-messages {
  min-height: 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--accent-cyan-chat-rgb), 0.08), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(255, 0, 127, 0.08), transparent 34%);
}

.message {
  max-width: min(86%, 30rem);
}

.system-msg {
  background: rgba(var(--depth-3-rgb), 0.72);
}

.user-msg {
  background: rgba(0, 210, 255, 0.1);
}

.msg-action-btn[data-action="start_form"] {
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.32);
  background: rgba(var(--accent-cyan-chat-rgb), 0.09);
  color: var(--text-white);
}

.msg-action-btn[data-action="start_form"]:hover {
  background: rgba(var(--accent-cyan-chat-rgb), 0.16);
}

#portfolioContactForm.chatbot-prepared {
  outline: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.36);
  outline-offset: 6px;
  box-shadow: 0 0 28px rgba(var(--accent-cyan-chat-rgb), 0.14);
}

@media (max-width: 767px) {
  .cyber-chatbot-widget:has(.chatbot-window.visible) {
    background: rgba(var(--depth-1-rgb), 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .chatbot-window {
    width: 100dvw;
    max-width: 100vw;
    height: min(85dvh, calc(100dvh - 16px));
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    padding-top: 10px; /* Espacio para el drag handle */
  }

  /* Drag handle visual superior */
  .chatbot-window::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    background-color: var(--surface-6);
    border-radius: 2px;
    z-index: 1010;
  }

  /* Incremento de la altura del Bottom Sheet en formato half-sheet */
  .chatbot-window.half-sheet {
    height: min(65dvh, 480px) !important;
    min-height: 400px !important;
  }

  .chatbot-header {
    padding: 10px 12px;
    gap: 8px;
    min-height: 62px;
  }

  /* Compactar cabecera cuando está en modo half-sheet */
  .chatbot-window.half-sheet .chatbot-header {
    padding: 8px 12px;
    min-height: 52px;
  }

  .chatbot-window.half-sheet .chatbot-avatar-status {
    width: 32px;
    height: 32px;
  }

  .chatbot-header-info {
    min-width: 0;
  }

  .chatbot-header-text {
    min-width: 0;
  }

  .chatbot-title,
  .chatbot-subtitle {
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chatbot-title {
    font-size: var(--fs-500);
  }

  .chatbot-subtitle {
    font-size: var(--fs-100);
  }

  .chatbot-messages {
    padding: 14px 12px;
    gap: 18px;
    overscroll-behavior: contain;
  }

  /* Reducir paddings en half-sheet para dar más espacio a los mensajes */
  .chatbot-window.half-sheet .chatbot-messages {
    padding: 10px 12px;
    gap: 12px;
  }

  .message {
    max-width: 88%;
    padding: 10px 12px;
    font-size: var(--fs-500);
  }

  .chatbot-window.half-sheet .message {
    padding: 8px 10px;
    font-size: var(--fs-400);
  }

  .msg-btn-group {
    gap: 7px;
  }

  .msg-action-btn,
  .chatbot-card-btn {
    min-height: 36px;
    padding: 7px 10px;
    white-space: normal;
  }

  .chatbot-feedback {
    flex-wrap: wrap;
  }

  .chatbot-options {
    /* Dos filas de accesos rapidos (antes 52px: recortaba la segunda). */
    max-height: 120px;
    padding: 8px 12px 8px;
    gap: 6px;
  }

  /* Ajustar tamaño de opciones rápidas en half-sheet */
  .chatbot-window.half-sheet .chatbot-options {
    /* Dos filas de accesos rapidos (antes 48px: recortaba la segunda). */
    max-height: 116px;
    padding: 6px 12px 6px;
  }

  .chat-option-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: var(--fs-400);
  }

  .chatbot-window.half-sheet .chat-option-btn {
    min-height: 32px;
    padding: 5px 10px;
    font-size: var(--fs-300);
  }

  .chatbot-input-form {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }

  .chatbot-input {
    min-width: 0;
    height: 40px;
    border-radius: 14px;
    font-size: 16px;
  }

  .chatbot-send-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .chatbot-autocomplete-suggestions {
    left: 12px;
    right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom));
    max-height: 120px;
  }

  .chatbot-proactive-bubble {
    right: 72px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(228px, calc(100vw - 102px));
    max-width: none;
    padding: 9px 28px 9px 12px;
    border-radius: 999px;
    border-bottom-right-radius: 999px;
  }

  .proactive-text {
    font-size: var(--fs-200);
    line-height: 1.25;
  }

  .proactive-close {
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
  }
}

@media (max-width: 390px) {
  .chatbot-header-actions {
    gap: 8px !important;
  }

  .chatbot-close-btn,
  .chatbot-reset-btn,
  .chatbot-audio-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .chatbot-avatar-status {
    width: 34px;
    height: 34px;
  }

  .message {
    max-width: 90%;
  }

  .chatbot-card-item {
    width: 136px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-pulse-ring,
  .chatbot-trigger.proactive-glow,
  .status-dot.pulsing,
  .typing-dot,
  .chatbot-typing-progressbar-inner,
  .glitch-anim,
  .disintegrate-glitch,
  .send-particle {
    animation: none !important;
  }

  .chatbot-window,
  .message,
  .chatbot-trigger,
  .msg-action-btn,
  .chat-option-btn {
    transition: none !important;
  }
}

/* --- FASE CHATBOT 1A: HOTFIX LIGHTBOX Y ZONAS SENSIBLES --- */

/* Ocultar chatbot completo cuando el lightbox del portfolio está abierto */
body.lightbox-open .cyber-chatbot-widget {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(15px) scale(0.95);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

body.lightbox-open .cyber-chatbot-widget *,
body.lightbox-open .chatbot-proactive-bubble,
body.lightbox-open .chatbot-trigger,
body.lightbox-open .chatbot-window {
  pointer-events: none !important;
}

/* Ocultamiento del chatbot en Zonas Sensibles de móvil (como al enfocar inputs de contacto) */
@media (max-width: 767px) {
  .cyber-chatbot-widget.sensitive-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease !important;
  }

  /* Opacidad reducida en la sección de contacto para no entorpecer visualmente */
  .cyber-chatbot-widget.in-contact-section {
    opacity: 0.2;
    transition: opacity 0.3s ease;
  }

  .cyber-chatbot-widget.in-contact-section:hover,
  .cyber-chatbot-widget.in-contact-section:focus-within {
    opacity: 1;
  }
}

/* --- FASE CHATBOT 4: RESPUESTAS INTELIGENTES Y TARJETAS VISUALES --- */

/* 14. Chatbot Rich Cards Layer */
.chatbot-rich-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
}

.chatbot-rich-card {
  background: rgba(var(--depth-1-rgb), 0.45);
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.2);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.chatbot-rich-card:hover {
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.45);
  box-shadow: 0 6px 20px rgba(var(--accent-cyan-chat-rgb), 0.1);
}

.chatbot-rich-card-thumb {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chatbot-rich-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-600);
  font-weight: 700;
  color: var(--accent-cyan-chat);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.chatbot-rich-card-text {
  font-size: var(--fs-400);
  color: #e2e8f0;
  line-height: 1.35;
}

.chatbot-rich-card-meta {
  font-size: var(--fs-300);
  color: #94a3b8;
  font-style: italic;
}

.chatbot-rich-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.chatbot-rich-card-btn {
  flex: 1;
  min-width: 100px;
  padding: 6px 12px;
  font-size: var(--fs-400);
  font-weight: 600;
  text-align: center;
  color: var(--accent-cyan-chat);
  background: rgba(var(--accent-cyan-chat-rgb), 0.08);
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chatbot-rich-card-btn:hover {
  color: #fff;
  background: rgba(var(--accent-cyan-chat-rgb), 0.25);
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.6);
  box-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.3);
}

.chatbot-rich-card-btn:focus-visible {
  outline: 2px solid var(--accent-cyan-chat);
  outline-offset: 2px;
}

.chatbot-rich-card-btn.secondary {
  color: #cbd5e1;
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.chatbot-rich-card-btn.secondary:hover {
  color: #fff;
  background: var(--surface-5);
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
  .chatbot-rich-card {
    padding: 10px;
    gap: 6px;
  }
  
  .chatbot-rich-card-thumb {
    height: 80px;
  }
  
  .chatbot-rich-card-btn {
    padding: 5px 10px;
    font-size: var(--fs-300);
  }
}

/* --- FASE CHATBOT 5: PULIDO VISUAL PREMIUM Y MICROINTERACCIONES --- */

/* A) Pulido del Botón Flotante #chatbotTrigger */
.chatbot-trigger {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #050d1a, #0b152d) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.24) !important;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.5), 
    0 0 15px rgba(var(--accent-cyan-chat-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.chatbot-trigger:hover {
  transform: scale(1.05) !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.6) !important;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.6), 
    0 0 22px rgba(var(--accent-cyan-chat-rgb), 0.3),
    0 0 4px rgba(157, 0, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.chatbot-trigger:focus-visible {
  outline: 2px solid var(--accent-cyan-chat) !important;
  outline-offset: 3px !important;
}

.chatbot-trigger:active {
  transform: scale(0.96) !important;
}

/* Redefinir glow de fondo con un degradado animado cian/violeta premium */
.chatbot-trigger-glow {
  background: linear-gradient(135deg, var(--accent-cyan-chat), #9d00ff) !important;
  filter: blur(8px) !important;
  opacity: 0.22 !important;
  transition: opacity 0.25s ease !important;
}

.chatbot-trigger:hover .chatbot-trigger-glow {
  opacity: 0.55 !important;
}

/* Pulso más sutil */
.chatbot-pulse-ring {
  inset: -5px !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.35) !important;
  animation: pulseRingPremium 4s cubic-bezier(0.25, 0, 0, 1) infinite !important;
}

@keyframes pulseRingPremium {
  0% { transform: scale(0.98); opacity: 0; }
  20% { opacity: 0.25; }
  80% { opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Integración del trigger con proactive-glow */
.chatbot-trigger.proactive-glow {
  box-shadow: 0 0 0 0 rgba(var(--accent-cyan-chat-rgb), 0.5) !important;
  animation: proactivePulsePremium 1.8s infinite !important;
}

@keyframes proactivePulsePremium {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-cyan-chat-rgb), 0.4), 0 0 12px rgba(157, 0, 255, 0.1);
    border-color: rgba(var(--accent-cyan-chat-rgb), 0.4) !important;
  }
  70% {
    box-shadow: 0 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0), 0 0 20px rgba(157, 0, 255, 0.3);
    border-color: rgba(157, 0, 255, 0.6) !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-cyan-chat-rgb), 0), 0 0 12px rgba(157, 0, 255, 0.1);
    border-color: rgba(var(--accent-cyan-chat-rgb), 0.4) !important;
  }
}

/* Badge del trigger */
.chatbot-trigger-badge {
  background: linear-gradient(135deg, var(--accent-cyan-chat), #9d00ff) !important;
  box-shadow: 0 2px 8px rgba(var(--accent-cyan-chat-rgb), 0.4) !important;
  font-size: 10px !important;
}


/* B) Pulido del Contenedor #chatbotWindow */
.chatbot-window {
  background: 
    linear-gradient(145deg, rgba(8, 14, 28, 0.74), rgba(4, 8, 18, 0.68)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.65), 
    0 0 35px rgba(var(--accent-cyan-chat-rgb), 0.05), 
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease-out !important;
}


/* C) Header del chatbot */
.chatbot-header {
  background: rgba(var(--depth-1-rgb), 0.58) !important;
  border-bottom: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.08) !important;
  padding: 12px 16px !important;
  align-items: center !important;
}

/* Avatar de la cabecera */
.chatbot-avatar-status {
  position: relative;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.3);
  border-radius: 50%;
  padding: 1px;
}

/* Pequeño punto indicador de estado */
.chatbot-avatar-status::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--accent-cyan-chat);
  border: 1.5px solid #040812;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-cyan-chat);
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0% { transform: scale(1); box-shadow: 0 0 2px var(--accent-cyan-chat); }
  50% { transform: scale(1.15); box-shadow: 0 0 8px var(--accent-cyan-chat); }
  100% { transform: scale(1); box-shadow: 0 0 2px var(--accent-cyan-chat); }
}

/* Botones del header (Reset, Audio, Cerrar) */
.chatbot-header-actions {
  gap: 8px !important;
}

.chatbot-close-btn,
.chatbot-reset-btn,
.chatbot-audio-btn {
  background: var(--surface-1) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(var(--accent-cyan-chat-rgb), 0.7) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.chatbot-close-btn:hover,
.chatbot-reset-btn:hover,
.chatbot-audio-btn:hover {
  background: rgba(var(--accent-cyan-chat-rgb), 0.12) !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.4) !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.25) !important;
}

.chatbot-close-btn:focus-visible,
.chatbot-reset-btn:focus-visible,
.chatbot-audio-btn:focus-visible {
  outline: 2px solid var(--accent-cyan-chat) !important;
  outline-offset: 1px !important;
}


/* D) Mensajes */
.chatbot-messages {
  padding: 16px 14px !important;
  gap: 16px !important;
  background: 
    radial-gradient(circle at 10% 0%, rgba(var(--accent-cyan-chat-rgb), 0.05), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(255, 0, 127, 0.04), transparent 45%) !important;
}

.message {
  border-radius: 14px !important;
  line-height: 1.4 !important;
  font-size: var(--fs-500) !important;
  padding: 10px 14px !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  animation: messageEntry 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  position: relative;
}

@keyframes messageEntry {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-msg {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.14), rgba(var(--accent-cyan-chat-rgb), 0.04)) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.15) !important;
  border-bottom-right-radius: 2px !important;
  color: #f1f5f9 !important;
  align-self: flex-end !important;
}

.system-msg {
  background: linear-gradient(135deg, rgba(12, 22, 45, 0.8), rgba(6, 12, 26, 0.6)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 2px solid var(--accent-cyan-chat) !important;
  border-bottom-left-radius: 2px !important;
  color: #e2e8f0 !important;
}

/* Typing indicator y progress bar */
.chatbot-typing-progressbar {
  background: var(--surface-3) !important;
  height: 2px !important;
  border-radius: 1px !important;
}

.chatbot-typing-progressbar-inner {
  background: linear-gradient(90deg, var(--accent-cyan-chat), #9d00ff) !important;
  box-shadow: 0 0 6px var(--accent-cyan-chat) !important;
}

/* Feedback en mensajes */
.chatbot-feedback {
  margin-top: 8px !important;
  gap: 8px !important;
  align-items: center !important;
  opacity: 0.85;
}

.chatbot-feedback .feedback-label {
  font-size: var(--fs-200) !important;
  color: #94a3b8 !important;
}

.feedback-btn {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: var(--fs-300) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.feedback-btn:hover {
  background: rgba(var(--accent-cyan-chat-rgb), 0.12) !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.35) !important;
}

.feedback-btn.thumbs-up:hover {
  box-shadow: 0 0 6px rgba(var(--accent-cyan-chat-rgb), 0.3) !important;
}

.feedback-btn.thumbs-down:hover {
  border-color: rgba(255, 0, 127, 0.5) !important;
  background: rgba(255, 0, 127, 0.1) !important;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
}


/* E) Chips y opciones rápidas */
.chatbot-options {
  background: rgba(var(--depth-1-rgb), 0.65) !important;
  border-top: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.08) !important;
  padding: 8px 12px 8px !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  flex-wrap: wrap !important;
  row-gap: 6px !important;
  scrollbar-width: none !important; /* Firefox */
  -webkit-overflow-scrolling: touch !important;
}

.chatbot-options::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari */
}

.chat-option-btn {
  background: rgba(var(--accent-cyan-chat-rgb), 0.03) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.18) !important;
  color: var(--text-white) !important;
  border-radius: 16px !important;
  padding: 6px 12px !important;
  font-size: var(--fs-400) !important;
  font-family: var(--font-sans, system-ui, sans-serif) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.chat-option-btn:hover {
  background: rgba(var(--accent-cyan-chat-rgb), 0.15) !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.5) !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.2) !important;
}

.chat-option-btn:focus-visible {
  outline: 2px solid var(--accent-cyan-chat) !important;
  outline-offset: 1px !important;
}


/* F) Tarjetas visuales enriquecidas */
.chatbot-rich-cards-container {
  gap: 10px !important;
  margin-top: 8px !important;
}

.chatbot-rich-card {
  background: rgba(var(--depth-1-rgb), 0.42) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.14) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.chatbot-rich-card:hover {
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.4) !important;
  box-shadow: 0 6px 16px rgba(var(--accent-cyan-chat-rgb), 0.08) !important;
}

.chatbot-rich-card-thumb {
  height: 80px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chatbot-rich-card-title {
  font-size: var(--fs-500) !important;
  color: var(--accent-cyan-chat) !important;
}

.chatbot-rich-card-text {
  font-size: var(--fs-400) !important;
  line-height: 1.3 !important;
  color: #cbd5e1 !important;
}

.chatbot-rich-card-btn {
  padding: 5px 10px !important;
  font-size: var(--fs-300) !important;
  border-radius: 5px !important;
}

.chatbot-rich-card-btn:hover {
  box-shadow: 0 0 6px rgba(var(--accent-cyan-chat-rgb), 0.25) !important;
}

/* F.1) Asistente de propuesta: progreso, respuestas editables y resultado visual */
.message.has-concierge-visual {
  width: min(100%, 34rem) !important;
  max-width: 100% !important;
  padding: 12px !important;
}

.concierge-visual {
  margin-top: 10px;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.concierge-icon,
.concierge-progress-icon,
.concierge-summary-icon,
.concierge-fit-icon,
.concierge-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.concierge-icon svg,
.concierge-progress-icon svg,
.concierge-summary-icon svg,
.concierge-fit-icon svg,
.concierge-result-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.concierge-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 10px 8px 9px;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.13);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-chat-rgb), 0.07), rgba(157, 0, 255, 0.045)),
    rgba(var(--depth-1-rgb), 0.46);
}

.concierge-progress-item {
  position: relative;
  z-index: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  color: #64748b;
  font-size: var(--fs-200);
  line-height: 1.1;
  text-align: center;
}

.concierge-progress-item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12px;
  left: calc(50% + 14px);
  width: calc(100% - 24px);
  height: 1px;
  background: rgba(148, 163, 184, 0.2);
}

.concierge-progress-icon {
  width: 25px;
  height: 25px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 50%;
  background: rgba(var(--depth-3-rgb), 0.94);
}

.concierge-progress-item.is-complete,
.concierge-progress-item.is-active {
  color: #d9faff;
}

.concierge-progress-item.is-complete .concierge-progress-icon {
  color: var(--accent-cyan-chat);
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.5);
  background: rgba(var(--accent-cyan-chat-rgb), 0.14);
}

.concierge-progress-item.is-complete::after {
  background: linear-gradient(90deg, rgba(var(--accent-cyan-chat-rgb), 0.7), rgba(157, 0, 255, 0.38));
}

.concierge-progress-item.is-active .concierge-progress-icon {
  color: #fff;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.72);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-chat-rgb), 0.34), rgba(157, 0, 255, 0.32));
  box-shadow: 0 0 0 3px rgba(var(--accent-cyan-chat-rgb), 0.08), 0 0 14px rgba(var(--accent-cyan-chat-rgb), 0.16);
}

.concierge-summary {
  margin-top: 9px;
}

.concierge-summary-title,
.concierge-alignment-label {
  display: block;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.concierge-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.concierge-summary-chip {
  display: flex !important;
  flex: 1 1 calc(50% - 3px);
  align-items: center !important;
  gap: 7px !important;
  min-width: 130px;
  min-height: 43px;
  padding: 6px 8px !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.14) !important;
  border-radius: 9px !important;
  background: rgba(var(--depth-1-rgb), 0.5) !important;
  text-align: left !important;
}

.concierge-summary-chip:hover,
.concierge-fit-item:hover {
  color: #fff !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.5) !important;
  background: rgba(var(--accent-cyan-chat-rgb), 0.1) !important;
}

.concierge-summary-icon,
.concierge-fit-icon {
  width: 20px;
  height: 20px;
  padding: 3px;
  color: var(--accent-cyan-chat);
}

.concierge-summary-copy,
.concierge-fit-item > span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.concierge-summary-label,
.concierge-fit-item small {
  color: #7f8da4;
  font-size: 0.63rem;
  font-weight: 600;
  line-height: 1.1;
}

.concierge-summary-value,
.concierge-fit-item strong {
  overflow: hidden;
  color: #eafcff;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concierge-date-picker {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.2);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(var(--accent-cyan-chat-rgb), 0.075), rgba(157, 0, 255, 0.05)),
    rgba(var(--depth-1-rgb), 0.64);
}

.concierge-date-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #eafcff;
  font-size: var(--fs-400);
}

.concierge-date-heading .concierge-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-cyan-chat);
}

.concierge-date-label {
  display: grid;
  gap: 4px;
  color: #94a3b8;
  font-size: 0.65rem;
  font-weight: 650;
}

.concierge-date-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.concierge-date-input,
.concierge-location-input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  outline: 0;
  background: rgba(var(--depth-3-rgb), 0.82);
  color: #f8fafc;
  font: 600 var(--fs-300) / 1.2 var(--font-sans, system-ui, sans-serif);
  color-scheme: dark;
}

.concierge-date-input:focus,
.concierge-location-input:focus {
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.62);
  box-shadow: 0 0 0 2px rgba(var(--accent-cyan-chat-rgb), 0.1);
}

.concierge-date-input[aria-invalid="true"] {
  border-color: #fb7185;
  box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.1);
}

.concierge-date-input::-webkit-calendar-picker-indicator {
  padding: 4px;
  cursor: pointer;
  filter: invert(85%) sepia(24%) saturate(1004%) hue-rotate(142deg) brightness(101%);
}

.concierge-open-calendar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.28) !important;
  color: #d9faff !important;
}

.concierge-open-calendar .concierge-icon {
  width: 15px;
  height: 15px;
}

.concierge-date-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.concierge-date-actions .msg-action-btn {
  min-height: 38px;
  border-radius: 8px;
}

.concierge-date-confirm {
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.48) !important;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-chat-rgb), 0.2), rgba(157, 0, 255, 0.16)) !important;
  color: #fff !important;
  font-weight: 700;
}

.concierge-date-error {
  margin: 0;
  color: #fda4af;
  font-size: 0.65rem;
  line-height: 1.35;
}

.concierge-date-error[hidden] {
  display: none;
}

.concierge-result-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--accent-cyan-chat-rgb), 0.14), transparent 38%),
    radial-gradient(circle at 100% 16%, rgba(157, 0, 255, 0.13), transparent 42%),
    rgba(var(--depth-1-rgb), 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.22);
  animation: conciergeResultReveal 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.concierge-result-card::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan-chat), #9d00ff, transparent);
  box-shadow: 0 0 12px rgba(var(--accent-cyan-chat-rgb), 0.38);
}

@keyframes conciergeResultReveal {
  from { opacity: 0; transform: translateY(7px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.concierge-result-eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-cyan-chat);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.concierge-result-eyebrow .concierge-icon {
  width: 16px;
  height: 16px;
}

.concierge-result-hero {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 9px;
}

.concierge-result-icon {
  width: 42px;
  height: 42px;
  padding: 9px;
  color: #fff;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.42);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-chat-rgb), 0.24), rgba(157, 0, 255, 0.24));
  box-shadow: 0 0 16px rgba(var(--accent-cyan-chat-rgb), 0.1);
}

.concierge-result-hero h4 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.1;
}

.concierge-result-reason-label {
  display: block;
  margin-bottom: 2px;
  color: #8fa2bb;
  font-size: 0.62rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.concierge-result-hero p {
  margin: 0;
  color: #cbd5e1;
  font-size: var(--fs-300);
  line-height: 1.35;
}

.concierge-alignment-label {
  margin: 11px 0 6px;
}

.concierge-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.concierge-fit-item {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px !important;
  align-items: center !important;
  min-width: 0;
  min-height: 44px;
  padding: 6px 7px !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.12) !important;
  border-radius: 9px !important;
  background: rgba(var(--depth-3-rgb), 0.45) !important;
  text-align: left !important;
}

.concierge-alternative {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(157, 0, 255, 0.18);
  border-radius: 9px;
  background: rgba(157, 0, 255, 0.065);
  color: #94a3b8;
  font-size: var(--fs-200);
}

.concierge-alternative strong {
  color: #e8ddff;
  text-align: right;
}

.concierge-primary-action {
  display: grid !important;
  grid-template-columns: 21px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 8px 10px !important;
  border-color: rgba(253, 230, 138, 0.8) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #facc15, #fb923c) !important;
  color: #0b1220 !important;
  font-weight: 700;
  text-align: left;
  box-shadow: 0 7px 20px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.concierge-primary-action .concierge-icon {
  width: 21px;
  height: 21px;
}

.concierge-primary-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.concierge-primary-copy strong {
  color: #0b1220;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.1;
}

.concierge-primary-copy small {
  overflow: hidden;
  color: rgba(11, 18, 32, 0.72);
  font-size: 0.61rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concierge-primary-arrow {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.concierge-primary-action:hover {
  border-color: #fef3c7 !important;
  background: linear-gradient(135deg, #fde047, #fb923c) !important;
  color: #0b1220 !important;
  box-shadow: 0 9px 24px rgba(245, 158, 11, 0.28);
}

.concierge-primary-action:hover .concierge-primary-arrow {
  transform: translateX(2px);
}

.concierge-primary-action:focus-visible {
  outline: 2px solid #fef3c7 !important;
  outline-offset: 2px !important;
}

.concierge-result-note {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  font-size: 0.65rem;
  line-height: 1.35;
}

.message.has-concierge-result > .msg-btn-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message.has-concierge-result > .msg-btn-group .msg-action-btn {
  min-height: 35px;
}

.message.has-concierge-result > .msg-btn-group .msg-action-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}


/* G) Burbuja proactiva #chatbotProactiveBubble */
.chatbot-proactive-bubble {
  background: rgba(var(--depth-2-rgb), 0.8) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.28) !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.5), 
    0 0 15px rgba(var(--accent-cyan-chat-rgb), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 14px !important;
  border-bottom-right-radius: 2px !important;
  padding: 10px 32px 10px 14px !important;
  width: 210px !important;
}

.chatbot-proactive-bubble:hover {
  background: rgba(var(--depth-4-rgb), 0.88) !important;
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.55) !important;
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.55), 
    0 0 20px rgba(var(--accent-cyan-chat-rgb), 0.18) !important;
}

.proactive-text {
  font-size: var(--fs-300) !important;
  line-height: 1.35 !important;
}

.proactive-close {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.proactive-close:hover {
  background: rgba(255, 0, 127, 0.15) !important;
}


/* H) Autocomplete */
.chatbot-autocomplete-suggestions {
  background: rgba(var(--depth-2-rgb), 0.92) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.22) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  max-height: 110px !important;
}

.autocomplete-item {
  padding: 6px 12px !important;
  font-size: var(--fs-400) !important;
  transition: background 0.2s ease !important;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: rgba(var(--accent-cyan-chat-rgb), 0.12) !important;
  color: #fff !important;
}


/* Formulario de Input en la parte inferior */
.chatbot-input-form {
  background: rgba(var(--depth-1-rgb), 0.7) !important;
  border-top: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.08) !important;
  padding: 10px 14px !important;
}

.chatbot-input {
  background: var(--surface-2) !important;
  border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.16) !important;
  color: #fff !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  font-size: var(--fs-500) !important;
}

.chatbot-input:focus {
  border-color: rgba(var(--accent-cyan-chat-rgb), 0.5) !important;
  background: var(--surface-3) !important;
  box-shadow: 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.15) !important;
  outline: none !important;
}

.chatbot-send-btn {
  background: linear-gradient(135deg, var(--accent-cyan-chat), #9d00ff) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(var(--accent-cyan-chat-rgb), 0.3) !important;
  transition: all 0.2s ease !important;
}

.chatbot-send-btn:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 4px 12px rgba(var(--accent-cyan-chat-rgb), 0.5) !important;
}

.chatbot-send-btn:active {
  transform: scale(0.96) !important;
}


/* I) Responsive Móvil y Ajustes de Z-Index */

@media (max-width: 767px) {
  /* Trigger móvil respetando Safe Areas */
  .chatbot-trigger {
    width: 54px !important;
    height: 54px !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Botones del header táctiles y accesibles */
  .chatbot-close-btn,
  .chatbot-reset-btn,
  .chatbot-audio-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Ventana del chatbot en móvil */
  .chatbot-window {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  .chatbot-window.half-sheet {
    height: min(65dvh, 480px) !important;
    min-height: 400px !important;
  }

  .chatbot-messages {
    padding: 10px 12px !important;
    gap: 12px !important;
  }

  .message {
    font-size: var(--fs-500) !important;
    max-width: 88% !important;
  }

  .chatbot-window.half-sheet .message {
    padding: 8px 10px !important;
    font-size: var(--fs-400) !important;
  }

  .chatbot-options {
    padding: 6px 12px 6px !important;
  }

  .chat-option-btn {
    font-size: var(--fs-300) !important;
    padding: 5px 10px !important;
  }

  .chatbot-input-form {
    padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .chatbot-input {
    height: 38px !important;
  }

  .chatbot-send-btn {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .chatbot-autocomplete-suggestions {
    bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: 12px !important;
  }

  .chatbot-proactive-bubble {
    right: 64px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(200px, calc(100vw - 92px)) !important;
    padding: 8px 24px 8px 12px !important;
    border-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }

  .proactive-text {
    font-size: var(--fs-200) !important;
  }
  
  .chatbot-rich-card {
    padding: 8px !important;
  }
  
  .chatbot-rich-card-thumb {
    height: 70px !important;
  }

  .message.has-concierge-visual {
    width: 100% !important;
    max-width: 100% !important;
  }

  .concierge-progress {
    padding: 8px 4px 7px;
    gap: 2px;
  }

  .concierge-progress-item {
    gap: 4px;
    font-size: 0.57rem;
  }

  .concierge-progress-icon {
    width: 23px;
    height: 23px;
  }

  .concierge-progress-item:not(:last-child)::after {
    top: 11px;
    left: calc(50% + 12px);
    width: calc(100% - 20px);
  }

  .concierge-summary-chip {
    min-width: 118px;
    min-height: 40px;
  }

  .concierge-date-picker {
    gap: 7px;
    padding: 8px;
  }

  .concierge-open-calendar {
    width: 38px;
    min-width: 38px;
    padding: 0 !important;
  }

  .concierge-open-calendar > span:last-child {
    display: none;
  }

  .concierge-result-card {
    padding: 10px;
  }

  .concierge-result-hero {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
  }

  .concierge-result-icon {
    width: 38px;
    height: 38px;
    padding: 8px;
  }

  .concierge-result-hero h4 {
    font-size: 0.92rem;
  }

  .concierge-result-hero p {
    font-size: 0.69rem;
  }

  .concierge-fit-item {
    min-height: 40px;
    padding: 5px 6px !important;
  }

  .concierge-result-note {
    font-size: 0.61rem;
  }
}

/* Phase 19 chatbot commercial cards compact override */
@media (max-width: 640px) {
  .chatbot-options {
    gap: 5px !important;
    padding-inline: 10px !important;
  }

  .chat-option-btn {
    min-height: 32px !important;
    padding: 5px 9px !important;
    font-size: var(--fs-300) !important;
    white-space: nowrap !important;
  }

  .chatbot-rich-cards-container {
    gap: 7px !important;
    margin-top: 7px !important;
  }

  .chatbot-rich-card {
    padding: 8px 9px !important;
    gap: 5px !important;
  }

  .chatbot-rich-card-title {
    font-size: var(--fs-500) !important;
    line-height: 1.15 !important;
  }

  .chatbot-rich-card-text {
    font-size: var(--fs-300) !important;
    line-height: 1.25 !important;
  }

  .chatbot-rich-card-buttons {
    gap: 5px !important;
    margin-top: 2px !important;
  }

  .chatbot-rich-card-btn {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: var(--fs-200) !important;
    line-height: 1.15 !important;
  }
}

/* J) Animaciones Reducidas si el usuario tiene activada la opción de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .chatbot-pulse-ring,
  .chatbot-trigger.proactive-glow,
  .chatbot-avatar-status::after,
  .concierge-result-card,
  .chatbot-send-btn:hover {
    animation: none !important;
  }
  
  .chatbot-window,
  .chatbot-trigger,
  .message,
  .concierge-result-card,
  .concierge-summary-chip,
  .concierge-fit-item,
  .concierge-open-calendar,
  .concierge-date-confirm,
  .concierge-primary-action,
  .concierge-primary-arrow,
  .event-date-undecided-btn,
  .chat-option-btn,
  .chatbot-close-btn,
  .chatbot-reset-btn,
  .chatbot-audio-btn {
    transition: none !important;
  }
}

/* --- ACCESIBILIDAD FINAL (FASE 6 A11Y) --- */
.chatbot-window {
  visibility: hidden !important;
}
.chatbot-window.visible {
  visibility: visible !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
18. Cyber Preloader
========================================================= */
body.loading {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Preloader omitido al llegar desde otra pagina del propio sitio. La clase la
   pone el script en linea de index.html antes de pintar; aqui solo se retira el
   panel para que no llegue a verse ni un fotograma. Ver ese script y el bloque
   del preloader en script.js.

   OJO: body.loading, ahi arriba, es tambien la causa de que un enlace con ancla
   aterrizara en el hero (bloquea el scroll ~200 ms). Lo arregla
   scrollToInitialHash() en script.js: si se toca esto, comprobarlo. */
html.sense-preloader .cyber-preloader {
  display: none !important;
}

.cyber-preloader {
  position: fixed;
  inset: 0;
  background: #030712;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
  overflow: hidden;
}

.cyber-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-content {
  text-align: center;
  max-width: 420px;
  width: 90%;
  position: relative;
}

.preloader-logo {
  margin-bottom: 30px;
  animation: logoPulse 2s infinite ease-in-out;
}

.preloader-logo .logo-text {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.preloader-logo .logo-sub {
  font-size: var(--fs-300);
  font-weight: 900;
  color: var(--enhance-accent, var(--accent-cyan));
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 6px;
  text-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.4);
}

.preloader-bar {
  height: 3px;
  width: 100%;
  background: var(--surface-4);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
}

.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--enhance-accent, var(--accent-cyan)), var(--enhance-accent-2, #8b5cf6));
  box-shadow: 0 0 10px var(--enhance-accent, var(--accent-cyan));
  transition: width 0.08s ease-out;
}

.preloader-status {
  font-family: monospace;
  font-size: var(--fs-400);
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
}

.preloader-status span {
  color: var(--enhance-accent-warm, #f59e0b);
  font-weight: bold;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 15px rgba(var(--accent-cyan-rgb), 0));
  }
  50% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 15px rgba(var(--accent-cyan-rgb), 0.15));
  }
}

/* =========================================================
19. Spotlight Cursor Overlay (Desktop Only)
========================================================= */
@media (min-width: 769px) {
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    background: radial-gradient(
      600px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
      rgba(var(--accent-cyan-rgb), 0.045) 0%,
      rgba(139, 92, 246, 0.02) 40%,
      transparent 80%
    );
  }
}

/* =========================================================
20. Magnetic Buttons Physics Transitions
========================================================= */
.filter-btn,
.contact-form .btn,
.nav-links .contact-btn {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}

/* =========================================================
21. Real-time Radio Spectrum Transitions
========================================================= */
.radio-spectrum span {
  transition: height 0.08s ease-out !important;
  animation: none !important; /* disable native random CSS animations */
}

/* =========================================================
22. About Service Showcase Layer
========================================================= */
.about-service-showcase {
  margin-top: 70px;
  position: relative;
  z-index: 5;
  width: 100%;
}

.about-service-header {
  text-align: center;
  margin-bottom: 45px;
}

.about-service-main-title {
  font-size: 2rem;
  font-family: var(--font-heading);
  font-weight: 800;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff 40%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

.about-service-subtitle {
  color: var(--text-secondary);
  font-size: var(--fs-800);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

.about-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
}

.about-service-card {
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--enhance-radius-md, 16px);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s, box-shadow 0.3s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.about-service-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-cyan);
  box-shadow: 0 20px 40px rgba(var(--accent-cyan-rgb), 0.15);
}

.about-service-image-container {
  position: relative;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.12), rgba(139, 92, 246, 0.12));
  border-bottom: var(--border-glass);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fallback placeholder text if image fails to load */
.about-service-image-container::before {
  content: '';
  font-family: var(--font-heading);
  font-size: var(--fs-500);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(var(--accent-cyan-rgb), 0.4);
  position: absolute;
  pointer-events: none;
}

.about-service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.about-service-card:hover .about-service-image {
  transform: scale(1.06);
}

.about-service-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 29, 0) 40%, rgba(10, 15, 29, 0.8) 100%);
  pointer-events: none;
}

.about-service-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.about-service-content h4 {
  font-size: var(--fs-900);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.about-service-content p {
  color: var(--text-secondary);
  font-size: var(--fs-600);
  line-height: 1.5;
  margin-bottom: 24px;
  flex-grow: 1;
  text-align: left;
}

.about-service-cta {
  width: 100%;
  padding: 12px 20px;
  font-size: var(--fs-600);
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--surface-3);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

.about-service-card:hover .about-service-cta {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--bg-primary);
  box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.4);
}

.about-service-swipe-hint {
  display: none;
  text-align: center;
  font-size: var(--fs-500);
  color: var(--text-muted);
  margin-top: 15px;
  letter-spacing: 0.05em;
  font-weight: 600;
  animation: pulseSwipeHint 2s infinite ease-in-out;
}

@keyframes pulseSwipeHint {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.9; transform: translateX(4px); }
}

/* Responsive adjustments for mobile viewports */
@media (max-width: 992px) {
  .about-service-grid {
    gap: 20px;
  }
  .about-service-main-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .about-service-showcase {
    margin-top: 50px;
  }
  .about-service-main-title {
    font-size: var(--fs-1000);
  }
  .about-service-subtitle {
    font-size: var(--fs-600);
  }
  .about-service-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 10px 4px 20px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .about-service-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  .about-service-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
  .about-service-card:hover {
    transform: none; /* Avoid hovering translate transformations on mobile touch */
  }
  .about-service-image-container {
    height: 180px;
  }
  .about-service-swipe-hint {
    display: block;
  }
}

@media (max-width: 480px) {
  .about-service-card {
    flex: 0 0 90%;
  }
  .about-service-content {
    padding: 20px;
  }
  .about-service-content h4 {
    font-size: var(--fs-900);
  }
  .about-service-content p {
    font-size: var(--fs-500);
    margin-bottom: 18px;
  }
}

/* ==========================================================================
   23. PRIVACY MODAL & CHECKBOX REDESIGN
   ========================================================================== */

/* Privacy Link Hover Effect */
#privacyPolicyLink:hover {
  color: var(--accent-purple) !important;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

/* Modal CSS */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.privacy-modal.active {
  opacity: 1;
  pointer-events: all;
}

.privacy-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--depth-2-rgb), 0.85);
  backdrop-filter: blur(8px);
}

.privacy-modal-content {
  position: relative;
  width: 90%;
  max-width: 640px;
  max-height: 80vh;
  background: rgba(var(--depth-4-rgb), 0.95);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(var(--accent-cyan-rgb), 0.25);
  backdrop-filter: blur(16px);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.privacy-modal.active .privacy-modal-content {
  transform: scale(1) translateY(0);
}

.privacy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 10002;
}

.privacy-modal-close:hover {
  color: var(--accent-cyan);
}

.privacy-modal-body {
  padding: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#privacyModalTitle {
  font-size: var(--fs-1000);
  font-weight: 800;
  color: var(--text-light);
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.privacy-modal-text {
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 12px;
  font-size: var(--fs-600);
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
}

/* Custom scrollbar for privacy text */
.privacy-modal-text::-webkit-scrollbar {
  width: 6px;
}

.privacy-modal-text::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 4px;
}

.privacy-modal-text::-webkit-scrollbar-thumb {
  background: var(--accent-tint-4);
  border-radius: 4px;
}

.privacy-modal-text::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

.privacy-modal-text h4 {
  color: var(--text-light);
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: var(--fs-700);
  font-weight: 700;
}

.privacy-modal-text p {
  margin-top: 0;
  margin-bottom: 12px;
}

.privacy-modal-text strong {
  color: var(--text-light);
}

/* =========================================================
FASE 2 - VISUAL PREMIUM + RESPONSIVE SAFE PATCH
========================================================= */

/* 1. Control de Espaciados Consistentes Adaptativos */
.about,
.reconeixements,
.ponencies,
.portfolio,
.radio-section,
.verifier-section,
.toolkit-section,
.timeline-section,
.services,
.contact {
  padding-top: clamp(48px, 6vw, 96px) !important;
  padding-bottom: clamp(48px, 6vw, 96px) !important;
}

/* 2. Tarjetas y Contenedores Premium Glassmorphism */
.service-card,
.ponencia-card,
.portfolio-card,
.timeline-card,
.about-stats,
.findings-panel {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.65) 0%, rgba(10, 15, 29, 0.85) 100%) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.service-card:hover,
.ponencia-card:hover,
.portfolio-card:hover,
.timeline-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.35) !important;
  box-shadow: 0 20px 40px rgba(var(--accent-cyan-hero-rgb), 0.15) !important;
}

/* 3. Ajustes de Usabilidad Táctil en Botones */
.btn,
.service-cta,
.ponencia-card-cta,
.chat-option-btn,
.filter-btn {
  min-height: 44px; /* Altura mínima táctil recomendada por WCAG */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 4. Estabilización del Menu Móvil en Viewports con Baja Altura */
@media (max-width: 1150px) {
  .nav-links {
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
}

/* 5. Optimización del Formulario en Dispositivos Móviles */
@media (max-width: 768px) {
  .contact-form {
    padding: 24px 20px !important;
    border-radius: var(--enhance-radius-md) !important;
  }
  
  .contact-intent-options {
    grid-template-columns: 1fr !important; /* Botones de intención apilados para mayor comodidad */
    gap: 10px !important;
  }
  
  .contact-form-row {
    grid-template-columns: 1fr !important; /* Romper filas de 2 columnas a 1 columna en móvil */
    gap: 16px !important;
  }
  
  .form-group {
    margin-bottom: 14px !important;
  }
}

/* 6. Adaptabilidad del Chatbot en Móviles */
@media (max-width: 768px) {
  .cyber-chatbot-widget {
    bottom: 14px !important;
    right: 14px !important;
  }
  
  .chatbot-window {
    width: calc(100vw - 28px) !important;
    max-width: 380px !important;
    height: 72vh !important;
    max-height: 520px !important;
    bottom: 74px !important;
    right: 14px !important;
  }
  
  .chatbot-proactive-bubble {
    max-width: 240px !important;
    font-size: var(--fs-500) !important;
    padding: 8px 12px !important;
  }
}

/* 7. Lightbox de Portafolio en Pantallas Pequeñas */
@media (max-width: 768px) {
  .lightbox-content {
    width: 94% !important;
    max-width: 94% !important;
  }
  
  .lightbox-close {
    top: 12px !important;
    right: 12px !important;
    padding: 8px 14px !important;
    font-size: var(--fs-400) !important;
  }
  
  .lightbox-details {
    padding: 16px 20px !important;
    max-height: 38vh !important;
    overflow-y: auto !important;
  }
  
  .lightbox-title {
    font-size: var(--fs-800) !important;
  }
}

/* =========================================================
FASE 4 - HERO + AUTHORITY PREMIUM SAFE PATCH
========================================================= */

/* 1. Hero Visual Enhancements (Premium & High Contrast) */
.hero {
  background:
    radial-gradient(circle at 10% 20%, rgba(var(--accent-cyan-hero-rgb), 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(143, 124, 255, 0.12) 0%, transparent 50%),
    linear-gradient(112deg, rgba(7, 12, 24, 0.99) 0%, rgba(10, 15, 29, 0.94) 47%, rgba(7, 12, 24, 0.99) 100%) !important;
}

/* Suavizar los destellos de fondo para no competir con el contenido */
.hero::before {
  opacity: 0.28 !important;
  background-position: 85% center !important;
}

.hero::after {
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 12, 24, 0.95) 85%, rgba(7, 12, 24, 1) 100%),
    linear-gradient(90deg, rgba(var(--accent-cyan-hero-rgb), 0.05), transparent 40%, rgba(143, 124, 255, 0.05)) !important;
}

/* Tipografía de Alto Impacto */
.hero-title {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

.hero-subtitle {
  color: var(--text-body) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Botón de Llamada a la Acción (CTA) Directo */
.hero-cta .btn-primary {
  background: linear-gradient(135deg, var(--enhance-accent) 0%, var(--enhance-accent-2) 100%) !important;
  border: none !important;
  color: #070c18 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 18px rgba(var(--accent-cyan-hero-rgb), 0.35) !important;
}

.hero-cta .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(var(--accent-cyan-hero-rgb), 0.55) !important;
}

.hero-cta .btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: var(--surface-3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
}

.hero-cta .btn-secondary:hover {
  background: var(--surface-4) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Transición Premium Suave entre Hero y Logos de Autoridad */
.authority-logos-section {
  position: relative;
  z-index: 2;
  margin-top: -2px !important;
  background: linear-gradient(180deg, rgba(7, 12, 24, 1) 0%, rgba(10, 15, 29, 0.95) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  /* El relleno lateral era max(24px, calc((100vw - 1120px) / 2 + 24px)),
     una formula de banda a ancho completo. Pero esta seccion vive DENTRO
     del contenedor de 1200px de #reconeixements, asi que el recorte se
     aplicaba dos veces: a 1366px de pantalla dejaba el contenido en 858px
     y las cuatro tarjetas salian a 194px de ancho por 381 de alto, columnas
     de texto estrujadas. Con relleno fijo el contenido usa ~1070px y las
     tarjetas quedan a ~250px, proporcion de tarjeta y no de tira. */
  padding: 56px 40px !important;
}

/* Hover interactivo sobre logos */
.authority-logo-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  background: var(--surface-1) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.authority-logo-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.25) !important;
  background: var(--surface-3) !important;
  box-shadow: 0 8px 24px rgba(var(--accent-cyan-hero-rgb), 0.08) !important;
}

/* 2. Authority Conversion Section Enhancements */
.authority-conversion {
  background: 
    radial-gradient(circle at 80% 20%, rgba(143, 124, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(var(--accent-cyan-hero-rgb), 0.08) 0%, transparent 40%),
    linear-gradient(180deg, rgba(10, 15, 29, 0.95) 0%, rgba(7, 12, 24, 1) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.authority-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.authority-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(143, 124, 255, 0.35) !important;
  box-shadow: 0 12px 30px rgba(143, 124, 255, 0.12) !important;
}

.authority-card h3 {
  color: #fff !important;
}

/* 3. Ajustes Responsive del Hero y Logos (Mobile Polish) */
@media (max-width: 768px) {
  /* Controlar altura en móviles para acelerar el scroll al CTA */
  .hero {
    min-height: auto !important;
    padding-top: 24px !important;
    padding-bottom: 32px !important;
    gap: 16px !important;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-title {
    font-size: 2.15rem !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }

  .hero-subtitle {
    font-size: var(--fs-600) !important;
    line-height: 1.42 !important;
    margin-bottom: 14px !important;
  }

  /* Atenuar o simplificar las tarjetas flotantes en pantallas táctiles pequeñas para no competir */
  .hero-floating-modules {
    grid-template-columns: 1fr !important; /* Apilar o simplificar */
    margin-top: 10px;
    gap: 8px !important;
  }
  
  .hero-float-card {
    min-height: 38px !important;
    padding: 6px 10px !important;
  }
  
  /* Ajustes en Logos de Autoridad */
  .authority-logos-section {
    padding: 32px 18px !important;
  }
  
  .authority-cards-grid {
    grid-template-columns: 1fr !important; /* 1 columna en móvil para evitar aplastar logos */
    gap: 12px !important;
  }

  .authority-logo-card {
    padding: 14px !important;
  }
  
  /* Ajustes en Pilares de Autoridad */
  .authority-conversion {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  
  .authority-card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* 4. Adaptaciones Específicas para Pantallas Muy Estrechas (360px) */
@media (max-width: 375px) {
  .hero-title {
    font-size: 1.95rem !important;
  }

  .hero-cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100%;
  }

  .hero-cta .btn {
    width: 100% !important;
  }

  .proof-pill strong {
    font-size: var(--fs-900) !important;
  }
  
  .proof-kicker {
    font-size: var(--fs-100) !important;
  }
}

/* =========================================================
FASE 4C - HERO TITLE COMPOSITION FIX
========================================================= */

/* 1. Definiciones de Estructura y Estabilidad */
#heroTitle,
#heroTitle * {
  transition: color 0.3s ease, text-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
}

/* 2. Reglas Generales del Título */
#heroTitle {
  letter-spacing: -0.04em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  margin-bottom: clamp(22px, 2.2vw, 34px) !important;
}

.hero-title-line {
  display: block !important;
}

/* Columna de contenidos del Hero */
.hero-content {
  min-width: 0 !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.hero-media {
  min-width: 0 !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 3. Grid y Visualización en Escritorio (>= 1025px) */
@media (min-width: 1025px) {
  .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr) !important;
    gap: clamp(32px, 4.5vw, 64px) !important;
    align-items: center !important;
    overflow: clip !important;
  }
  .hero-title-line {
    white-space: nowrap !important;
  }
  #heroTitle {
    font-size: clamp(3.2rem, 4.2vw, 4.8rem) !important;
    line-height: 1.15 !important;
    min-height: calc(3 * 1.15 * 1em) !important;
  }
}

/* 4. Breakpoint Intermedio / Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;
    gap: 24px !important;
  }
  .hero-title-line {
    white-space: normal !important;
  }
  #heroTitle {
    font-size: clamp(2.4rem, 4vw, 3.2rem) !important;
    line-height: 1.15 !important;
    min-height: auto !important;
  }
}

/* 5. Ajustes para Móvil y Tablets Pequeñas (max-width: 768px) */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .hero-title-line {
    white-space: normal !important;
  }
  #heroTitle {
    font-size: clamp(1.5rem, 5vw, 1.85rem) !important;
    line-height: 1.15 !important;
    min-height: auto !important;
  }
}

@media (max-width: 390px) {
  #heroTitle {
    font-size: clamp(1.3rem, 5.5vw, 1.45rem) !important;
  }
}

/* =========================================================
FASE 4D - HERO FINE TUNING
========================================================= */

/* 1. Modificaciones de Diseño y Proporciones en Escritorio (>= 1025px) */
@media (min-width: 1025px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.95fr) !important;
    gap: clamp(44px, 5vw, 76px) !important;
    align-items: center !important;
  }
  
  .hero-content {
    max-width: 780px !important;
    min-width: 0 !important;
  }
  
  .hero-media {
    justify-content: center !important;
    min-width: 0 !important;
  }
  
  .hero-media-wrapper {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    /* La ficha "Senyal en directe" cuelga del borde inferior del retrato y la
       consola del de este envoltorio. El retrato es fluido (clamp de abajo)
       pero esta altura era fija en 608px: al ensanchar la ventana el retrato
       crecia hasta 60px, su ficha bajaba y la consola se quedaba quieta, asi
       que desde ~1306px se solapaban. En preview no se veia porque el panel
       es mas estrecho. Siguiendo la misma curva, el aire se mantiene igual a
       cualquier ancho: 108px es la holgura que ya habia con el retrato a 500. */
    min-height: calc(clamp(500px, 42vw, 560px) + 108px) !important;
  }

  .hero-img-container {
    width: min(440px, 86%) !important;
    height: clamp(500px, 42vw, 560px) !important;
  }
  
  /* Las tres lineas llevan nowrap, asi que el titulo nunca parte: si no cabe,
     se desborda hacia el retrato. El espacio libre hasta la foto va de 540px a
     1026px y se estanca en ~675px a partir de 1280px, porque las columnas del
     hero estan topadas. Esta curva se queda dentro de ese limite en todo el
     rango, con el tope en 3.5rem. Antes el maximo era 4.5rem y a 1920px la
     segunda linea entraba 144px dentro de la foto. */
  #heroTitle {
    font-size: clamp(2.8rem, 4.4vw, 3.5rem) !important;
    line-height: 1.08 !important;
    min-height: calc(3 * 1.08 * 1em) !important;
  }

  /* El ingles ya no se empequeñece: con este espaciado mas ajustado sus lineas
     ocupan lo mismo que las catalanas y castellanas, asi que comparte tamaño.
     Antes bajaba a 3.1vw y se veia notablemente menor que los otros idiomas. */
  html[lang="en"] #heroTitle {
    letter-spacing: -0.05em !important;
  }
}

/* 2. Anulación de Restricciones Antiguas y Ajustes en Móviles y Tablets (< 1025px) */
@media (max-width: 1024px) {
  .hero-title,
  #heroTitle {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }
  
  .hero-title,
  #heroTitle {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .hero-title-line {
    max-width: 100% !important;
    white-space: normal !important;
  }
  
  #heroTitle {
    font-size: clamp(1.5rem, 5vw, 1.85rem) !important;
    line-height: 1.15 !important;
    min-height: auto !important;
  }
}

@media (max-width: 390px) {
  .hero-title,
  #heroTitle {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  #heroTitle {
    font-size: clamp(1.35rem, 5.5vw, 1.6rem) !important;
  }
}

/* =========================================================
   FASE 5 - SERVICES & PONENCIES VISUAL UPGRADES
   ========================================================= */

/* 1. Glassmorphism & Card Esthetics */
.service-contract-card,
.ponencia-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(7, 12, 24, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--enhance-radius-lg) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
  overflow: hidden !important;
}

/* 2. Premium Hovers and Active States */
.service-contract-card:hover,
.ponencia-card:hover,
.service-contract-card:focus-within,
.ponencia-card:focus-within {
  transform: translateY(-3px) !important;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.38) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32), 0 0 25px rgba(var(--accent-cyan-hero-rgb), 0.15) !important;
}

.service-contract-card:hover::before,
.ponencia-card:hover::before {
  opacity: 1 !important;
}

/* 3. Text Contrast & Card Headers */
.ponencia-card-title,
.service-contract-card h3 {
  color: #fff !important;
  font-weight: 750 !important;
  margin-top: 4px !important;
  margin-bottom: 10px !important;
}

.ponencia-card > p,
.service-contract-card > p {
  color: var(--text-body) !important;
}

/* 4. Results & Ideal For Panels */
.ponencia-card-result,
.service-proof-grid div {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--enhance-radius-sm) !important;
  padding: 12px 14px !important;
}

/* 5. CTAs, Buttons & Touch Areas (A11y >= 44px) */
.ponencia-card-cta,
.service-link.service-cta,
.services-topics-link,
.service-unclear-cta {
  min-height: 44px !important;
  padding: 11px 18px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
}

/* Micro-animations inside CTAs */
.ponencia-card-cta svg,
.ponencia-card-cta i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ponencia-card-cta:hover svg,
.ponencia-card-cta:hover i {
  transform: translateX(4px) !important;
}

.service-link.service-cta::after {
  display: inline-block !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-link.service-cta:hover::after {
  transform: translateX(4px) !important;
}

/* 6. Grid Layouts & Tablet Adjustments (768px) */
@media (max-width: 920px) {
  .services-grid,
  .ponencies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  .services-grid,
  .ponencies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  
  .service-contract-card,
  .ponencia-card {
    padding: 18px !important;
  }
}

/* 7. Mobile Adjustments (<=640px) */
@media (max-width: 640px) {
  .services-grid,
  .ponencies-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  
  .service-link.service-cta,
  .ponencia-card-cta {
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .ponencia-card-title,
  .service-contract-card h3 {
    font-size: var(--fs-800) !important;
  }
  
  .ponencia-card > p,
  .service-contract-card > p {
    font-size: var(--fs-500) !important;
    line-height: 1.45 !important;
  }
}

/* =========================================================
   FASE 6 - ABOUT, TIMELINE & RECONEIXEMENTS PREMIUM UPGRADES
   ========================================================= */

/* 1. About Biography & Key Ideas Grid */
.about-intro-p {
  font-size: var(--fs-800) !important;
  font-weight: 550 !important;
  line-height: 1.55 !important;
  color: #fff !important;
  margin-bottom: 22px !important;
  border-left: 3px solid var(--accent-cyan) !important;
  padding-left: 14px !important;
}

.about-key-ideas {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.idea-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: var(--surface-1) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: var(--enhance-radius-sm) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease !important;
}

.idea-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.35) !important;
  background: var(--surface-3) !important;
}

.idea-item i {
  color: var(--accent-cyan) !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

.idea-item span {
  font-size: var(--fs-500) !important;
  font-weight: 750 !important;
  color: var(--text-white) !important;
  line-height: 1.3 !important;
}

/* 2. Gold Award Highlight (.award-gold) */
.achievement-card.award-gold {
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(7, 12, 24, 0.45) !important;
}

.achievement-card.award-gold:hover {
  border-color: rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32), 0 0 25px rgba(212, 175, 55, 0.12) !important;
}

.achievement-card.award-gold .achievement-tag {
  background: rgba(212, 175, 55, 0.12) !important;
  color: #ffd700 !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  font-weight: 800 !important;
}

/* 3. Reconeixements CTA Panel */
/* El panel apilaba pregunta y boton con 26px de relleno y 40 de margen: 147px de
   caja para diez palabras, y quedaba flotando al final de la seccion. En una
   sola fila baja a menos de la mitad, y encima coincide con el patron que ya
   usan los cierres del resto de secciones: una linea de texto y una accion.
   flex-wrap deja que se apile solo cuando de verdad no cabe. */
.reconeixements-cta-panel {
  margin-top: 26px !important;
  padding: 14px 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  background: var(--surface-1) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--enhance-radius-lg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.reconeixements-cta-panel p {
  font-size: var(--fs-800) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
}

.reconeixements-cta {
  min-height: 44px !important;
  padding: 11px 26px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease !important;
}

.reconeixements-cta:hover {
  transform: translateY(-2px) !important;
}

/* 4. Timeline Nav buttons (Touch Areas >= 44px) */
.timeline-nav-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 5. Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
  .about-key-ideas {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }
  
  .about-intro-p {
    font-size: var(--fs-700) !important;
    line-height: 1.5 !important;
  }
  
  .reconeixements-cta-panel {
    padding: 20px !important;
    margin-top: 30px !important;
  }
  
  .reconeixements-cta {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .timeline-card {
    min-width: 270px !important;
    padding: 16px !important;
  }
  
  .timeline-card-content h3 {
    font-size: var(--fs-600) !important;
  }
  
  .timeline-card-content p {
    font-size: var(--fs-500) !important;
    line-height: 1.4 !important;
  }
}

/* =========================================================
   FASE 7 - CONTACT, FAQ & CONVERSION CLOSING STYLES
   ========================================================= */

/* 1. FAQ Section styles */
.faq-container {
  max-width: 800px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.faq-item {
  background: var(--surface-1) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: var(--enhance-radius-md) !important;
  overflow: hidden !important;
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}

.faq-item:hover {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.22) !important;
  background: var(--surface-1) !important;
}

.faq-item[open] {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.38) !important;
  background: rgba(var(--depth-2-rgb), 0.45) !important;
}

.faq-question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 24px !important;
  font-size: var(--fs-700) !important;
  font-weight: 700 !important;
  color: #fff !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
  list-style: none !important;
}

.faq-question::-webkit-details-marker {
  display: none !important;
}

.faq-icon {
  color: var(--accent-cyan) !important;
  transition: transform 0.3s ease !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

details[open] .faq-icon {
  transform: rotate(180deg) !important;
}

.faq-answer {
  padding: 0 24px 20px 24px !important;
  font-size: var(--fs-600) !important;
  line-height: 1.55 !important;
  color: var(--text-body) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding-top: 12px !important;
}

/* 2. Contact Availability Block */
.contact-availability {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  padding: 14px 16px !important;
  background: var(--surface-1) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: var(--enhance-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.contact-availability i {
  color: var(--accent-cyan) !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.contact-availability span {
  font-size: var(--fs-500) !important;
  font-weight: 550 !important;
  color: var(--text-body) !important;
  line-height: 1.4 !important;
}

/* 3. Form Input States & Privacy Checkbox size */
.contact-form form input:focus,
.contact-form form select:focus,
.contact-form form textarea:focus {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.45) !important;
  box-shadow: 0 0 10px rgba(var(--accent-cyan-hero-rgb), 0.12) !important;
  outline: none !important;
}

#privacyAccepted {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--accent-cyan) !important;
  cursor: pointer !important;
}

/* 4. Responsive Overrides */
@media (max-width: 768px) {
  .faq-container {
    padding: 0 16px !important;
  }
  
  .faq-question {
    padding: 16px 20px !important;
    font-size: var(--fs-600) !important;
  }
  
  .faq-answer {
    padding: 0 20px 16px 20px !important;
    font-size: var(--fs-500) !important;
  }
  
  .contact-availability {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
}

@media (max-width: 480px) {
  .faq-question {
    padding: 14px 16px !important;
    font-size: var(--fs-600) !important;
  }
  
  .faq-answer {
    padding: 0 16px 14px 16px !important;
    font-size: var(--fs-500) !important;
  }
  
  .contact-availability {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  
  .contact-availability span {
    font-size: var(--fs-500) !important;
  }
}



/* ==========================================================
   PACK COMERCIAL: chips operativos de formato + CTA fijo móvil
   ========================================================== */
.service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}
.service-meta span {
  font-size: var(--fs-300);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
}

/* Aquí vivía `#proposalFormPanel, #portfolioContactForm { scroll-margin-top:
   clamp(88px, 9vw, 116px) }`. Mismo defecto que el de `section[id]`: se sumaba
   al `scroll-padding-top` y dejaba el formulario 101 px por debajo de la
   cabecera. El freno está en `html` de style.css, y ahí vale para todo. */

#proposalFormHeading:focus {
  outline: none;
}

#proposalFormHeading:focus-visible {
  outline: 2px solid var(--enhance-accent, var(--accent-cyan-hero));
  outline-offset: 6px;
}

.proactive-text {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    position: fixed;
    left: 16px;
    right: 84px; /* deja sitio al botón del chatbot */
    bottom: 14px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--accent-gradient);
    color: #04121f;
    font-weight: 700;
    font-size: var(--fs-600);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(var(--accent-cyan-rgb), 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition:
      opacity 260ms ease,
      transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear 260ms;
  }

  .mobile-cta-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body.mobile-cta-visible .chatbot-proactive-bubble,
  body.nav-open .mobile-cta-bar,
  body.lightbox-open .mobile-cta-bar,
  body.chatbot-open .mobile-cta-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 24px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar {
    transition: none !important;
  }
}

/* =========================================================
   FINAL VISUAL REFINEMENT — ICONS, BRAND MARKS & DATA TOOLS
   ========================================================= */

/* 1. Functional icon system: 20 px controls, 24 px feature icons. */
:where(i[data-lucide], svg.lucide) {
  display: inline-block;
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 20px;
  stroke-width: 1.85 !important;
  vertical-align: -0.15em;
}

:where(svg.lucide) :where(path, line, polyline, polygon, circle, rect) {
  vector-effect: non-scaling-stroke;
}

:where(.authority-icon, .service-icon, .contact-icon)
  > :where(i[data-lucide], svg.lucide) {
  inline-size: 24px !important;
  block-size: 24px !important;
  flex-basis: 24px;
}

:where(.play-badge, .zoom-badge, .social-icon, .faq-question)
  :where(i[data-lucide], svg.lucide) {
  inline-size: 18px !important;
  block-size: 18px !important;
  flex-basis: 18px;
}

/* 2. Contract formats: restrained duotone identities within one system. */
.services-grid > .service-contract-card:nth-child(1) {
  --service-icon-primary: var(--accent-cyan-hero);
  --service-icon-secondary: #8f7cff;
  --service-icon-soft-a: rgba(var(--accent-cyan-hero-rgb), 0.18);
  --service-icon-soft-b: rgba(143, 124, 255, 0.14);
}

.services-grid > .service-contract-card:nth-child(2) {
  --service-icon-primary: #a994ff;
  --service-icon-secondary: #d946ef;
  --service-icon-soft-a: rgba(143, 124, 255, 0.2);
  --service-icon-soft-b: rgba(217, 70, 239, 0.12);
}

.services-grid > .service-contract-card:nth-child(3) {
  --service-icon-primary: var(--accent-cyan-hero);
  --service-icon-secondary: #22c55e;
  --service-icon-soft-a: rgba(var(--accent-cyan-hero-rgb), 0.17);
  --service-icon-soft-b: rgba(34, 197, 94, 0.12);
}

.services-grid > .service-contract-card:nth-child(4) {
  --service-icon-primary: #f5b84b;
  --service-icon-secondary: #8f7cff;
  --service-icon-soft-a: rgba(245, 184, 75, 0.18);
  --service-icon-soft-b: rgba(143, 124, 255, 0.13);
}

.services-grid > .service-contract-card .service-icon {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--service-icon-primary, var(--accent-cyan-hero)), transparent 68%) !important;
  background:
    radial-gradient(circle at 24% 18%, var(--service-icon-soft-a, rgba(var(--accent-cyan-hero-rgb), 0.18)), transparent 58%),
    linear-gradient(145deg, var(--service-icon-soft-b, rgba(143, 124, 255, 0.14)), rgba(7, 12, 24, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 24px color-mix(in srgb, var(--service-icon-primary, var(--accent-cyan-hero)), transparent 88%) !important;
  color: var(--service-icon-primary, var(--enhance-accent)) !important;
  transform: none !important;
}

.services-grid > .service-contract-card .service-icon::after {
  display: none !important;
}

.services-grid > .service-contract-card .service-icon :where(i[data-lucide], svg.lucide) {
  position: relative;
  z-index: 1;
  color: var(--service-icon-primary, var(--enhance-accent)) !important;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--service-icon-secondary, var(--enhance-accent-2)), transparent 72%));
}

.services-grid > .service-contract-card .service-format-icon {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--service-icon-secondary, var(--enhance-accent-2)), transparent 72%));
}

.services-grid > .service-contract-card .service-format-icon .icon-primary {
  stroke: var(--service-icon-primary, var(--accent-cyan-hero));
  stroke-width: 1.8;
}

.services-grid > .service-contract-card .service-format-icon .icon-secondary {
  stroke: var(--service-icon-secondary, var(--enhance-accent-2));
  stroke-width: 1.55;
  opacity: 0.92;
}

.services-grid > .service-contract-card::before {
  background: linear-gradient(
    90deg,
    var(--service-icon-primary, var(--accent-cyan-hero)),
    var(--service-icon-secondary, var(--enhance-accent-2))
  ) !important;
}

.services-grid > .service-contract-card .service-card-kicker {
  color: var(--service-icon-primary, var(--enhance-accent)) !important;
}

.services-grid > .service-contract-card:is(:hover, :focus-within, .is-selected) .service-icon {
  border-color: color-mix(in srgb, var(--service-icon-primary, var(--accent-cyan-hero)), transparent 48%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 12px 28px color-mix(in srgb, var(--service-icon-primary, var(--accent-cyan-hero)), transparent 82%) !important;
  transform: translateY(-2px) scale(1.035) !important;
}

/* 3. Authority logos: one neutral optical canvas for every brand. */
.authority-cards-grid {
  align-items: stretch;
}

.authority-logo-card > .card-logo-wrapper {
  width: min(100%, 184px) !important;
  height: 76px !important;
  min-height: 76px !important;
  margin: 0 auto 20px !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 26px rgba(0, 0, 0, 0.2) !important;
}

.authority-logo-card > .card-logo-wrapper img {
  width: auto !important;
  height: auto !important;
  max-width: 140px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.authority-logo-card:is(:hover, :focus-visible) > .card-logo-wrapper {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 30px rgba(var(--accent-cyan-hero-rgb), 0.12) !important;
}

/* 4. Editorial backpack: quiet by default, emphatic only on intent. */
.backpack-bg-shape {
  opacity: 0.44 !important;
  background: radial-gradient(circle, rgba(var(--accent-cyan-hero-rgb), 0.12), rgba(143, 124, 255, 0.035) 52%, transparent 72%) !important;
  filter: blur(32px) !important;
  animation: none !important;
}

.backpack-svg {
  opacity: 0.86;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.26)) drop-shadow(0 0 8px rgba(var(--accent-cyan-hero-rgb), 0.1)) !important;
  transition: opacity 220ms ease, filter 220ms ease;
}

.gear-backpack-canvas:is(:hover, :focus-within) .backpack-svg {
  opacity: 1;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 12px rgba(var(--accent-cyan-hero-rgb), 0.15)) !important;
}

.gear-hotspot {
  width: 28px !important;
  height: 28px !important;
  border-width: 1px !important;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.48) !important;
  background: rgba(var(--depth-2-rgb), 0.9) !important;
  color: var(--text-body) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3) !important;
  transform: translate(-50%, -50%) !important;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

.gear-hotspot .pulse-ring {
  inset: -5px !important;
  border-width: 1px !important;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.58) !important;
  opacity: 0 !important;
  transform: scale(0.9);
  animation: none !important;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gear-hotspot:is(:hover, :focus-visible, .active) {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.9) !important;
  background: linear-gradient(135deg, var(--enhance-accent), var(--enhance-accent-2)) !important;
  color: #07101c !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(var(--accent-cyan-hero-rgb), 0.1) !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
}

.gear-hotspot:is(:hover, :focus-visible, .active) .pulse-ring {
  opacity: 0.7 !important;
  transform: scale(1.18);
}

.gear-hotspot:focus-visible {
  outline: 2px solid var(--enhance-accent-warm) !important;
  outline-offset: 5px !important;
}

.gear-selector-card {
  box-shadow: none !important;
}

.gear-selector-card:is(:hover, :focus-visible) {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.32) !important;
  background: rgba(var(--accent-cyan-hero-rgb), 0.045) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16) !important;
  transform: translateY(-1px) !important;
}

.gear-selector-card.active {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.66) !important;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.1), rgba(143, 124, 255, 0.055)) !important;
  box-shadow: inset 3px 0 0 var(--enhance-accent), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

/* 5. Verifier hierarchy: evidence first, score as supporting metadata. */

















@media (max-width: 576px) {
  .authority-logo-card > .card-logo-wrapper {
    height: 68px !important;
    min-height: 68px !important;
  }

  .gear-hotspot {
    width: 26px !important;
    height: 26px !important;
  }

  
  
  
  
}

@media (prefers-reduced-motion: reduce) {
  .services-grid > .service-contract-card .service-icon,
  .authority-logo-card,
  .authority-logo-card > .card-logo-wrapper,
  .backpack-svg,
  .gear-hotspot,
  .gear-hotspot .pulse-ring,
  .gear-selector-card {
    animation: none !important;
    transition: none !important;
  }

  
}

/* Guided verifier: categorical editorial evidence, never pseudo-precision. */














@media (max-width: 576px) {
  
  
  
}

/* Compact discovery controls and proposal reassurance. */
.radio-show-all {
  display: none;
  width: fit-content;
  margin: 18px auto 0;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: 999px;
  color: #dffaff;
  background: rgba(var(--depth-3-rgb), 0.86);
  font: inherit;
  font-size: var(--fs-400);
  font-weight: 750;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.radio-show-all:hover,
.radio-show-all:focus-visible {
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.72);
  background: rgba(14, 31, 55, 0.96);
}

.radio-show-all:focus-visible {
  outline: 2px solid var(--accent-cyan-hero);
  outline-offset: 3px;
}

.proposal-next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
}

.proposal-next-steps > div {
  position: relative;
  min-width: 0;
  padding: 14px 14px 14px 46px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(13, 25, 46, 0.72), rgba(6, 12, 25, 0.52));
}

.proposal-next-steps > div > span {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--accent-cyan-hero);
  font-family: var(--font-heading);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.proposal-next-steps strong,
.proposal-next-steps p {
  display: block;
}

.proposal-next-steps strong {
  color: #f8fafc;
  font-size: var(--fs-400);
  line-height: 1.3;
}

.proposal-next-steps p {
  margin: 5px 0 0;
  color: #a1a1aa;
  font-size: var(--fs-300);
  line-height: 1.45;
}

/* Future verified testimonials: the renderer creates nothing while the catalog is empty. */
.testimonials-section {
  padding: clamp(48px, 7vw, 84px) 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.testimonial-card {
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(var(--depth-2-rgb), 0.78);
}

.testimonial-card blockquote {
  margin: 0 0 18px;
  color: #edfaff;
  line-height: 1.65;
}

.testimonial-card figcaption span {
  display: block;
  margin-top: 4px;
  color: #a1a1aa;
  font-size: var(--fs-400);
}

@media (max-width: 768px) {
  .radio-show-all:not([hidden]) {
    display: flex;
  }

  .proposal-next-steps {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-bottom: 18px;
  }

  .proposal-next-steps > div {
    min-height: 62px;
    padding-block: 11px;
  }

  .proposal-next-steps > div > span {
    top: 12px;
  }

  .proposal-next-steps p {
    margin-top: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radio-show-all {
    transition: none;
  }
}

/* Functional portfolio playback feedback. */
.lightbox-playback-status {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: clamp(88px, 13vh, 142px);
  max-width: min(88%, 560px);
  margin: 0;
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.34);
  border-radius: 10px;
  color: #e6fbff;
  background: rgba(var(--depth-2-rgb), 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
  font-size: var(--fs-400);
  line-height: 1.45;
  text-align: center;
}

.lightbox-playback-status[hidden] {
  display: none !important;
}

/* Closed guided verifier: interactive presets without an editable claim field. */


/* The result follows the document flow: the page owns the only vertical scroll. */
@media (min-width: 993px) {
  
}

@media (max-width: 768px) {
  
  
  
}

/* Commercial cases: detailed proof appears only when a portfolio item is opened. */
.portfolio-case-study {
  margin-top: 4px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.16);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(10, 24, 44, 0.82), rgba(7, 12, 24, 0.72));
}

.portfolio-case-study[hidden] {
  display: none !important;
}

.portfolio-case-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #f8fafc;
  font-family: var(--font-heading);
  font-size: var(--fs-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-case-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio-case-icon .icon-primary {
  stroke: var(--accent-cyan-hero);
  stroke-width: 1.7;
}

.portfolio-case-icon .icon-secondary {
  stroke: var(--enhance-accent-2);
  stroke-width: 1.55;
}

.portfolio-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portfolio-case-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: var(--surface-1);
}

.portfolio-case-grid > .portfolio-case-result {
  grid-column: 1 / -1;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.2);
  background: rgba(34, 211, 238, 0.055);
}

.portfolio-case-grid span,
.service-proof-grid span {
  display: block;
  color: var(--accent-cyan-hero);
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.portfolio-case-grid p {
  margin: 5px 0 0;
  color: var(--text-body);
  font-size: var(--fs-400);
  line-height: 1.5;
}

.service-proof-grid > .service-deliverables {
  grid-column: 1 / -1;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.14) !important;
}

/* Premium restraint: neutral depth at rest, colour reserved for interaction. */
.service-contract-card,
.portfolio-card,
.authority-logo-card,
.gear-container {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25) !important;
}

.services-grid > .service-contract-card .service-icon,
.authority-logo-card > .card-logo-wrapper {
  filter: none !important;
}

.services-grid > .service-contract-card:not(:hover):not(:focus-within):not(.is-selected) .service-format-icon,
.portfolio-case-icon {
  filter: none !important;
}

.portfolio-card .mojo-viewfinder {
  opacity: 0.34;
  transition: opacity 220ms ease;
}

.portfolio-card:is(:hover, :focus-within, .is-previewing) .mojo-viewfinder {
  opacity: 0.82;
}

/* One photographic grade across portfolio stills; full colour returns on intent. */
.portfolio-media > img {
  filter: saturate(0.82) contrast(1.06) brightness(0.88) !important;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), filter 260ms ease !important;
}

.portfolio-card:is(:hover, :focus-within, .is-previewing) .portfolio-media > img {
  filter: saturate(1) contrast(1.04) brightness(0.98) !important;
}

@media (max-width: 576px) {
  .portfolio-case-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-case-grid > .portfolio-case-result {
    grid-column: auto;
  }

  .lightbox-playback-status {
    bottom: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card .mojo-viewfinder,
  .portfolio-media > img {
    transition: none !important;
  }
}
/* ================================================================
   PREMIUM COMMERCIAL REFINEMENT · 2026-07
   Layered overrides: preserve particles, VU meters and blue/cyan identity.
   ================================================================ */

.hero-response-note {
  margin: 10px 0 0;
  color: #b8c2d6;
  font-size: var(--fs-500);
  letter-spacing: .01em;
}

.proposal-selection-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 12px;
  background: rgba(var(--depth-3-rgb), .74);
}

.proposal-selection-summary[hidden],
.proposal-inline-formats[hidden],
.contact-success-panel[hidden],
.contact-success-inline[hidden] {
  display: none !important;
}

/* Selector de formato en el lugar, desplegado por el boton "Canviar" del
   resumen. Se pega visualmente al resumen (margen negativo) para que se lea
   como una extension suya y no como un bloque suelto del formulario. Sus
   botones son .contact-intent-btn, los mismos del paso 2, asi que heredan
   color, foco y estado activo; aqui solo se compactan: en el paso 2 llevan
   titulo y descripcion, y en linea basta el titulo. */
.proposal-inline-formats {
  margin: -8px 0 16px;
  padding: 14px;
  border: 1px solid rgba(34, 211, 238, .18);
  border-radius: 12px;
  background: rgba(var(--depth-3-rgb), .5);
}

.proposal-inline-formats-label {
  display: block;
  margin-bottom: 10px;
  color: #aab6ca;
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.proposal-inline-formats-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.proposal-inline-format-btn {
  padding: 10px 12px;
  text-align: left;
}

.proposal-inline-format-btn strong {
  font-size: var(--fs-500);
}

/* "No ho tinc clar" retira el formato: ocupa la fila entera para separarla de
   las cuatro opciones que si lo asignan. */
.proposal-inline-format-clear {
  grid-column: 1 / -1;
}

.proposal-selection-summary span {
  color: #aab6ca;
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.proposal-selection-summary strong {
  color: #ecfeff;
  margin-right: auto;
}

.proposal-selection-summary button,
.service-details-toggle {
  appearance: none;
  border: 1px solid rgba(34, 211, 238, .38);
  border-radius: 999px;
  background: rgba(34, 211, 238, .08);
  color: #a5f3fc;
  padding: 7px 11px;
  font: inherit;
  font-size: var(--fs-400);
  cursor: pointer;
}

.contact-structured-row {
  align-items: end;
}

body.contact-success-open {
  overflow: hidden;
}

.contact-success-panel {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 40px);
  background:
    radial-gradient(circle at 50% 25%, rgba(34, 211, 238, .13), transparent 36%),
    rgba(2, 8, 18, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.contact-success-card {
  position: relative;
  width: min(100%, 720px);
  max-height: calc(100dvh - clamp(28px, 8vw, 80px));
  overflow-y: auto;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(34px, 6vw, 58px);
  text-align: center;
  border: 1px solid rgba(34, 211, 238, .34);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(11, 30, 48, .99), rgba(5, 15, 29, .99));
  box-shadow:
    0 36px 100px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(216, 170, 91, .08) inset,
    0 0 54px rgba(34, 211, 238, .1);
  isolation: isolate;
  animation: contactSuccessReveal .38s cubic-bezier(.2, .8, .2, 1) both;
}

.contact-success-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(216, 170, 91, .1), transparent 28%),
    radial-gradient(circle at 80% 0, rgba(34, 211, 238, .12), transparent 32%);
}

.contact-success-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .26);
  border-radius: 50%;
  background: rgba(5, 15, 29, .72);
  color: #cbd5e1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.contact-success-close:hover,
.contact-success-close:focus-visible {
  border-color: rgba(34, 211, 238, .72);
  color: #a5f3fc;
  outline: 2px solid rgba(34, 211, 238, .28);
  outline-offset: 3px;
  transform: rotate(4deg);
}

.contact-success-close span {
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1;
}

.contact-success-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 211, 238, .5);
  border-radius: 50%;
  background: rgba(34, 211, 238, .1);
  color: #67e8f9;
  box-shadow: 0 0 30px rgba(34, 211, 238, .16);
}

.contact-success-icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 2.4;
}

.contact-success-eyebrow {
  margin: 2px 0 -4px;
  color: #e6bd75;
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: .16em;
}

.contact-success-panel h3 {
  margin: 0;
  font-size: clamp(1.85rem, 5vw, 3rem);
  line-height: 1.08;
  color: #f8fafc;
}

.contact-success-lead {
  max-width: 560px;
  margin: 0;
  color: #c7d5df;
  font-size: clamp(1rem, 2.3vw, 1.14rem);
  line-height: 1.65;
}

.contact-success-next {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.contact-success-next-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 15px;
  background: rgba(7, 20, 34, .72);
}

.contact-success-next-item > span {
  min-width: 30px;
  color: #e6bd75;
  font-family: var(--font-heading);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: .08em;
}

.contact-success-next-item p {
  margin: 0;
  color: #aebfca;
  font-size: var(--fs-400);
  line-height: 1.55;
}

.contact-success-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.contact-success-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 128px;
  padding: 22px;
  border: 1px solid rgba(34, 211, 238, .32);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(8, 28, 43, .94), rgba(7, 18, 32, .96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .2);
}

.contact-success-inline-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(34, 211, 238, .12);
  color: #67e8f9;
}

.contact-success-inline-icon svg {
  width: 24px;
  height: 24px;
}

.contact-success-inline strong {
  display: block;
  margin-bottom: 4px;
  color: #f8fafc;
  font-size: var(--fs-600);
}

.contact-success-inline p {
  margin: 0;
  color: #aebfca;
}

@keyframes contactSuccessReveal {
  from { opacity: 0; transform: translateY(16px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-success-card {
    animation: none;
  }

  .contact-success-close {
    transition: none;
  }
}

/* El desplegable de detalles solo aparece en movil, donde recorta fichas
   largas; la regla que lo muestra esta en el bloque de max-width 768px. */
.service-details-toggle {
  display: none;
  width: max-content;
  margin: 2px 0 12px;
}

/* Enlace a la landing del formato. Va justo debajo del CTA del formulario, asi
   que se resuelve como enlace de texto y no como una tercera pildora: el boton
   sigue siendo lo unico con peso de boton en la ficha. Antes estaba oculto y
   sin estilar, y las doce landings solo se alcanzaban desde el menu. */
.service-page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin: 12px 0 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.26);
  color: #9fdcea;
  font-size: var(--fs-400);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}

.service-page-link::after {
  content: '\2192';
  font-weight: 800;
  transition: transform .2s ease;
}

.service-page-link:hover,
.service-page-link:focus-visible {
  gap: 9px;
  border-color: rgba(var(--accent-cyan-hero-rgb), 0.65);
  color: #cffafe;
  outline: none;
}

.service-page-link:hover::after,
.service-page-link:focus-visible::after {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .service-page-link,
  .service-page-link::after {
    transition: none;
  }
}








.premium-carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 14px auto 0;
  /* El mando era lo unico de la seccion que flotaba sobre el fondo pelado. Y el
     fondo no esta quieto: por detras corren el lienzo de la red neuronal y la
     rejilla, los dos en z-index -1. Con esa textura viva entre letra y letra, el
     contador se leia sucio y apagado al lado de cualquier otro texto de la
     pagina, porque todos los demas van sobre una tarjeta o un panel.

     La titular lo describio como "una capa encima que difumina el texto", y la
     descripcion era exacta salvo por la direccion: no sobraba nada encima,
     faltaba superficie debajo. Se le da la misma que al panel de justo abajo
     -mismo fondo translucido, mismo desenfoque de respaldo, mismo borde-, en
     pildora porque el mando es ancho y bajo. Ahora el texto se apoya en algo
     estable y se lee como el resto. */
  width: fit-content;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(7, 12, 24, .36);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .12);
}

.premium-carousel-arrow,
.premium-carousel-dots button {
  appearance: none;
  border: 1px solid rgba(34, 211, 238, .3);
  background: rgba(var(--depth-3-rgb), .82);
  color: #cffafe;
  cursor: pointer;
}

.premium-carousel-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* El relleno heredado, rgba(--depth-3, .82), es casi el mismo color que el
     fondo de la pagina: el circulo desaparecia y solo quedaba un aro al 30%.
     Junto al gris del contador, el mando entero parecia apagado, cuando la
     unica apagada de verdad debia ser la flecha deshabilitada. Se enciende la
     flecha pulsable con el cian de la propia paleta (el de los puntitos de al
     lado) y la deshabilitada se queda en su 32%: ahora el contraste entre las
     dos si cuenta algo. */
  font-weight: 600;
  font-size: 1.05rem;
  color: #eafcff;
  border-color: rgba(34, 211, 238, .75);
  background: rgba(34, 211, 238, .16);
  /* Sombra de apoyo, no resplandor. Llevaba ademas un halo cian de 14px que no
     iluminaba el circulo: lo emborronaba, y de cerca el mando se leia
     desenfocado en vez de encendido. El brillo lo da el color, no la niebla. */
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

/* No habia NINGUN estado de hover, foco o pulsacion: la flecha no respondia al
   dedo ni se veia donde estaba el foco del teclado. */
.premium-carousel-arrow:not(:disabled):hover,
.premium-carousel-arrow:not(:disabled):focus-visible {
  background: rgba(34, 211, 238, .22);
  border-color: rgba(34, 211, 238, .85);
}

.premium-carousel-arrow:not(:disabled):active {
  transform: scale(.94);
}

.premium-carousel-arrow:disabled {
  opacity: .32;
  cursor: default;
}

.premium-carousel-counter {
  min-width: 62px;
  text-align: center;
  /* Por que esto va en Outfit y no hereda Inter, que es lo que parece logico
     para un texto de interfaz:

     El contador se veia apagado al lado del h3 del panel de justo debajo, y no
     era el color. Medidos los dos: el h3 iba en #f8fafc y el contador ya estaba
     en blanco puro, o sea MAS claro. Lo que cambiaba era la letra. El h3 usa
     Outfit, la tipografia de los titulos, de asta gruesa; el contador heredaba
     Inter a 14,7px, cuyas astas finas dejan mucha menos tinta en pantalla. En
     un fondo casi negro, menos tinta se lee como menos brillo, por muy blanco
     que sea el color.

     Antes de dar con esto probe dos arreglos equivocados que conviene no
     repetir: subir el blanco (ya estaba a tope) y anadir un halo cian. El halo
     fue peor: 12px de resplandor sobre una letra de 14px no la iluminan, la
     cubren de niebla. El brillo lo da la tinta, no el resplandor.

     Se iguala al h3 en familia, cuerpo y prosa. tabular-nums se queda para que
     el ancho no baile al cambiar de ficha. */
  font-family: 'Outfit', sans-serif;
  color: #f8fafc;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.premium-carousel-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.premium-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: #526078;
}

.premium-carousel-dots button.active {
  width: 20px;
  border-radius: 999px;
  background: var(--accent-cyan);
}

/* Quieter resting state; strong glow is reserved for interaction. */
.service-contract-card,
.portfolio-card,
.achievement-card,
.authority-card,
.contact-card,
.gear-selector-card {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22) !important;
  filter: none;
}

.service-contract-card:hover,
.service-contract-card:focus-within,
.portfolio-card:hover,
.portfolio-card:focus-within,
.achievement-card:hover,
.achievement-card:focus-within,
.is-selected,
.active {
  --premium-active-glow: 0 0 0 1px rgba(34, 211, 238, .34), 0 15px 42px rgba(var(--accent-cyan-rgb), .13);
}

.service-contract-card:hover,
.service-contract-card:focus-within,
.portfolio-card:hover,
.portfolio-card:focus-within {
  box-shadow: var(--premium-active-glow) !important;
}

/* Solo la BURBUJA se retira cuando sale la barra fija de CTA. El boton del
   asistente se queda: la barra reserva right:84px justamente para el. Antes
   esta regla incluia .cyber-chatbot-widget y dejaba el asistente inalcanzable
   en el 95% del recorrido en movil. */
.chatbot-proactive-bubble.cta-suppressed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(.96) !important;
}

@media (min-width: 769px) {
  .premium-carousel-controls:not([data-carousel-for="timelineViewport"]) {
    display: none;
  }
}

@media (max-width: 768px) {
  /* La barra fija se retira en las zonas donde el visitante esta haciendo algo.
     El ASISTENTE ya no: ocultarlo aqui, sumado a cta-suppressed, lo dejaba sin
     aparecer en el 95% del recorrido en movil. Medido que en esas zonas su
     boton no tapa nada pulsable. */
  /* Aqui se retiraba la barra en #services, #radio, #gear y #contact. Se quito:
     dejaba 6.960 px seguidos de portada sin barra y sin ningun otro boton de
     contacto. Ahora quien decide es el JS, y mira si hay otro CTA a la vista. */

  /* El asistente se retira en DOS sitios, y solo en esos dos:

     - #contact: medido a 375px, su boton cae justo encima del area de texto del
       formulario y del enlace "Enviar un correu".
     - #gear (la motxilla): es una escena a pantalla completa que dura 4.500 px
       de recorrido y trae su propio boton abajo. Decision de Montserrat del 1 de
       agosto de 2026: mientras se recorre la motxilla el asistente no sale, y
       vuelve solo al dejarla atras.

     En #services y #radio se queda: se comprobo que ahi no tapa nada pulsable, y
     ocultarlo en todas las zonas lo dejaba sin aparecer en casi todo el recorrido. */
  body.contact-zone-active .cyber-chatbot-widget,
  body.gear-zone-active .cyber-chatbot-widget {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .cyber-chatbot-widget.proactive-visible .chatbot-trigger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) scale(.9) !important;
  }

  .cyber-chatbot-widget.proactive-visible .chatbot-proactive-bubble {
    right: 14px !important;
  }

  .service-contract-card .service-meta {
    display: none !important;
  }

  .service-contract-card.details-open .service-meta {
    display: grid !important;
    animation: premiumDetailsIn 180ms ease-out both;
  }

  .service-details-toggle {
    display: inline-flex;
  }

  .services-grid,
  .achievement-cards-row,
  .radio-playlist {
    scrollbar-width: none;
  }

  .services-grid::-webkit-scrollbar,
  .achievement-cards-row::-webkit-scrollbar,
  .radio-playlist::-webkit-scrollbar {
    display: none;
  }

  
  
  .contact-success-panel {
    padding: 12px;
  }

  .contact-success-card {
    max-height: calc(100dvh - 24px);
    gap: 13px;
    padding: 32px 20px 22px;
    border-radius: 22px;
  }

  .contact-success-icon {
    width: 64px;
    height: 64px;
  }

  .contact-success-icon svg {
    width: 31px;
    height: 31px;
  }

  .contact-success-next {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-success-next-item {
    padding: 12px 14px;
  }

  .contact-success-actions,
  .contact-success-actions .btn {
    width: 100%;
  }

  .contact-success-inline {
    grid-template-columns: auto 1fr;
    padding: 18px;
  }

  .contact-success-inline .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 390px) {
  .proposal-selection-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .proposal-selection-summary strong {
    width: calc(100% - 92px);
  }

  .contact-success-card {
    padding-inline: 16px;
  }

  .contact-success-close {
    top: 10px;
    right: 10px;
  }

  .premium-carousel-controls {
    gap: 9px;
  }
}

@keyframes premiumDetailsIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .service-contract-card.details-open .service-meta,
  .chatbot-proactive-bubble.cta-suppressed,
  .cyber-chatbot-widget.proactive-visible .chatbot-trigger {
    animation: none !important;
    transition: none !important;
  }
}

/* Final cascade: lightweight hero artwork in AVIF/WebP with PNG fallback. */
.hero::before {
  background-image:
    linear-gradient(90deg, rgba(10, 15, 29, 0.98) 0%, rgba(10, 15, 29, 0.78) 44%, rgba(10, 15, 29, 0.52) 64%, rgba(10, 15, 29, 0.92) 100%),
    image-set(
      url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-1600.avif") type("image/avif"),
      url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-1600.webp") type("image/webp"),
      url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") type("image/png")
    ) !important;
  background-position: center, 82% center !important;
  background-size: auto, min(48rem, 54vw) auto !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 768px) {
  .hero::before {
    background-image:
      linear-gradient(180deg, rgba(10, 15, 29, 0.88), rgba(10, 15, 29, 0.96)),
      image-set(
        url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-960.avif") type("image/avif"),
        url("assets/optimized/6d287232c31ee78cd58e3334742aeb78-960.webp") type("image/webp"),
        url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") type("image/png")
      ) !important;
    background-position: center, center top !important;
    background-size: auto, cover !important;
  }
}

/* ============================================================
   PREMIUM 10 — foco de cursor en el hero
   El div lo inserta script.js (13.b) para no tocar el markup
   que regenera build-i18n.js.
   ============================================================ */
.cursor-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* Halo amplio y tenue (luz de ambiente), no linterna: el alfa manda el brillo,
     la parada intermedia suaviza la caída para que no se recorte el borde. */
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-cyan-hero-rgb), 0.07),
    rgba(var(--accent-cyan-hero-rgb), 0.028) 45%,
    transparent 72%
  );
}

/* Sin foco en táctil ni con "reducir movimiento" (doble red con el guard de JS) */
@media (hover: none), (pointer: coarse) {
  .cursor-spotlight {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-spotlight {
    display: none;
  }
}

/* ============================================================
   PREMIUM 10 — acento azul con resplandor fijo en los titulos
   ============================================================
   Antes era un degradado cian -> violeta -> magenta girando en bucle cada 6 s
   sobre 12 titulos de la portada. Decision de Montserrat: un unico azul con
   brillo fijo, mas sobrio.

   Es COLOR PLANO a proposito, no degradado recortado con background-clip:text.
   Ese recorte solo existe dentro de la caja del elemento y ya corto dos veces
   el rabo de la "g" de Rigall en el logo; con 24 titulos llenos de
   descendentes (proposta, Trajectoria, divulgativa, keynote) seria el mismo
   fallo esperando. Ademas el resplandor de un text-shadow sigue cada letra,
   mientras que el de un degradado envuelve la silueta del bloque: a 5rem, que
   es el tamano de los titulos de las fichas, la diferencia se ve.

   El cian es el que ya estaba en la paleta (--accent-cyan-hero), el mismo del
   extremo luminoso del logo: no se anade ningun color nuevo. */
.hero-title span.glow-text,
.section-title span {
  color: var(--accent-cyan-hero);
  text-shadow:
    0 0 12px rgba(var(--accent-cyan-hero-rgb), 0.5),
    0 0 28px rgba(var(--accent-cyan-hero-rgb), 0.22);
}

/* ============================================================
   PREMIUM 11 — dejar respirar el campo neural bajo el hero
   #neuralCanvas es fixed en z-index:-1 y vive FUERA del hero
   (que es position:relative + isolation:isolate), así que todo lo
   que pinta el hero va por encima del canvas. Con la capa base al
   0.94–0.99 de alfa solo pasaba un 1–6%: el canvas era invisible
   justo ahí y sí se veía en el resto de secciones (fondo transparente).
   Abrimos la capa base en el centro/derecha —donde está el retrato—
   y mantenemos el lado del texto oscuro para no tocar el contraste.
   Los colores son casi los del body (10,15,29), así que bajar el alfa
   no altera el tono compuesto: solo deja pasar el campo neural.
   ============================================================ */
.hero {
  background:
    radial-gradient(circle at 10% 20%, rgba(var(--accent-cyan-hero-rgb), 0.1) 0%, transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(143, 124, 255, 0.1) 0%, transparent 50%),
    linear-gradient(
      112deg,
      rgba(7, 12, 24, 0.97) 0%,
      rgba(9, 14, 27, 0.9) 24%,
      rgba(10, 15, 29, 0.42) 52%,
      rgba(9, 14, 27, 0.28) 74%,
      rgba(7, 12, 24, 0.7) 100%
    ) !important;
}

/* ==========================================================================
   Accesibilidad estructural
   ========================================================================== */

/* Enlace de salto: invisible hasta recibir el foco por teclado. Permite
   saltar la cabecera -logo, burger, 8 enlaces, 2 desplegables y 3 botones de
   idioma- y llegar directo al contenido. WCAG 2.2, criterio 2.4.1. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 2147483647;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  background: var(--accent-amber, #f59e0b);
  color: #14100a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 0;
}

/* Devuelve el indicador de foco ambar a los campos del formulario de
   contacto. Tres reglas anteriores lo anulaban con "outline: none !important"
   (enhancements.css:8411, 10008 y 10072) y lo sustituian por un borde de
   0,8px al 10% de opacidad, practicamente invisible: justo en el formulario,
   que es el punto donde mas falta hace saber en que campo se esta. */
.contact-form form input:focus-visible,
.contact-form form select:focus-visible,
.contact-form form textarea:focus-visible,
.contact-form .form-control:focus-visible,
.contact-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-amber, #f59e0b) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* <main> necesita tabindex="-1" para poder recibir el foco desde el enlace de
   salto: sin el, el navegador desplaza la pagina pero el foco se queda en la
   cabecera y el siguiente Tab vuelve al logo. El contorno se suprime porque
   el foco aqui es programatico, no una parada de tabulacion. */
#contingut:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Correcciones tras envolver el menu en <nav>
   -------------------------------------------------------------------------- */

/* .nav-container reparte sus hijos con justify-content: space-between. Antes
   eran logo y burger (la lista queda fuera de flujo en movil), de modo que el
   burger se alineaba al borde derecho. Al anadir el <nav> pasaron a ser tres
   participantes y el burger se quedaba en el centro.
   display: contents hace que el <nav> no participe en la maquetacion y sus
   hijos se comporten como hijos directos del contenedor, restaurando el
   reparto original. El landmark de navegacion se conserva para las
   tecnologias de asistencia. */
#mainHeader .nav-container > nav {
  display: contents;
}

/* El boton de contacto del menu movil ocupaba todo el ancho del panel, de
   borde a borde. Se centra y se le da una anchura contenida.
   Lleva el prefijo #mainHeader para superar la especificidad de
   "#mainHeader .nav-links.mobile-open li", que fija justify-content: stretch
   (enhancements.css:539-542). */
#mainHeader .nav-links.mobile-open > li:last-child {
  display: flex;
  justify-content: center;
}

#mainHeader .nav-links.mobile-open > li:last-child .contact-btn {
  width: auto !important;
  min-width: 220px;
  max-width: 300px;
  padding: 13px 34px !important;
}

/* El panel del menu movil tenia 30px de relleno inferior, y un elemento con
   position:sticky y bottom:0 se ancla al borde de ESE relleno, no al del
   panel. Quedaba una franja de 30px por debajo del boton de contacto por la
   que asomaban los elementos del menu al desplazar. Se retira el relleno del
   panel y se traslada al propio bloque anclado, que ademas pasa a ser opaco
   para que nada se transparente por detras. */
#mainHeader .nav-links.mobile-open {
  padding-bottom: 0;
}

#mainHeader .nav-links.mobile-open > li:last-child {
  /* margin-top: auto lo empuja al final cuando el contenido cabe en el panel
     (tablet en vertical); position: sticky lo mantiene a la vista cuando el
     contenido desborda y hay que desplazar (movil). Los dos casos hacen falta:
     con solo uno de ellos el boton queda a media altura o se pierde al final. */
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 26px;
  background: linear-gradient(180deg, rgba(8, 12, 27, 0.72) 0%, rgb(6, 9, 20) 26%, rgb(5, 8, 18) 100%);
  box-shadow: 0 -14px 26px rgba(5, 8, 18, 0.62);
}

/* --------------------------------------------------------------------------
   Selector de idioma móvil: globo desplegable junto al botón de cierre
   --------------------------------------------------------------------------
   El selector original permanece dentro de .nav-links para escritorio. En
   móvil se muestra esta segunda instancia en la cabecera únicamente mientras
   la hamburguesa está abierta. Así el idioma se descubre en la primera pantalla
   sin forzar tres botones dentro de una cabecera estrecha. */
#mainHeader .mobile-lang-switch {
  display: none;
}

@media (max-width: 1150px) {
  body.nav-open #mainHeader .logo {
    max-width: calc(100% - 126px);
  }

  body.nav-open #mainHeader .mobile-lang-switch {
    position: relative;
    z-index: 1003;
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 8px;
  }

  #mainHeader .mobile-lang-switch > summary {
    min-height: 42px;
    padding: 6px 10px;
    border-color: rgba(var(--accent-cyan-hero-rgb), 0.26);
    background: rgba(var(--accent-cyan-hero-rgb), 0.07);
    color: var(--text-primary);
    line-height: 1;
  }

  #mainHeader .mobile-lang-switch > summary:hover,
  #mainHeader .mobile-lang-switch > summary:focus-visible,
  #mainHeader .mobile-lang-switch[open] > summary {
    border-color: rgba(var(--accent-cyan-hero-rgb), 0.52);
    background: rgba(var(--accent-cyan-hero-rgb), 0.12);
    box-shadow: 0 0 18px rgba(var(--accent-cyan-hero-rgb), 0.12);
  }

  #mainHeader .mobile-lang-current {
    min-width: 21px;
    color: #eaffff;
    font-size: var(--fs-400);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
  }

  #mainHeader .mobile-lang-switch .lang-switch-panel {
    top: calc(100% + 8px);
    right: 0;
    min-width: 188px;
    padding: 7px;
    gap: 3px;
    border-color: rgba(var(--accent-cyan-hero-rgb), 0.2);
    background: rgba(var(--depth-2-rgb), 0.99);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52);
  }

  #mainHeader .mobile-lang-switch .lang-btn {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: #b9c4d2 !important;
    font-size: var(--fs-400) !important;
    line-height: 1.2;
    text-align: left;
  }

  #mainHeader .mobile-lang-switch .lang-name,
  #mainHeader .mobile-lang-switch .lang-code {
    display: inline !important;
  }

  #mainHeader .mobile-lang-switch .lang-code {
    color: var(--accent-cyan, var(--accent-cyan-chat));
    font-size: var(--fs-300);
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  #mainHeader .mobile-lang-switch .lang-btn.active,
  #mainHeader .mobile-lang-switch .lang-btn[aria-current="page"] {
    border-color: rgba(var(--accent-cyan-hero-rgb), 0.22) !important;
    background: rgba(var(--accent-cyan-hero-rgb), 0.1) !important;
    color: #f7fdff !important;
  }

  /* El selector antiguo deja de ocupar sitio al final del panel móvil. Sigue
     intacto en el DOM y reaparece como desplegable en escritorio. */
  #mainHeader .nav-links.mobile-open > li.lang-switcher {
    display: none !important;
  }
}

/* ============================================================
   Conversión comercial — aprendizajes de ponencias y formulario
   progresivo. El primer paso pide solo las cinco piezas de contexto
   necesarias; el detalle de producción queda voluntario en el segundo.
   ============================================================ */
.ponencia-card-learning {
  margin: 20px 0 18px;
  padding: 16px 17px;
  border: 1px solid rgba(var(--accent-cyan-rgb, 6, 182, 212), 0.2);
  border-radius: 14px;
  background: rgba(var(--accent-cyan-rgb, 6, 182, 212), 0.055);
}

.ponencia-card-learning > span {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ponencia-card-learning ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ponencia-card-learning li {
  position: relative;
  margin: 0;
  padding-left: 19px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ponencia-card-learning li::before {
  position: absolute;
  top: 0.62em;
  left: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
  content: "";
}

.proposal-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(32px, 0.28fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 2px 0 26px;
}

.proposal-progress-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text-secondary);
}

.proposal-progress-step > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: rgba(var(--depth-4-rgb), 0.72);
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
}

.proposal-progress-step > strong {
  overflow-wrap: anywhere;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.proposal-progress-step.is-active,
.proposal-progress-step.is-complete {
  color: var(--text-primary);
}

.proposal-progress-step.is-active > span {
  border-color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent-amber);
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.07);
}

.proposal-progress-step.is-complete > span {
  border-color: var(--accent-cyan);
  background: rgba(var(--accent-cyan-rgb, 6, 182, 212), 0.12);
  color: var(--accent-cyan);
}

.proposal-progress-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.46), rgba(148, 163, 184, 0.2));
}

.proposal-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.proposal-step[hidden] {
  display: none !important;
}

.proposal-step > legend {
  display: block;
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: var(--text-primary);
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.proposal-step-intro {
  margin: 0 0 23px;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.55;
}

.proposal-next-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.proposal-optional-details {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 15px;
  background: rgba(var(--depth-4-rgb), 0.48);
}

.proposal-optional-details > summary {
  position: relative;
  padding: 16px 48px 16px 18px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.45;
  list-style: none;
}

.proposal-optional-details > summary::-webkit-details-marker {
  display: none;
}

.proposal-optional-details > summary::after {
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--accent-cyan);
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(-50%);
  content: "+";
}

.proposal-optional-details[open] > summary::after {
  content: "−";
}

.proposal-optional-details[open] > summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.proposal-optional-details > :not(summary) {
  margin-right: 18px;
  margin-left: 18px;
}

.proposal-optional-details > :nth-child(2) {
  margin-top: 20px;
}

.proposal-optional-details > :last-child {
  margin-bottom: 20px;
}

.privacy-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
  cursor: pointer;
}

.privacy-label input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent-cyan);
}

.privacy-label a,
.form-privacy-first-layer a {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-privacy-first-layer {
  margin: -2px 0 19px;
  padding: 12px 14px;
  border-left: 2px solid rgba(var(--accent-cyan-rgb, 6, 182, 212), 0.42);
  background: rgba(var(--depth-4-rgb), 0.34);
}

.form-privacy-first-layer p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.72rem;
  line-height: 1.55;
}

.proposal-step-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.38fr) minmax(0, 1fr);
  gap: 12px;
}

.proposal-step-actions .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px) {
  .proposal-progress {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 22px;
  }

  .proposal-progress-step {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
  }

  .proposal-progress-step > span {
    width: 30px;
    height: 30px;
  }

  .proposal-progress-step > strong {
    font-size: 0.64rem;
    letter-spacing: 0.025em;
  }

  .proposal-optional-details > summary {
    padding-left: 15px;
  }

  .proposal-optional-details > :not(summary) {
    margin-right: 14px;
    margin-left: 14px;
  }

  .proposal-step-actions {
    grid-template-columns: 1fr;
  }

  .proposal-step-actions #proposalPreviousStep {
    order: 2;
  }
}

/* ============================================================
   PORTADA MOVIL DEL RETRATO
   ============================================================
   En movil, al bajar por la portada habia una franja de scroll en la que no se
   veia mas que el retrato flotando en medio de un hueco vacio. Dos causas
   medidas: la foto se dibujaba a 157px aunque su propio `sizes` pedia el 86% de
   la pantalla, porque heredaba una rejilla de dos columnas pensada para
   escritorio cuya segunda columna esta oculta en movil; y las piezas que la
   acompanaban -escaner, malla y ficha de datos- estaban apagadas ahi dentro.

   De trece maquetas la titular eligio la de portada de revista: el retrato a
   sangre con su nombre encima. La seccion "Montserrat a l'escenari" NO se toca:
   es la seccion siguiente y sigue entera donde estaba.

   Va todo en un bloque propio al final en vez de editar las cinco reglas
   repartidas por el archivo, para que se pueda revertir de una pieza.
   ============================================================ */

/* El rotulo es exclusivo de la portada movil: en escritorio el retrato conserva
   su marco y su sitio en la composicion de dos columnas, y el nombre ya esta en
   la cabecera. Sin esta linea el <p> se colaba en escritorio como texto suelto
   dentro del marco. */
.hero-portada {
  display: none;
}

@media (max-width: 768px) {
  .hero-portada {
    display: block;
  }

  .hero-media-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
  }

  /* El recuadro decorativo del envoltorio encuadraba la composicion de dos
     columnas. Sin columnas, solo estorba. */
  .hero-media-wrapper::before {
    display: none !important;
  }

  .hero-img-container {
    /* --salida la escribe el JS: 0 con el retrato entero en pantalla, 1 cuando
       ya ha salido del todo por arriba. Con el valor de reposo aqui, si el JS
       no llega a ejecutarse la mascara se queda en su estado inicial y no pasa
       nada raro. */
    --salida: 0;
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    height: clamp(340px, 58vh, 480px) !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* La mascara va SOLO sobre la imagen, no sobre el contenedor.
     Estaba en el contenedor y el contenedor tambien envuelve al rotulo, asi que
     el fundido inferior se comia el nombre y el oficio: se veian medio borrados
     desde el primer momento. En la maqueta que se aprobo el texto quedaba fuera
     de la mascara; esto lo devuelve a ese comportamiento.

     La mascara hace dos cosas: funde la foto con el fondo por arriba y por abajo
     -a sangre, sin fundido, queda un corte recto- y es la que la va deshaciendo
     al desplazar, porque su primera parada avanza con --salida. Cuando --salida
     crece, las paradas siguientes quedan por detras de la primera y el navegador
     las sube al valor de la anterior: ese arrastre es justo el barrido buscado. */
  .hero-img-container picture {
    /* El fundido de arriba es minimo a proposito: el borde superior se suaviza
       en un 4% de la altura -unos 14px- y ya esta la foto entera. Antes tardaba
       un 13%, unos 45px, y esa banda de imagen desvanecida se leia como un hueco
       en vez de como un fundido.
       Las dos primeras paradas son las que se mueven con --salida: mientras vale
       0 solo suavizan el borde; segun crece, esa zona transparente avanza hacia
       abajo y es lo que va deshaciendo la foto al desplazar. */
    -webkit-mask-image: linear-gradient(180deg,
      transparent calc(var(--salida) * 100%),
      #000 calc(var(--salida) * 100% + 4%),
      #000 58%,
      rgba(0, 0, 0, 0.38) 86%,
      transparent 100%);
    mask-image: linear-gradient(180deg,
      transparent calc(var(--salida) * 100%),
      #000 calc(var(--salida) * 100% + 4%),
      #000 58%,
      rgba(0, 0, 0, 0.38) 86%,
      transparent 100%);
  }

  /* El resplandor del marco no pinta nada sin marco. */
  .hero-img-container::before {
    display: none !important;
  }

  .hero-img-container picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Por encima del centro: a sangre y con la mascara comiendose la parte
       inferior, centrar dejaba la cara demasiado baja. */
    object-position: center 20% !important;
    border-radius: 0 !important;
  }

  /* ---- el rotulo ---- */
  .hero-portada {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 22px;
    z-index: 2;
    /* El rotulo se lee ENTERO todo el rato y solo se apaga cuando el propio
       rotulo esta saliendo por arriba de la pantalla. Por eso no usa --salida,
       que mide la salida de la foto: usa la suya, que el JS calcula desde la
       posicion del rotulo. Antes iba con `--salida * 1.7`, que lo apagaba antes
       que a la foto y lo dejaba medio borrado estando aun en pantalla. */
    opacity: calc(1 - var(--salida-rotol, 0));
    pointer-events: none;
  }

  .hero-portada-filet {
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, var(--accent-cyan-hero), var(--accent-violet, #8f7cff));
  }

  .hero-portada-nom {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 9.5vw, 2.6rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: #fff;
    /* Sombra de contacto, no resplandor: separa la letra de la foto sin
       emborronarla. */
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.62);
  }

  .hero-portada-nom span {
    display: block;
    color: var(--accent-cyan-hero);
  }

  /* La linea de oficio es un elemento propio del rotulo. Antes reutilizaba la
     ficha .portrait-data-card, que esta oculta en movil, para no inventar una
     cadena de texto nueva. Mala idea: esa ficha trae puesto un punto verde
     intermitente en un ::before, que aparecio en pantalla sin que nadie lo
     pidiera. Con un elemento propio que lleva la MISMA clave de traduccion
     (hero_media_value) se conserva la ventaja -cero texto nuevo que traducir- y
     la ficha se queda oculta, como estaba. */
  .hero-portada-rol {
    margin: 10px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-500);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.88);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  }

  /* El barrido de escaner y su malla se disparan al pasar el raton por encima
     del retrato (style.css:3380). Con el retrato a sangre ocupando la pantalla
     entera, ese hover se engancha con solo tocar, y en un movil aparecia un
     efecto que aqui nadie ha elegido: la propuesta aprobada es la portada, no el
     escaner. No se toca la regla de escritorio, donde el hover si es un gesto
     deliberado. */
  .hero-img-container:hover .facial-scan-line,
  .hero-img-container:hover .facial-scan-grid {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Sin JS que mueva --salida, la mascara se queda quieta en su estado de
     reposo: el retrato conserva sus fundidos y el rotulo se ve entero. */
  @media (prefers-reduced-motion: reduce) {
    .hero-img-container {
      --salida: 0 !important;
    }
  }
}

/* ============================================================
   ICONOS PROPIOS DE AUTORITAT I CONFIANCA
   ============================================================
   Los cuatro venian de Lucide: linea uniforme, un unico grosor y ningun segundo
   plano. Se sustituyen por dibujos propios con la misma reja de 24 y tres
   niveles de lectura: el trazo principal en el degradado de la marca, el detalle
   secundario en currentColor rebajado, y algun punto relleno como acento.
   Se dibujan a 22px dentro de la caja de 38 -32 en movil-, un punto por debajo
   de los 24 que ocupaban los de Lucide: con dos niveles de trazo, el mismo
   tamaño se veia recargado.
   ============================================================ */

.icones-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.authority-icon .icona-marca {
  width: 22px;
  height: 22px;
  /* Cada trazo lleva su propio grosor en el marcado, que es donde se decide la
     jerarquia de cada dibujo. Sin esto, la regla generica de .authority-icon svg
     los aplanaria todos a 1.9 y se perderia el segundo plano. */
  stroke-width: initial;
  flex: none;
}

/* El degradado no hereda el color del texto, asi que el realce al pasar por
   encima se hace con luz, no con cambio de color: sube el brillo del icono
   entero. La caja ya tenia su propia transicion. */
.authority-card:hover .icona-marca,
.authority-card:focus-within .icona-marca {
  filter: brightness(1.18);
}

.icona-marca {
  transition: filter 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .icona-marca {
    transition: none;
  }
}

/* =========================================================
   TELEVISIO — «El segon cafe» a La 2

   Una sola peca, i l'unica de la pagina que es mira AMB SO. Per aixo te seccio
   propia i no es la fitxa dotze del Portafoli: alla son onze bucles muts i
   decoratius, i barrejar-la obligaria a deixar-la muda.

   El padding i l'ample maxim ja els posa la regla generica `section` de
   style.css; aqui nomes hi ha la reixeta de dins.
   ========================================================= */
.tv-section .tv-stage {
  display: grid;
  /* El video mana i el text nomes acompanya: 1.55 contra 1. */
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

@media (max-width: 860px) {
  .tv-section .tv-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tv-section .tv-player {
  min-width: 0;
  margin: 0;
}

/* aspect-ratio i no alcada fixa: aixi el marc no fa salt mentre el poster
   encara no ha arribat. Amb preload="none" el video no es baixa fins que algu
   li dona al play, i el navegador no sap la mida abans d'hora. */
.tv-section .tv-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--enhance-radius-md);
  background: #050a14;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.42);
}

.tv-section .tv-caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: var(--fs-500);
  letter-spacing: 0.02em;
}

/* El credit de propietat. Va mes apagat que el peu perque no competeixi amb
   ell, pero NO tant com per no llegir-se: diu de qui son les imatges i aixo ha
   de quedar clar. Ample limitat perque no s'estiri en una linia llarguissima
   sota el video. */
.tv-section .tv-credit {
  max-width: 62ch;
  color: rgba(148, 163, 184, 0.78);
  font-size: var(--fs-400);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.tv-section .tv-copy {
  min-width: 0;
}

.tv-section .tv-copy p {
  margin: 0 0 22px;
  color: var(--text-secondary);
  font-size: var(--fs-600);
  line-height: 1.6;
}

.tv-section .tv-cta {
  display: inline-flex;
}