/* ============================================================
   ALVIS BROTHERS / FUTURE INTERFACE SYSTEM
   Skins dinámicas, tipografía HUD y modo claro/oscuro.
   La capa es aditiva: no reemplaza estilos funcionales existentes.
   ============================================================ */

:root {
  color-scheme: dark;
  --ab-accent: #00e5ff;
  --ab-accent-rgb: 0, 229, 255;
  --ab-accent-2: #176bff;
  --ab-accent-2-rgb: 23, 107, 255;
  --ab-accent-soft: rgba(0, 229, 255, .14);
  --ab-display-font: 'Orbitron', 'Rajdhani', sans-serif;
  --ab-body-font: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  --ab-canvas: #030812;
  --ab-canvas-2: #071321;
  --ab-surface: rgba(7, 18, 31, .92);
  --ab-surface-solid: #081321;
  --ab-card: #0b1828;
  --ab-border: rgba(0, 229, 255, .28);
  --ab-copy: #eaf7ff;
  --ab-muted: #9bb4c9;
  --ab-shadow: rgba(0, 0, 0, .45);
  --ab-radius: 4px;
  --ab-glow: 0 0 24px rgba(0, 229, 255, .12);
}

html[data-ab-theme="cyan"] {
  --ab-accent: #00e5ff;
  --ab-accent-rgb: 0, 229, 255;
  --ab-accent-2: #176bff;
  --ab-accent-2-rgb: 23, 107, 255;
  --ab-accent-soft: rgba(0, 229, 255, .14);
  --ab-border: rgba(0, 229, 255, .28);
  --ab-glow: 0 0 24px rgba(0, 229, 255, .14);
}
html[data-ab-theme="fire"] {
  --ab-accent: #ff452c;
  --ab-accent-rgb: 255, 69, 44;
  --ab-accent-2: #ffd02b;
  --ab-accent-2-rgb: 255, 208, 43;
  --ab-accent-soft: rgba(255, 69, 44, .15);
  --ab-border: rgba(255, 69, 44, .34);
  --ab-glow: 0 0 26px rgba(255, 69, 44, .16);
}
html[data-ab-theme="violet"] {
  --ab-accent: #ce5cff;
  --ab-accent-rgb: 206, 92, 255;
  --ab-accent-2: #5865ff;
  --ab-accent-2-rgb: 88, 101, 255;
  --ab-accent-soft: rgba(206, 92, 255, .15);
  --ab-border: rgba(206, 92, 255, .3);
  --ab-glow: 0 0 26px rgba(206, 92, 255, .16);
}
html[data-ab-theme="emerald"] {
  --ab-accent: #37f5b2;
  --ab-accent-rgb: 55, 245, 178;
  --ab-accent-2: #12a9d6;
  --ab-accent-2-rgb: 18, 169, 214;
  --ab-accent-soft: rgba(55, 245, 178, .13);
  --ab-border: rgba(55, 245, 178, .28);
  --ab-glow: 0 0 26px rgba(55, 245, 178, .14);
}

html[data-ab-font="orbitron"] { --ab-display-font: 'Orbitron', 'Rajdhani', sans-serif; }
html[data-ab-font="oxanium"] { --ab-display-font: 'Oxanium', 'Rajdhani', sans-serif; }
html[data-ab-font="technical"] { --ab-display-font: 'Share Tech Mono', 'Rajdhani', monospace; }

html { scroll-behavior: smooth; }
body {
  position: relative;
  isolation: isolate;
  font-family: var(--ab-body-font) !important;
  font-size: 17px;
  letter-spacing: .015em;
  background-color: var(--ab-canvas) !important;
  color: var(--ab-copy);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  background-image:
    linear-gradient(rgba(var(--ab-accent-rgb), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ab-accent-rgb), .035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% -10%, rgba(var(--ab-accent-rgb), .12), transparent 48%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
}
#agrupar {
  width: min(1280px, 97%);
  margin: clamp(10px, 2.2vw, 28px) auto;
  position: relative;
}

/* HUD framing and motion accents */
#cabecera {
  min-height: 280px;
  background:
    linear-gradient(135deg, transparent 0 10%, rgba(var(--ab-accent-rgb), .07) 10.1%, transparent 10.35% 89%, rgba(var(--ab-accent-2-rgb), .07) 89.1%, transparent 89.35%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--ab-accent-rgb), .025) 32px, transparent 33px),
    radial-gradient(circle at 50% 42%, rgba(var(--ab-accent-rgb), .16), transparent 42%),
    linear-gradient(180deg, #050b15, #091321 55%, #040913) !important;
  border: 1px solid var(--ab-border);
  border-bottom: 2px solid var(--ab-accent);
  box-shadow: inset 0 0 42px rgba(var(--ab-accent-rgb), .06), var(--ab-glow);
}
#cabecera::before {
  width: min(42%, 360px);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ab-accent), var(--ab-accent-2), transparent);
  box-shadow: 0 0 18px rgba(var(--ab-accent-rgb), .65);
}
#cabecera::after {
  border: 1px solid rgba(var(--ab-accent-rgb), .12);
  box-shadow: 0 0 0 22px rgba(var(--ab-accent-rgb), .025), 0 0 0 48px rgba(var(--ab-accent-rgb), .02);
}
#cabecera .nombre-marca {
  font-family: var(--ab-display-font) !important;
  color: var(--ab-accent) !important;
  letter-spacing: .22em;
  text-shadow: 0 0 18px rgba(var(--ab-accent-rgb), .3);
  font-size: clamp(1.35rem, 3vw, 2.25rem);
}
#cabecera h1, #cabecera h2, .titulo-hero, .identidad-titulo h2,
.servicios-titulo h2, .informacion-titulo h2, .productos-titulo h2,
.titulo-pagina, .categorias-titulo h2, .productos-destacados-titulo h2,
.contacto-titulo h2, .planes-titulo h2, .revision-publica-cabecera h2,
.pie-marca h2, .productos-cierre h2, .servicios-cierre h2,
.simbolo-titulo h2, .historia-titulo h2 {
  font-family: var(--ab-display-font) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-wrap: balance;
}
#cabecera h1 { text-shadow: 0 0 28px rgba(var(--ab-accent-rgb), .18); }
#imagen img, .hero-logo img { filter: drop-shadow(0 10px 28px rgba(var(--ab-accent-rgb), .2)); }

#menu {
  z-index: 10;
  background:
    linear-gradient(90deg, rgba(var(--ab-accent-rgb), .05), transparent 30% 70%, rgba(var(--ab-accent-2-rgb), .05)),
    rgba(3, 8, 18, .97) !important;
  border: 1px solid var(--ab-border);
  border-top: 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
#menu a {
  font-family: var(--ab-display-font) !important;
  font-size: clamp(.64rem, .9vw, .76rem);
  letter-spacing: .06em;
  padding: 17px clamp(10px, 1.7vw, 24px);
  text-transform: uppercase;
}
#menu a::after { height: 3px; background: linear-gradient(90deg, var(--ab-accent), var(--ab-accent-2)); box-shadow: 0 0 12px rgba(var(--ab-accent-rgb), .45); }
#menu a:hover, #menu a.activo { color: var(--ab-accent) !important; background: rgba(var(--ab-accent-rgb), .055) !important; }
#boton-menu { color: var(--ab-accent) !important; }

/* Feature panels, cards, product catalog and service pricing */
:is(.tarjeta-identidad, .tarjeta-servicio, .bloque-informacion, .producto,
.categoria-producto, .tarjeta-plan, .contacto-info, #formulario-contacto,
.revision-publica-beneficios, .revision-publica-accion, .video-servicios-marco,
.red-social, .foto-historia, .foto-participacion, .entrenamiento-destacado,
.simbolo-contenido, .simbolo-principio, .principio-informacion) {
  border-color: var(--ab-border) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), var(--ab-glow);
}
:is(.tarjeta-identidad, .tarjeta-servicio, .bloque-informacion, .producto,
.tarjeta-plan, .contacto-info, #formulario-contacto, .revision-publica-beneficios,
.revision-publica-accion, .red-social, .entrenamiento-destacado, .simbolo-contenido) {
  background-color: var(--ab-surface-solid);
  background-image: linear-gradient(145deg, rgba(var(--ab-accent-rgb), .055), transparent 48%);
}
:is(.tarjeta-identidad, .tarjeta-servicio, .bloque-informacion, .producto, .tarjeta-plan,
.categoria-producto, .red-social, .foto-historia, .foto-participacion) {
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}
:is(.tarjeta-identidad, .tarjeta-servicio, .bloque-informacion, .producto, .tarjeta-plan):hover {
  border-color: var(--ab-accent) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.32), 0 0 22px rgba(var(--ab-accent-rgb), .11);
}
:is(.boton-hero, .boton-hero-secundario, .boton-servicios, .boton-informacion,
.boton-contacto, .boton-productos, .producto-boton, .boton-plan,
.boton-plan-secundario, .boton-revision-publica, .boton-transicion) {
  font-family: var(--ab-display-font) !important;
  text-transform: uppercase;
  letter-spacing: .075em;
  border-radius: 2px !important;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
}
:is(.boton-hero, .boton-servicios, .boton-contacto:hover, .boton-productos,
.producto-boton, .boton-plan, .boton-revision-publica) {
  box-shadow: 0 0 18px rgba(var(--ab-accent-rgb), .13);
}
:is(.boton-hero, .boton-servicios, .boton-contacto, .boton-productos,
.producto-boton, .boton-plan, .boton-revision-publica):hover {
  transform: translateY(-2px);
}

/* Common text hierarchy */
:is(.identidad-titulo span, .servicios-titulo span, .informacion-titulo span,
.productos-titulo span, .productos-destacados-titulo span, .categorias-titulo span,
.contacto-titulo span, .planes-titulo > span, .revision-publica-kicker,
.productos-cierre > span, .numero-identidad, .numero-servicio, .numero-informacion) {
  color: var(--ab-accent) !important;
  font-family: var(--ab-display-font) !important;
  letter-spacing: .12em;
}
:is(.titulo-hero, .identidad-titulo h2, .servicios-titulo h2, .informacion-titulo h2,
.productos-titulo h2, .titulo-pagina, .categorias-titulo h2,
.productos-destacados-titulo h2, .contacto-titulo h2, .planes-titulo h2,
.productos-cierre h2, .servicios-cierre h2, .revision-publica-cabecera h2) {
  text-shadow: 0 0 22px rgba(var(--ab-accent-rgb), .1);
}
:is(input, select, textarea, button) { accent-color: var(--ab-accent); }
:is(input, select, textarea):focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ab-accent) !important;
  outline-offset: 3px;
}
:is(.campo input, .campo textarea, .buscador-formulario input, .buscador-formulario select) {
  border-color: var(--ab-border) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 16px rgba(var(--ab-accent-rgb), .035);
}
:is(.campo input:focus, .campo textarea:focus, .buscador-formulario input:focus, .buscador-formulario select:focus) {
  border-color: var(--ab-accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--ab-accent-rgb), .22), 0 0 20px rgba(var(--ab-accent-rgb), .08) !important;
}
#pie {
  background:
    linear-gradient(135deg, transparent 0 12%, rgba(var(--ab-accent-rgb), .035) 12.1%, transparent 12.4% 87%, rgba(var(--ab-accent-2-rgb), .035) 87.1%, transparent 87.4%),
    radial-gradient(circle at center top, rgba(var(--ab-accent-rgb), .09), transparent 46%), #030812 !important;
  border-top-color: var(--ab-border) !important;
}
.pie-linea { background: var(--ab-border) !important; }
.pie-linea::after { background: #030812 !important; color: var(--ab-accent) !important; }

/* Product search styles exist inline in productos.html; normalize them here too. */
.buscador-formulario input, .buscador-formulario select {
  background: var(--ab-surface-solid) !important;
  color: var(--ab-copy) !important;
  border: 1px solid var(--ab-border) !important;
}
.buscador-formulario button {
  background: var(--ab-accent) !important;
  border-color: var(--ab-accent) !important;
  color: #041019 !important;
  font-family: var(--ab-display-font) !important;
}
.resultado-producto { background: var(--ab-surface-solid) !important; border-color: var(--ab-border) !important; }
.resultado-producto h3 { color: var(--ab-copy) !important; }
.resultado-producto a { color: var(--ab-accent) !important; border-color: var(--ab-accent) !important; }

/* Small technical labels lend the site an instrument-panel character. */
:is(.hero-lema, .hero-ubicacion, .pie-lema, .producto-marca, .etiqueta-servicio,
.etiqueta-plan, .numero-plan, .entrenamiento-meta, .video-kicker) {
  font-family: var(--ab-display-font) !important;
  letter-spacing: .1em;
}
#hero .hero-contenido { text-shadow: 0 2px 18px rgba(0,0,0,.52); }
#hero .hero-lema { color: var(--ab-accent) !important; }
#hero .boton-hero { background: var(--ab-accent) !important; color: #031018 !important; border-color: var(--ab-accent) !important; }
#hero .boton-hero-secundario { border-color: var(--ab-accent) !important; color: var(--ab-accent) !important; }

/* La skin Fuego usa deliberadamente los dos tonos de la referencia: rojo intenso y ámbar. */
html[data-ab-theme="fire"] :is(.boton-hero, .boton-servicios, .boton-productos,
.producto-boton, .boton-plan, .boton-revision-publica, .buscador-formulario button) {
  background: linear-gradient(105deg, var(--ab-accent), var(--ab-accent-2)) !important;
  border-color: var(--ab-accent-2) !important;
  color: #1b0803 !important;
}
html[data-ab-theme="fire"] :is(.numero-identidad, .numero-servicio, .numero-informacion,
.numero-plan, .servicios-separador span, .productos-cierre > span) {
  color: var(--ab-accent-2) !important;
}
html[data-ab-theme="fire"] #cabecera .nombre-marca {
  background: linear-gradient(90deg, var(--ab-accent), var(--ab-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ===================== LIGHT MODE ===================== */
html[data-ab-mode="light"] { color-scheme: light; }
html[data-ab-mode="light"] body {
  --ab-canvas: #edf4fa;
  --ab-canvas-2: #f7fbff;
  --ab-surface: rgba(255,255,255,.94);
  --ab-surface-solid: #ffffff;
  --ab-card: #ffffff;
  --ab-copy: #112b43;
  --ab-muted: #526b80;
  --ab-shadow: rgba(32, 69, 99, .12);
  color: #17324a !important;
  background: #e9f2f8 !important;
}
html[data-ab-mode="light"] body::before {
  opacity: .58;
  background-image:
    linear-gradient(rgba(var(--ab-accent-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ab-accent-rgb), .055) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(var(--ab-accent-rgb), .11), transparent 55%);
}
html[data-ab-mode="light"] #agrupar {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(34,78,112,.12);
  box-shadow: 0 20px 55px rgba(29,66,96,.1);
}
html[data-ab-mode="light"] #cabecera {
  background:
    linear-gradient(135deg, transparent 0 10%, rgba(var(--ab-accent-rgb), .07) 10.1%, transparent 10.35% 89%, rgba(var(--ab-accent-2-rgb), .07) 89.1%, transparent 89.35%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--ab-accent-rgb), .035) 32px, transparent 33px),
    radial-gradient(circle at 50% 42%, rgba(var(--ab-accent-rgb), .11), transparent 42%),
    linear-gradient(180deg, #f9fcff, #eaf3f9 55%, #f5faff) !important;
  border-color: var(--ab-border) !important;
}
html[data-ab-mode="light"] #cabecera h1 { color: #112b43 !important; }
html[data-ab-mode="light"] #menu {
  background: rgba(248,252,255,.98) !important;
  border-color: var(--ab-border) !important;
  box-shadow: 0 10px 24px rgba(29,66,96,.08);
}
html[data-ab-mode="light"] #menu a { color: #17324a !important; }
html[data-ab-mode="light"] #menu a:hover,
html[data-ab-mode="light"] #menu a.activo { color: var(--ab-accent) !important; background: rgba(var(--ab-accent-rgb), .08) !important; }
html[data-ab-mode="light"] :is(#identidad, #servicios, #informacion, #productos, #contacto,
.planes-servicios, .revision-publica-contenido, .servicios-cierre, .productos-cierre) {
  background: linear-gradient(160deg, #f8fbfe, #eaf2f8) !important;
  color: #17324a !important;
  border-color: rgba(38,75,105,.15) !important;
}
html[data-ab-mode="light"] #pie {
  background:
    linear-gradient(135deg, transparent 0 12%, rgba(var(--ab-accent-rgb), .04) 12.1%, transparent 12.4% 87%, rgba(var(--ab-accent-2-rgb), .04) 87.1%, transparent 87.4%),
    linear-gradient(180deg, #f0f6fb, #e1edf6) !important;
}
html[data-ab-mode="light"] :is(#cabecera h2, .identidad-titulo h2, .servicios-titulo h2,
.informacion-titulo h2, .productos-titulo h2, .titulo-pagina, .categorias-titulo h2,
.productos-destacados-titulo h2, .contacto-titulo h2, .contacto-info h3,
.planes-titulo h2, .tarjeta-plan h3, .revision-publica-cabecera h2, .pie-marca h2,
.productos-cierre h2, .servicios-cierre h2, .bloque-informacion h3,
.tarjeta-identidad h3, .tarjeta-servicio h3, .simbolo-titulo h2, .historia-titulo h2,
.producto-contenido h3, .producto-contenido p, .campo label, .principio-informacion h3) {
  color: #132d45 !important;
}
html[data-ab-mode="light"] :is(.identidad-titulo p, .servicios-titulo p, .informacion-titulo p,
.productos-titulo p, .categorias-titulo p, .productos-destacados-titulo p,
.contacto-titulo p, .contacto-info > p, .bloque-informacion p, .tarjeta-identidad p,
.tarjeta-servicio p, .planes-titulo p, .revision-publica-cabecera p,
.revision-publica-beneficios ul, .productos-cierre p, .servicios-cierre p,
.historia-texto p, .simbolo-texto, .principio-informacion p, .enlace-plataforma) {
  color: #526b80 !important;
}
html[data-ab-mode="light"] :is(.tarjeta-identidad, .tarjeta-servicio, .bloque-informacion,
.producto, .tarjeta-plan, .contacto-info, #formulario-contacto,
.revision-publica-beneficios, .revision-publica-accion, .red-social,
.entrenamiento-destacado, .simbolo-contenido, .principio-informacion) {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,252,.98)) !important;
  border-color: rgba(var(--ab-accent-rgb), .3) !important;
  box-shadow: 0 12px 32px rgba(25,64,95,.08);
}
html[data-ab-mode="light"] :is(.producto-contenido, .contacto-info, .revision-publica-beneficios, .revision-publica-accion) { color: #17324a; }
html[data-ab-mode="light"] :is(.campo input, .campo textarea, .buscador-formulario input,
.buscador-formulario select, .resultado-producto) {
  background: #fff !important;
  color: #17324a !important;
  border-color: rgba(var(--ab-accent-rgb), .42) !important;
}
html[data-ab-mode="light"] :is(.campo input::placeholder, .campo textarea::placeholder) { color: #71879a !important; }
html[data-ab-mode="light"] .pie-navegacion a { color: #526b80 !important; }
html[data-ab-mode="light"] .pie-lema { color: #17324a !important; }
html[data-ab-mode="light"] .pie-linea::after { background: #e7f0f7 !important; }
html[data-ab-mode="light"] .producto-precio { color: var(--ab-accent) !important; }
html[data-ab-mode="light"] .categoria-producto { color: #fff !important; }
html[data-ab-mode="light"] .categoria-contenido h3,
html[data-ab-mode="light"] .categoria-contenido p { color: #fff !important; }
html[data-ab-mode="light"] #hero { color: #fff; }
html[data-ab-mode="light"] #hero .hero-contenido { color: #fff; }
html[data-ab-mode="light"] #hero .titulo-hero { color: #fff !important; }
html[data-ab-mode="light"] #hero .hero-lema { color: var(--ab-accent) !important; }

/* ================= THEME PICKER UI ================= */
.ab-theme-toggle,
.ab-theme-panel,
.ab-theme-panel * { box-sizing: border-box; }
.ab-theme-toggle {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 99990;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 15px 10px 11px;
  border: 1px solid var(--ab-accent);
  border-radius: 3px;
  background: rgba(4, 11, 21, .96);
  color: #f1fbff;
  box-shadow: 0 8px 32px rgba(0,0,0,.38), 0 0 24px rgba(var(--ab-accent-rgb),.18);
  font: 700 11px/1 var(--ab-display-font), sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(16px);
}
.ab-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.4), 0 0 28px rgba(var(--ab-accent-rgb),.26); }
.ab-theme-toggle:focus-visible, .ab-theme-panel button:focus-visible { outline: 2px solid var(--ab-accent) !important; outline-offset: 3px; }
.ab-theme-toggle-mark {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--ab-accent); color: var(--ab-accent);
  background: linear-gradient(135deg, rgba(var(--ab-accent-rgb),.18), transparent);
  font-size: 12px; letter-spacing: -.08em;
}
.ab-theme-panel {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px);
  z-index: 99989;
  width: min(360px, calc(100vw - 28px));
  max-height: min(76vh, 690px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  color: #eaf7ff;
  border: 1px solid rgba(var(--ab-accent-rgb),.5);
  background:
    linear-gradient(135deg, rgba(var(--ab-accent-rgb),.08), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    rgba(4, 11, 21, .985);
  box-shadow: 0 24px 75px rgba(0,0,0,.58), 0 0 35px rgba(var(--ab-accent-rgb),.13);
  backdrop-filter: blur(22px);
  scrollbar-color: var(--ab-accent) #081321;
}
.ab-theme-panel[hidden] { display: none !important; }
.ab-theme-panel::before { content: ""; display: block; width: 68px; height: 3px; margin: -18px 0 17px -18px; background: linear-gradient(90deg,var(--ab-accent),var(--ab-accent-2)); box-shadow: 0 0 18px rgba(var(--ab-accent-rgb),.5); }
.ab-theme-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.ab-theme-eyebrow { margin: 0 0 5px; color: var(--ab-accent); font: 700 9px/1.4 var(--ab-display-font),sans-serif; letter-spacing: .16em; }
.ab-theme-title { margin: 0; color: #f4fbff; font: 700 17px/1.25 var(--ab-display-font),sans-serif; letter-spacing: .035em; }
.ab-theme-subtitle { margin: 7px 0 0; color: #9eb4c9; font: 500 14px/1.45 var(--ab-body-font),sans-serif; }
.ab-theme-close { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 1px solid #31465c; background: #0b1828; color: #d9ebf8; font-size: 19px; cursor: pointer; }
.ab-theme-section { padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(var(--ab-accent-rgb),.18); }
.ab-theme-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; color: #d8e9f6; font: 700 10px/1.3 var(--ab-display-font),sans-serif; letter-spacing: .12em; }
.ab-theme-section-title small { color: #7993aa; font: 500 11px/1.2 var(--ab-body-font),sans-serif; letter-spacing: .02em; }
.ab-theme-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ab-theme-swatch {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 9px;
  border: 1px solid #263b50; border-radius: 2px; background: rgba(12,27,44,.8); color: #e3f0f9;
  text-align: left; cursor: pointer; font: 600 13px/1.2 var(--ab-body-font),sans-serif; transition: border-color .2s, background .2s, transform .2s;
}
.ab-theme-swatch:hover { border-color: var(--ab-accent); transform: translateY(-1px); }
.ab-theme-swatch[aria-pressed="true"] { border-color: var(--ab-accent); background: rgba(var(--ab-accent-rgb),.12); box-shadow: inset 0 0 0 1px rgba(var(--ab-accent-rgb),.12); }
.ab-theme-colors { display: flex; gap: 4px; flex: 0 0 auto; }
.ab-theme-dot { display: block; width: 13px; height: 22px; border: 1px solid rgba(255,255,255,.35); }
.ab-theme-swatch-text { display: block; min-width: 0; }
.ab-theme-swatch-text strong { display: block; font-weight: 700; }
.ab-theme-swatch-text small { display: block; margin-top: 3px; color: #8ca4ba; font: 500 11px/1.2 var(--ab-body-font),sans-serif; }
.ab-theme-segmented { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.ab-theme-segmented button { padding: 10px 8px; border: 1px solid #263b50; background: #0b1828; color: #aec3d6; font: 600 12px/1.2 var(--ab-display-font),sans-serif; cursor: pointer; }
.ab-theme-segmented button[aria-pressed="true"] { border-color: var(--ab-accent); color: var(--ab-accent); background: rgba(var(--ab-accent-rgb),.1); }
.ab-theme-fonts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.ab-theme-fonts button { min-width: 0; padding: 10px 4px; border: 1px solid #263b50; background: #0b1828; color: #d7e9f7; font: 600 11px/1.25 var(--ab-body-font),sans-serif; cursor: pointer; }
.ab-theme-fonts button span { display: block; color: var(--ab-accent); font: 700 16px/1.2 var(--ab-display-font),sans-serif; margin-bottom: 5px; }
.ab-theme-fonts button[aria-pressed="true"] { border-color: var(--ab-accent); background: rgba(var(--ab-accent-rgb),.1); }
.ab-theme-fonts button[data-font="oxanium"] span { font-family: 'Oxanium',sans-serif; }
.ab-theme-fonts button[data-font="technical"] span { font-family: 'Share Tech Mono',monospace; }
.ab-theme-status { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(var(--ab-accent-rgb),.14); color: #7891a7; font: 500 11px/1.5 var(--ab-body-font),sans-serif; }
.ab-theme-status strong { color: var(--ab-accent); font-family: var(--ab-display-font),sans-serif; font-size: 9px; letter-spacing: .08em; }

@media (max-width: 768px) {
  #agrupar { width: 100%; margin: 0 auto; }
  #cabecera { min-height: 220px; padding: 42px 18px 32px; }
  #menu a { padding: 14px 15px; font-size: .68rem; }
  #hero .hero-contenido { padding-left: 15px; padding-right: 15px; }
  .ab-theme-toggle { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); min-height: 45px; padding: 9px 12px 9px 9px; }
  .ab-theme-panel { right: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 56px); width: min(360px, calc(100vw - 20px)); padding: 15px; }
  .ab-theme-panel::before { margin: -15px 0 15px -15px; }
}
@media (max-width: 420px) {
  .ab-theme-options { gap: 6px; }
  .ab-theme-swatch { padding: 9px 7px; gap: 7px; font-size: 12px; }
  .ab-theme-dot { width: 10px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}