/* ===========================================================
   Tema UPSA — Defensa de tesis Jorge Cordova
   Paleta sobria: VERDE UPSA (base) + AZUL MARCA (único acento)
   + neutros (blanco / grises). Sin rojo.
   =========================================================== */

:root {
  --green:       #00843D;   /* verde institucional UPSA */
  --green-dk:    #056A33;
  --green-dkr:   #044F26;
  --green-tint:  rgba(0,132,61,.08);
  --green-lt:    #4FC383;   /* verde claro — acento sobre fondos oscuros */

  --blue:        #1B3A6B;   /* azul marca (acento) */
  --blue-dk:     #142C52;
  --blue-lt:     #2F6FBF;
  --blue-tint:   rgba(27,58,107,.07);

  --ink:         #1C2530;   /* texto principal */
  --muted:       #5B6671;   /* texto secundario */
  --line:        #E2E7EC;   /* bordes suaves */
  --surface:     #F5F7F9;   /* fondo de tarjetas suaves */
  --slate:       #3A444F;
  --slate-2:     #6B7682;
  --white:       #FFFFFF;
}

/* ---------- Base ---------- */
.reveal {
  font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: inherit; color: var(--blue);
  text-transform: none; letter-spacing: -.01em; line-height: 1.12;
  margin: 0 0 .35em 0; font-weight: 800;
}
.reveal h2 { font-size: 1.5em; }
.reveal h3 { font-size: 1.0em; color: var(--green-dk); }
.reveal p, .reveal li { line-height: 1.4; }
.reveal strong { color: var(--ink); font-weight: 700; }
.reveal em { color: var(--green-dk); font-style: normal; font-weight: 700; }
.reveal a { color: var(--blue-lt); }
.reveal .muted { color: var(--muted); }
.reveal .small { font-size: .72em; }
.reveal .center { text-align: center; }

/* etiqueta de sección (kicker) — chip verde */
.kicker {
  display: inline-block;
  font-size: .46em; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--green-dk); background: var(--green-tint);
  padding: .35em .9em; border-radius: 999px; margin-bottom: .55em;
}

/* título con barra de acento bicolor */
.reveal h2.tit { position: relative; padding-bottom: .28em; margin-bottom: .6em; }
.reveal h2.tit::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.4em; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--green) 0 62%, var(--blue) 62% 100%);
}

/* ---------- Listas ---------- */
.reveal ul { margin-left: 1.05em; list-style: none; }
.reveal ul li { margin: .3em 0; position: relative; padding-left: .2em; }
.reveal ul li::before {
  content: ""; position: absolute; left: -.95em; top: .55em;
  width: .42em; height: .42em; border-radius: 2px; background: var(--green);
  transform: rotate(45deg);
}
.reveal ul li ul { margin-top: .15em; }
.reveal ul li ul li::before { background: var(--blue-lt); border-radius: 50%; transform: none; top: .6em; }

/* ---------- Layout helpers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: .8em; }
.grid-60-40 { display: grid; grid-template-columns: 1fr 42%; gap: 1.1em; align-items: center; }
.stretch { align-items: stretch !important; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 12px;
  padding: .7em .9em;
  box-shadow: 0 4px 16px rgba(20,44,82,.06);
}
.card.blue  { border-left-color: var(--blue); }
.card.dark  { border-left-color: var(--slate); }
.card.soft  { background: var(--surface); box-shadow: none; }
.card.soft.green { background: var(--green-tint); border-color: rgba(0,132,61,.2); }
.card.soft.blueb { background: var(--blue-tint); border-color: rgba(27,58,107,.2); }
.card h3 { margin: 0 0 .25em 0; display: flex; align-items: center; gap: .4em; }
.card h3 .dot { width: .5em; height: .5em; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.card.blue h3 .dot { background: var(--blue); }
.card.dark h3 .dot { background: var(--slate); }

/* numerito redondo (para objetivos / agenda) */
.numbadge {
  flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-dkr));
  color: #fff; font-weight: 800; font-size: .85em;
  display: flex; align-items: center; justify-content: center;
}
.numbadge.blue { background: linear-gradient(135deg, var(--blue), var(--blue-dk)); }

/* ---------- ruta metodológica (objetivos / conclusiones) ---------- */
/* tira horizontal de 7 pasos numerados, con numeración compartida entre
   la diapositiva de objetivos y la de conclusiones (hilo conductor). */
.ruta { display: flex; align-items: flex-start; justify-content: space-between; gap: .25em; margin: .2em 0; }
.ruta .paso { flex: 1 1 0; text-align: center; position: relative; padding-top: .15em; }
.ruta .paso .numbadge {
  position: relative; z-index: 1; margin: 0 auto .4em;
  width: 1.7em; height: 1.7em; font-size: .8em;
}
.ruta .paso .lbl { display: block; font-size: .58em; line-height: 1.18; color: var(--ink); padding: 0 .15em; }
.ruta .paso .lbl strong { color: var(--blue); }
/* conector degradado verde→azul detrás de los badges */
.ruta .paso:not(:last-child)::after {
  content: ''; position: absolute; z-index: 0; height: 3px;
  top: .82em; left: calc(50% + .9em); width: calc(100% - 1.8em);
  background: linear-gradient(90deg, var(--green), var(--blue));
  border-radius: 2px;
}
/* variante "hecho": el badge muestra estado cumplido con un check verde */
.ruta.hecho .paso .numbadge {
  background: linear-gradient(135deg, var(--green), var(--green-dkr));
}
.ruta.hecho .paso .numbadge::after {
  content: '✓'; position: absolute; bottom: -.15em; right: -.25em;
  width: 1em; height: 1em; border-radius: 50%;
  background: #fff; color: var(--green);
  font-size: .62em; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(20,44,82,.25);
}

/* ---------- slide Objetivos (#objetivos): rediseño full-height ---------- */
/* Todo scopeado a #objetivos: NO tocar la regla base .ruta (compartida con Conclusiones). */
.reveal .slides > section#objetivos.present { top: 0 !important; height: 100% !important; }
#objetivos {
  height: 100%; display: flex; flex-direction: column;
  padding-bottom: 1.2em; /* respeta la franja inferior de seguridad (110px) */
}

/* banda superior: objetivo general como foco */
#objetivos .card.blue { margin-bottom: .6em; padding: .85em 1.1em; }
#objetivos .card.blue .og-eyebrow {
  font-size: .58em; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blue); margin: 0 0 .3em 0;
}
#objetivos .card.blue .og-text { margin: 0; font-size: 1.02em; line-height: 1.35; }

/* separador centrado con reglas finas a los lados */
.obj-sep { display: flex; align-items: center; gap: .8em; margin: .1em 0 .4em; }
.obj-sep::before, .obj-sep::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--line);
}
.obj-sep span {
  font-size: .58em; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; white-space: nowrap;
}

/* la banda de estaciones se centra en el alto restante (mata el vacío inferior) */
#objetivos .ruta-wrap { flex: 1 1 auto; display: flex; align-items: center; }

/* Stepper horizontal: la línea-camino pasa por el CENTRO de los nodos numerados,
   con tarjetas compactas colgando de cada nodo (todas de igual alto). */
#objetivos .ruta { position: relative; gap: .9em; margin-top: .2em; align-items: stretch; }
#objetivos .ruta::before {
  content: ''; position: absolute; z-index: 0;
  left: 7%; right: 7%; top: .95em; height: 3px; border-radius: 2px; /* .95em = mitad del badge */
  background: linear-gradient(90deg, var(--green), var(--blue));
}
#objetivos .ruta .paso {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6em;
}
#objetivos .ruta .paso:not(:last-child)::after { display: none; } /* anula conector base aquí */
#objetivos .ruta .paso .numbadge {
  position: relative; z-index: 1; margin: 0;
  width: 1.9em; height: 1.9em; font-size: .95em;
  box-shadow: 0 0 0 4px var(--white); /* halo blanco para "cortar" la línea limpio */
}
#objetivos .ruta .paso .lbl {
  flex: 1 1 auto; width: 100%; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 5px 16px rgba(20,44,82,.08);
  padding: .8em .55em; font-size: .62em; color: var(--muted); line-height: 1.25;
  display: flex; flex-direction: column; justify-content: center;
}
#objetivos .ruta .paso .lbl strong {
  display: block; font-size: 1.2em; color: var(--blue); margin-bottom: .25em;
}

/* ---------- slides Conclusiones (.conclu, las dos): mismo stepper que Objetivos ---------- */
/* Reutiliza el patrón de #objetivos, scopeado; conserva el check ✓ de .ruta.hecho y la banda verde. */
.reveal .slides > section.conclu.present { top: 0 !important; height: 100% !important; }
.conclu {
  height: 100%; display: flex; flex-direction: column;
  padding-bottom: 1.2em; /* franja inferior de seguridad (110px) */
}
.conclu .ruta-wrap { flex: 1 1 auto; display: flex; align-items: center; }

.conclu .ruta { position: relative; gap: .9em; align-items: stretch; }
.conclu .ruta::before {
  content: ''; position: absolute; z-index: 0;
  left: 7%; right: 7%; top: .95em; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}
.conclu .ruta .paso {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6em;
}
.conclu .ruta .paso:not(:last-child)::after { display: none; } /* anula conector base aquí */
.conclu .ruta .paso .numbadge {
  position: relative; z-index: 1; margin: 0;
  width: 1.9em; height: 1.9em; font-size: .95em;
  box-shadow: 0 0 0 4px var(--white); /* halo blanco; el check ✓ de .hecho sigue encima */
}
.conclu .ruta .paso .lbl {
  flex: 1 1 auto; width: 100%; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 5px 16px rgba(20,44,82,.08);
  padding: .8em .55em; font-size: .62em; color: var(--muted); line-height: 1.25;
  display: flex; flex-direction: column; justify-content: center;
}
.conclu .ruta .paso .lbl strong { color: var(--blue); } /* resalte inline, sin block */
.conclu .card.soft.green { margin-top: .8em; }

/* ---------- KPIs (mosaico con degradado) ---------- */
.kpi {
  border-radius: 12px; padding: .7em .4em; text-align: center; color: #fff;
  box-shadow: 0 6px 18px rgba(20,44,82,.15); position: relative; overflow: hidden;
}
.kpi.green { background: linear-gradient(135deg, var(--green), var(--green-dkr)); }
.kpi.blue  { background: linear-gradient(135deg, var(--blue-lt), var(--blue-dk)); }
.kpi.slate { background: linear-gradient(135deg, var(--slate-2), var(--slate)); }
.kpi .num { display: block; font-size: 1.7em; font-weight: 900; line-height: 1.05; }
.kpi .num small { font-size: .42em; font-weight: 600; opacity: .85; }
.kpi .lbl { display: block; font-size: .52em; margin-top: .4em; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.85); font-weight: 600; }

/* tarjeta KPI clara (sobre fondo) */
.kpi-light {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-top: 4px solid var(--green); border-radius: 12px; padding: .6em .4em;
  text-align: center; box-shadow: 0 4px 14px rgba(20,44,82,.06);
}
.kpi-light.blue { border-top-color: var(--blue); }
.kpi-light .num { display: block; font-size: 1.55em; font-weight: 900; color: var(--green-dk); line-height: 1.05; }
.kpi-light.blue .num { color: var(--blue); }
.kpi-light .lbl { display: block; font-size: .55em; color: var(--muted); margin-top: .35em; letter-spacing: .5px; text-transform: uppercase; }

/* ---------- FODA 2x2 ---------- */
.foda { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; font-size: .72em; }
.foda .q { border-radius: 12px; padding: .6em .8em; color: #fff; box-shadow: 0 5px 16px rgba(20,44,82,.12); }
.foda .q h3 { color: #fff; margin: 0 0 .3em 0; font-size: 1.05em; letter-spacing: .3px; display: flex; align-items: center; gap: .45em; }
.foda .q h3 svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; opacity: .95; }
.foda .q h3 .axis { margin-left: auto; font-size: .62em; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: rgba(255,255,255,.18); padding: .18em .6em; border-radius: 999px; }
.foda .q ul { margin-left: .9em; }

/* ---------- "orden de trabajo en papel": fotos con zoom por fragment ---------- */
/* Alturas de imagen en px ABSOLUTO (nunca %/vw en flex) → sin dependencia circular ni recorte. */
.reveal .slides > section#ot-fisica.present { top: 0 !important; height: 100% !important; }
#ot-fisica { padding: .9rem 2rem 1rem; height: 100%; display: flex; flex-direction: column;
  transition: padding .45s ease; }
#ot-fisica.ot-zoom { padding: .15rem 1rem; }   /* zoom: margen mínimo → fotos al máximo */
#ot-fisica .ot-head { flex: 0 0 auto; max-height: 130px; overflow: hidden;
  transition: opacity .4s ease, max-height .45s ease, margin .45s ease; }
#ot-fisica.ot-zoom .ot-head { opacity: 0; position: absolute; top: 0; left: 0; right: 0; margin: 0; pointer-events: none; }
#ot-fisica .ot-grid { flex: 1 1 auto; min-height: 0; margin: 0; position: relative;
  display: flex; justify-content: center; align-items: center; }
/* en zoom la grilla se fija al lienzo real (1280×720) para centrar simétrico y al máximo.
   Se condiciona a .present para que NO flote sobre otra slide si el zoom queda activo fuera de pantalla. */
#ot-fisica.present.ot-zoom .ot-grid { position: fixed; inset: 0; z-index: 5; }
/* ambas fotos dentro de un solo contenedor con marco (relieve + sombra, estilo .marco) */
#ot-fisica .ot-marco {
  display: flex; align-items: center; gap: 1.6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20,44,82,.16);
  padding: .9rem 1.1rem; transition: padding .45s ease;
}
#ot-fisica.ot-zoom .ot-marco { padding: .5rem .7rem; gap: 1.2rem; }
#ot-fisica .ot-foto { margin: 0; display: flex; flex-direction: column; align-items: center; }
#ot-fisica .ot-foto img { display: block; max-height: 450px; max-width: 100%; width: auto;
  filter: drop-shadow(0 3px 8px rgba(20,44,82,.14)); transition: max-height .45s ease; }
#ot-fisica.ot-zoom .ot-foto img { max-height: 600px; }   /* algo menor que 650 → deja columnas laterales para los callouts */
#ot-fisica .ot-foto figcaption { margin-top: .35rem; color: var(--muted); font-weight: 700;
  font-size: .58em; letter-spacing: 1.5px; text-transform: uppercase; transition: opacity .3s ease, max-height .45s ease; }
#ot-fisica.ot-zoom .ot-foto figcaption { opacity: 0; max-height: 0; margin: 0; }

/* --- anotaciones (callouts) que entran junto con el zoom, señalando zonas de cada foto --- */
#ot-fisica .ot-callouts { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#ot-fisica .cl-col { position: absolute; top: 0; bottom: 0; width: 210px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 11% .4rem; }
#ot-fisica .cl-left  { left: 0;  align-items: flex-start; justify-content: flex-start; gap: 1rem; }
#ot-fisica .cl-right { right: 0; align-items: flex-end; }
#ot-fisica .ot-cl {
  position: relative; max-width: 186px; background: #fff; border-radius: 9px;
  padding: .5rem .7rem; font-size: .52em; font-weight: 700; line-height: 1.25;
  box-shadow: 0 6px 18px rgba(20,44,82,.22);
  opacity: 0; transition: opacity .45s ease, transform .45s ease;
}
#ot-fisica .cl-left  .ot-cl { color: var(--green-dk); border-left: 4px solid var(--green); transform: translateX(-14px); }
#ot-fisica .cl-right .ot-cl { color: var(--blue);     border-right: 4px solid var(--blue); text-align: right; transform: translateX(14px); }
/* línea conectora corta apuntando hacia las fotos */
#ot-fisica .ot-cl::after { content: ""; position: absolute; top: 50%; width: 26px; height: 2px; background: currentColor; opacity: .5; }
#ot-fisica .cl-left  .ot-cl::after { right: -26px; }
#ot-fisica .cl-right .ot-cl::after { left: -26px; }
/* al hacer zoom: los chips aparecen con un leve desplazamiento y stagger */
#ot-fisica.ot-zoom .ot-cl  { opacity: 1; transform: translateX(0); }
#ot-fisica.ot-zoom .cl-top { transition-delay: .25s; }
#ot-fisica.ot-zoom .cl-bot { transition-delay: .45s; }

/* ---------- "la OT en el sistema": mismas mecánicas de zoom que #ot-fisica, sin callouts ---------- */
.reveal .slides > section#ot-sistema.present { top: 0 !important; height: 100% !important; }
#ot-sistema { padding: .9rem 2rem 1rem; height: 100%; display: flex; flex-direction: column;
  transition: padding .45s ease; }
#ot-sistema.ot-zoom { padding: .15rem 1rem; }
#ot-sistema .ot-head { flex: 0 0 auto; max-height: 130px; overflow: hidden;
  transition: opacity .4s ease, max-height .45s ease, margin .45s ease; }
#ot-sistema.ot-zoom .ot-head { opacity: 0; position: absolute; top: 0; left: 0; right: 0; margin: 0; pointer-events: none; }
#ot-sistema .ot-grid { flex: 1 1 auto; min-height: 0; margin: 0;
  display: flex; justify-content: center; align-items: center; }
#ot-sistema.present.ot-zoom .ot-grid { position: fixed; inset: 0; z-index: 5; }
#ot-sistema .ot-marco {
  display: flex; align-items: center; gap: 1.6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20,44,82,.16);
  padding: .9rem 1.1rem; transition: padding .45s ease;
}
#ot-sistema.ot-zoom .ot-marco { padding: .5rem .7rem; gap: 1.2rem; }
#ot-sistema .ot-foto { margin: 0; display: flex; flex-direction: column; align-items: center; }
#ot-sistema .ot-foto img { display: block; max-height: 450px; max-width: 100%; width: auto;
  filter: drop-shadow(0 3px 8px rgba(20,44,82,.14)); transition: max-height .45s ease; }
#ot-sistema.ot-zoom .ot-foto img { max-height: 650px; }
#ot-sistema .ot-foto figcaption { margin-top: .35rem; color: var(--muted); font-weight: 700;
  font-size: .58em; letter-spacing: 1.5px; text-transform: uppercase; transition: opacity .3s ease, max-height .45s ease; }
#ot-sistema.ot-zoom .ot-foto figcaption { opacity: 0; max-height: 0; margin: 0; }

/* ---------- "la OT en Excel": mismas mecánicas de zoom (imagen única apaisada) ---------- */
.reveal .slides > section#ot-excel.present { top: 0 !important; height: 100% !important; }
#ot-excel { padding: .9rem 2rem 1rem; height: 100%; display: flex; flex-direction: column;
  transition: padding .45s ease; }
#ot-excel.ot-zoom { padding: .15rem 1rem; }
#ot-excel .ot-head { flex: 0 0 auto; max-height: 130px; overflow: hidden;
  transition: opacity .4s ease, max-height .45s ease, margin .45s ease; }
#ot-excel.ot-zoom .ot-head { opacity: 0; position: absolute; top: 0; left: 0; right: 0; margin: 0; pointer-events: none; }
#ot-excel .ot-grid { flex: 1 1 auto; min-height: 0; margin: 0;
  display: flex; justify-content: center; align-items: center; }
#ot-excel.present.ot-zoom .ot-grid { position: fixed; inset: 0; z-index: 5; }
#ot-excel .ot-marco {
  display: flex; align-items: center; gap: 1.6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20,44,82,.16);
  padding: .9rem 1.1rem; transition: padding .45s ease;
}
#ot-excel.ot-zoom .ot-marco { padding: .5rem .7rem; gap: 1.2rem; }
#ot-excel .ot-foto { margin: 0; display: flex; flex-direction: column; align-items: center; }
#ot-excel .ot-foto img { display: block; max-height: 450px; max-width: 100%; width: auto;
  filter: drop-shadow(0 3px 8px rgba(20,44,82,.14)); transition: max-height .45s ease; }
#ot-excel.ot-zoom .ot-foto img { max-height: 600px; }   /* apaisada → alto algo menor para no rozar el borde de 1280 */
#ot-excel .ot-foto figcaption { margin-top: .35rem; color: var(--muted); font-weight: 700;
  font-size: .58em; letter-spacing: 1.5px; text-transform: uppercase; transition: opacity .3s ease, max-height .45s ease; }
#ot-excel.ot-zoom .ot-foto figcaption { opacity: 0; max-height: 0; margin: 0; }

/* ---------- "requisitos y casos de uso": zoom del diagrama + tabla de 14 por fragment ---------- */
/* En zoom: el título colapsa, la columna del diagrama se ENSANCHA (la tabla pasa a barra angosta)
   y el diagrama crece en alto y ancho → protagonista. Todo animado para un zoom continuo. */
.reveal .slides > section#cu-slide.present { top: 0 !important; height: 100% !important; }
#cu-slide { padding: .9rem 2rem 1rem; height: 100%; display: flex; flex-direction: column;
  transition: padding .45s ease; }
#cu-slide.cu-zoom { padding: .2rem 1.2rem; }
/* cabecera (kicker + título): max-height numérico explícito para que el colapso INTERPOLE (smooth) */
#cu-slide .cu-head { flex: 0 0 auto; max-height: 120px; overflow: hidden;
  transition: opacity .4s ease, max-height .45s ease, margin .45s ease; }
#cu-slide.cu-zoom .cu-head { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
/* la grilla ocupa el alto restante y ANIMA sus columnas (esto da la sensación de zoom, no de corte) */
#cu-slide .cu-grid { flex: 1 1 auto; min-height: 0; margin: 0; align-items: stretch;
  grid-template-columns: 1fr 40%; transition: grid-template-columns .45s ease; }
#cu-slide.cu-zoom .cu-grid { grid-template-columns: 1fr 23%; }
/* columna del diagrama: centra la imagen vertical y horizontalmente, ocupando todo el alto */
#cu-slide .img-cap { display: flex; flex-direction: column; justify-content: center;
  align-items: center; min-height: 0; }
#cu-slide .cu-img { max-height: 440px; max-width: 100%; width: auto;
  transition: max-height .45s ease; }
#cu-slide.cu-zoom .cu-img { max-height: 660px; }
#cu-slide .fuente { transition: opacity .3s ease; }
#cu-slide.cu-zoom .fuente { opacity: 0; }
/* las dos capas (intro / tabla) se apilan a todo el alto y centran su contenido → crossfade sin saltos */
#cu-slide .cu-panel { position: relative; min-height: 0; }
#cu-slide .cu-intro,
#cu-slide .cu-lista {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .4s ease;
}
#cu-slide .cu-lista { opacity: 0; pointer-events: none; }
#cu-slide.cu-zoom .cu-intro { opacity: 0; pointer-events: none; }
#cu-slide.cu-zoom .cu-lista { opacity: 1; pointer-events: auto; }
/* tabla vertical compacta y angosta: 14 filas + cabecera sin desbordar los 720px */
#cu-slide .cu-tabla { font-size: .52em; line-height: 1.2; }
#cu-slide .cu-tabla th,
#cu-slide .cu-tabla td { padding: .18em .5em; }
#cu-slide .cu-tabla td { color: var(--ink); }
#cu-slide .cu-tabla .cu-num { width: 1.8em; text-align: center; }
#cu-slide .cu-tabla tbody tr:nth-child(odd) { background: var(--green-tint); }

/* ---------- "diagrama de clases": zoom por fragment que oculta el título (espejo de .cu-zoom) ---------- */
#dc-slide { display: flex; flex-direction: column; }
/* cabecera (kicker + título): max-height numérico explícito para que el colapso INTERPOLE (smooth) */
#dc-slide .dc-head { flex: 0 0 auto; max-height: 120px; overflow: hidden;
  transition: opacity .4s ease, max-height .45s ease, margin .45s ease; }
#dc-slide.dc-zoom .dc-head { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
/* la imagen ocupa el alto restante y crece en el zoom → sensación de acercamiento */
#dc-slide .img-cap { flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: center; align-items: center; min-height: 0; }
#dc-slide .marco { max-height: 540px; max-width: 100%; width: auto; transition: max-height .45s ease; }
#dc-slide.dc-zoom .marco { max-height: 680px; }
#dc-slide .fuente { transition: opacity .3s ease; }
#dc-slide.dc-zoom .fuente { opacity: 0; }

.foda .q ul li::before { background: rgba(255,255,255,.9); }
.foda .F { background: linear-gradient(135deg, var(--green), var(--green-dkr)); }
.foda .O { background: linear-gradient(135deg, var(--blue-lt), var(--blue-dk)); }
.foda .D { background: linear-gradient(135deg, #46525e, var(--slate)); }
.foda .A { background: linear-gradient(135deg, #7a838d, var(--slate-2)); }

/* ---------- chips / stack tecnológico ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .45em; }
.chip {
  background: var(--green-tint); border: 1.5px solid rgba(0,132,61,.35);
  color: var(--green-dk); font-weight: 700;
  border-radius: 999px; padding: .22em .8em; font-size: .66em;
}
.chip.blue { background: var(--blue-tint); border-color: rgba(27,58,107,.35); color: var(--blue); }

/* ---------- imágenes ---------- */
.reveal .marco {
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20,44,82,.16); background: #fff; max-height: 540px;
}
.img-cap { display: block; text-align: center; }
.fuente { font-size: .5em; color: var(--muted); margin-top: .4em; }

/* tabla */
.reveal table { font-size: .72em; border-collapse: collapse; width: 100%; }
.reveal table th { background: var(--green-dk); color: #fff; padding: .5em .7em; text-align: left; font-weight: 700; }
.reveal table td { padding: .45em .7em; border-bottom: 1px solid var(--line); color: var(--muted); }

/* ANEXO · Requerimientos — compactar la tabla (14 filas) para que entre en 720px */
#requerimientos-tabla table    { font-size: .55em; }
#requerimientos-tabla table th { padding: .3em .6em; }
#requerimientos-tabla table td { padding: .22em .6em; }
#requerimientos-tabla .card ul li { margin: .16em 0; }

/* ---------- topbar / footer ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 31;
  background: linear-gradient(90deg, var(--green) 0 68%, var(--blue) 68% 100%);
}
.deck-footer {
  position: fixed; bottom: 14px; left: 26px; right: 120px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--muted); z-index: 30; pointer-events: none;
}
.deck-footer img { height: 22px; opacity: .92; }
.reveal .slide-number {
  background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 700; right: 24px; bottom: 10px;
}

/* ===========================================================
   PORTADA (light, premium con panel de acento)
   =========================================================== */
/* centrado vertical robusto (independiente del heurístico de reveal) */
.reveal .slides > section#portada.present,
.reveal .slides > section#cierre.present {
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#portada {
  position: relative;
  text-align: center;
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.88)),
    url('../img/imagen-fondo.png') center/cover no-repeat,
    #fff;
}
/* logo UPSA centrado, dentro del flujo (no se cruza con el texto) */
#portada .cover-logo { height: 96px; margin-top: -1.6em; margin-bottom: 1.1em; }
/* contenedor centrado de la portada — sin caja flotante */
#portada .cover-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2em; max-width: 24em; margin: 0 auto;
}
#portada .tipo {
  color: var(--green-dk); background: var(--green-tint);
  font-weight: 800; letter-spacing: 2.5px; font-size: .5em; text-transform: uppercase;
  padding: .4em 1.1em; border-radius: 999px; display: inline-block;
}
/* 3 líneas exactas: los <br> del HTML cortan y nowrap evita saltos extra dentro de cada línea */
#portada h1 { font-size: 1.15em; color: var(--blue-dk); margin: .5em auto .1em; max-width: none; line-height: 1.25; white-space: nowrap; }
#portada .sub { color: var(--muted); font-size: .72em; font-weight: 600; }
#portada .linea { width: 56%; height: 4px; margin: .7em auto; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue)); }
#portada .cover-meta {
  display: flex; flex-direction: column; align-items: center; gap: .9em;
  margin-top: .6em; text-align: center;
}
/* baja la línea de "Docente guía" respecto al nombre del autor */
#portada .cover-meta .autor { margin-bottom: 1.1em; }
#portada .cover-meta > div { font-size: .62em; color: var(--muted); font-weight: 600; line-height: 1.3; }
#portada .cover-meta .autor { font-size: .82em; color: var(--blue-dk); font-weight: 800; letter-spacing: .3px; }
#portada .cover-meta .lbl {
  display: block; font-size: .8em; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--green-dk); font-weight: 800; margin-bottom: .25em;
}

/* ===========================================================
   CIERRE (hero verde, logos en pastilla blanca)
   =========================================================== */
#cierre {
  text-align: center;
  background:
    radial-gradient(700px 420px at 85% 12%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--green-dkr) 92%, transparent),
      color-mix(in srgb, var(--green)    82%, transparent) 72%,
      color-mix(in srgb, var(--green-dk) 92%, transparent)),
    url('../img/imagen-fondo.png') center/cover no-repeat,
    var(--green);
  color: #fff;
}
/* cierre tipo bookend: el título del proyecto como centro (en blanco sobre verde) */
#cierre .cover-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2em; max-width: 26em; margin: 0 auto; padding-bottom: 2.4em;
}
#cierre .tipo {
  color: #fff; background: rgba(255,255,255,.18);
  font-weight: 800; letter-spacing: 2.5px; font-size: .5em; text-transform: uppercase;
  padding: .4em 1.1em; border-radius: 999px; display: inline-block;
}
#cierre h1 {
  font-size: 1.15em; color: #fff; margin: .5em auto .1em;
  max-width: none; line-height: 1.25; white-space: nowrap; letter-spacing: -.01em;
}
#cierre .linea {
  width: 56%; height: 4px; margin: .7em auto; border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.45));
}
#cierre .cover-meta {
  display: flex; flex-direction: column; align-items: center; gap: .9em;
  margin-top: .5em; text-align: center;
}
#cierre .cover-meta > div { font-size: .62em; color: rgba(255,255,255,.85); font-weight: 600; line-height: 1.3; }
#cierre .cover-meta .autor { font-size: .82em; color: #fff; font-weight: 800; letter-spacing: .3px; margin-bottom: 1.1em; }
#cierre .cover-meta .lbl {
  display: block; font-size: .8em; text-transform: uppercase; letter-spacing: 1.5px;
  color: #fff; font-weight: 800; margin-bottom: .25em; opacity: .85;
}
/* cinturón inferior delgado de lado a lado con los logos */
.cierre-belt {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 3.2em;
  background: rgba(255,255,255,.96); padding: .55em 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.22);
}
.cierre-belt img { height: 46px; }

/* ===========================================================
   BARRA DE NAVEGACIÓN (estilo flotante inferior)
   =========================================================== */
#nav {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 9999;
  background: rgba(4,79,38,.92); backdrop-filter: blur(12px);
  padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: opacity .4s ease;
}
/* ocultos durante la presentación; reaparecen al mover el mouse */
#nav.hide { opacity: 0; pointer-events: none; }
#nav button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
#nav button:hover { background: var(--green); transform: scale(1.08); }
#nav button svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#nav .count { color: #fff; font-weight: 700; font-size: 14px; min-width: 56px; text-align: center; letter-spacing: .5px; }
#nav .sep { width: 1px; height: 22px; background: rgba(255,255,255,.2); }
@media print { #nav, .topbar { display: none !important; } }

/* barra de progreso reveal en verde marca */
.reveal .progress { color: var(--green); height: 4px; }
.reveal .progress span { background: var(--green); }

/* ===========================================================
   VIDEO
   =========================================================== */
/* hero a sangre: el slot negro detrás de la capa de video */
.reveal .slides > section#video-slide.present { top: 0 !important; height: 100% !important; }
#video-slide { padding: 0; height: 100%; position: relative; overflow: hidden; background: #000; }

/* Capa de video a nivel <body> (FUERA de .slides). Va aquí porque Chrome no compone
   un <video> embebido dentro del árbol de slides de reveal (overlay de hardware → se
   ve en blanco). z-index 20: sobre los slides (11), bajo la topbar (31) y el #nav
   (9999) para no romper la navegación. */
#video-overlay {
  position: fixed; inset: 0; z-index: 50; display: none; background: #000;
}
#video-overlay.show { display: block; }
/* El <video> vive aparcado en <body> (oculto) y se mueve dentro de la capa al entrar
   a la slide; z-index 50 lo deja sobre los slides y la topbar, bajo el #nav (9999). */
#demo-video {
  display: block; position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
body > #demo-video { display: none; }   /* aparcado fuera de la capa: oculto */
/* el video no tiene sonido: ocultar el control de volumen/mute (Chrome/Edge) */
#demo-video::-webkit-media-controls-mute-button,
#demo-video::-webkit-media-controls-volume-control-container { display: none !important; }
/* chip flotante con el rótulo, por encima del video */
#video-overlay .video-chip {
  position: absolute; left: 1.4rem; top: 1.4rem; z-index: 2;
  background: rgba(255,255,255,.16); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.video-ph {
  position: absolute; inset: 0; z-index: 1; margin: 0; border: none; border-radius: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--muted); background: var(--surface);
}
.video-ph .play {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-dkr));
  display: flex; align-items: center; justify-content: center; margin-bottom: .5em;
  box-shadow: 0 8px 22px rgba(0,132,61,.4);
}
.video-ph .play::after { content: ""; border-left: 28px solid #fff;
  border-top: 17px solid transparent; border-bottom: 17px solid transparent; margin-left: 7px; }

/* ===========================================================
   PROBLEMA — video full-bleed (cinematográfico, sin caja)
   =========================================================== */
/* la slide ocupa todo el lienzo para que el video sangre */
.reveal .slides > section#problema.present {
  top: 0 !important; height: 100% !important;
}
#problema { padding: 0; height: 100%; position: relative; overflow: hidden; }

/* El video va como FONDO de diapositiva (data-background-video): reveal lo coloca en su
   capa .slide-background con object-fit:cover cubriendo todo el lienzo, sin margen ni caja. */

/* velo para legibilidad del texto: más denso a la izquierda y abajo */
.problema-scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(11,18,33,.86) 0%, rgba(11,18,33,.55) 50%, rgba(11,18,33,0) 78%),
    linear-gradient(0deg, rgba(11,18,33,.55) 0%, rgba(11,18,33,0) 35%);
}

/* capa de texto flotante; respeta los 110px inferiores de seguridad */
.problema-overlay {
  position: absolute; z-index: 1;
  left: 3.2rem; right: 3.2rem; top: 50%; transform: translateY(-50%);
  max-width: 60%;
  display: flex; flex-direction: column; gap: .55em;
}
.problema-overlay .kicker { background: rgba(255,255,255,.18); color: #fff; }
.reveal h2.tit.on-dark { color: #fff; }
.reveal h2.tit.on-dark::after { background: #fff; opacity: .9; }
.problema-overlay .lead-dark { color: rgba(255,255,255,.9); font-size: .8em; margin: 0; line-height: 1.35; }
/* la negrita del lead, en blanco (la base .reveal strong la pinta oscura → invisible sobre el video) */
.problema-overlay .lead-dark strong { color: #fff; }

/* cuadrícula 2×2 de factores en mini-tarjetas glass */
.problema-overlay .factores { gap: .6em; margin-top: .2em; align-items: stretch; }
.card.glass.factor { padding: .7em .85em; }
.card.glass.factor h3 {
  display: flex; align-items: center; gap: .45em;
  font-size: .82em; margin: 0 0 .3em;
}
.card.glass.factor h3 .numbadge { font-size: .7em; }
.card.glass.factor p { margin: 0; }

/* tarjeta glass: translúcida, texto claro, sin borde duro */
.card.glass {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
  color: #fff;
}
.card.glass h3 { color: #fff; }
.card.glass .small, .card.glass li { color: rgba(255,255,255,.92); }

/* ===========================================================
   EMPRESA — hero editorial (foto a sangre en la mitad derecha)
   =========================================================== */
/* la slide ocupa todo el lienzo para que la foto pueda sangrar */
.reveal .slides > section#empresa.present {
  top: 0 !important; height: 100% !important;
}
#empresa { padding: 0; height: 100%; }

.hero-split {
  display: grid; grid-template-columns: 1fr 46%;
  height: 100%; align-items: stretch;
}
.hero-text {
  align-self: center;
  padding: .2em 1.6em 2.4em 0;
  display: flex; flex-direction: column; gap: .7em;
}
.hero-text h2.tit { margin-bottom: 0; }
.hero-text .lead { font-size: .82em; color: var(--muted); line-height: 1.4; margin: 0; }

/* panel de foto: sangra arriba/abajo/derecha, redondeo solo en la costura interna */
.hero-photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px 0 0 14px;
  box-shadow: -14px 0 30px rgba(20,44,82,.12);
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  display: block;
}
/* pastilla flotante con el degradado de marca */
.hero-photo .hero-badge {
  position: absolute; left: 1em; bottom: 1em; z-index: 1;
  background: linear-gradient(135deg, var(--green), var(--green-dkr));
  color: #fff; font-weight: 800; font-size: .58em; letter-spacing: .5px;
  padding: .5em 1em; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,132,61,.4);
}

/* ===========================================================
   ARQUITECTURA — slide a sangre con video de fondo
   (flujo horizontal de capas en tarjetas glass)
   =========================================================== */
.reveal .slides > section#arquitectura.present { top: 0 !important; height: 100% !important; }
#arquitectura { padding: 0; height: 100%; position: relative; overflow: hidden; }

/* velo parejo (contenido centrado, no recostado a un lado como en #problema) */
#arquitectura .problema-scrim {
  background:
    linear-gradient(0deg, rgba(11,18,33,.88) 0%, rgba(11,18,33,.45) 60%, rgba(11,18,33,.6) 100%),
    linear-gradient(0deg, rgba(11,18,33,.5), rgba(11,18,33,.5));
}

/* capa de texto: ancho completo y centrada */
#arquitectura .arq-overlay {
  left: 3rem; right: 3rem; max-width: none;
  text-align: center; gap: .5em; align-items: center;
}
#arquitectura .arq-overlay h2.tit { margin-bottom: 0; }
#arquitectura .arq-overlay h2.tit.on-dark::after { margin-left: auto; margin-right: auto; }

/* flujo horizontal de las 3 capas */
#arquitectura .arq-flow {
  display: flex; align-items: stretch; justify-content: center;
  gap: .6em; width: 100%; margin: .2em 0;
}
#arquitectura .arq-layer {
  flex: 1; text-align: left; padding: .8em .9em;
  border-top: 3px solid var(--green-lt);
  display: flex; flex-direction: column; gap: .1em;
}
#arquitectura .arq-layer.blue { border-top-color: var(--blue-lt); }
#arquitectura .arq-layer.data { border-top-color: rgba(255,255,255,.65); }
#arquitectura .arq-layer h3 {
  margin: 0; font-size: .82em; line-height: 1.15; color: #fff;
}
#arquitectura .arq-layer .dot { background: var(--green-lt); }
#arquitectura .arq-layer.blue .dot { background: var(--blue-lt); }
#arquitectura .arq-layer.data .dot { background: rgba(255,255,255,.85); }

#arquitectura .arq-fn {
  margin: 0 0 .35em; font-size: .56em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: rgba(255,255,255,.68);
}
#arquitectura .arq-layer p:not(.arq-fn) {
  margin: .14em 0; font-size: .62em; line-height: 1.3;
  color: rgba(255,255,255,.9);
}
#arquitectura .arq-layer p strong { color: #fff; font-weight: 800; }
#arquitectura .arq-layer.green p strong { color: var(--green-lt); }
#arquitectura .arq-layer.blue p strong { color: var(--blue-lt); }

#arquitectura .arq-arrow {
  display: flex; align-items: center;
  color: rgba(255,255,255,.55); font-size: 1.3em; font-weight: 700;
}

/* franja de cierre tipo pastilla glass */
#arquitectura .arq-take {
  display: inline-block; margin: .3em auto 0;
  padding: .5em 1.2em; border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .68em; color: rgba(255,255,255,.92);
}
#arquitectura .arq-take strong { color: var(--green-lt); }

/* ===========================================================
   RECOMENDACIONES — hero a sangre con video de fondo (trabajo futuro)
   Reutiliza el patrón centrado de #arquitectura. Fallback: data-background-color.
   =========================================================== */
.reveal .slides > section#recomendaciones.present { top: 0 !important; height: 100% !important; }
#recomendaciones { padding: 0; height: 100%; position: relative; overflow: hidden; }

/* velo parejo (contenido centrado, no recostado a un lado); más denso arriba para el título */
#recomendaciones .problema-scrim {
  background:
    linear-gradient(0deg, rgba(11,18,33,.88) 0%, rgba(11,18,33,.42) 55%, rgba(11,18,33,.7) 100%),
    linear-gradient(0deg, rgba(11,18,33,.5), rgba(11,18,33,.5));
}

/* capa de texto: ancho completo y centrada */
#recomendaciones .reco-overlay {
  left: 3rem; right: 3rem; max-width: none;
  text-align: center; gap: .5em; align-items: center;
}
#recomendaciones .reco-overlay h2.tit.on-dark::after { margin-left: auto; margin-right: auto; }
#recomendaciones .reco-overlay .lead-dark { margin-bottom: .2em; }
/* sombra para despegar el título/bajada del video */
#recomendaciones .reco-overlay h2.tit.on-dark,
#recomendaciones .reco-overlay .lead-dark { text-shadow: 0 2px 10px rgba(0,0,0,.55); }
/* la negrita del lead, en blanco (la base la pinta oscura → invisible sobre el video) */
#recomendaciones .reco-overlay .lead-dark strong { color: #fff; }

/* tres tarjetas SÓLIDAS de color a lo ancho, contenido alineado a la izquierda */
#recomendaciones .grid-3 { width: 100%; gap: .8em; text-align: left; align-items: stretch; }
#recomendaciones .reco-card {
  border: 0; border-radius: 14px; color: #fff;
  padding: .95em 1.05em;
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
  display: flex; flex-direction: column;
}
/* píldora con el horizonte de tiempo (reutiliza el look de .axis del FODA) */
#recomendaciones .reco-tag {
  align-self: flex-start; margin-bottom: .5em;
  font-size: .5em; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  background: rgba(255,255,255,.18); color: #fff;
  padding: .25em .7em; border-radius: 999px;
}
/* ícono lineal junto al título (hereda el blanco vía currentColor) */
#recomendaciones .reco-card h3 svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; opacity: .95; }
#recomendaciones .reco-card.green { background: linear-gradient(160deg, var(--green),  var(--green-dkr)); }
#recomendaciones .reco-card.blue  { background: linear-gradient(160deg, var(--blue-lt), var(--blue-dk));  }
#recomendaciones .reco-card.dark  { background: linear-gradient(160deg, var(--slate),  #0b1221);          }
#recomendaciones .reco-card h3 { color: #fff; font-size: .95em; margin: 0 0 .4em; }
#recomendaciones .reco-card ul { margin: 0; padding-left: 1.05em; }
#recomendaciones .reco-card li { color: rgba(255,255,255,.95); font-size: .66em; line-height: 1.4; margin: .16em 0; }
/* sobre el relleno de color, negrita y viñetas deben ir en blanco (la base los pinta oscuros) */
#recomendaciones .reco-card li strong { color: #fff; }
#recomendaciones .reco-card li::before { background: rgba(255,255,255,.9); }

/* ===========================================================
   Ejemplo de caso de uso CU3 — ficha (#cu-ej-spec) +
   trazabilidad ICONIX (#cu-ej-iconix)
   =========================================================== */
#cu-ej-spec, #cu-ej-iconix { display: flex; flex-direction: column; }

/* --- ficha del caso de uso --- */
#cu-ej-spec .cu-ej-grid { align-items: stretch; gap: 1.1em; margin-top: .25em; }
#cu-ej-spec .cu-ej-left { display: flex; flex-direction: column; gap: .55em; }
#cu-ej-spec .card { padding: .55em .8em; }
#cu-ej-spec .card h3 {
  font-size: .62em; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 0 0 .3em 0;
}
#cu-ej-spec .card.soft.green h3 { color: var(--green-dk); }
#cu-ej-spec .card.blue h3 { color: var(--blue); }
#cu-ej-spec .card p { font-size: .58em; line-height: 1.36; margin: 0; }

#cu-ej-spec .chips { gap: .4em; }
#cu-ej-spec .chip { font-size: .5em; }
#cu-ej-spec .cu-ej-freq { margin-top: .5em !important; font-size: .56em; }

#cu-ej-spec .cu-ej-flujo { display: flex; flex-direction: column; }
#cu-ej-spec .cu-ej-flujo h3 { color: var(--blue); }
#cu-ej-spec .flujo { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
#cu-ej-spec .flujo li {
  position: relative; padding-left: 2em; margin-bottom: .5em;
  font-size: .62em; line-height: 1.32;
}
#cu-ej-spec .flujo li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: -.05em;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-dkr));
  color: #fff; font-weight: 800; font-size: .8em;
  display: flex; align-items: center; justify-content: center;
}
#cu-ej-spec .cu-ej-alt {
  margin: .5em 0 0 0 !important; font-size: .56em;
  color: var(--muted); font-style: italic;
}

/* --- trazabilidad ICONIX --- */
#cu-ej-iconix .iconix-flow {
  display: flex; align-items: center; justify-content: center;
  gap: .9em; margin: .1em 0 .35em;
}
#cu-ej-iconix .iconix-flow .img-cap { flex: 0 1 auto; }
#cu-ej-iconix .iconix-arrow {
  flex: 0 0 auto; font-size: 1.7em; color: var(--blue-lt); font-weight: 700;
}
#cu-ej-iconix .iconix-flow img { max-height: 196px; max-width: 100%; width: auto; }
#cu-ej-iconix .iconix-down {
  text-align: center; font-size: 1em; line-height: 1;
  color: var(--blue-lt); font-weight: 700; margin: 0;
}
#cu-ej-iconix .iconix-seq { margin-top: .05em; }
#cu-ej-iconix .iconix-seq img { max-height: 178px; max-width: 100%; width: auto; }
#cu-ej-iconix .fuente { margin-top: .25em; font-weight: 600; }

/* --- zoom secuencial de los 3 diagramas (lightbox por fragment, patrón #ot-fisica) --- */
#cu-ej-iconix .iconix-item { transition: opacity .35s ease; }
#cu-ej-iconix .iconix-item img { transition: max-height .4s ease, opacity .35s ease; }
#cu-ej-iconix .ic-head,
#cu-ej-iconix .iconix-arrow,
#cu-ej-iconix .iconix-down { transition: opacity .3s ease; }

/* con cualquier zoom activo: se oculta el título, los conectores y los diagramas no activos */
#cu-ej-iconix[class*="zoom-"] .ic-head,
#cu-ej-iconix[class*="zoom-"] .iconix-arrow,
#cu-ej-iconix[class*="zoom-"] .iconix-down { opacity: 0; pointer-events: none; }
#cu-ej-iconix[class*="zoom-"] .iconix-item { opacity: 0; pointer-events: none; }
#cu-ej-iconix[class*="zoom-"] .iconix-item .fuente { opacity: 0; }

/* el diagrama activo se fija al lienzo real (1280×720) y se amplía centrado.
   Condicionado a .present para que el overlay no flote sobre otra slide. */
#cu-ej-iconix.present.zoom-1 .it-1,
#cu-ej-iconix.present.zoom-2 .it-2,
#cu-ej-iconix.present.zoom-3 .it-3 {
  opacity: 1; position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#cu-ej-iconix.present.zoom-1 .it-1 img,
#cu-ej-iconix.present.zoom-2 .it-2 img,
#cu-ej-iconix.present.zoom-3 .it-3 img {
  max-height: 660px; max-width: 1180px; width: auto; height: auto;
}

/* ---- Anexo "¿De dónde salen los Bs 9.000?": tablas compactas para que quepan ---- */
#costo-detalle .grid-2 { align-items: start; }
#costo-detalle table { font-size: .66em; }
#costo-detalle table th { padding: .35em .6em; }
#costo-detalle table td { padding: .3em .6em; }
#costo-detalle .chip { font-size: .55em; }

/* ---- Anexo "¿Qué falta para cumplir ISO/IEC 27001?": slide densa, compactar ---- */
/* Anclar arriba (en vez del centrado de reveal) y escalar todo de forma uniforme para
   que la altura natural quepa en el marco. NO usar flex-grow en el grid: encogía la caja
   por debajo de su contenido y las tarjetas se desbordaban sobre el párrafo de cierre. */
.reveal .slides > section#iso27001-camino.present { top: 0 !important; height: 100% !important; }
#iso27001-camino { font-size: .92em; }
#iso27001-camino .grid-2.stretch { gap: .8em; }
#iso27001-camino .card { padding: .55em .8em; }
#iso27001-camino .card.blue { margin-bottom: .45em !important; }
#iso27001-camino .card.blue h3 { font-size: .92em; }
#iso27001-camino .card h3 { font-size: .92em; }
#iso27001-camino ul.small { margin: .15em 0 0; }
#iso27001-camino ul.small li { margin: .18em 0; }
#iso27001-camino .chips { gap: .35em; }
#iso27001-camino .chip { font-size: .58em; }
#iso27001-camino > p.small.center { margin-top: .35em !important; font-size: .68em; }

/* ---- Zoom con Alt+clic + paneo arrastrando (cursores) ---- */
.reveal.az-zoomed   { cursor: grab; }
.reveal.az-grabbing { cursor: grabbing; }