/* Slides — Video #1: ¿Qué es un APU?
 * Estilo basado en imic-website (paleta oficial IMIC).
 */

.reveal {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--fg-slide);
  -webkit-font-smoothing: antialiased;

  /* Tamaños FIJOS sobre el canvas 1280×720 de Reveal (sin vw).
     Reveal escala la slide para encajar; el maxScale del config pone el tope. */
  --fs-hook: 4.5rem;
  --fs-h1:   2.9rem;
  --fs-h2:   1.85rem;
  --fs-body: 1.3rem;
}

.reveal .slides { text-align: left; }
/* Zona segura: padding lateral generoso para que el contenido nunca toque
   el borde, aunque la ventana no sea 16:9 y la slide llene el ancho. */
.reveal section { padding: var(--space-md) var(--space-lg); box-sizing: border-box; }
.reveal .slides > section { box-sizing: border-box; }

/* === Tipografía (Inter / Tailwind sans, sin serif para match IMIC) === */
.reveal h1, .reveal h2 {
  font-family: var(--font-display);   /* Roboto Serif — display */
  font-weight: 600;
  line-height: 1.08;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
}
.reveal h3 {
  font-family: var(--font-sans);      /* Inter — títulos de card / UI */
  font-weight: 700;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
}

.reveal h1 { font-size: var(--fs-hook); }
.reveal h2 { font-size: var(--fs-h1); }
.reveal h3 { font-size: var(--fs-h2); }
.reveal p  { font-size: var(--fs-body); line-height: 1.55; }

/* === Chapter label (reemplaza el eyebrow uppercase-tracked) === */
.kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-cream);            /* sobre fondos oscuros */
  margin-bottom: var(--space-lg);
}
.kicker .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-highlight);       /* número en ámbar (dark) */
}
.kicker.dark { color: var(--color-midnight); }      /* sobre cream */
.kicker.dark .n { color: var(--accent-primary); }   /* número en teal (cream) */

/* Kicker plano del hook / cierre — sin tracking */
.hook-kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--color-primary-bright);
  margin-bottom: var(--space-md);
}
.kicker-row .hook-kicker { margin-bottom: 0; }

/* === Slides oscuros (hook, pilares, cierre) === */
.reveal section[data-background-color="#124355"] { color: var(--fg-slide-dark); }
.reveal section[data-background-color="#124355"] h1,
.reveal section[data-background-color="#124355"] h2,
.reveal section[data-background-color="#124355"] h3 { color: var(--color-cream); }

.highlight { color: var(--accent-highlight); }
.highlight-dark {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent-highlight);
  text-decoration-thickness: 0.15em;
  text-underline-offset: 0.12em;
}

.lede {
  font-size: 1.4rem;
  color: var(--color-zinc-700);
  max-width: 70ch;
  margin-bottom: var(--space-md);
  font-weight: 400;
}
.lede.light { color: var(--color-cream-soft); }
.lede.emphasis { font-weight: 600; color: var(--color-midnight-deep); }

.emphasis {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-midnight-deep);
  margin: var(--space-md) 0;
}
.emphasis-big {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--color-midnight-deep);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: var(--space-lg) 0;
}
.emphasis-big.light { color: var(--color-cream); }

.footnote {
  text-align: center;
  font-style: italic;
  color: var(--color-zinc-700);
  margin-top: var(--space-md);
}
.footnote.light { color: var(--color-cream-soft); }

/* === Logos === */
.logo-imic {
  height: 48px;
  width: auto;
  display: block;
}
.logo-imic.small { height: 32px; }
.logo-imic.large { height: 64px; }
.brand-strip {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-md);
  opacity: 0.85;
}
.brand-strip img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }

/* === Escena 1 — HOOK === */
.hook-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  min-height: 70vh;
}
.hook-text .kicker-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.hook-text .kicker-row img { height: 28px; filter: brightness(0) invert(1); opacity: 0.85; }
.hook-text .kicker-row .kicker { margin-bottom: 0; }
.hook-text h1 { font-size: var(--fs-hook); }
.hook-profile {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hook-profile img {
  width: clamp(220px, 22vw, 300px);
  height: clamp(220px, 22vw, 300px);
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.hook-profile figcaption {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-md);
}
.profile-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--color-cream);
}
.profile-role {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-highlight);
  margin-top: 0.5rem;
}
.profile-caption {
  font-size: 1rem;
  color: var(--color-cream-soft);
  margin-top: 0.75rem;
  max-width: 26ch;
  line-height: 1.4;
}

/* === Escena 2 — Obras === */
.obras-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.obra-tag {
  background: var(--color-white);
  border: 1px solid var(--color-cream-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-primary);
  box-shadow: var(--shadow-sm);
}

/* === Escena 3 — Unidades + cita legal === */
.units-row {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin: var(--space-md) 0;
}
.unit {
  background: var(--accent-primary);
  color: var(--color-cream);
  font-weight: 800;
  font-size: 1.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  min-width: 80px;
  text-align: center;
  letter-spacing: -0.02em;
}

.legal-cite {
  background: var(--color-white);
  border: 1px solid rgba(10, 131, 151, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.legal-source {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.legal-cite blockquote {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-zinc-700);
  line-height: 1.55;
  margin: 0;
  padding: 0;
  border: none;
}
.legal-cite blockquote strong {
  color: var(--color-midnight);
  font-style: normal;
  font-weight: 700;
}

/* === Escena 4 — Recursos === */
.recursos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.recurso {
  background: var(--color-white);
  border: 1px solid var(--color-cream-soft);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-midnight);
}

/* === Escena 5a — Pilares === */
.pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}
.pillar {
  background: rgba(255, 250, 240, 0.08);
  border: 1px solid rgba(255, 250, 240, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
}
.pillar-num {
  position: absolute;
  top: -1rem;
  left: var(--space-md);
  background: var(--color-amber-500);
  color: var(--color-midnight-deep);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
}
.pillar h3 { margin-top: 0; color: var(--color-cream); }
.pillar p { color: var(--color-cream-soft); }

/* === Escena 5b — Costo Directo === */
.cd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.cd-item {
  background: var(--color-white);
  border: 1px solid var(--color-cream-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.cd-item h3 { font-size: 1.3rem; margin: 0 0 var(--space-xs); color: var(--accent-primary); }
.cd-item p { font-size: 1rem; margin: 0; color: var(--color-zinc-700); }
.cd-item.accent {
  border: 2px solid var(--color-amber-500);
  background: linear-gradient(180deg, rgba(245,158,11,0.06), var(--color-white));
}
.cd-item.accent h3 { color: var(--color-amber-600); }
.warning { color: var(--color-amber-600); font-weight: 600; margin-top: var(--space-xs) !important; }

/* === Escena 5c — Sobrecosto === */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.sc-item {
  background: var(--color-white);
  border: 1px solid var(--color-cream-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.sc-num {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent-primary);
  margin-bottom: var(--space-xs);
}
.sc-item h3 { font-size: 1.1rem; margin: 0 0 var(--space-xs); }
.sc-item p  { font-size: 0.9rem; margin: 0; color: var(--color-zinc-500); }

.formula {
  background: var(--color-midnight);
  color: var(--color-cream);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
}
.formula .plus, .formula .equals { color: var(--color-amber-500); margin: 0 var(--space-sm); }
.formula strong { color: var(--color-amber-500); font-weight: 800; }

/* === Escena 6 — Para qué sirve === */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  margin: var(--space-md) 0;
}
.card-comparison {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--color-cream-soft);
}
.card-comparison h3 { font-size: 1.5rem; margin: 0 0 var(--space-sm); }
.card-comparison.error { border-color: var(--color-amber-600); }
.card-comparison.error h3 { color: var(--color-amber-600); }
.card-comparison.good  { border-color: var(--accent-primary); }
.card-comparison.good h3 { color: var(--accent-primary); }

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
}
.check-list li {
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
  font-size: 1.05rem;
  color: var(--color-zinc-700);
}
.check-list.bad  li::before { content: "✗"; position: absolute; left: 0; color: var(--color-amber-600); font-weight: 800; }
.check-list.good li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-primary); font-weight: 800; }

.card-comparison .caption {
  font-size: 0.95rem;
  color: var(--color-zinc-500);
  font-style: italic;
  margin: var(--space-sm) 0 0;
}

/* === Escena 7 — Cierre + CTA === */
.cta-h2 { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.cta-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 250, 240, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.cta-card.primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.cta-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-amber-500);
  margin-bottom: var(--space-xs);
}
.cta-card h3 {
  font-size: 1.4rem;
  color: var(--color-cream);
  margin: var(--space-xs) 0;
}
.cta-card p {
  font-size: 0.95rem;
  color: var(--color-cream-soft);
  margin: 0;
}
.closing-signature {
  margin-top: var(--space-md);
  text-align: right;
  font-style: italic;
  color: var(--color-amber-500);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}
.closing-signature img { height: 32px; filter: brightness(0) invert(1); opacity: 0.9; }