/**
 * Beach Concept® - Interactive Pitch Deck
 * Stylesheet (styles.css)
 * 
 * Rules:
 * - Anti-IA Cliches: NO neon glows, NO cyan/magenta synthetic halos, NO heavy drop-shadows.
 * - Organic Luxury Editorial Aesthetic: Clean geometric lines, refined typography, warm neutrals & deep navy.
 * - Colors: Navy (#2D3359), Ocean Blue (#3C589E), Coral Pink (#E888A5), Soft Pink (#F0B2C3), Sand Off-White (#EFECE6).
 * - 100% Offline-Ready: Local fonts and zero external CDN assets.
 */

/* ==========================================================================
   1. FONTS & DESIGN TOKENS
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/montserrat-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/montserrat-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/montserrat-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/montserrat-800.woff2') format('woff2');
}

:root {
  /* Brand Palette */
  --color-primary-navy:   #2D3359;
  --color-navy-dark:      #212644;
  --color-navy-deepest:   #171A2E;
  --color-navy-mid:       #252A4A;
  --color-ocean-blue:     #3C589E;
  --color-coral-pink:     #E888A5;
  --color-coral-hover:    #D9708F;
  --color-coral-glow:     rgba(232, 136, 165, 0.22);
  --color-soft-pink:      #F0B2C3;
  --color-sand-offwhite:  #EFECE6;
  --color-sand-warm:      #F9F7F3;
  --color-sand-card:      #F6F4F0;
  --color-val-green:      #10B981;
  --color-alert-red:      #EF4444;
  --color-white:          #FFFFFF;
  --color-text-dark:      #1E2238;
  --color-text-muted:     #64748B;
  --color-border-light:   rgba(45, 51, 89, 0.12);
  --color-border-dark:    rgba(255, 255, 255, 0.14);

  /* Tipografía escalada */
  --font-display:         56px;
  --font-h1-hero:         48px;
  --font-h1-std:          34px;
  --font-kpi-large:       52px;

  /* Easings */
  --easing-spring:        cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:        0.2s;
  --duration-mid:         0.38s;
  --duration-slow:        0.65s;

  /* Dimensions & Rails */
  --sidebar-collapsed-w:  68px;
  --sidebar-expanded-w:   290px;
  --topbar-height:        56px;
  --controlbar-height:    52px;
  --border-radius-sm:     6px;
  --border-radius-md:     10px;
  --border-radius-lg:     16px;
  --transition-smooth:    all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. BASE RESET & VIEWPORT
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-primary-navy);
  color: var(--color-text-dark);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* App Shell Layout */
#app {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   3. SIDEBAR OVERLAY DRAWER & PEEKING TAB
   ========================================================================== */

/* Pestaña flotante asomada en el borde izquierdo con flecha > */
.sidebar-peeking-tab {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 52px;
  background: var(--color-primary-navy);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: none;
  border-radius: 0 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 990;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
  color: var(--color-coral-pink);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-peeking-tab:hover {
  background: var(--color-coral-pink);
  color: #fff;
  width: 32px;
}

body.on-slide-00 .sidebar-peeking-tab,
body.on-slide-00 .sidebar-rail {
  display: none !important;
  pointer-events: none !important;
}

.sidebar-rail {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background-color: var(--color-primary-navy);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 14px 0 40px rgba(0, 0, 0, 0.55);
  user-select: none;
}

.sidebar-rail.open,
.sidebar-rail.expanded {
  transform: translateX(0);
}

/* Header de Sidebar con botón < para cerrar */
.sidebar-header {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-coral-pink);
  flex-shrink: 0;
}

.sidebar-brand-title {
  display: flex;
  flex-direction: column;
  opacity: 1;
  pointer-events: auto;
}

.sidebar-brand-title h1 {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.5px;
}

.sidebar-brand-title span {
  font-size: 9px;
  color: var(--color-soft-pink);
  text-transform: uppercase;
  font-weight: 600;
}

.sidebar-close-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-sand-offwhite);
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  transition: var(--transition-smooth);
}

.sidebar-close-arrow:hover {
  background: var(--color-coral-pink);
  border-color: var(--color-coral-pink);
  color: var(--color-white);
}

/* Barra de progreso global en Sidebar */
.sidebar-progress {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: none;
}

.sidebar-rail.expanded .sidebar-progress {
  display: block;
}

.sidebar-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-soft-pink);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-progress-track {
  background: rgba(255, 255, 255, 0.1);
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}

.sidebar-progress-bar {
  background: var(--color-coral-pink);
  height: 100%;
  width: 0%;
  transition: width 0.35s ease;
}

/* Lista de Diapositivas */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--border-radius-sm);
  color: #B5B9D0;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  white-space: nowrap;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-white);
}

.sidebar-item.active {
  background: rgba(232, 136, 165, 0.13);
  color: var(--color-white);
  border-left: 3px solid var(--color-coral-pink);
  box-shadow: inset 0 0 0 1px rgba(232, 136, 165, 0.22);
}

.sidebar-item-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #8E94B3;
  transition: color 0.2s ease;
}

.sidebar-item.active .sidebar-item-icon {
  color: var(--color-coral-pink);
  background: transparent;
  box-shadow: none;
}

.sidebar-item-text {
  display: flex;
  flex-direction: column;
  opacity: 1;
  pointer-events: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item-num {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-soft-pink);
  text-transform: uppercase;
}

.sidebar-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-sand-offwhite);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer de Sidebar */
.sidebar-footer {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-mode-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-soft-pink);
  overflow: hidden;
  white-space: nowrap;
}

.mode-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--color-val-green);
}

.mode-label {
  opacity: 1;
}

/* ==========================================================================
   4. STAGE VIEWPORT & SLIDES ENGINE
   ========================================================================== */

.presentation-stage {
  flex: 1;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-navy);
}

/* Slide Container */
.slides-viewport {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  display: flex;
  flex-direction: column;
  transition: opacity 0.45s var(--easing-spring), transform 0.45s var(--easing-spring), visibility 0s linear 0.45s;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-sand-offwhite);
  color: var(--color-text-dark);
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 10;
  transition: opacity 0.45s var(--easing-spring), transform 0.45s var(--easing-spring), visibility 0s linear 0s;
}

.slide::-webkit-scrollbar {
  width: 6px;
}

.slide::-webkit-scrollbar-thumb {
  background: rgba(45, 51, 89, 0.2);
  border-radius: 3px;
}

/* Slide Colors Variant */
.slide.theme-dark {
  background: var(--color-primary-navy);
  color: var(--color-white);
}

.slide.theme-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* Slide Inner Container (Center 16:9 Max Width) */
.slide-content-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 40px 56px 100px;
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

/* F1.5 — Watermark de marca en todos los slides (excepto Slide 00) */
.slide-content-wrap::after {
  content: 'BEACH CONCEPT®';
  position: fixed;
  bottom: 68px;
  right: 28px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary-navy);
  opacity: 0.055;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

.slide.theme-dark .slide-content-wrap::after {
  color: var(--color-white);
  opacity: 0.06;
}

/* Slide Header & Metadata */
.slide-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  min-height: 28px;
}

.slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--color-primary-navy);
  color: var(--color-white);
}

.slide.theme-dark .slide-tag {
  background: var(--color-coral-pink);
  color: var(--color-white);
}

.slide-category {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ocean-blue);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.slide.theme-dark .slide-category {
  color: var(--color-soft-pink);
}

/* Typography Hierarchy */
.slide-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.5px;
  color: var(--color-primary-navy);
  margin-bottom: 10px;
}

/* F1.1 — Hero title más grande para Slide 01 (tesis central) */
#slide-01 .slide-title {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.15;
}

/* Línea decorativa coral bajo el slide-tag (en todos los slides) */
.slide-meta-bar {
  position: relative;
  margin-bottom: 16px;
  min-height: 28px;
}

.slide-tag::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-coral-pink);
  border-radius: 2px;
  margin-top: 5px;
}

.slide.theme-dark .slide-title {
  color: var(--color-white);
}

.slide-subtitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-coral-pink);
  margin-bottom: 12px;
}

.slide-desc {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #4A5073;
  max-width: 950px;
  margin-bottom: 22px;
}

.slide.theme-dark .slide-desc {
  color: #D3D7E8;
}

/* ==========================================================================
   5. SLIDE 00: GATEKEEPER SCREEN
   ========================================================================== */

#slide-00 {
  background: var(--color-navy-dark);
  overflow: hidden;
}

/* Ocultar menú lateral y barra de navegación en Slide 00 */
body.on-slide-00 .sidebar-rail,
body.on-slide-00 .presentation-toolbar {
  display: none !important;
}

.gatekeeper-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  filter: brightness(0.95) saturate(1.15);
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.gatekeeper-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 40%, rgba(23, 26, 46, 0.20) 0%, rgba(23, 26, 46, 0.45) 70%, rgba(23, 26, 46, 0.58) 100%);
  pointer-events: none;
}

.gatekeeper-card {
  position: relative;
  z-index: 10;
  max-width: 720px;
  margin: auto;
  text-align: center;
  background: rgba(33, 38, 68, 0.52);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--border-radius-lg);
  padding: 52px 48px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: gatekeeperCardIn 0.8s var(--easing-spring) forwards;
}

@keyframes gatekeeperCardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.gatekeeper-logo {
  max-height: 58px;
  margin-bottom: 20px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

/* Línea coral de firma de marca en gatekeeper */
.gatekeeper-card::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-coral-pink);
  border-radius: 2px;
  margin: 0 auto 22px;
}

.gatekeeper-title {
  font-size: 34px;
  font-weight: 900;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.gatekeeper-sub {
  font-size: 15px;
  font-weight: 400;
  color: #D6DAEC;
  line-height: 1.65;
  margin-bottom: 10px;
}

/* Strip de credenciales de impacto */
.gatekeeper-credentials {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-soft-pink);
  letter-spacing: 0.3px;
  opacity: 0.85;
  margin-bottom: 28px;
}

/* Botón Principal Desarrollador */
.btn-gatekeeper-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-coral-pink);
  color: var(--color-white);
  padding: 16px 36px;
  border-radius: var(--border-radius-md);
  font-size: 16px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 16px rgba(232, 136, 165, 0.3);
}

.btn-gatekeeper-primary:hover {
  background: var(--color-coral-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(232, 136, 165, 0.45);
}

/* Modulo Esquina Orador */
.gatekeeper-speaker-box {
  position: absolute;
  bottom: 24px;
  right: 28px;
  z-index: 20;
  background: rgba(33, 38, 68, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.speaker-box-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-soft-pink);
  white-space: nowrap;
}

.speaker-pwd-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--color-white);
  width: 100px;
  outline: none;
  transition: border-color 0.2s ease;
}

.speaker-pwd-input:focus {
  border-color: var(--color-coral-pink);
}

.btn-speaker-go {
  background: var(--color-ocean-blue);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-speaker-go:hover {
  background: var(--color-coral-pink);
}

/* ==========================================================================
   6. SLIDE 01: HERO COVER
   ========================================================================== */

.hero-cover-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: flex-start;
}

.hero-stats-row {
  display: flex;
  gap: 20px;
  margin-top: 78px;
}

/* F1.2 — KPI numbers grandes */
.hero-stat-num {
  font-size: 52px;
  font-weight: 900;
  color: var(--color-coral-pink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.hero-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #CBD2EB;
  margin-top: 6px;
  line-height: 1.35;
}

/* F1.9 — Hover uniform en hero stat cards */
.hero-stat-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius-md);
  padding: 16px 20px;
  flex: 1;
  transition: transform 0.25s var(--easing-spring), box-shadow 0.25s ease, border-color 0.25s ease;
}

.hero-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(232, 136, 165, 0.18);
  border-color: rgba(232, 136, 165, 0.4);
}

.hero-render-card {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  aspect-ratio: 16 / 10;
}

#slide-01 .hero-render-card {
  margin-top: 100px;
}

.hero-render-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.hero-render-card:hover .hero-render-img {
  transform: scale(1.03);
}

.hero-render-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(45, 51, 89, 0.9);
  backdrop-filter: blur(6px);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   7. SLIDE 02: DIAGNÓSTICO & LINE CHART
   ========================================================================== */

.diagnostico-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 36px;
  align-items: stretch;
}

.diagnostico-takeaways {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* F1.9 — Hover uniforme en diag-cards */
.diag-card {
  background: var(--color-sand-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: 16px 18px;
  border-left: 4px solid var(--color-alert-red);
  transition: transform 0.25s var(--easing-spring), box-shadow 0.25s ease;
}

.diag-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(45, 51, 89, 0.12);
}

.diag-card.diag-positive {
  border-left-color: var(--color-val-green);
  background: #EFF9F5;
}

.diag-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary-navy);
  margin-bottom: 4px;
}

.diag-card-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.chart-card-wrapper {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: 0 4px 16px rgba(45, 51, 89, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   8. SLIDE 03: FORMATOS 1 VS 2
   ========================================================================== */

.format-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.format-tab-bar {
  display: inline-flex;
  background: var(--color-sand-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: 4px;
  gap: 6px;
}

.btn-format-tab {
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  background: transparent;
  color: var(--color-primary-navy);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-format-tab.active {
  background: #E888A5;
  color: #2D3359;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(232, 136, 165, 0.35);
}

.format-panels-wrap {
  position: relative;
  min-height: 420px;
}

/* Modo Lado a Lado en Slide 03 */
.format-panels-wrap.side-by-side {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.format-panels-wrap.side-by-side .format-panel {
  display: flex !important;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: 0 4px 16px rgba(45, 51, 89, 0.06);
}

.format-panels-wrap.side-by-side .hero-render-card {
  order: -1;
  width: 100%;
  height: 200px;
  margin-bottom: 16px;
}

.format-panel {
  display: none;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
}

.format-panel.active {
  display: grid;
}

.format-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.format-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.format-info-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(60, 88, 158, 0.15);
  color: var(--color-ocean-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
}

/* ==========================================================================
   9. SLIDE 04: BENTO GRID
   ========================================================================== */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 16px;
}

.bento-card {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-sand-card);
  cursor: pointer;
  min-height: 180px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45, 51, 89, 0.16);
}

.bento-span-2 {
  grid-column: span 2;
}

.bento-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.bento-card:hover .bento-card-bg {
  transform: scale(1.05);
}

.bento-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(45, 51, 89, 0.05) 0%, rgba(45, 51, 89, 0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  color: var(--color-white);
  box-sizing: border-box;
}

.bento-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(45, 51, 89, 0.85);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: var(--color-soft-pink);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 5;
}

.bento-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.25;
}

.bento-card-subtitle {
  font-size: 11px;
  color: #CBD2EB;
  margin-top: 3px;
  line-height: 1.35;
}

/* ==========================================================================
   10. SLIDE 05: ROI SIMULATOR — REDISEÑO 2-COLUMN BENTO
   ========================================================================== */

/* Slide wrapper: altura y padding estandarizados con el resto de los slides */
.roi-slide-wrap {
  padding: 44px 56px 60px !important;
  justify-content: flex-start !important;
  display: flex;
  flex-direction: column;
}

.roi-slide-wrap .slide-meta-bar {
  margin-bottom: 18px;
  flex-shrink: 0;
}

/* ── MASTER GRID: 2 columnas ─────────────────────────── */
.roi-master-grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Separador vertical coral entre columnas */
.roi-master-grid::after {
  content: '';
  position: absolute;
  left: 42%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(232,136,165,0.45), transparent);
  pointer-events: none;
}

/* ── PANEL IZQUIERDO ─────────────────────────────────── */
.roi-left-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: 22px 24px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(45, 51, 89, 0.06);
}

.roi-panel-header {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-coral-pink);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── PRESETS (pills) ─────────────────────────────────── */
.roi-presets-row {
  display: flex;
  gap: 6px;
}

.roi-preset-btn {
  flex: 1;
  padding: 7px 6px;
  background: var(--color-sand-card);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary-navy);
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: center;
}

.roi-preset-btn:hover {
  background: rgba(232, 136, 165, 0.12);
  border-color: var(--color-coral-pink);
}

.roi-preset-btn.active {
  background: var(--color-primary-navy);
  color: var(--color-white);
  border-color: var(--color-primary-navy);
}

/* ── SLIDERS ─────────────────────────────────────────── */
.roi-slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roi-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-navy);
}

.roi-slider-val {
  background: var(--color-coral-pink);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* F2.3 — Track activo con gradiente coral */
.roi-range-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--color-coral-pink) 0%,
    var(--color-coral-pink) var(--slider-pct, 25%),
    #E2E4EB var(--slider-pct, 25%),
    #E2E4EB 100%
  );
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background 0.1s ease;
}

.roi-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-coral-pink);
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(232, 136, 165, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.roi-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(232, 136, 165, 0.6);
}

.roi-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-coral-pink);
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(232, 136, 165, 0.45);
  cursor: pointer;
}

/* ── GRÁFICO DE BARRAS HORIZONTALES ─────────────────── */
.roi-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(232, 136, 165, 0.35);
}

.roi-chart-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary-navy);
}

.roi-chart-row {
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  align-items: center;
  gap: 8px;
}

.roi-chart-label {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.roi-chart-track {
  height: 10px;
  background: rgba(45, 51, 89, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.roi-chart-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.roi-bar--coral { background: var(--color-coral-pink); }
.roi-bar--pink  { background: var(--color-soft-pink); }
.roi-bar--ocean { background: var(--color-ocean-blue); }

.roi-chart-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary-navy);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.roi-chart-legend {
  display: flex;
  gap: 12px;
  padding-top: 4px;
}

.roi-chart-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.roi-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.roi-dot--coral { background: var(--color-coral-pink); }
.roi-dot--pink  { background: var(--color-soft-pink); }
.roi-dot--ocean { background: var(--color-ocean-blue); }

/* ── COLUMNA DERECHA ─────────────────────────────────── */
.roi-right-col {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.roi-headline {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-primary-navy);
  line-height: 1.2;
  margin: 0;
}

.roi-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── BENTO KPI GRID ─────────────────────────────────── */
.roi-bento {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.roi-bento-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.roi-kpi-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  box-shadow: 0 2px 12px rgba(45, 51, 89, 0.05);
}

.roi-kpi-card--wide {
  /* full width inside .roi-bento column */
}

.roi-kpi-card--balance {
  background: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
}

.roi-kpi-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--color-coral-pink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.roi-kpi-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-primary-navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.roi-kpi-note {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Balance Neto internals */
.roi-balance-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roi-balance-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--color-soft-pink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.roi-balance-num {
  font-size: 36px;
  font-weight: 900;
  color: var(--color-val-green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.roi-balance-right {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.roi-balance-arrow {
  font-size: 22px;
  color: var(--color-coral-pink);
  line-height: 1;
}


/* ==========================================================================
   11. SLIDE 06: PROPCO / OPCO
   ========================================================================== */

.propco-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: relative;
}

.propco-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: 32px;
  box-shadow: 0 4px 20px rgba(45, 51, 89, 0.06);
  position: relative;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, z-index 0.35s ease;
}

.propco-card:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 40px rgba(45, 51, 89, 0.2);
  z-index: 25;
}

.propco-card.theme-opco {
  background: var(--color-primary-navy);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.12);
}

.propco-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.tag-propco {
  background: rgba(60, 88, 158, 0.15);
  color: var(--color-ocean-blue);
}

.tag-opco {
  background: rgba(232, 136, 165, 0.2);
  color: var(--color-coral-pink);
}

.propco-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

.propco-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.theme-opco .propco-subtitle {
  color: #CBD2EB;
}

.propco-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.propco-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.propco-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.propco-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(45, 51, 89, 0.08);
  padding-bottom: 8px;
}

.theme-opco .propco-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.propco-col-item {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-navy);
}

.theme-opco .propco-col-item {
  color: var(--color-soft-pink);
}

.propco-col-desc {
  color: var(--color-text-dark);
}

.theme-opco .propco-col-desc {
  color: #D3D7E8;
}

.check-icon {
  color: var(--color-val-green);
  font-weight: 800;
  flex-shrink: 0;
}

/* ==========================================================================
   12. SLIDE 07: EXPENSAS & DOBLE ANILLO
   ========================================================================== */

.security-ring-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: relative;
  margin-top: 90px;
}

.ring-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: 28px;
  border-top: 5px solid var(--color-ocean-blue);
  position: relative;
  cursor: pointer;
  transition: transform 0.28s var(--easing-spring), box-shadow 0.28s ease, border-color 0.28s ease;
}

.ring-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(45, 51, 89, 0.15);
}

.ring-card.ring-outer {
  border-top-color: var(--color-coral-pink);
}

/* ESTADO FIJADO A PANTALLA COMPLETA PARA SLIDE 06 Y 07 */
.module-fullscreen-active {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90vw !important;
  max-width: 1080px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  z-index: 9995 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7) !important;
  border: 2px solid var(--color-coral-pink) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: 44px !important;
  animation: moduleExpand 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes moduleExpand {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.module-fullscreen-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(18, 22, 43, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9990;
  display: none;
}

.module-fullscreen-backdrop.active {
  display: block;
}

.module-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(45, 51, 89, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  z-index: 100;
  transition: var(--transition-smooth);
}

.module-fullscreen-active .module-close-btn {
  display: flex !important;
}

.module-close-btn:hover {
  background: var(--color-coral-pink);
}

/* ==========================================================================
   13. SLIDE 08: RESPALDO TÉCNICO (+100% ZOOM EN HOVER)
   ========================================================================== */

.phases-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 100px;
  position: relative;
}

.phase-step-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: 22px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(45, 51, 89, 0.05);
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease, z-index 0.3s ease;
}

/* Hover: Se agranda un 30% más del tamaño original (scale 1.3) */
.phase-step-card:hover {
  transform: scale(1.3);
  z-index: 120;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  border-color: var(--color-coral-pink);
  background: var(--color-white);
}

/* F1.8 — Phase number con badge circular de marca */
.phase-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-coral-pink);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(232, 136, 165, 0.35);
}

.phase-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary-navy);
}

.phase-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   14. SLIDE 09: QUIÉNES SOMOS (+30% ZOOM Y BORDE #F0B2C3 EN HOVER)
   ========================================================================== */

.founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 50px;
}

.founder-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, z-index 0.35s ease;
}

/* Hover: Se agranda un 30% más del tamaño original (scale 1.3) y borde #F0B2C3 */
.founder-card:hover {
  transform: scale(1.3);
  z-index: 120;
  border-color: #F0B2C3 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  background: rgba(33, 38, 68, 0.98);
}

/* F1.7 — Founder photo con framing de marca */
.founder-photo {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  background-clip: padding-box;
  outline: 3px solid var(--color-coral-pink);
  outline-offset: 3px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(232, 136, 165, 0.15);
  transition: transform 0.3s var(--easing-spring), box-shadow 0.3s ease;
}

.founder-card:hover .founder-photo {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(232, 136, 165, 0.25);
}

.founder-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-white);
}

.founder-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-soft-pink);
  text-transform: uppercase;
  margin-top: 2px;
  margin-bottom: 12px;
}

.founder-bio {
  font-size: 12px;
  color: #CBD2EB;
  line-height: 1.55;
}

/* ==========================================================================
   UNIVERSAL LIGHTBOX PARA FOTOS Y VIDEOS
   ========================================================================== */

.universal-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(18, 22, 43, 0.94);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: lightboxFadeIn 0.25s ease forwards;
}

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.universal-lightbox.active {
  display: flex;
}

.lightbox-media-wrapper {
  max-width: 90vw;
  max-height: 88vh;
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.lightbox-media-wrapper img,
.lightbox-media-wrapper video {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  display: block;
}

.lightbox-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(45, 51, 89, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  z-index: 10002;
}

.lightbox-close-btn:hover {
  background: var(--color-coral-pink);
}

/* Cursor pointer para medios expandibles */
[data-expandable],
.hero-render-card,
.history-card img,
.bento-card {
  cursor: pointer;
}

/* ==========================================================================
   15. SLIDE 10: 10 AÑOS DE CAMINO
   ========================================================================== */

.history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.history-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(45, 51, 89, 0.06);
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, z-index 0.35s ease;
}

.history-card:hover {
  transform: scale(1.3);
  z-index: 50;
  border-color: #F0B2C3 !important;
  box-shadow: 0 16px 40px rgba(45, 51, 89, 0.25);
}

.history-img-wrap {
  height: 180px;
  overflow: hidden;
}

.history-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-content {
  padding: 20px;
}

.history-year-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  background: var(--color-ocean-blue);
  color: var(--color-white);
  margin-bottom: 8px;
}

/* ==========================================================================
   16. SLIDE 11: VISIÓN DE MERCADO
   ========================================================================== */

#slide-11 {
  overflow: hidden;
  background-color: var(--color-primary-navy);
}

.slide-11-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 40%, rgba(45, 51, 89, 0.40) 0%, rgba(33, 38, 68, 0.60) 70%, rgba(23, 26, 46, 0.75) 100%);
  pointer-events: none;
}

.vision-card {
  background: rgba(45, 51, 89, 0.40); /* Color azul #2D3359 al 60% de transparencia */
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--border-radius-lg);
  padding: 44px;
  max-width: 960px;
  margin-top: 50px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}

.vision-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.vision-stat-box {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius-md);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.vision-stat-num {
  font-size: 44px;
  font-weight: 900;
  color: var(--color-coral-pink);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   17. SLIDE 12: PRÓXIMO PASO & AGENDAMIENTO
   ========================================================================== */

/* F1.6 — Closing slide cinematográfico con video de fondo idéntico a Slide 00 */
#slide-12 {
  overflow: hidden;
  background-color: var(--color-primary-navy);
}

#slide-12 .slide-title {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.12;
}

.close-layout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
}

.btn-cta-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-coral-pink);
  color: var(--color-white);
  padding: 18px 40px;
  border-radius: var(--border-radius-md);
  font-size: 16px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 6px 20px rgba(232, 136, 165, 0.35);
  margin-top: 24px;
  animation: ctaPulseGlow 2.8s ease-in-out infinite;
}

@keyframes ctaPulseGlow {
  0%, 100% { box-shadow: 0 6px 20px rgba(232, 136, 165, 0.35); }
  50%       { box-shadow: 0 8px 32px rgba(232, 136, 165, 0.60), 0 0 0 6px rgba(232, 136, 165, 0.12); }
}

.btn-cta-large:hover {
  background: var(--color-coral-hover);
  transform: translateY(-3px);
  animation-play-state: paused;
  box-shadow: 0 10px 28px rgba(232, 136, 165, 0.55);
}

.close-single-col {
  max-width: 960px;
}

.contact-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 74px;
}

.contact-cards-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-exec-card {
  background: rgba(45, 51, 89, 0.50);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--border-radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: var(--transition-smooth);
}

.contact-exec-card:hover {
  background: rgba(45, 51, 89, 0.65);
  transform: translateY(-2px);
  border-color: rgba(232, 136, 165, 0.4);
}

.contact-exec-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-coral-pink);
}

.contact-links-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.btn-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  transition: var(--transition-smooth);
}

.btn-contact-pill:hover {
  background: var(--color-coral-pink);
}

/* ==========================================================================
   18. FLOATING PRESENTATION CONTROLS (ORADOR & DESARROLLADOR)
   ========================================================================== */

.presentation-toolbar {
  position: absolute;
  bottom: 20px;
  right: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(33, 38, 68, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  padding: 6px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  user-select: none;
}

.toolbar-counter {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-soft-pink);
  padding: 0 8px;
}

.toolbar-btn {
  background: transparent;
  border: none;
  color: var(--color-sand-offwhite);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
}

.toolbar-btn.btn-active {
  background: var(--color-coral-pink);
  color: var(--color-white);
}

/* ==========================================================================
   19. MODALS & OVERLAYS
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(18, 22, 43, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-window {
  background: var(--color-primary-navy);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--border-radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  font-size: 16px;
  font-weight: 800;
  transition: var(--transition-smooth);
}

.modal-close-btn:hover {
  background: var(--color-coral-pink);
}

/* Bento Modal Body */
.bento-modal-media-frame {
  height: 340px;
  width: 100%;
  background: #0D101E;
  position: relative;
}

.bento-modal-content {
  padding: 28px;
  background: var(--color-primary-navy);
}

.bento-modal-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-spec-box {
  background: transparent;
  border-radius: 0;
  padding: 4px 0;
  border: none;
  box-shadow: none;
}

.modal-spec-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-soft-pink);
  text-transform: uppercase;
}

.modal-spec-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-white);
  margin-top: 4px;
}

/* Modal Agendamiento */
.meeting-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 700;
  color: #D3D6E8;
}

.form-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--border-radius-sm);
  padding: 10px 14px;
  color: var(--color-white);
  outline: none;
}

.form-input:focus {
  border-color: var(--color-coral-pink);
}

/* Grid Overview ([G] Key) */
.grid-overview-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-height: 75vh;
  overflow-y: auto;
  padding: 10px;
}

.grid-thumb-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.grid-thumb-card:hover {
  background: rgba(232, 136, 165, 0.2);
  border-color: var(--color-coral-pink);
}

/* Black Screen Overlay ([B] Key) */
#blackScreenOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 999;
  display: none;
  cursor: pointer;
}

/* Toast de notificación de Modo */
.mode-toast {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 90;
  background: var(--color-primary-navy);
  color: var(--color-white);
  border: 1px solid var(--color-coral-pink);
  border-radius: var(--border-radius-md);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-80px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.mode-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================================
   20. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
  .hero-cover-grid,
  .diagnostico-split,
  .format-panel,
  .roi-layout-grid,
  .propco-matrix,
  .close-layout-grid {
    grid-template-columns: 1fr;
  }

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

  .phases-timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .founders-grid,
  .history-grid {
    grid-template-columns: 1fr;
  }

  .slide-content-wrap {
    padding: 32px 24px 80px;
  }

  .slide-title {
    font-size: 26px;
  }
}

/* ==========================================================================
   OPTIMIZACIÓN DE FOOTER SEGURO PARA PANTALLAS COMPACTAS (@media max-height: 760px)
   ========================================================================== */
@media (max-height: 760px) {
  .slide-content-wrap {
    padding-top: 28px !important;
    padding-bottom: 90px !important;
  }

  .slide-title {
    font-size: 28px !important;
    margin-bottom: 8px !important;
  }

  .slide-desc {
    margin-bottom: 16px !important;
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   21. UNIVERSAL LIGHTBOX (EXPANSIÓN DE TODAS LAS FOTOS Y VIDEOS)
   ========================================================================== */

.universal-lightbox-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 20, 38, 0.94);
  backdrop-filter: blur(14px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.universal-lightbox-backdrop.active {
  display: flex;
  opacity: 1;
}

.universal-lightbox-wrap {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: lightboxPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lightboxPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.universal-lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  z-index: 10010;
}

.universal-lightbox-close:hover {
  background: var(--color-coral-pink);
  border-color: var(--color-coral-pink);
  transform: rotate(90deg);
}

.universal-lightbox-media-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
  background: #000;
}

.universal-lightbox-media-container img,
.universal-lightbox-media-container video {
  max-width: 90vw;
  max-height: 78vh;
  object-fit: contain;
  display: block;
}

.universal-lightbox-caption {
  margin-top: 14px;
  color: var(--color-sand-offwhite);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.4px;
}

/* Indicadores de expansión en elementos multimedia */
.media-expandable {
  cursor: pointer;
  position: relative;
}

.hero-render-card,
.founder-card,
.history-card,
.bento-card {
  cursor: pointer;
}

.hero-render-img,
.bento-card-bg {
  transition: transform 0.35s ease;
}

.hero-render-card:hover .hero-render-img {
  transform: scale(1.02);
}

.hero-render-badge,
.bento-card-badge {
  z-index: 5;
}

/* Soporte de Video en Bento Grid y Hero Renders */
.bento-card video.bento-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-render-card {
  position: relative;
  overflow: hidden;
}

.hero-render-card video.hero-render-img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   FASE 2 — MEJORAS DE BRANDING NIVEL MULTINACIONAL
   ========================================================================== */

/* F2.5 — Gradient backgrounds para slides dark (Equipo + Visión) */
#slide-09 {
  background: linear-gradient(148deg, #1E2238 0%, #2D3359 50%, #222748 100%);
}

#slide-11 {
  background: linear-gradient(148deg, #212644 0%, #2D3359 55%, #1E2238 100%);
}

/* History card hover */
.history-card {
  transition: transform 0.28s var(--easing-spring), box-shadow 0.28s ease;
}

.history-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(45, 51, 89, 0.14);
}

/* Contact exec card — separador visual */
.contact-exec-card {
  position: relative;
}

.contact-exec-card + .contact-exec-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* F2.6 — Iconos SVG inline en contact pills */
.btn-contact-pill[href*="wa.me"]::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

.btn-contact-pill[href*="mailto"]::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

.btn-contact-pill[href*="tel"]::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.5 9.71 19.79 19.79 0 01.46 1.14 2 2 0 012.44 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.91 7.64a16 16 0 006.29 6.29l.72-.72a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ROI KPI card hover */
.roi-kpi-card {
  transition: transform 0.25s var(--easing-spring), box-shadow 0.25s ease;
}

.roi-kpi-card:hover:not(.kpi-highlight) {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(45, 51, 89, 0.1);
}

/* Progress bar sidebar — gradiente coral a soft pink */
.sidebar-progress-bar {
  background: linear-gradient(90deg, var(--color-coral-pink) 0%, var(--color-soft-pink) 100%);
}

/* Slide 01 subtitle más prominente */
#slide-01 .slide-subtitle {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

/* Vision stat boxes hover */
.vision-stat-box {
  transition: transform 0.25s var(--easing-spring), background 0.2s ease, border-color 0.2s ease;
}

.vision-stat-box:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(232, 136, 165, 0.3);
}

/* ==========================================================================
   FASE 3 — ENTERPRISE POLISHING
   ========================================================================== */

/* F3.3 — Textura de grano sutil en slides claros */
.slide:not(.theme-dark)::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* F3.3 — Textura en slides dark (más sutil) */
.slide.theme-dark::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* Asegurar que el contenido quede sobre la textura */
.slide-content-wrap {
  position: relative;
  z-index: 1;
}

/* F3.1 — Clases de animación de entrada staggered para contenido */
.slide-entry-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--easing-spring), transform 0.5s var(--easing-spring);
}

.slide-entry-item.entered {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays para hijos directos del slide-content-wrap */
.slide.active .slide-meta-bar    { animation: slideEntryFade 0.5s var(--easing-spring) 0.05s both; }
.slide.active .slide-title       { animation: slideEntryFade 0.5s var(--easing-spring) 0.12s both; }
.slide.active .slide-subtitle    { animation: slideEntryFade 0.5s var(--easing-spring) 0.18s both; }
.slide.active .slide-desc        { animation: slideEntryFade 0.5s var(--easing-spring) 0.24s both; }
.slide.active .hero-stats-row    { animation: slideEntryFade 0.55s var(--easing-spring) 0.32s both; }
.slide.active .bento-grid        { animation: slideEntryFade 0.55s var(--easing-spring) 0.2s both; }
.slide.active .diagnostico-split { animation: slideEntryFade 0.55s var(--easing-spring) 0.22s both; }
.slide.active .format-tab-bar    { animation: slideEntryFade 0.5s var(--easing-spring) 0.18s both; }
.slide.active .format-panels-wrap { animation: slideEntryFade 0.55s var(--easing-spring) 0.28s both; }
.slide.active .roi-layout-grid   { animation: slideEntryFade 0.55s var(--easing-spring) 0.2s both; }
.slide.active .propco-matrix     { animation: slideEntryFade 0.55s var(--easing-spring) 0.22s both; }
.slide.active .security-ring-grid { animation: slideEntryFade 0.55s var(--easing-spring) 0.22s both; }
.slide.active .phases-timeline   { animation: slideEntryFade 0.55s var(--easing-spring) 0.2s both; }
.slide.active .founders-grid     { animation: slideEntryFade 0.55s var(--easing-spring) 0.22s both; }
.slide.active .history-grid      { animation: slideEntryFade 0.55s var(--easing-spring) 0.2s both; }
.slide.active .vision-card       { animation: slideEntryFade 0.55s var(--easing-spring) 0.18s both; }
.slide.active .close-layout-grid { animation: slideEntryFade 0.55s var(--easing-spring) 0.2s both; }

@keyframes slideEntryFade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* F3.2 — Línea decorativa bajo slide-tag (ya aplicada, refuerzo con transition) */
.slide-tag {
  position: relative;
  transition: var(--transition-smooth);
}

/* F3 — Toolbar refinement: hover más suave y counter más elegante */
.toolbar-counter {
  font-size: 11px;
  font-weight: 900;
  color: var(--color-soft-pink);
  padding: 0 10px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

/* F3 — Scrollbar más delgado y elegante en slides claros */
.slide::-webkit-scrollbar {
  width: 4px;
}

.slide::-webkit-scrollbar-track {
  background: transparent;
}

.slide::-webkit-scrollbar-thumb {
  background: rgba(45, 51, 89, 0.18);
  border-radius: 2px;
}

.slide::-webkit-scrollbar-thumb:hover {
  background: var(--color-coral-pink);
}

/* F3 — Scrollbar elegante en slides dark */
.slide.theme-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

.slide.theme-dark::-webkit-scrollbar-thumb:hover {
  background: var(--color-coral-pink);
}

/* F3 — Bento card badges con entrada animada al hover */
.bento-card:hover .bento-card-badge {
  background: var(--color-coral-pink);
  color: var(--color-white);
  transition: background 0.25s ease, color 0.25s ease;
}

/* F3 — Mejora rendering tipográfico en slides dark */
.slide.theme-dark * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* F3 — Botón CTA pulsante más suave en Slide 12 */
#slide-12 .btn-cta-large {
  letter-spacing: 0.2px;
}

/* F3 — Slide tag en dark modes con gradiente de marca */
.slide.theme-dark .slide-tag {
  background: linear-gradient(135deg, var(--color-coral-pink) 0%, var(--color-coral-hover) 100%);
  box-shadow: 0 3px 10px rgba(232, 136, 165, 0.3);
}

/* F3 — Propco card con separador visual entre las dos columnas */
.propco-matrix::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, var(--color-border-light) 50%, transparent 100%);
  pointer-events: none;
}

/* F3 — Phase step card número de paso más prominente en hover */
.phase-step-card:hover .phase-num {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(232, 136, 165, 0.5);
}

/* F3 — Gatekeeper CTA button refinement */
.btn-gatekeeper-primary {
  position: relative;
  overflow: hidden;
}

.btn-gatekeeper-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  animation: btnShimmer 3s ease-in-out infinite;
}

@keyframes btnShimmer {
  0%   { left: -100%; }
  40%  { left: 140%; }
  100% { left: 140%; }
}

/* F3 — Chart card wrapper refinado */
.chart-card-wrapper {
  border-left: 3px solid var(--color-coral-pink);
}

/* F3 — History year badge más elegante */
.history-year-badge {
  letter-spacing: 0.8px;
  font-size: 9px;
}

/* F3 — Bento card overlay gradient más profundo */
.bento-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(33, 38, 68, 0.0) 0%,
    rgba(33, 38, 68, 0.55) 55%,
    rgba(33, 38, 68, 0.95) 100%
  );
}

/* F3 — Slide 11: visión card con borde coral sutil */
.vision-card {
  border-left: 3px solid var(--color-coral-pink);
}

/* F3 — Format info icon con checkmark SVG reforzado */
.format-info-icon {
  font-weight: 900;
  color: var(--color-ocean-blue);
  box-shadow: 0 0 0 1px rgba(60, 88, 158, 0.2);
}



/* ==========================================================================
   20. RESPONSIVE & MOBILE-FIRST ARCHITECTURE (SMARTPHONES & TABLETS)
   ========================================================================== */

/* Dynamic Viewport Height & Safe Areas */
@supports (height: 100dvh) {
  .presentation-stage,
  .slides-viewport,
  .slide {
    height: 100dvh;
  }
}

/* Touch Action Optimization: Evitar retardos de 300ms y double-tap zoom accidental */
button,
a,
.toolbar-btn,
.btn-gatekeeper-primary,
.btn-contact-pill,
.btn-cta-large,
.roi-range-slider,
.btn-roi-preset,
.btn-format-tab,
.bento-card,
.sidebar-item,
.sidebar-peeking-tab {
  touch-action: manipulation;
}

/* TABLETS Y DISPOSITIVOS MEDIANOS (< 1024px) */
@media (max-width: 1024px) {
  .slide-content-wrap {
    padding: 32px 32px 90px;
    max-width: 100%;
  }

  .hero-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .diagnostico-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .format-panel.active {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

  .bento-span-2 {
    grid-column: span 2;
  }

  .roi-split-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .capital-split-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .security-rings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .founders-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .history-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* SMARTPHONES Y PANTALLAS PEQUEÑAS (< 768px) */
@media (max-width: 768px) {
  /* Ocultar marca de agua fija para no tapar texto */
  .slide-content-wrap::after {
    display: none !important;
  }

  /* Padding optimizado en slides */
  .slide-content-wrap {
    padding: max(20px, env(safe-area-inset-top)) 18px max(86px, env(safe-area-inset-bottom));
    width: 100%;
  }

  /* Tipografía fluida para títulos y párrafos */
  .slide-meta-bar {
    margin-bottom: 10px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .slide-tag {
    font-size: 10px;
    padding: 3px 8px;
  }

  .slide-category {
    font-size: 10px;
    padding: 3px 8px;
  }

  .slide-title {
    font-size: clamp(20px, 5.4vw, 30px);
    line-height: 1.25;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
  }

  .slide-subtitle {
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .slide-desc {
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.5;
    margin-bottom: 16px;
  }

  /* Barra de Navegación Móvil Flotante Fija Abajo */
  .presentation-toolbar {
    position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    z-index: 95;
    padding: 6px 14px;
    gap: 12px;
    background: rgba(23, 26, 46, 0.95);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 36px;
    width: auto;
    max-width: 90vw;
  }

  .toolbar-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .toolbar-btn svg {
    width: 18px;
    height: 18px;
  }

  .toolbar-counter {
    font-size: 13px;
    padding: 0 6px;
    font-weight: 800;
  }

  /* SLIDE 00: Gatekeeper */
  .gatekeeper-card {
    width: 92%;
    max-width: 440px;
    padding: 32px 20px;
    border-radius: 18px;
    margin: auto;
  }

  .gatekeeper-logo {
    max-height: 44px;
    margin-bottom: 14px;
  }

  .gatekeeper-title {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .gatekeeper-sub {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .gatekeeper-credentials {
    font-size: 11px;
    margin-bottom: 22px;
  }

  .btn-gatekeeper-primary {
    width: 100%;
    padding: 14px 16px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
    border-radius: 10px;
  }

  .gatekeeper-speaker-box {
    margin-top: 18px;
    padding: 10px 14px;
  }

  /* SLIDE 01: Portada & Tesis */
  .hero-render-card {
    height: 200px;
    width: 100%;
    border-radius: 12px;
  }

  .hero-stats-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .hero-stat-card {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
  }

  .hero-stat-num {
    font-size: 28px;
    min-width: 80px;
  }

  .hero-stat-label {
    font-size: 12px;
    margin-top: 0;
  }

  /* SLIDE 02: Diagnóstico & Gráfico */
  .chart-card-wrapper {
    padding: 14px 10px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  .line-chart-svg {
    min-width: 580px; /* Permite scroll horizontal fluido de la comparativa en móvil */
  }

  .chart-legend-bar {
    gap: 10px !important;
    font-size: 11px !important;
  }

  /* SLIDE 03: Formatos */
  .format-tab-bar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
    width: 100%;
  }

  .btn-format-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
  }

  .format-hero-render {
    height: 180px;
    border-radius: 12px;
  }

  /* SLIDE 04: Bento Grid */
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bento-span-2 {
    grid-column: span 1;
  }

  .bento-card {
    height: 150px;
    border-radius: 12px;
  }

  .bento-card-title {
    font-size: 16px;
  }

  /* SLIDE 05: ROI Simulator */
  .roi-card-panel {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .roi-slider-group {
    margin-bottom: 16px;
  }

  .roi-range-slider {
    height: 10px;
  }

  .roi-range-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .roi-range-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  .roi-presets-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn-roi-preset {
    flex: 1 1 30%;
    font-size: 11px;
    padding: 8px 10px;
  }

  .roi-summary-kpis {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* SLIDE 06: Estructura de Capital */
  .capital-column-card {
    padding: 18px 16px;
  }

  /* SLIDE 07: Seguridad */
  .security-rings-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ring-card {
    padding: 16px;
  }

  /* SLIDE 08: Respaldo Técnico */
  .phase-steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .phase-step-card {
    padding: 16px;
  }

  /* SLIDE 09: Equipo Fundador */
  .founders-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .founder-card {
    padding: 18px 16px;
    text-align: center;
  }

  .founder-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto 12px;
    object-fit: cover;
  }

  .founder-name {
    font-size: 16px;
  }

  .founder-role {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .founder-bio {
    font-size: 12px;
    line-height: 1.5;
  }

  /* SLIDE 10: Trayectoria */
  .history-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .history-card {
    border-radius: 14px;
    overflow: hidden;
  }

  .history-img-wrap {
    height: 150px;
  }

  .history-content {
    padding: 14px;
  }

  /* SLIDE 11: Visión */
  .vision-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vision-stat-box {
    padding: 16px;
    text-align: center;
  }

  .vision-stat-num {
    font-size: 36px;
  }

  /* SLIDE 12: Próximo Paso */
  .close-single-col {
    max-width: 100%;
  }

  .contact-cards-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .contact-exec-card {
    width: 100%;
    padding: 16px;
  }

  .btn-contact-pill {
    padding: 8px 14px;
    font-size: 12px;
  }

  .btn-cta-large {
    width: 100%;
    font-size: 14px;
    padding: 14px;
    text-align: center;
    white-space: normal;
  }

  /* Pestaña Peeking del Menú Lateral */
  .sidebar-peeking-tab {
    width: 22px;
    height: 48px;
    top: 35%;
  }

  /* Sidebar Rail en móvil: pantalla completa deslizable */
  .sidebar-rail {
    width: min(320px, 86vw);
    height: 100dvh;
  }

  /* Modales en móvil */
  .modal-backdrop {
    padding: 12px;
  }

  .modal-window {
    width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    border-radius: 14px;
  }

  .universal-lightbox-wrap {
    max-width: 95vw;
    max-height: 85dvh;
  }
}

/* SMARTPHONES PEQUEÑOS (< 480px) */
@media (max-width: 480px) {
  .slide-content-wrap {
    padding: max(16px, env(safe-area-inset-top)) 14px max(82px, env(safe-area-inset-bottom));
  }

  .slide-title {
    font-size: clamp(19px, 6vw, 24px);
  }

  .gatekeeper-card {
    padding: 26px 16px;
  }

  .gatekeeper-title {
    font-size: 22px;
  }

  .hero-stat-card {
    padding: 10px 12px;
  }

  .hero-stat-num {
    font-size: 24px;
    min-width: 65px;
  }

  .toolbar-counter {
    font-size: 12px;
  }

  .toolbar-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
}

/* MODO HORIZONTAL / LANDSCAPE EN SMARTPHONES (< 500px height) */
@media (max-height: 500px) and (orientation: landscape) {
  .slide-content-wrap {
    padding: 14px 20px 60px;
  }

  .presentation-toolbar {
    bottom: 6px;
    padding: 4px 10px;
    gap: 8px;
  }

  .toolbar-btn {
    width: 30px;
    height: 30px;
  }

  .hero-split,
  .diagnostico-split,
  .format-panel.active,
  .roi-split-layout {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .hero-render-card,
  .format-hero-render {
    height: 140px;
  }

  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento-card {
    height: 110px;
  }

  .founders-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .history-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}