/* ==========================================================================
   SRB — SIX REVERSIBLE BOXER
   Sistema de Diseño Minerva · Kinetic Hexahedral · Accesibilidad Universal
   Versión 2.0 — Animaciones GSAP, Menú Profesional, Responsivo 100%
   ========================================================================== */

/* ── TOKENS DE DISEÑO ─────────────────────────────────────────────────────── */
:root {
  /* Paleta Principal */
  --bg-canvas:       #F7F5EE;
  --bg-card:         #EFECE6;
  --bg-elevated:     #FFFFFF;
  --text-main:       #111111;
  --text-muted:      #6B6B6B;
  --color-border:    #DCD8CD;
  --color-border-dark: #111111;

  /* Acciones / Stickers */
  --color-coral:     #FF5A49;
  --color-orange:    #FF7733;
  --color-yellow:    #FFC837;
  --color-green:     #2EC4B6;
  --color-blue:      #3B82F6;
  --color-dark-badge:#111111;

  /* Menú — Variables especiales */
  --nav-height:      68px;
  --nav-bg:          rgba(247, 245, 238, 0.88);
  --nav-line-active: var(--color-coral);
  --nav-link-color:  #6B6B6B;
  --nav-link-hover:  #111111;
  --nav-shadow:      0 1px 0 var(--color-border), 0 4px 24px rgba(0,0,0,0.06);
  --nav-scrolled-shadow: 0 2px 32px rgba(0,0,0,0.12);

  /* Tipografías */
  --font-display: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Espaciado & Radios */
  --radius-sm:   6px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* Sombras */
  --shadow-offset:       4px 4px 0px 0px var(--color-border-dark);
  --shadow-offset-small: 2px 2px 0px 0px var(--color-border-dark);
  --shadow-card:         0 8px 32px rgba(0,0,0,0.06);
  --shadow-card-hover:   0 20px 48px rgba(0,0,0,0.12);

  /* Movimiento */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-back:   cubic-bezier(0.36, 0, 0.66, -0.56);
  --dur-fast:       140ms;
  --dur-mid:        280ms;
  --dur-slow:       480ms;

  /* Layout */
  --container-max: 1280px;

  /* Variables Logo 3D Isométrico SRB */
  --cube-face-bg:       #FAF8F5;
  --cube-top-facet:     #EAE5DC;
  --cube-right-facet:   #D7D0C3;
  --cube-facet-stroke:  rgba(0, 0, 0, 0.09);
  --cube-text-color:    #2B2E36;
}

/* ── TEMA OSCURO ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-canvas:         #0E0E0E;
  --bg-card:           #1A1A1A;
  --bg-elevated:       #222222;
  --text-main:         #F2F0E8;
  --text-muted:        #888888;
  --color-border:      #2A2A2A;
  --color-border-dark: #374151;
  --color-dark-badge:  #1E293B;
  --color-badge-text:  #38BDF8;
  --nav-bg:            rgba(14, 14, 14, 0.90);
  --nav-link-color:    #888888;
  --nav-link-hover:    #F2F0E8;
  --shadow-offset:     4px 4px 0px 0px #000000;
  --shadow-card:       0 8px 32px rgba(0,0,0,0.32);

  /* Variables Logo 3D Isométrico SRB - Modo Oscuro */
  --cube-face-bg:       #181C24;
  --cube-top-facet:     #252B37;
  --cube-right-facet:   #13161D;
  --cube-facet-stroke:  rgba(255, 255, 255, 0.1);
  --cube-text-color:    #FFFFFF;
}

/* ── MODOS DE ACCESIBILIDAD ────────────────────────────────────────────────── */
body.zen-mode *, body.zen-mode *::before, body.zen-mode *::after {
  animation: none !important;
  transition: none !important;
}
body.high-contrast,
body.theme-high-contrast {
  --bg-canvas:    #000000 !important;
  --bg-card:      #111111 !important;
  --text-main:    #FFFFFF !important;
  --text-muted:   #FFFF00 !important;
  --color-border: #FFFFFF !important;

  /* Variables Logo 3D Isométrico SRB - Alto Contraste */
  --cube-face-bg:       #000000 !important;
  --cube-top-facet:     #141414 !important;
  --cube-right-facet:   #242424 !important;
  --cube-facet-stroke:  #FFFF00 !important;
  --cube-text-color:    #FFFF00 !important;
}

/* ── RESET & BASE ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }

body {
  font-family: var(--font-body);
  background-color: var(--bg-canvas);
  color: var(--text-main);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-main);
}
p { margin-bottom: 1rem; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
code { font-family: var(--font-mono); }
img, video { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN — MENÚ PROFESIONAL REFINADO
   ══════════════════════════════════════════════════════════════════════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--nav-shadow);
  transition:
    box-shadow var(--dur-mid) var(--ease-out-expo),
    background-color var(--dur-mid);
  will-change: box-shadow;
}
.navbar.scrolled {
  box-shadow: var(--nav-scrolled-shadow);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}

/* — Logo / Marca SRB (Six Reversible Boxer) — */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.star-accent {
  color: var(--color-coral);
  font-size: 1.15rem;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.brand-lockup:hover .star-accent {
  transform: rotate(45deg) scale(1.2);
}

/* — Logo SRB Multi-Tema (Claro, Oscuro, Contraste) con Tamaño Mejorado — */
.srb-brand-logo-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.brand-lockup:hover .srb-brand-logo-wrap {
  transform: translateY(-2px) scale(1.06);
}

.srb-logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  transition: transform var(--dur-fast) ease;
}

/* Modo Claro (Default) */
.srb-logo-light {
  display: block;
}

/* Modo Oscuro */
[data-theme="dark"] .srb-logo-light {
  display: none;
}
[data-theme="dark"] .srb-logo-dark {
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(255, 120, 50, 0.2));
}

/* Modo Alto Contraste */
[data-theme="contrast"] .srb-logo-light,
[data-theme="contrast"] .srb-logo-dark,
body.high-contrast .srb-logo-light,
body.high-contrast .srb-logo-dark,
body.theme-high-contrast .srb-logo-light,
body.theme-high-contrast .srb-logo-dark {
  display: none !important;
}
[data-theme="contrast"] .srb-logo-contrast,
body.high-contrast .srb-logo-contrast,
body.theme-high-contrast .srb-logo-contrast {
  display: block !important;
  filter: drop-shadow(0 0 4px #ffff00);
}

.srb-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.srb-wm-primary {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--text-main);
  transition: color var(--dur-fast);
}
.srb-wm-secondary {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur-fast);
}

/* Adaptación Texto Alto Contraste */
body.high-contrast .srb-wm-primary,
body.theme-high-contrast .srb-wm-primary,
[data-theme="contrast"] .srb-wm-primary {
  color: #FFFF00 !important;
}
body.high-contrast .srb-wm-secondary,
body.theme-high-contrast .srb-wm-secondary,
[data-theme="contrast"] .srb-wm-secondary {
  color: #FFFFFF !important;
}

/* — Links de Navegación Simplificados y Espaciados — */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nav-link-color);
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-fast) var(--ease-out-expo),
    background-color var(--dur-fast);
  white-space: nowrap;
}

.nav-link-drawer-only {
  display: none;
}

/* Línea inferior animada */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2.5px;
  background: var(--nav-line-active);
  border-radius: 2px;
  transform: translateX(-50%);
  transition:
    width var(--dur-mid) var(--ease-out-expo),
    background-color var(--dur-fast);
}

.nav-link:hover {
  color: var(--nav-link-hover);
  background-color: rgba(0,0,0,0.04);
}
.nav-link:hover::after { width: 60%; }

.nav-link.active {
  color: var(--text-main);
  font-weight: 600;
}
.nav-link.active::after {
  width: 80%;
  background-color: var(--color-coral);
}

/* — Acciones de Navbar — */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.btn-pill-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-dark);
  background-color: transparent;
  color: var(--text-main);
  cursor: pointer;
  transition:
    background-color var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
  white-space: nowrap;
}
.btn-pill-nav:hover {
  background-color: var(--text-main);
  color: var(--bg-canvas);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* — Selector de Idioma Global ES / PT / EN — */
.lang-selector-group {
  display: inline-flex;
  background: var(--bg-card);
  border: 1.5px solid var(--color-border-dark);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}
.lang-select-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.lang-select-btn:hover {
  color: var(--text-main);
}
.lang-select-btn.active {
  background: var(--text-main);
  color: var(--bg-canvas);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* — Botón Modo Oscuro — */
.btn-dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-dark);
  background-color: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-dark-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: inline; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: inline; }

/* — Hamburguesa (mobile) — */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast);
  z-index: 201;
}
.nav-toggle:hover { background-color: rgba(0,0,0,0.06); }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text-main);
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out-expo), opacity var(--dur-fast);
  transform-origin: center;
}
/* Animación X al abrir */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════════════════════════════════════════════
   HERO — MINERVA STYLE
   ══════════════════════════════════════════════════════════════════════════════ */
.hero {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  text-align: center;
}
.hero-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-header-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.star-accent-lg { color: var(--color-coral); font-size: 1.75rem; }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.badge-dark-pill {
  background-color: var(--color-dark-badge);
  color: var(--color-badge-text, #FFFFFF);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 800;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--dur-fast);
}
[data-theme="dark"] .badge-dark-pill {
  background-color: #1E293B;
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}
body.high-contrast .badge-dark-pill,
body.theme-high-contrast .badge-dark-pill {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
  box-shadow: none !important;
}
.hero-main-title {
  font-size: clamp(2.2rem, 6vw, 4.25rem);
  max-width: 900px;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.035em;
}
.hero-sublead {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--text-muted);
  max-width: 640px;
  margin-bottom: 2.25rem;
}
.hero-center-cta { margin-bottom: 3.5rem; }

.btn-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--text-main);
  color: var(--bg-canvas);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-pill);
  border: none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out-expo),
    box-shadow var(--dur-fast);
}
.btn-pill-dark:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,0.24);
}

/* ── Botones de Colores Interactivos (Hero Navigation) ─ */
.floating-stickers-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.35rem);
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.sticker {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-dark);
  box-shadow: var(--shadow-offset-small);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-mid) var(--ease-out-expo), box-shadow var(--dur-mid) var(--ease-out-expo), filter var(--dur-fast) ease;
}
.sticker:hover, .sticker:focus-visible {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  filter: brightness(1.1);
  outline: none;
}
.sticker:active {
  transform: translateY(-2px) scale(0.98) !important;
}
.sticker-pink   { background-color: var(--color-coral); color: #FFFFFF; }
.sticker-orange-circle { background-color: var(--color-orange); color: #FFFFFF; }
.sticker-green  { background-color: var(--color-green); color: #FFFFFF; }
.sticker-blue   { background-color: #2563EB; color: #FFFFFF; }
.sticker-yellow { background-color: var(--color-yellow); color: var(--color-border-dark); border-radius: var(--radius-sm); }
.tilt-left  { transform: rotate(-3deg); }
.tilt-right { transform: rotate(3deg); }

/* Adaptación Alto Contraste */
[data-theme="contrast"] .sticker {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  border: 2.5px solid #FFFF00 !important;
}
[data-theme="contrast"] .sticker:hover,
[data-theme="contrast"] .sticker:focus-visible {
  background-color: #FFFF00 !important;
  color: #000000 !important;
}

/* ── Isotipo Interactivo 3D SRB (Hover 45=S, 52=R, 12=B) ── */
.isotype-interactive-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
}
#srbIsotype {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08));
  transition: transform var(--dur-mid) var(--ease-out-expo), filter var(--dur-fast) ease;
}
.isotype-interactive-container:hover #srbIsotype,
#srbIsotype:focus-visible {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.16));
}
.srb-cube {
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.srb-cube:hover {
  filter: brightness(1.1);
}
.isotype-hover-caption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
  padding: 0.45rem 1rem;
  background: var(--bg-canvas);
  border: 1.5px dashed var(--color-border-dark);
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
  transition: all var(--dur-fast) ease;
}
.isotype-interactive-container:hover .isotype-hover-caption {
  color: var(--color-coral);
  border-color: var(--color-coral);
  border-style: solid;
  background: rgba(229, 57, 53, 0.06);
}


/* ══════════════════════════════════════════════════════════════════════════════
   SECCIONES & CARDS
   ══════════════════════════════════════════════════════════════════════════════ */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-bordered { border-top: 1px solid var(--color-border); }

.section-intro-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.intro-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg-card);
  border: 1px solid var(--color-border);
  display: inline-block;
  margin-bottom: 0.7rem;
}
.pill-red    { background-color: rgba(255,90,73,.12); color: var(--color-coral); }
.pill-orange { background-color: rgba(255,119,51,.12); color: var(--color-orange); }
.pill-blue   { background-color: rgba(59,130,246,.12); color: var(--color-blue); }
.pill-yellow { background-color: rgba(255,200,55,.15); color: #9A7200; }

.section-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.section-subheading {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--text-muted);
}

/* ── Grid 3 Cards ─ */
.grid-three-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.card-minerva {
  background-color: var(--bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-mid) var(--ease-out-expo),
    box-shadow var(--dur-mid),
    border-color var(--dur-mid);
  will-change: transform;
}
.card-minerva:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-dark);
}

.card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.card-title { font-size: 1.35rem; margin-bottom: 0.7rem; }
.card-text  { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.4rem; }

.card-ill-box {
  width: 100%;
  height: 200px;
  background-color: var(--bg-canvas);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.card-illustration { width: 100%; height: 100%; object-fit: cover; }
.card-solution .card-ill-box { background-color: #FFFFFF; }
.card-solution .card-illustration { object-fit: contain; background-color: #FFFFFF; }

.btn-card-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  border: 1.5px solid var(--color-border-dark);
  box-shadow: var(--shadow-offset-small);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.btn-card-pill:hover { transform: translate(-1px, -1px); }
.btn-mint   { background-color: var(--color-green); }
.btn-orange { background-color: var(--color-orange); }
.btn-blue   { background-color: var(--color-blue); }


/* ── Grid 2 Columnas ─ */
.grid-two-columns {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.features-pill-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}
.f-pill-item {
  display: flex;
  gap: 1.25rem;
  background-color: var(--bg-card);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur-fast), transform var(--dur-mid) var(--ease-out-expo);
}
.f-pill-item:hover { border-color: var(--color-border-dark); transform: translateX(4px); }
.f-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--color-coral); }
.f-pill-item h4 { font-size: 1rem; margin-bottom: 0.2rem; }
.f-pill-item p  { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0; }


/* ── Hardware/Apps Demostradores ─ */
.grid-boxer-app, .grid-mg40 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.boxer-simulator-card, .mg40-app-card {
  background-color: var(--bg-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-dark);
  box-shadow: var(--shadow-offset);
}
.sim-top-bar {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.sim-label { font-weight: 700; color: var(--color-coral); }

.boxer-hardware-layout {
  background-color: var(--bg-canvas);
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.boxer-buttons-grid, .mg40-quadrants-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.boxer-btn, .quadrant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border-dark);
  background-color: var(--bg-card);
  cursor: pointer;
  box-shadow: var(--shadow-offset-small);
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.boxer-btn:hover, .quadrant-btn:hover { transform: translate(-1px, -1px); }
.boxer-btn.active, .quadrant-btn.active { background-color: var(--color-orange); color: #FFF; }

.boxer-enter-btn, .btn-mg40-enter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem;
  background-color: var(--color-coral);
  color: #FFF;
  font-family: var(--font-display);
  font-weight: 700;
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-offset-small);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.boxer-enter-btn:hover, .btn-mg40-enter:hover { transform: translate(-1px,-1px); }

.boxer-display-box, .mg40-screen-box {
  background-color: var(--bg-canvas);
  border: 1.5px solid var(--color-border-dark);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.disp-char, .screen-result {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-coral);
}
.cognitive-metrics-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}
.c-metric  { text-align: center; }
.m-val     { font-family: var(--font-display); font-weight: 800; color: var(--color-green); font-size: 1rem; }
.m-title   { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }


/* ── Videos & Galería ─ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.video-card {
  background-color: var(--bg-card);
  padding: 1.6rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-dark);
  box-shadow: var(--shadow-offset);
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.video-card:hover { transform: translateY(-4px); }
.video-player-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border-dark);
  overflow: hidden;
  margin: 1rem 0;
}
.video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ── Fachada Interactiva de Video (Lite YouTube) ── */
.video-facade {
  cursor: pointer;
  background-color: #000;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.video-facade:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.video-facade:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 3px;
}
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-mid) var(--ease-out-expo), filter var(--dur-fast) ease;
}
.video-facade:hover .video-poster {
  transform: scale(1.04);
  filter: brightness(1.08);
}
.video-facade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  transition: opacity var(--dur-fast) ease;
}
.video-facade:hover .video-facade-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 100%);
}
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  border: none;
  pointer-events: none;
  z-index: 2;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.yt-play-svg {
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  transition: transform var(--dur-fast) var(--ease-out-expo), filter var(--dur-fast) ease;
}
.yt-play-bg {
  fill: #ff0000;
  transition: fill var(--dur-fast) ease;
}
.video-facade:hover .yt-play-svg,
.video-facade:focus-visible .yt-play-svg {
  transform: scale(1.15);
  filter: drop-shadow(0 6px 20px rgba(255, 0, 0, 0.65));
}
.video-facade:hover .yt-play-bg {
  fill: #cc0000;
}
.video-play-hint {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.04em;
  transition: all var(--dur-fast) ease;
  white-space: nowrap;
}
.video-facade:hover .video-play-hint,
.video-facade:focus-visible .video-play-hint {
  background: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
}
.video-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.video-footer {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.btn-video-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 0, 0, 0.08);
  color: #cc0000;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid rgba(255, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.08);
  transition: all var(--dur-fast) var(--ease-out-expo);
}
.btn-video-link svg { flex-shrink: 0; color: #ff0000; transition: transform var(--dur-fast) ease; }
.btn-video-link:hover, .btn-video-link:focus-visible {
  background-color: #ff0000;
  color: #ffffff;
  border-color: #ff0000;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.28);
}
.btn-video-link:hover svg, .btn-video-link:focus-visible svg {
  color: #ffffff;
  transform: scale(1.15);
}
[data-theme="dark"] .btn-video-link {
  background-color: rgba(255, 68, 68, 0.12);
  color: #ff6666;
  border-color: rgba(255, 68, 68, 0.35);
}
[data-theme="dark"] .btn-video-link svg { color: #ff4444; }
[data-theme="dark"] .btn-video-link:hover,
[data-theme="dark"] .btn-video-link:focus-visible {
  background-color: #ff3333;
  color: #ffffff;
}
[data-theme="contrast"] .btn-video-link {
  background-color: #000000;
  color: #ffff00;
  border: 2px solid #ffff00;
}
[data-theme="contrast"] .btn-video-link svg { color: #ffff00; }
[data-theme="contrast"] .btn-video-link:hover,
[data-theme="contrast"] .btn-video-link:focus-visible {
  background-color: #ffff00;
  color: #000000;
}
[data-theme="contrast"] .btn-video-link:hover svg,
[data-theme="contrast"] .btn-video-link:focus-visible svg {
  color: #000000;
}

.photo-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.photo-card { background-color: var(--bg-card); padding: 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.photo-wrapper { width: 100%; height: 180px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border-dark); margin-bottom: 0.8rem; }
.photo-img { width: 100%; height: 100%; object-fit: cover; }


/* ══════════════════════════════════════════════════════════════════════════════
   FAB ACCESIBILIDAD & BACK TO TOP
   ══════════════════════════════════════════════════════════════════════════════ */
.a11y-fab-container {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 900;
}
.a11y-fab-trigger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--text-main);
  color: var(--bg-canvas);
  border: 2px solid var(--color-border-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast);
}
.a11y-fab-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.a11y-fab-modal {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 300px;
  background-color: var(--bg-elevated);
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-offset);
  padding: 1.4rem;
  display: none;
  animation: fabModalIn var(--dur-mid) var(--ease-out-expo) forwards;
}
.a11y-fab-modal.active { display: block; }
@keyframes fabModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.a11y-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.btn-close-modal { background: none; border: none; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.a11y-item { margin-bottom: 0.9rem; }
.a11y-item label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); display: block; margin-bottom: 0.3rem; }

/* — Botón Volver Arriba — */
.back-to-top-btn {
  position: fixed;
  bottom: 1.75rem;
  right: 5.75rem;
  z-index: 899;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 2px solid var(--color-border-dark);
  box-shadow: var(--shadow-offset-small);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur-mid),
    visibility var(--dur-mid),
    transform var(--dur-mid) var(--ease-out-expo);
}
.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top-btn:hover { transform: translateY(-3px); }


/* ══════════════════════════════════════════════════════════════════════════════
   BOTONES GENÉRICOS
   ══════════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background-color var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
}
.btn-primary { background-color: var(--color-coral); color: #FFF; border-color: var(--color-coral); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,90,73,.35); }
.btn-secondary { background-color: var(--bg-card); color: var(--text-main); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-border-dark); }
.btn-secondary.active { background-color: var(--text-main); color: var(--bg-canvas); border-color: var(--color-border-dark); }
.btn-small { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.btn-group { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dot-indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-green);
}


/* ══════════════════════════════════════════════════════════════════════════════
   FORMULARIO & FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
.contact-form-wrapper {
  max-width: 640px;
  margin: 0 auto;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  letter-spacing: 0.06em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  transition: border-color var(--dur-fast);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(255,90,73,.12);
}
.form-feedback { padding: 0.85rem 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; margin-top: 1rem; }
.form-feedback.success { background-color: rgba(46,196,182,.12); color: var(--color-green); border: 1px solid var(--color-green); }

.footer {
  background-color: var(--bg-canvas);
  border-top: 1px solid var(--color-border);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-copy  { font-size: 0.82rem; color: var(--text-muted); }
.footer-links { display: flex; gap: 1.25rem; font-size: 0.82rem; font-family: var(--font-mono); flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--text-main); }


/* ══════════════════════════════════════════════════════════════════════════════
   CLASES UTILITARIAS GSAP (visibilidad pre-animación)
   ══════════════════════════════════════════════════════════════════════════════ */
.gsap-fade-up    { opacity: 0; transform: translateY(40px); }
.gsap-fade-in    { opacity: 0; }
.gsap-scale-in   { opacity: 0; transform: scale(0.88); }
.gsap-slide-left { opacity: 0; transform: translateX(-40px); }


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Breakpoints
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tablet landscape (≤ 1200px) */
@media (max-width: 1200px) {
  .grid-three-cards { grid-template-columns: repeat(2, 1fr); }
  .photo-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .btn-pill-nav { display: none; } /* Ocultar CTA pill en tablet */
}

/* Tablet portrait / laptops pequeños (≤ 1080px) */
@media (max-width: 1080px) {
  :root { --nav-height: 62px; }

  /* Menú mobile: panel deslizante desde arriba */
  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background-color: var(--bg-canvas);
    border-bottom: 2px solid var(--color-border);
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 0 1.25rem 0;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    /* Oculto por defecto */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity var(--dur-mid) var(--ease-out-expo),
      transform var(--dur-mid) var(--ease-out-expo);
    z-index: 999;
  }
  .nav-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link {
    padding: 0.85rem 1.75rem;
    border-radius: 0;
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-link::after { bottom: 0; width: 0 !important; height: 3px; border-radius: 0; }
  .nav-link.active::after { width: 100% !important; }

  .nav-link.nav-link-drawer-only {
    display: flex;
  }
  .nav-toggle { display: flex; }
  .btn-pill-nav { display: none; } /* Ocultar CTA en navbar para evitar solapamiento */
  .social-sidebar-left { display: none !important; } /* Ocultar barra flotante lateral en tablets/móviles */

  .grid-two-columns,
  .grid-boxer-app,
  .grid-mg40,
  .video-grid { grid-template-columns: 1fr; }
  .photo-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet pequeña / móvil grande (≤ 768px) */
@media (max-width: 768px) {
  .grid-three-cards { grid-template-columns: 1fr; }
  .photo-gallery-grid { grid-template-columns: 1fr; }
  .cognitive-metrics-box { grid-template-columns: repeat(2, 1fr); }

  .a11y-fab-container { bottom: 1.25rem; right: 1.25rem; }
  .back-to-top-btn { right: 5rem; bottom: 1.25rem; }
  .a11y-fab-modal { width: calc(100vw - 2.5rem); right: 0; }
}

/* Móvil pequeño (≤ 480px) */
@media (max-width: 480px) {
  .floating-stickers-container { gap: 0.6rem; }
  .sticker { font-size: 0.75rem; padding: 0.5rem 1rem; }
  .cognitive-metrics-box { grid-template-columns: 1fr; }
  .footer-container { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 0.75rem; }
}

/* Reducción de movimiento (accesibilidad del sistema) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   CANVAS 3D EN EL HERO (6 PUNTOS TÁCTILES SIN COLORES)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-3d-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  z-index: 1;
}
.hero-wrapper {
  position: relative;
  z-index: 5;
}

/* ==========================================================================
   BARRA SOCIAL FLOTANTE A LA IZQUIERDA (Estilo pagina-proyecto)
   ========================================================================== */
.social-sidebar-left {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 150;
  background: var(--bg-card);
  padding: 16px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.social-sidebar-left a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  background: var(--bg-canvas);
  border: 1px solid var(--color-border);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-sidebar-left a:hover {
  color: #FFFFFF;
  background: #F59E0B;
  border-color: #F59E0B;
  transform: scale(1.15);
}
.social-sidebar-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--text-muted);
  margin-top: 8px;
}
@media (max-width: 992px) {
  .social-sidebar-left { display: none !important; }
}

/* ==========================================================================
   BOTÓN FLOTANTE Y MENÚ MODAL DE ACCESIBILIDAD (Estilo pagina-proyecto)
   ========================================================================== */
.floating-a11y-btn {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 9990;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F59E0B;
  color: #0F172A;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-a11y-btn:hover {
  transform: scale(1.1);
  background: #D97706;
  color: #FFFFFF;
}

.acc-vertical-menu {
  position: fixed;
  top: 85px;
  right: 20px;
  z-index: 9999;
  width: 290px;
  background: var(--bg-card);
  border: 2px solid var(--color-border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  display: none;
  flex-direction: column;
  gap: 1rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.acc-vertical-menu.show-acc-menu {
  display: flex;
  animation: a11yFadeIn 0.2s ease-out forwards;
}
@keyframes a11yFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.acc-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}
.btn-acc-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-muted);
}
.btn-acc-close:hover { color: var(--text-main); }

.acc-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.acc-section-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.acc-icons-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.btn-acc-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  background-color: var(--bg-canvas);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-acc-item:hover {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.08);
}
.btn-acc-item.active {
  background-color: #F59E0B;
  color: #000000;
  border-color: #F59E0B;
  font-weight: 800;
}

/* ==========================================================================
   TEMAS VISUALES DE ACCESIBILIDAD Y ALTO CONTRASTE (WCAG AAA)
   ========================================================================== */
body.theme-high-contrast {
  --bg-canvas: #000000 !important;
  --bg-card: #0A0A0A !important;
  --bg-elevated: #141414 !important;
  --text-main: #FFFFFF !important;
  --text-muted: #FFFF00 !important;
  --color-border: #FFFFFF !important;
  --color-border-dark: #FFFFFF !important;
  --nav-bg: #000000 !important;
  --nav-link-color: #FFFFFF !important;
  --nav-link-hover: #FFFF00 !important;
}
body.theme-high-contrast a,
body.theme-high-contrast button,
body.high-contrast a,
body.high-contrast button {
  border-color: #FFFFFF !important;
}
body.theme-high-contrast .sticker,
body.high-contrast .sticker {
  background: #000000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
  box-shadow: none !important;
}
body.theme-high-contrast .btn-card-pill,
body.high-contrast .btn-card-pill,
body.theme-high-contrast .btn-pill-dark,
body.high-contrast .btn-pill-dark {
  background: #000000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
}
body.theme-high-contrast .card-minerva,
body.high-contrast .card-minerva {
  border: 2px solid #FFFFFF !important;
}
body.theme-high-contrast .intro-pill,
body.high-contrast .intro-pill {
  background: #000000 !important;
  color: #FFFF00 !important;
  border: 1.5px solid #FFFF00 !important;
}
html:not([data-theme="dark"]) body.theme-light-sensory {
  --bg-canvas: #FAF9F6 !important;
  --bg-card: #FFFFFF !important;
}
[data-theme="dark"] body.theme-light-sensory {
  --bg-canvas: #0D1117 !important;
  --bg-card: #161B22 !important;
  --text-main: #F0F6FC !important;
}
body.theme-dark-relaxing {
  --bg-canvas: #0D1117 !important;
  --bg-card: #161B22 !important;
  --bg-elevated: #21262D !important;
  --text-main: #F0F6FC !important;
  --text-muted: #8B949E !important;
  --color-border: #30363D !important;
}

/* Micro-animación para el Isotipo 3D interactivo */
@keyframes srbPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1); }
}
.pulse-anim {
  animation: srbPulse 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   SECCIÓN CONTACTO INSTITUCIONAL & CANALES DIRECTOS (SRB & SISTEMA PRD)
   ========================================================================== */
.grid-contact {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .grid-contact {
    grid-template-columns: 1fr;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-group label {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.text-input,
.select-input,
.textarea-input {
  width: 100%;
  padding: 0.85rem 1.05rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background-color: var(--bg-canvas);
  color: var(--text-main);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.text-input:focus,
.select-input:focus,
.textarea-input:focus {
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.textarea-input {
  resize: vertical;
  min-height: 110px;
}

.btn-pill-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  background: #0F172A;
  color: #FFFFFF;
  border: 1px solid #1E293B;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}
.btn-pill-dark:hover:not(:disabled) {
  background: #1E293B;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}
.btn-pill-dark:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

[data-theme="dark"] .btn-pill-dark {
  background: #F59E0B;
  color: #0F172A;
  border-color: #F59E0B;
}
[data-theme="dark"] .btn-pill-dark:hover:not(:disabled) {
  background: #D97706;
  color: #FFFFFF;
}

[data-theme="dark"] .text-input,
[data-theme="dark"] .select-input,
[data-theme="dark"] .textarea-input,
body.theme-dark-relaxing .text-input,
body.theme-dark-relaxing .select-input,
body.theme-dark-relaxing .textarea-input {
  background-color: #0D1117;
  color: #F2F0E8;
  border-color: #30363D;
}
[data-theme="dark"] .text-input::placeholder,
[data-theme="dark"] .textarea-input::placeholder,
body.theme-dark-relaxing .text-input::placeholder,
body.theme-dark-relaxing .textarea-input::placeholder {
  color: #8B949E;
}

body.theme-high-contrast .text-input,
body.theme-high-contrast .select-input,
body.theme-high-contrast .textarea-input {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  border-color: #FFFFFF !important;
}
body.theme-high-contrast .text-input::placeholder,
body.theme-high-contrast .textarea-input::placeholder {
  color: #AAAAAA !important;
}

/* Feedback de estado accesible */
.form-feedback {
  display: none;
  margin-top: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
}
.form-feedback.success {
  display: block;
  background-color: #ECFDF5;
  color: #065F46;
  border: 1.5px solid #10B981;
}
.form-feedback.error {
  display: block;
  background-color: #FEF2F2;
  color: #991B1B;
  border: 1.5px solid #EF4444;
}
.form-feedback.info {
  display: block;
  background-color: #EFF6FF;
  color: #1E40AF;
  border: 1.5px solid #3B82F6;
}

[data-theme="dark"] .form-feedback.success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6EE7B7;
  border-color: #10B981;
}
[data-theme="dark"] .form-feedback.error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #FCA5A5;
  border-color: #EF4444;
}
[data-theme="dark"] .form-feedback.info {
  background-color: rgba(59, 130, 246, 0.15);
  color: #93C5FD;
  border-color: #3B82F6;
}

body.theme-high-contrast .form-feedback {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
}

/* Tarjeta de información institucional y canales directos */
.contact-info-card {
  padding: 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.contact-info-card .card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.65rem;
}
.info-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.info-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.info-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}

.direct-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.4rem;
}
.btn-direct-contact {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.15rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-whatsapp-direct {
  background: rgba(37, 211, 102, 0.12);
  color: #059669;
  border: 1.5px solid rgba(37, 211, 102, 0.4);
}
.btn-whatsapp-direct:hover {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}
.btn-email-direct {
  background: var(--bg-canvas);
  color: var(--text-main);
  border: 1.5px solid var(--color-border);
}
.btn-email-direct:hover {
  border-color: #F59E0B;
  color: #F59E0B;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECCIONES DE STARTUP: TRACCIÓN, RECONOCIMIENTOS, MERCADO, VALIDACIÓN Y EQUIPO
   ══════════════════════════════════════════════════════════════════════════════ */

/* Grid de Tarjetas de Tracción y Reconocimientos */
.traction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.traction-card {
  background: var(--bg-card);
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-offset);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--dur-mid) var(--ease-out-expo), box-shadow var(--dur-mid) var(--ease-out-expo);
}

.traction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.traction-logo-wrap {
  width: 100%;
  height: 160px;
  background: #FFFFFF;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

[data-theme="dark"] .traction-logo-wrap {
  background: #181818;
  border-color: #333333;
}

.traction-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--dur-fast) ease;
}

.traction-card:hover .traction-logo-img {
  transform: scale(1.03);
}

.traction-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
  background: var(--color-dark-badge);
  color: #FFFFFF;
}

.traction-badge.badge-finep { background: #0284C7; color: #FFFFFF; }
.traction-badge.badge-caie  { background: #D97706; color: #FFFFFF; }
.traction-badge.badge-darwin{ background: #059669; color: #FFFFFF; }

.traction-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: var(--text-main);
}

.traction-org {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-coral);
  margin-bottom: 0.85rem;
  display: block;
}

.traction-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.traction-highlight {
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--color-coral);
  padding: 0.65rem 0.85rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

[data-theme="dark"] .traction-highlight {
  background: rgba(255, 255, 255, 0.05);
}

/* Grids de Métricas: Mercado y Validación */
.metrics-section-block {
  margin-top: 2.5rem;
}

.metrics-block-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.metrics-block-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
}

.metric-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem;
}

.metric-stat-card {
  background: var(--bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.metric-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-coral);
}

.metric-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-coral);
  margin-bottom: 0.65rem;
  letter-spacing: -0.03em;
}

.metric-stat-num.num-blue  { color: #2563EB; }
.metric-stat-num.num-green { color: #059669; }

.metric-stat-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.metric-stat-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Grid de Modelo de Despliegue e Impacto (Sin Precios) */
.model-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.model-impact-card {
  background: var(--bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) ease;
}

.model-impact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.model-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--text-main);
}

.model-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--text-main);
}

.model-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.model-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.model-features-list li {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.model-features-list li::before {
  content: "✔";
  color: #059669;
  font-weight: bold;
}

/* Grid de Por Qué Nosotros (Equipo & Propósito) */
.team-purpose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.team-card {
  background: var(--bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.team-card-icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.team-card-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
}

.team-card-role {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-coral);
  text-transform: uppercase;
}

.team-card-text {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRENSA HISTÓRICA & RECONOCIMIENTOS EN VENEZUELA Y AMÉRICA LATINA
   ══════════════════════════════════════════════════════════════════════════════ */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.press-card {
  background: var(--bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--dur-mid) var(--ease-out-expo), box-shadow var(--dur-mid) var(--ease-out-expo), border-color var(--dur-fast);
}

.press-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-dark);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.press-img-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  background: #111111;
  overflow: hidden;
  cursor: zoom-in;
}

.press-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}

.press-card:hover .press-img {
  transform: scale(1.05);
}

.press-img-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.78);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.press-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.press-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.press-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-dark-badge);
  color: #FFFFFF;
}

.press-badge.badge-newspaper { background: #1E3A8A; color: #FFFFFF; }
.press-badge.badge-magazine  { background: #7C2D12; color: #FFFFFF; }
.press-badge.badge-award     { background: #B45309; color: #FFFFFF; }

.press-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.press-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
  color: var(--text-main);
  line-height: 1.3;
}

.press-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.press-expand-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-coral);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  transition: gap 0.2s ease;
}

.press-expand-btn:hover {
  gap: 0.6rem;
}

/* Pestañas de filtrado de prensa */
.press-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.press-tab-btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.press-tab-btn.active, .press-tab-btn:hover {
  background: var(--text-main);
  color: var(--bg-canvas);
  border-color: var(--text-main);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAL LIGHTBOX UNIVERSAL (AMPLIACIÓN DE IMÁGENES ACCESIBLE)
   ══════════════════════════════════════════════════════════════════════════════ */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(94vw, 1050px);
  max-height: 90vh;
  background: var(--bg-card);
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: zoomInModal 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomInModal {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border-dark);
  background: var(--bg-canvas);
  color: var(--text-main);
  font-size: 1.35rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, background-color 0.2s ease;
  box-shadow: var(--shadow-offset-small);
}

.lightbox-close-btn:hover {
  transform: scale(1.1) rotate(90deg);
  background: var(--color-coral);
  color: #FFFFFF;
}

.lightbox-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0A0A;
  max-height: 65vh;
  overflow: hidden;
  padding: 0.5rem;
}

.lightbox-img {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox-caption-container {
  padding: 1.25rem 1.75rem;
  background: var(--bg-card);
  border-top: 1px solid var(--color-border);
  overflow-y: auto;
  max-height: 25vh;
}

.lightbox-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  color: #FFFFFF;
  display: inline-block;
  margin-bottom: 0.45rem;
}

.lightbox-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: var(--text-main);
}

.lightbox-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 640px) {
  .lightbox-modal {
    padding: 0.5rem;
  }
  .lightbox-dialog {
    max-height: 94vh;
  }
  .lightbox-image-wrap {
    max-height: 52vh;
    padding: 0.25rem;
  }
  .lightbox-img {
    max-height: 50vh;
  }
  .lightbox-caption-container {
    padding: 1rem;
    max-height: 38vh;
  }
  .lightbox-title {
    font-size: 1.05rem;
  }
  .lightbox-desc {
    font-size: 0.82rem;
  }
  .lightbox-close-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
}

/* Indicador visual de zoom para fotos de galería y evidencias */
.photo-wrapper, .traction-logo-wrap, .card-ill-box {
  cursor: zoom-in;
  position: relative;
}

.photo-wrapper::after, .card-ill-box::after {
  content: "🔍";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.photo-card:hover .photo-wrapper::after,
.card-minerva:hover .card-ill-box::after {
  opacity: 1;
  transform: scale(1.1);
}