/* =========================================================
   VARIABLES GLOBALES
========================================================= */
:root{
  --bg: #0E1521;
  --bg2: #070A10;

  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.48);

  --stroke: rgba(255,255,255,.10);
  --strokeSoft: rgba(255,255,255,.08);

  --accent: #ff9f43;

  --sidebarW: 220px;
}

/* =========================================================
   RESET BÁSICO
========================================================= */
*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

/* =========================================================
   LAYOUT PRINCIPAL (INDEX)
========================================================= */
body.deck{
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;

  display: grid;
  grid-template-columns: var(--sidebarW) 1fr;

  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(135deg, var(--bg), var(--bg2));
}

/* =========================================================
   SIDEBAR
========================================================= */
.sidebar{
  height: 100%;
  padding: 12px 10px;
  border-right: 1px solid var(--strokeSoft);
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));

  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}

.brand-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,159,67,.14);
}

.brand-title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .06em;
}

.brand-sub{
  font-size: 10px;
  color: var(--muted2);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* NAV */
.nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.nav-item{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px;
  border-radius: 12px;
  text-decoration: none;

  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;

  transition: all 120ms ease;
}

.nav-item:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}

.nav-item.active{
  background: linear-gradient(135deg, rgba(255,159,67,.16), rgba(255,255,255,.03));
  border-color: rgba(255,159,67,.35);
}

.n{
  width: 30px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--accent);
}

.t{
  font-size: 13px;
}

/* FOOTER */
.side-footer{
  margin-top: auto;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}

.foot-label{
  font-size: 10px;
  color: var(--muted2);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.foot-pill{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  font-size: 11px;
  color: rgba(255,255,255,.75);
}

/* =========================================================
   STAGE / IFRAME
========================================================= */
.stage{
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.frame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}

/* =========================================================
   ESTILOS PARA TODAS LAS DIAPOSITIVAS
========================================================= */
.slide{
  height: 100vh;
  background: var(--bg);
  display: grid;
  grid-template-columns: 60% 40%;
}

/* IZQUIERDA */
.slide-left{
  padding: 56px;
  display: flex;
  flex-direction: column;

  background:
    radial-gradient(900px 520px at 25% 12%, rgba(255,159,67,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--muted2);
  text-transform: uppercase;
}

.slide-title{
  margin-top: 10px;
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 900;
  letter-spacing: .03em;
}

.slide-title .accent{
  color: var(--accent);
}

.slide-subtitle{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  max-width: 60ch;
}

/* BLOQUE DE TEXTO */
.card{
  margin-top: 32px;
  padding: 26px 26px 26px 30px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  position: relative;
}

.card-bar{
  position: absolute;
  left: 14px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,159,67,.95), rgba(255,159,67,.10));
}

.card-text{
  margin: 0;
  max-width: 48ch;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.35;
}

.card-text strong{
  color: #fff;
  font-weight: 900;
}

.card-text .accent{
  color: var(--accent);
}

/* KEYWORDS */
.keywords{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.keyword{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* =========================================================
   DERECHA / IMAGEN (MUCHO MÁS CLARA)
========================================================= */
.slide-right{
  position: relative;
  overflow: hidden;
  background: #000;
}

/* 🔥 AQUÍ ESTÁ LA CLAVE */
.slide-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  /* IMAGEN MÁS CLARA Y VIVA */
  filter: brightness(1.25) contrast(1.05) saturate(1.1);
}

/* Overlay MUY SUAVE */
.slide-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(14,21,33,.55),
      rgba(14,21,33,.08) 55%,
      rgba(14,21,33,.35)
    );
  pointer-events: none;
}

/* Grid MUY sutil */
.slide-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .05;
  pointer-events: none;
}

/* TAG */
.slide-tag{
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  font-size: 12px;
  letter-spacing: .08em;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  :root{ --sidebarW: 180px; }

  .slide{
    grid-template-columns: 1fr;
  }

  .slide-right{
    height: 42vh;
  }

  .slide-left{
    padding: 28px;
  }
}

/* ======= FIX: asegurar contraste dentro de IFRAME (sin depender de Bootstrap) ======= */
body{
  background: var(--bg);
  color: var(--text);
}

/* Si alguna slide trae estilos externos, esto blinda legibilidad */
.slide, .slide *{
  color: inherit;
}

/* Card más clara + texto con más aire */
.card{
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}

.card-text{
  color: var(--text);
  letter-spacing: .01em;
}

/* Highlights consistentes */
.hl{
  color: var(--accent);
  font-weight: 900;
}

.kpis{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kpi{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

/* Imagen más clara todavía */
.slide-image{
  filter: brightness(1.35) contrast(1.06) saturate(1.10);
}

/* Overlay MÁS suave (para que no apague la foto) */
.slide-overlay{
  background: linear-gradient(90deg,
    rgba(14,21,33,.45),
    rgba(14,21,33,.06) 55%,
    rgba(14,21,33,.30)
  );
}

/* Mejora de espaciado general en la izquierda */
.slide-left{
  gap: 8px;
}

.slide-subtitle{
  margin-bottom: 10px;
}


.os-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 860px;
}

.os-card{
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

@media (max-width: 980px){
  .os-grid{ grid-template-columns: 1fr; }
}


/* Slide sin imagen (full content) */
.slide.full{
  grid-template-columns: 1fr !important;
}

.slide.full .slide-left{
  padding-right: 72px;
  max-width: 1200px;
}

.slide.full .slide-subtitle{
  max-width: 80ch;
}


/* ===== Slides FULL: usar TODO el ancho disponible ===== */
.slide.full{
  grid-template-columns: 1fr !important;
}

.slide.full .slide-left{
  /* Quita límites que achican el contenido */
  max-width: none !important;
  width: 100%;
  padding-right: 28px;   /* antes era muy grande */
}

/* Contenedor interno “ancho pro” */
.full-wrap{
  width: 100%;
  max-width: 1320px;     /* más ancho = aprovecha la pantalla */
}

/* Grid 2x2 que realmente estira */
.os-grid{
  width: 100%;
  max-width: 1320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Tarjetas consistentes */
.os-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
}

/* Encabezado de tarjeta con ícono */
.os-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.os-pill{
  font-weight: 900;
  color: var(--accent);
  letter-spacing: .08em;
}

.os-ico{
  width: 16px;
  height: 16px;
  opacity: .95;
  flex: 0 0 auto;
}

.os-title{
  font-weight: 900;
}

/* Responsive */
@media (max-width: 980px){
  .os-grid{ grid-template-columns: 1fr; }
  .full-wrap{ max-width: 100%; }
}


/* ===== Jerarquía más fuerte en los títulos de cada card ===== */
.os-head{
  gap: 12px;
  margin-bottom: 12px;
}

.os-pill{
  font-size: 14px;          /* antes parecía muy pequeño */
  font-weight: 950;
  letter-spacing: .10em;
  color: var(--accent);
}

.os-ico{
  width: 22px;              /* antes 16px */
  height: 22px;
  opacity: 1;
  filter: drop-shadow(0 6px 18px rgba(255,159,67,.18));
}

.os-title{
  font-size: 18px;          /* antes ~16 */
  font-weight: 950;
  letter-spacing: .01em;
  color: rgba(255,255,255,.95);
}

/* Espaciado para que el cuerpo no se pegue al header */
.os-card > div:last-child{
  margin-top: 2px;
}


/* Línea sutil bajo el header (premium, no invasivo) */
.os-divider{
  height: 1px;
  width: 100%;
  margin: 10px 0 10px;
  background: linear-gradient(90deg, rgba(255,159,67,.35), rgba(255,255,255,.05));
  border-radius: 999px;
}


.os-badge{
  font-weight: 950;
  letter-spacing: .10em;
  color: var(--accent);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,159,67,.35);
  background: rgba(255,159,67,.10);
}

.os-body{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}

.lead-text{
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  max-width: 90ch;
}

.kpis-wide{
  margin-top: 16px;
}


/* ===== Hover premium: lift + glow (sutil) ===== */
.os-card{
  position: relative;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  will-change: transform;
}

.os-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,159,67,.28);
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,159,67,.10),
    0 0 32px rgba(255,159,67,.12);
  background: linear-gradient(135deg, rgba(255,159,67,.10), rgba(255,255,255,.02));
}

/* Un glow extra súper suave desde abajo (no “neón”) */
.os-card::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  background: radial-gradient(600px 180px at 30% 120%, rgba(255,159,67,.18), transparent 60%);
}

.os-card:hover::after{
  opacity: 1;
}

/* Accesible: focus para navegación con teclado */
.os-card:focus-within{
  outline: none;
  transform: translateY(-3px);
  border-color: rgba(255,159,67,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,159,67,.18);
}

/* Respeta preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  .os-card,
  .os-card::after{
    transition: none !important;
  }
  .os-card:hover{
    transform: none !important;
  }
}


/* ===== Microdetalle PRO: ícono reacciona al hover del card ===== */
.os-ico{
  transform-origin: 50% 50%;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

/* Cuando el card entra en hover, el ícono se realza */
.os-card:hover .os-ico{
  transform: scale(1.08);
  opacity: 1;
  filter:
    drop-shadow(0 10px 22px rgba(255,159,67,.22))
    drop-shadow(0 0 12px rgba(255,159,67,.14));
}

/* También cuando navegas con teclado (focus) */
.os-card:focus-within .os-ico{
  transform: scale(1.06);
  filter:
    drop-shadow(0 10px 22px rgba(255,159,67,.18))
    drop-shadow(0 0 10px rgba(255,159,67,.12));
}

/* Respeta preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  .os-ico{ transition: none !important; }
  .os-card:hover .os-ico,
  .os-card:focus-within .os-ico{
    transform: none !important;
    filter: none !important;
  }
}


/* ===== Microglow sutil en el badge (sin movimiento) ===== */
.os-badge{
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.os-card:hover .os-badge{
  border-color: rgba(255,159,67,.48);
  background: rgba(255,159,67,.14);
  box-shadow:
    0 0 0 1px rgba(255,159,67,.18),
    0 10px 26px rgba(255,159,67,.10);
}

/* También para navegación con teclado */
.os-card:focus-within .os-badge{
  border-color: rgba(255,159,67,.55);
  background: rgba(255,159,67,.16);
  box-shadow:
    0 0 0 2px rgba(255,159,67,.18),
    0 10px 26px rgba(255,159,67,.08);
}

/* Respeta preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  .os-badge{ transition: none !important; }
  .os-card:hover .os-badge,
  .os-card:focus-within .os-badge{
    box-shadow: none !important;
  }
}


/* ===== Layout pro para el Objetivo Específico: distribución vertical ===== */
.obj-layout{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto; /* top / middle / bottom */
  padding: 34px 0; /* aire arriba y abajo */
}

.obj-top{
  align-self: start;
}

.obj-mid{
  align-self: center; /* aquí vive el bloque principal */
}

.obj-bottom{
  align-self: end; /* kpis abajo */
}

.obj-mid .card{
  margin-top: 18px;
}

/* Ajuste: que el título no se vaya enorme y deje respirar */
.obj-top .slide-title{
  margin: 8px 0 6px;
}

/* KPIs más “cierre” */
.obj-bottom .kpis{
  margin-top: 14px;
}


/* Garantiza que ninguna slide haga scroll */
.slide{ height: 100vh; overflow: hidden; }


.slide-left{
  padding-bottom: 48px;
}


/* Empuja el contenido hacia arriba y garantiza aire inferior */
.left-stack{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.left-top{
  /* el contenido ocupa lo que necesita */
}

.left-bottom-spacer{
  /* aire inferior real */
  flex: 0 0 48px; /* prueba 48px; si quieres más, súbelo a 56px */
}


.card-text{
  max-width: none;
  width: 100%;
}


/* =========================================================
   VARIANTE SOLO PARA CARÁTULA (FULLSCREEN SIN ROMPER OTRAS)
========================================================= */
.slide.cover{
  width: 100vw;
  height: 100vh;
}

/* Mantiene la grilla original 60/40, pero hace “full-height” real */
.slide.cover .slide-left,
.slide.cover .slide-right{
  min-height: 100vh;
}

/* Ajuste fino: aprovecha mejor el espacio en carátula sin cambiar el resto */
.slide.cover .slide-left{
  padding: 64px;                 /* un poco más “premium” */
  justify-content: center;       /* centra verticalmente el stack */
}

/* Si en carátula tu contenido se queda muy arriba,
   esto lo equilibra sin afectar otras slides */
.slide.cover .slide-subtitle{
  font-size: 16px;               /* legibilidad mejor en portada */
}

/* Cards en cover un pelín más grandes (solo portada) */
.slide.cover .card{
  margin-top: 22px;
}

/* KPIs respirando mejor */
.slide.cover .kpis{
  margin-top: 16px;
}