/* ═══════════════════════════════════════════════════════════════════
   slides.css — Motor de slides + estilos específicos por slide
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ DECK CONTAINER ═══════ */
.deck {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* ─── Modo DECK (desktop): un slide a la vez con transición ─── */
body.mode-deck .deck {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.mode-deck .slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--slide-pad-y) var(--slide-pad-x);
  padding-bottom: calc(var(--nav-h) + var(--sp-5));
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
  transition: opacity var(--t-slide), transform var(--t-slide);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.mode-deck .slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  z-index: var(--z-slide);
}

body.mode-deck .slide.prev {
  transform: translateX(-40px);
}

/* ─── Modo SCROLL (mobile): slides apilados, scroll natural ─── */
body.mode-scroll .deck {
  scroll-snap-type: y proximity;
  height: auto;
  overflow: visible;
}

body.mode-scroll .slide {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--nav-h-mob) + var(--sp-5)) var(--slide-pad-x) calc(var(--nav-h-mob) + var(--sp-6));
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}

body.mode-scroll .slide + .slide {
  border-top: 1px solid var(--border-subtle);
}

/* ─── Slide-inner ─────────────────────────────────────────────── */
.slide-inner {
  width: 100%;
  max-width: var(--content-max);
  position: relative;
}

.slide-narrow .slide-inner { max-width: var(--content-narrow); }

/* Headings con más impacto en desktop alto (>900px) */
@media (min-width: 1024px) and (min-height: 901px) {
  .slide-heading { margin-bottom: var(--sp-4); }
  .slide-text { font-size: var(--fs-md); margin-bottom: var(--sp-6); }
  .slide-label { font-size: 0.85rem; margin-bottom: var(--sp-4); }
  .gold-line { width: 80px; margin: var(--sp-4) 0 var(--sp-6); }
}

/* Laptop 16" o monitores con poca altura: compactar márgenes y gaps */
@media (min-width: 1024px) and (max-height: 900px) {
  .slide-heading { margin-bottom: var(--sp-2); font-size: clamp(1.5rem, 4vh, 2.6rem) !important; }
  .slide-text { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
  .slide-label { margin-bottom: var(--sp-2); font-size: 0.7rem; }
  .gold-line { margin: var(--sp-2) 0 var(--sp-3); width: 60px; }
  /* Stat boxes más compactos */
  .stat { padding: var(--sp-3) var(--sp-3); }
  .stat .num { font-size: clamp(1.4rem, 3.5vh, 2.2rem); }
  /* Mega-card más compacta */
  .mega-card { padding: var(--sp-5) var(--sp-4); }
  .mega-card .amount { font-size: clamp(2rem, 7vh, 4rem); }
  /* Spacing entre slides */
  body.mode-deck .slide { padding-top: clamp(0.5rem, 2vh, 1.5rem); }
}

@media (min-width: 1440px) and (min-height: 901px) {
  .slide-heading { font-size: clamp(2rem, 2.5vw, 3.4rem); }
  .slide-text { max-width: 80ch; }
}

/* Headings de slide */
.slide-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.slide-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.slide-heading {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--text);
  margin-bottom: var(--sp-3);
}

.slide-text {
  font-size: var(--fs-base);
  color: var(--text-soft);
  line-height: var(--lh-loose);
  max-width: 70ch;
  margin-bottom: var(--sp-5);
}

/* ─── Animaciones de entrada vía data-animate ─────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--easing-out), transform 0.7s var(--easing-out);
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-left"]  { transform: translateX(-24px); }
[data-animate="fade-right"] { transform: translateX(24px); }
[data-animate="fade-down"]  { transform: translateY(-24px); }
[data-animate="scale"]      { transform: scale(0.92); }

[data-animate].animate-in[data-animate="fade-left"],
[data-animate].animate-in[data-animate="fade-right"],
[data-animate].animate-in[data-animate="fade-down"] {
  transform: translateX(0) translateY(0);
}
[data-animate].animate-in[data-animate="scale"] { transform: scale(1); }

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }
[data-delay="7"] { transition-delay: 0.7s; }
[data-delay="8"] { transition-delay: 0.8s; }

/* ═══════ NAV BAR ═══════ */
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding: 0 var(--sp-5);
  background: rgba(10, 20, 41, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-brand img {
  height: 56px;
  width: auto;
  display: block;
  shape-rendering: geometricPrecision;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
  justify-content: center;
}

.nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--t-fast);
  flex-shrink: 0;
}

.nav-btn:hover:not(:disabled) {
  background: var(--gold-glow);
  border-color: var(--border-gold);
  color: var(--gold);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.nav-counter {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--gold);
  letter-spacing: 0.04em;
  min-width: 70px;
  text-align: center;
}

.nav-counter .total {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.nav-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  display: none;
}

@media (min-width: 900px) {
  .nav-label { display: block; }
}

.nav-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--t-fast);
}

.nav-dot:hover { background: var(--text-muted); }
.nav-dot.active { background: var(--gold); transform: scale(1.4); }

@media (max-width: 768px) {
  .nav { height: var(--nav-h-mob); padding: 0 var(--sp-3); }
  .nav-brand img { height: 44px; }
  .nav-dots { display: none; }
  .nav-btn { width: 34px; height: 34px; }
}

@media (max-width: 480px) {
  .nav-brand img { height: 36px; }
}

/* ═══════ PROGRESS BAR ═══════ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: var(--z-nav);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  width: 0;
  transition: width var(--t-base);
}

body.mode-scroll .progress { display: none; }

/* ═══════ BACK BUTTON (Volver al sitio) ═══════ */
.back-btn {
  position: fixed;
  top: var(--back-btn-top);
  right: var(--back-btn-top);
  z-index: var(--z-back);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(253, 198, 24, 0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  color: var(--ed-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
  transition: all var(--t-base);
}

.back-btn:hover {
  background: var(--ed-secondary);
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  color: var(--ed-primary);
}

@media (max-width: 480px) {
  .back-btn {
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 0.65rem;
  }
}

/* ═══════ HINT DE SWIPE (mobile, primera vez) ═══════ */
.swipe-hint {
  position: fixed;
  bottom: calc(var(--nav-h-mob) + var(--sp-5));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  background: rgba(10, 20, 41, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-gold);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
  opacity: 0;
  animation: swipeHint 4s ease 1.5s forwards;
}

@keyframes swipeHint {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

body.mode-deck .swipe-hint { display: none; }

/* ═══════════════════════════════════════════════════════════════
   ESTILOS POR SLIDE
   ═══════════════════════════════════════════════════════════════ */

/* ─── Slide 1: PORTADA ─────────────────────────────────────────── */
#portada {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(200, 162, 60, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(52, 152, 219, 0.06) 0%, transparent 60%);
  text-align: center;
}

#portada .slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#portada .logo {
  /* Tamaño basado en el menor entre ancho y alto de viewport para evitar que sea
     gigante en laptops anchos pero bajos (1920×900) */
  width: clamp(200px, min(28vw, 32vh), 420px);
  height: auto;
  margin-bottom: clamp(var(--sp-3), 2vh, var(--sp-6));
  filter: drop-shadow(0 4px 24px rgba(200, 162, 60, 0.30));
}

#portada h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  margin-bottom: clamp(var(--sp-2), 1.5vh, var(--sp-4));
  max-width: 24ch;
}

#portada .slogan {
  font-size: var(--fs-md);
  color: var(--text-soft);
  margin-bottom: clamp(var(--sp-3), 2vh, var(--sp-6));
  max-width: 32ch;
}

#portada .meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* En laptops anchos pero bajos (≤900px alto), compactar más */
@media (min-width: 1024px) and (max-height: 900px) {
  #portada .logo { width: clamp(180px, 24vh, 320px); margin-bottom: var(--sp-3); }
  #portada h1 { font-size: clamp(1.6rem, 4vh, 2.6rem); margin-bottom: var(--sp-2); }
  #portada .slogan { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
  #portada .meta { font-size: var(--fs-xs); }
  #cierre .cierre-logo { width: clamp(140px, 18vh, 240px); margin-bottom: var(--sp-2); }
  #cierre .cierre-lema { font-size: clamp(1.4rem, 3.5vh, 2.4rem); }
  #cierre .cierre-sub { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
}

#portada .meta strong {
  color: var(--gold-light);
  font-weight: var(--fw-semi);
}

/* ─── Slide 2: QUIÉNES SOMOS ──────────────────────────────────── */
#quienes-somos .grid-2 {
  align-items: center;
  gap: var(--sp-6);
}

#quienes-somos .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

@media (max-width: 480px) {
  #quienes-somos .stats-grid { gap: var(--sp-2); }
}

/* ─── Slide 3: IDENTIDAD (Misión, Visión, Valores) ────────────── */
#identidad .mision-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

#identidad .mv-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
}

#identidad .mv-card h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--gold-light);
  margin-bottom: var(--sp-2);
}

#identidad .mv-card p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: var(--lh-loose);
}

@media (max-width: 768px) {
  #identidad .mision-vision { grid-template-columns: 1fr; }
}

/* ─── Slide 4: HIBRIDACIÓN ────────────────────────────────────── */
#hibridacion .hibrid-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}

#hibridacion .hibrid-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

#hibridacion .plus {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--ed-primary);
  font-weight: var(--fw-black);
  box-shadow: 0 0 24px var(--gold-glow);
}

#hibridacion .plus-label {
  writing-mode: vertical-rl;
  font-size: var(--fs-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-semi);
}

@media (max-width: 768px) {
  #hibridacion .hibrid-grid { grid-template-columns: 1fr; }
  #hibridacion .hibrid-center { flex-direction: row; }
  #hibridacion .plus-label { writing-mode: horizontal-tb; }
}

/* ─── Slide 5: ACCIONARIA ─────────────────────────────────────── */
#accionaria .donut-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-3);
}

#accionaria .donut-svg {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}

#accionaria .acc-legend-block {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

#accionaria .acc-legend-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

#accionaria .legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}

#accionaria .legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

#accionaria .legend-text {
  flex: 1;
  color: var(--text-soft);
}

#accionaria .legend-pct {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--gold);
}

#accionaria .acc-id-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

#accionaria .acc-id-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

#accionaria .acc-id-table tr {
  border-bottom: 1px solid var(--border-subtle);
}

#accionaria .acc-id-table tr:last-child { border-bottom: none; }

#accionaria .acc-id-table td {
  padding: var(--sp-2) var(--sp-2);
  vertical-align: top;
  line-height: var(--lh-snug);
}

#accionaria .acc-id-table td.lbl {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semi);
  width: 38%;
  white-space: nowrap;
}

#accionaria .acc-id-table td:not(.lbl) {
  color: var(--text);
  font-weight: var(--fw-medium);
}

#accionaria .acc-id-table a {
  color: var(--gold-light);
  text-decoration: none;
}

@media (min-width: 1024px) and (max-height: 900px) {
  #accionaria .donut-svg { max-width: 180px; }
  #accionaria .acc-id-card { padding: var(--sp-3) var(--sp-4); }
  #accionaria .acc-id-table { font-size: var(--fs-xs); }
  #accionaria .acc-id-table td { padding: var(--sp-1) var(--sp-2); }
  #accionaria .legend-item { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
}

@media (max-width: 900px) {
  #accionaria .donut-area { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 600px) {
  #accionaria .acc-id-table td.lbl { font-size: 0.65rem; width: 42%; }
  #accionaria .acc-id-table td { font-size: 0.75rem; padding: var(--sp-1); }
}

/* ─── Slide 6: NORMATIVA ──────────────────────────────────────── */
#normativa .norma-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

@media (max-width: 768px) {
  #normativa .norma-list { grid-template-columns: 1fr; }
}

/* ─── Slide 7: LÍNEAS ESTRATÉGICAS ────────────────────────────── */
#lineas .lineas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

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

@media (max-width: 480px) {
  #lineas .lineas-grid { grid-template-columns: 1fr; }
}

#lineas .linea-card {
  position: relative;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--t-base);
}

#lineas .linea-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--linea-color, var(--gold));
}

#lineas .linea-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-gold);
  background: var(--surface-hover);
}

#lineas .linea-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-black);
  color: var(--linea-color, var(--gold));
  opacity: 0.4;
  margin-bottom: var(--sp-2);
}

#lineas .linea-card h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}

#lineas .linea-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

/* ─── Slide 8: VERTICALES ─────────────────────────────────────── */
#verticales .verticales-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

#verticales .vertical-tag {
  padding: var(--sp-3) var(--sp-5);
  background: rgba(200, 162, 60, 0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--gold-light);
  font-weight: var(--fw-medium);
  transition: all var(--t-base);
}

#verticales .vertical-tag:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* ─── Slide 9: ORGANIZACIONAL ─────────────────────────────────── */
#organizacional .org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  width: 100%;
}

#organizacional .org-node {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  text-align: center;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all var(--t-fast);
}

#organizacional .org-node:hover {
  border-color: var(--border-gold);
  background: var(--surface-hover);
}

#organizacional .org-node strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

#organizacional .org-node .org-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

#organizacional .org-tag {
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: var(--text-muted);
}
#organizacional .org-tag.gold  { color: var(--gold); }
#organizacional .org-tag.green { color: var(--accent-green); }

#organizacional .org-icon {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

/* Nivel 1 — Órganos máximos (cajas anchas estilo institucional) */
#organizacional .org-supreme {
  background: linear-gradient(135deg, var(--ed-primary), var(--ed-primary-light));
  border-color: var(--ed-primary-light);
  flex: 1;
  max-width: 360px;
}
#organizacional .org-supreme strong { color: white; font-size: var(--fs-base); }

/* Nivel 2 — Revisoría Fiscal (verde, control) */
#organizacional .org-control {
  border: 2px solid rgba(46, 204, 113, 0.5);
  background: rgba(46, 204, 113, 0.04);
  max-width: 360px;
}
#organizacional .org-control strong { color: var(--accent-green); font-size: var(--fs-base); }

/* Nivel 3 — Gerencia General (gradient dorado, principal) */
#organizacional .org-gerente {
  background: linear-gradient(135deg, var(--ed-primary), var(--ed-primary-light));
  border: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(200, 162, 60, 0.20);
  max-width: 460px;
  padding: var(--sp-4) var(--sp-5);
}
#organizacional .org-gerente strong { color: white; font-size: var(--fs-md); }
#organizacional .org-gerente .org-name { color: rgba(255,255,255,0.85); font-size: var(--fs-sm); }

/* Subgerencias — 4 cards en fila */
#organizacional .org-sub {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  flex: 1;
  min-width: 0;
}

#organizacional .org-line {
  width: 2px;
  height: 18px;
  background: var(--border-gold);
}

#organizacional .org-row {
  display: grid;
  width: 100%;
  gap: var(--sp-2);
}

#organizacional .org-row.org-top { grid-template-columns: 1fr 1fr; max-width: 740px; }
#organizacional .org-row.org-subs { grid-template-columns: repeat(4, 1fr); margin-top: var(--sp-2); }

#organizacional .org-foot {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  max-width: 720px;
}

/* Compactar en laptop 16" */
@media (min-width: 1024px) and (max-height: 900px) {
  #organizacional .org-tree { gap: var(--sp-1); }
  #organizacional .org-line { height: 12px; }
  #organizacional .org-node { padding: var(--sp-2) var(--sp-3); }
  #organizacional .org-gerente { padding: var(--sp-3) var(--sp-4); }
  #organizacional .org-icon { font-size: 1rem; }
  #organizacional .org-tag { font-size: 0.55rem; }
  #organizacional .org-node strong { font-size: var(--fs-xs); }
  #organizacional .org-supreme strong,
  #organizacional .org-control strong { font-size: var(--fs-sm); }
  #organizacional .org-gerente strong { font-size: var(--fs-base); }
  #organizacional .org-foot { margin-top: var(--sp-2); }
}

@media (max-width: 768px) {
  #organizacional .org-row.org-top { grid-template-columns: 1fr; }
  #organizacional .org-row.org-subs { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Slide 10: PILARES ──────────────────────────────────────── */
#pilares .pilares-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

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

@media (max-width: 480px) {
  #pilares .pilares-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
}

/* ─── Slide 11: CONVENIOS ────────────────────────────────────── */
#convenios .data-table {
  margin-top: var(--sp-4);
}

@media (max-width: 600px) {
  #convenios .col-objeto { display: none; }
}

/* ─── Slide 12: CONTRATOS NACIONALES ──────────────────────────── */
#contratos .contratos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

@media (max-width: 768px) {
  #contratos .contratos-grid { grid-template-columns: 1fr; }
}

#contratos .contrato-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--t-base);
}

#contratos .contrato-card:hover {
  border-color: var(--border-gold);
  background: var(--surface-hover);
}

#contratos .contrato-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

#contratos .contrato-head h4 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--gold);
  margin-bottom: 2px;
}

#contratos .contrato-head .ent {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#contratos .contrato-body {
  padding: var(--sp-4) var(--sp-5);
}

#contratos .contrato-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

#contratos .contrato-row:last-child { border-bottom: none; }

#contratos .contrato-row .lbl { color: var(--text-muted); flex-shrink: 0; }
#contratos .contrato-row .val { color: var(--text); text-align: right; }
#contratos .contrato-row .val.gold {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}

/* ─── Slide 13: OCAD HERO ─────────────────────────────────────── */
#ocad-hero .ocad-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}

@media (max-width: 768px) {
  #ocad-hero .ocad-stats { grid-template-columns: repeat(2, 1fr); }
}

#ocad-hero .ocad-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

@media (max-width: 768px) {
  #ocad-hero .ocad-2col { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ─── Slide 14: OCAD DETALLE (TABLA 16 PROYECTOS) ─────────────── */
#ocad-detalle .ocad-table {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
}

#ocad-detalle .ocad-table th,
#ocad-detalle .ocad-table td {
  padding: var(--sp-2) var(--sp-3);
}

#ocad-detalle .ocad-nota {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  line-height: var(--lh-loose);
}

@media (max-width: 600px) {
  #ocad-detalle .ocad-table {
    table-layout: fixed;
    font-size: 0.65rem;
  }
  #ocad-detalle .ocad-table .col-art,
  #ocad-detalle .ocad-table .col-subreg,
  #ocad-detalle .ocad-table .col-vig {
    display: none;
  }
  #ocad-detalle .ocad-table th,
  #ocad-detalle .ocad-table td {
    padding: var(--sp-2) var(--sp-2);
  }
  #ocad-detalle .ocad-table thead th:first-child { width: 8%; }
  #ocad-detalle .ocad-table thead th:nth-child(4) { width: 38%; }
  #ocad-detalle .ocad-table thead th:nth-child(5) { width: 26%; }
  #ocad-detalle .ocad-table thead th:nth-child(7) { width: 28%; }
  #ocad-detalle .ocad-table td:nth-child(5),
  #ocad-detalle .ocad-table td:last-child {
    white-space: nowrap;
  }
}

/* ─── Slide 15: VOLUMEN TOTAL ─────────────────────────────────── */
#volumen-total {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200, 162, 60, 0.12) 0%, transparent 70%);
}

#volumen-total .slide-inner { text-align: center; }

#volumen-total .deps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
}

#volumen-total .dep {
  padding: 6px var(--sp-3);
  background: rgba(200, 162, 60, 0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--gold-light);
  font-weight: var(--fw-semi);
}

/* ═══════ Slide 16: CIERRE / CONTACTO INSTITUCIONAL ═══════ */
#cierre {
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(200, 162, 60, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(33, 58, 104, 0.20) 0%, transparent 70%);
}

#cierre .slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ─── Hero ─────────────────────────────────────────────────────── */
#cierre .cierre-hero {
  text-align: center;
  margin-bottom: var(--sp-5);
  width: 100%;
}

#cierre .cierre-logo {
  width: clamp(160px, min(20vw, 22vh), 280px);
  height: auto;
  margin: 0 auto var(--sp-3);
  display: block;
}

#cierre .cierre-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto var(--sp-3);
}

#cierre .cierre-lema {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
  margin: 0 auto var(--sp-2);
  max-width: 28ch;
  letter-spacing: -0.01em;
}

#cierre .cierre-tagline {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
  max-width: 56ch;
  margin: 0 auto;
  line-height: var(--lh-loose);
}

/* ─── Contact 2-column ─────────────────────────────────────────── */
#cierre .cierre-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

#cierre .cierre-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

#cierre .cierre-col-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

#cierre .cierre-col-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-gold), transparent);
}

/* ─── Contact rows ─────────────────────────────────────────────── */
#cierre .cierre-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

#cierre .cierre-icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

#cierre .cierre-icon-lg {
  width: 32px;
  height: 32px;
  color: var(--gold);
  flex-shrink: 0;
}

#cierre .cierre-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#cierre .cierre-row-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-medium);
}

#cierre .cierre-row-value {
  font-size: var(--fs-base);
  color: var(--text);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  word-break: break-word;
}

#cierre .cierre-row-value a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
}

#cierre .cierre-row-value a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

/* ─── Sedes ────────────────────────────────────────────────────── */
#cierre .cierre-sede {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  transition: all var(--t-base);
}

#cierre .cierre-sede:hover {
  border-color: var(--border-gold);
  background: var(--surface-hover);
}

#cierre .cierre-sede-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}

#cierre .cierre-sede-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#cierre .cierre-sede-addr {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: calc(22px + var(--sp-3));
  line-height: var(--lh-snug);
}

/* ─── Card del Gerente ─────────────────────────────────────────── */
#cierre .cierre-gerente {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: linear-gradient(135deg, rgba(200, 162, 60, 0.08), rgba(200, 162, 60, 0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
}

#cierre .cierre-gerente > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#cierre .cierre-gerente-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--gold-light);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

#cierre .cierre-gerente-cargo {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* ─── Sello institucional + Copyright ─────────────────────────── */
#cierre .cierre-stamp {
  margin-top: var(--sp-5);
  text-align: center;
  width: 100%;
}

#cierre .cierre-stamp-line {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  letter-spacing: 0.04em;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}

#cierre .cierre-stamp-line .dot-sep {
  color: var(--gold);
  font-weight: var(--fw-bold);
}

#cierre .cierre-copyright {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-height: 900px) {
  #cierre .cierre-hero { margin-bottom: var(--sp-3); }
  #cierre .cierre-contact { padding: var(--sp-4) 0; gap: var(--sp-5); }
  #cierre .cierre-stamp { margin-top: var(--sp-3); }
  #cierre .cierre-tagline { font-size: var(--fs-xs); }
  #cierre .cierre-lema { font-size: var(--fs-lg); }
}

@media (max-width: 900px) {
  #cierre .cierre-contact { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; }
}

@media (max-width: 600px) {
  #cierre .cierre-stamp-line { flex-direction: column; gap: var(--sp-1); }
  #cierre .cierre-stamp-line .dot-sep { display: none; }
  #cierre .cierre-row-value { font-size: var(--fs-sm); }
  #cierre .cierre-sede-addr { margin-left: 0; margin-top: var(--sp-1); }
}