/* amedi · slides · plantillas de presentación · v1.0 · junio 2026
 * 18 plantillas 16:9 (1920×1080) · solo tokens · prefijo .slide / .slide-*
 * (stylesheet separado, incluido globalmente, para no chocar con main.css)
 *
 * adn amedi: fondos noche + degradados de marca · parkinsans display ·
 * inter para body · parkinsans para eyebrows · punto petroleo en el wordmark ·
 * menta/verde como acentos sobre noche · petroleo = energía/alerta. */

/* ───────────────────────── frame + escalado ─────────────────────────
 * cada slide es un canvas 16:9. container-type permite que la tipografía
 * en cqw escale igual en el preview del manual y en el export a 1920×1080. */
.slide-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  container-type: inline-size;
  background: var(--bg);
  box-shadow: var(--shadow-md);
}

.slide {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ───────────────────────── eyebrow compartido ───────────────────────
 * parkinsans caps · dot petroleo al inicio (el punto de la "s" como sistema). */
.slide .s-eyebrow {
  font-family: var(--label);
  font-weight: var(--fw-medium);
  font-size: 1.15cqw;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--menta);
  display: flex;
  align-items: center;
  gap: 0.8cqw;
}

.slide .s-eyebrow::before {
  content: '';
  width: 0.7cqw;
  height: 0.7cqw;
  border-radius: 50%;
  background: var(--petroleo);
  flex-shrink: 0;
}

/* eyebrow sobre fondo claro → noche, dot petroleo, acento noche */
.slide.on-light .s-eyebrow { color: var(--noche); }

/* brand mark "amedi." con punto petroleo */
.slide .s-mark {
  font-family: var(--display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.slide .s-mark .dot { color: var(--petroleo); }
/* el wordmark de la firma es el VECTOR real, no texto: se dimensiona en `em`
   para que cada slide siga mandando su escala con el `font-size` de siempre.
   caja nativa 915.56×160.92 → alto = ancho / 5.6896 */
.slide .s-mark .wm,
.slide .mark-big .wm { width: 5.2em; height: 0.914em; color: currentColor; display: block; }
.slide .s-mark { display: inline-flex; align-items: center; gap: 0.3em; }
.slide .s-mark .zone { font-family: var(--mono); }

/* Los subtítulos partían dejando huérfanas ("…Panamá →" / "Venezuela.").
   `balance` reparte las líneas parejo en vez de llenar la primera y tirar el
   resto abajo. Se aplica solo a textos cortos de 2-3 líneas, que es donde el
   algoritmo está pensado para actuar. */
.slide .sub,
.slide .lead,
.slide .echo,
.slide .head .title,
.slide.s-cover .sub,
.slide.s-divider .sub,
.slide.s-fullbleed .sub { text-wrap: balance; }
/* en los pies claros el .meta-foot es --muted y el wordmark heredaba ese gris:
   la marca parecía deshabilitada. Sobre claro va noche. */
.slide .meta-foot .s-mark { color: var(--noche); }
.slide.s-number .meta-foot .s-mark,
.slide.s-route .meta-foot .s-mark { color: var(--on-noche); }

/* ============================================================ *
 *  01 · PORTADA · cover                                          *
 * ============================================================ */
.slide.s-cover {
  background: var(--noche-bg);
  color: var(--on-noche);
  background-image: var(--grad-hero);
}
.slide.s-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-menta-glow);
  pointer-events: none;
}
.slide.s-cover .s-eyebrow {
  position: absolute; top: 4.5cqw; left: 5cqw; z-index: 1;
}
.slide.s-cover .title {
  position: absolute; bottom: 20cqw; left: 5cqw; right: 5cqw; z-index: 1;
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: 8.6cqw; line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest); color: var(--on-noche);
}
.slide.s-cover .title .ac {
  background: var(--grad-fresh);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slide.s-cover .sub {
  position: absolute; bottom: 11cqw; left: 5cqw; right: 5cqw; z-index: 1;
  font-family: var(--serif); font-style: italic; font-weight: var(--fw-regular);
  font-size: 3.2cqw; color: var(--on-noche-soft);
  letter-spacing: var(--tracking-snug);
}
.slide.s-cover .foot {
  position: absolute; bottom: 4cqw; left: 5cqw; z-index: 1;
  font-family: var(--mono); font-size: 1.05cqw;
  color: var(--on-noche-soft); letter-spacing: var(--tracking-wide);
}
.slide.s-cover .s-mark {
  position: absolute; bottom: 3.6cqw; right: 5cqw; z-index: 1;
  font-size: 2.6cqw; color: var(--on-noche);
}
.slide.s-cover .ship {
  position: absolute; top: 4cqw; right: 5cqw; z-index: 1;
  /* caja nativa del barco: 383.66×431.12 — es más alto que ancho */
  width: 6.2cqw; height: 7cqw; color: var(--menta); opacity: var(--o-mid);
}

/* ============================================================ *
 *  02 · SECCIÓN DIVIDER · cambio de bloque                       *
 * ============================================================ */
.slide.s-divider {
  background: var(--noche-bg);
  background-image: var(--grad-marca);
  color: var(--on-noche);
  padding: 5cqw;
  display: flex; flex-direction: column; justify-content: center;
}
.slide.s-divider .num {
  font-family: var(--display); font-style: italic; font-weight: var(--fw-thin);
  font-size: 6.5cqw; line-height: 1;
  color: rgba(255,255,255,0.45); margin-bottom: 1cqw;
  letter-spacing: var(--tracking-tightest);
}
.slide.s-divider .title {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: 11cqw; line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest); color: var(--on-noche);
  margin-bottom: 2cqw;
}
.slide.s-divider .title em {
  font-style: italic; font-weight: var(--fw-light); color: var(--verde);
}
/* el punto de acento no puede heredar la itálica fina del em: a ese cuerpo
   se renderizaba como un rombo inclinado, no como un punto. */
.slide.s-divider .title .ac {
  font-size: 0; /* oculta el glifo: la Parkinsans Black tiene el punto cuadrado */
}
.slide.s-divider .title .ac::after {
  content: ''; display: inline-block; vertical-align: baseline;
  width: 1.5cqw; height: 1.5cqw; border-radius: 50%;
  background: var(--verde); margin-left: 0.5cqw;
}
/* el corner cae sobre la zona verde del degradado: en blanco no se leía. */
.slide.s-divider .sub {
  font-family: var(--serif); font-style: italic; font-weight: var(--fw-regular);
  font-size: 2.8cqw; color: var(--on-noche-soft);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); max-width: 72%;
}
.slide.s-divider .corner {
  position: absolute; bottom: 4cqw; right: 5cqw;
  font-family: var(--mono); font-size: 1cqw;
  /* el corner cae sobre el extremo verde del degradado: en blanco desaparecía */
  color: rgba(2, 27, 84, 0.62); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* ============================================================ *
 *  03 · NÚMERO GRANDE · stat / KPI                              *
 * ============================================================ */
.slide.s-number {
  background: var(--noche-bg); color: var(--on-noche);
  padding: 5cqw; display: flex; flex-direction: column;
}
.slide.s-number .center {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
}
.slide.s-number .figure {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: 17cqw; line-height: 0.88;
  letter-spacing: var(--tracking-tightest);
  background: var(--grad-fresh);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-feature-settings: "tnum" 1;
}
.slide.s-number .label {
  font-family: var(--serif); font-style: italic; font-weight: var(--fw-regular);
  font-size: 3cqw; color: var(--on-noche-soft);
  margin-top: 1cqw; letter-spacing: var(--tracking-snug);
}
.slide.s-number .note {
  margin-top: 3cqw; padding: 1.4cqw 2cqw;
  border-left: 0.3cqw solid var(--menta); max-width: 62%;
  font-family: var(--serif); font-style: italic;
  font-size: 1.4cqw; line-height: var(--lh-base); color: var(--on-noche);
}
.slide.s-number .meta-foot {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 1cqw;
  color: var(--on-noche-soft); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding-top: 1.4cqw; border-top: 0.5pt solid var(--line-onnoche);
}
.slide.s-number .meta-foot .s-mark { font-size: 1.4cqw; color: var(--on-noche); }

/* ============================================================ *
 *  04 · BULLETS · 3-5 puntos (split)                            *
 * ============================================================ */
.slide.s-bullet {
  background: var(--bg); color: var(--ink);
  padding: 5cqw; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4cqw;
}
.slide.s-bullet .lc { display: flex; flex-direction: column; justify-content: center; }
.slide.s-bullet .lc .s-eyebrow { color: var(--noche); margin-bottom: 1.5cqw; }
.slide.s-bullet .lc .title {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: 4.6cqw; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink);
}
.slide.s-bullet .lc .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-bullet .lc .intro {
  font-family: var(--serif); font-style: italic; font-size: 1.4cqw;
  color: var(--muted); margin-top: 1.5cqw; line-height: var(--lh-base); max-width: 92%;
}
.slide.s-bullet .lc .foot {
  font-family: var(--mono); font-size: 0.95cqw; color: var(--muted);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-top: auto; padding-top: 1cqw;
}
.slide.s-bullet .rc { display: flex; flex-direction: column; justify-content: center; gap: 0.4cqw; }
.slide.s-bullet .item {
  display: grid; grid-template-columns: 4cqw 1fr; gap: 1.4cqw;
  padding: 1.4cqw 0; border-bottom: 0.5pt solid var(--line); align-items: baseline;
}
.slide.s-bullet .item:last-child { border-bottom: none; }
.slide.s-bullet .item .n {
  font-family: var(--mono); color: var(--petroleo); font-size: 1.25cqw;
  letter-spacing: var(--tracking-wide); padding-top: 0.3cqw;
}
.slide.s-bullet .item .t {
  font-family: var(--display); font-weight: var(--fw-bold); font-size: 2cqw;
  letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); color: var(--ink);
}
.slide.s-bullet .item .t em { font-style: italic; font-weight: var(--fw-regular); color: var(--muted); }
.slide.s-bullet .item .d { font-family: var(--serif); font-size: 1.15cqw; color: var(--ink-soft); margin-top: 0.4cqw; line-height: var(--lh-base); }

/* ============================================================ *
 *  05 · DOS COLUMNAS · antes / después                          *
 * ============================================================ */
.slide.s-twocol {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-twocol .head .s-eyebrow { color: var(--noche); }
.slide.s-twocol .head .title {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: 4.4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1.2cqw;
}
.slide.s-twocol .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-twocol .cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; margin-top: 3cqw; }
.slide.s-twocol .col { padding: 1.5cqw 0; display: flex; flex-direction: column; }
.slide.s-twocol .col.before { padding-right: 3cqw; border-right: 0.5pt solid var(--line); }
.slide.s-twocol .col.after { padding-left: 3cqw; }
.slide.s-twocol .col .lbl { font-family: var(--label); font-size: 1.1cqw; letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.slide.s-twocol .col.before .lbl { color: var(--muted); }
.slide.s-twocol .col.after .lbl { color: var(--petroleo); }
.slide.s-twocol .col h3 { font-family: var(--display); font-weight: var(--fw-bold); font-size: 2.4cqw; letter-spacing: var(--tracking-tight); margin-top: 0.8cqw; line-height: var(--lh-snug); }
.slide.s-twocol .col h3 em { font-style: italic; font-weight: var(--fw-regular); color: var(--muted); }
.slide.s-twocol .col.before h3 { color: var(--ink-soft); }
.slide.s-twocol .col ul { list-style: none; padding: 0; margin: 2cqw 0 0; }
/* el li era flex con gap, así que cada <b> contaba como ítem y abría un hueco
   fantasma: "Tasa · · BCV · · sincronizada". Marcador colgado en absoluto y
   el texto vuelve a fluir como una sola línea. */
.slide.s-twocol .col li { font-family: var(--serif); padding: 1.1cqw 0 1.1cqw 2.8cqw; border-bottom: 0.5pt solid var(--line); font-size: 1.5cqw; line-height: var(--lh-snug); position: relative; }
.slide.s-twocol .col li:last-child { border-bottom: none; }
.slide.s-twocol .col.before li { color: var(--muted); }
.slide.s-twocol .col.before li::before { position: absolute; left: 0; top: 1.1cqw; content: '✕'; color: var(--petroleo); font-family: var(--mono); flex-shrink: 0; font-size: 1.1cqw; }
.slide.s-twocol .col.after li { color: var(--ink); font-weight: var(--fw-medium); }
.slide.s-twocol .col.after li::before { position: absolute; left: 0; top: 1.1cqw; content: '✓'; color: var(--state-success); font-family: var(--mono); flex-shrink: 0; font-size: 1.2cqw; font-weight: var(--fw-bold); }
.slide.s-twocol .col li b { color: var(--ink); font-weight: var(--fw-bold); }

/* ============================================================ *
 *  06 · CITA · testimonio cliente                              *
 * ============================================================ */
.slide.s-quote {
  background: var(--paper); color: var(--ink);
  padding: 6cqw 7cqw; display: flex; flex-direction: column; justify-content: center; position: relative;
}
.slide.s-quote .marks {
  position: absolute; top: 3cqw; left: 6cqw;
  font-family: var(--display); font-weight: var(--fw-black); font-size: 18cqw; line-height: 0.6;
  color: var(--petroleo); opacity: 0.14; pointer-events: none;
}
.slide.s-quote .quote {
  font-family: var(--display); font-weight: var(--fw-bold); font-size: 4.4cqw;
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink);
  position: relative; z-index: 1; max-width: 95%;
}
.slide.s-quote .quote em { font-style: italic; font-weight: var(--fw-regular); color: var(--noche); }
.slide.s-quote .by { display: flex; align-items: center; gap: 1.6cqw; margin-top: 4cqw; padding-top: 2cqw; border-top: 0.5pt solid var(--line); position: relative; z-index: 1; }
.slide.s-quote .by .av {
  width: 4.8cqw; height: 4.8cqw; border-radius: 50%; background: var(--noche);
  color: var(--on-noche); display: grid; place-items: center;
  font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.6cqw; flex-shrink: 0; letter-spacing: var(--tracking-tight);
}
.slide.s-quote .by .info .who { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.9cqw; letter-spacing: var(--tracking-snug); }
.slide.s-quote .by .info .role { font-family: var(--mono); font-size: 1cqw; color: var(--muted); margin-top: 0.4cqw; letter-spacing: var(--tracking-wide); }
.slide.s-quote .corner { position: absolute; bottom: 4cqw; right: 6cqw; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ============================================================ *
 *  07 · EQUIPO · grid de personas                              *
 * ============================================================ */
.slide.s-team {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-team .head .s-eyebrow { color: var(--noche); }
.slide.s-team .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4.4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1.2cqw; }
.slide.s-team .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-team .grid { flex: 1; display: grid; align-items: start; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; margin-top: 3.5cqw; }
.slide.s-team .person {
  background: var(--paper); border: 0.5pt solid var(--line); border-radius: var(--r-md);
  padding: 2.2cqw 2cqw; display: flex; flex-direction: column;
}
.slide.s-team .person .av {
  width: 6cqw; height: 6cqw; border-radius: 50%;
  background: var(--noche-bg); background-image: var(--grad-marca);
  color: var(--on-noche); display: grid; place-items: center;
  font-family: var(--display); font-weight: var(--fw-bold); font-size: 2cqw; letter-spacing: var(--tracking-tight);
}
.slide.s-team .person .nm { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.9cqw; letter-spacing: var(--tracking-snug); margin-top: 1.4cqw; line-height: 1.1; }
.slide.s-team .person .role { font-family: var(--label); font-size: 1cqw; color: var(--petroleo); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: 0.5cqw; }
.slide.s-team .person .bio { font-family: var(--serif); font-size: 1.1cqw; color: var(--ink-soft); margin-top: 1cqw; padding-top: 0.9cqw; border-top: 0.5pt solid var(--line); line-height: var(--lh-base); }
.slide.s-team .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 2.5cqw; }

/* ============================================================ *
 *  08 · MAPA / CORREDOR · china → venezuela                    *
 * ============================================================ */
.slide.s-route {
  background: var(--noche-bg); background-image: var(--grad-hero);
  color: var(--on-noche); padding: 4.5cqw 5cqw; display: flex; flex-direction: column; position: relative;
}
.slide.s-route::after { content: ''; position: absolute; inset: 0; background: var(--grad-menta-glow); pointer-events: none; }
.slide.s-route .head { position: relative; z-index: 1; }
.slide.s-route .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4.2cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1cqw; color: var(--on-noche); }
.slide.s-route .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--menta); }
.slide.s-route .corridor { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2cqw 0; }
/* align-items:start ancla las paradas por arriba, así el riel cae en el centro
   de los íconos (1.7cqw = mitad del dot de 3.4cqw) y no sobre los nombres.
   Con `center` la línea caía a media altura del bloque completo y tachaba
   "Yiwú", "Shenzhen", "La Guaira"… */
.slide.s-route .line { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 0 2cqw; }
.slide.s-route .line::before { content: ''; position: absolute; left: 4cqw; right: 4cqw; top: 1.7cqw; height: 0.3cqw; background: linear-gradient(90deg, var(--menta), var(--verde)); border-radius: var(--r-pill); z-index: 0; transform: translateY(-50%); }
.slide.s-route .stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1cqw; }
.slide.s-route .stop .dot {
  width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  background: var(--noche-bg); border: 0.4cqw solid var(--menta);
  display: grid; place-items: center;
}
.slide.s-route .stop .dot svg { width: 1.8cqw; height: 1.8cqw; color: var(--menta); }
.slide.s-route .stop.end .dot { border-color: var(--verde); background: var(--verde); }
.slide.s-route .stop.end .dot svg { color: var(--noche); }
.slide.s-route .stop .city { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.7cqw; letter-spacing: var(--tracking-snug); color: var(--on-noche); }
.slide.s-route .stop .kind { font-family: var(--mono); font-size: 0.85cqw; color: var(--on-noche-soft); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.slide.s-route .legend { position: relative; z-index: 1; display: flex; gap: 4cqw; margin-top: 3cqw; padding-top: 1.6cqw; border-top: 0.5pt solid var(--line-onnoche); }
.slide.s-route .legend .li .k { font-family: var(--label); font-size: 0.95cqw; color: var(--menta); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.slide.s-route .legend .li .v { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.8cqw; color: var(--on-noche); margin-top: 0.3cqw; font-feature-settings: "tnum" 1; }
.slide.s-route .meta-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 1cqw; color: var(--on-noche-soft); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; margin-top: 1cqw; }
.slide.s-route .meta-foot .s-mark { font-size: 1.4cqw; color: var(--on-noche); }

/* ============================================================ *
 *  09 · TABLA DE TARIFAS                                        *
 * ============================================================ */
.slide.s-table {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-table .head .s-eyebrow { color: var(--noche); }
.slide.s-table .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1cqw; }
.slide.s-table .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-table .table-block { flex: 1; margin-top: 2.5cqw; background: var(--bg); border: 0.5pt solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.slide.s-table .row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1.5cqw; padding: 1.4cqw 2cqw; border-bottom: 0.5pt solid var(--line-soft); align-items: center; }
.slide.s-table .row:last-child { border-bottom: none; }
/* el bloque tiene overflow:hidden y las filas de alto fijo desbordaban: la
   quinta quedaba cortada por abajo. Repartiendo el alto sobrante entre las
   filas de datos, la tabla siempre entra completa. */
.slide.s-table .row:not(.head) { flex: 1; min-height: 0; }
.slide.s-table .row.head { background: var(--noche-bg); border-bottom: none; padding: 1.2cqw 2cqw; }
.slide.s-table .row.head .col { font-family: var(--label); font-size: 1cqw; color: var(--on-noche-soft); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.slide.s-table .row.head .col.featured { color: var(--verde); }
.slide.s-table .row .col.first { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.5cqw; letter-spacing: var(--tracking-snug); color: var(--ink); }
.slide.s-table .row .col.first em { font-style: italic; font-weight: var(--fw-regular); color: var(--muted); display: block; font-size: 1cqw; margin-top: 0.2cqw; line-height: var(--lh-snug); font-family: var(--serif); }
.slide.s-table .row .col { font-family: var(--serif); font-size: 1.35cqw; color: var(--ink); font-feature-settings: "tnum" 1; }
.slide.s-table .row .col em { font-style: italic; color: var(--muted); }
.slide.s-table .row .col.featured { color: var(--petroleo); font-weight: var(--fw-bold); font-family: var(--display); }
.slide.s-table .row.featured-row { background: var(--menta-soft); }
.slide.s-table .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 1.5cqw; }

/* ============================================================ *
 *  10 · TIMELINE DE ENVÍO · ciclo de estados                  *
 * ============================================================ */
.slide.s-timeline {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-timeline .head .s-eyebrow { color: var(--noche); }
.slide.s-timeline .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1cqw; }
.slide.s-timeline .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-timeline .events { flex: 1; display: flex; flex-direction: column; gap: 1.3cqw; padding: 3cqw 0 0; position: relative; }
.slide.s-timeline .events::before { content: ''; position: absolute; left: 8.7cqw; top: 4cqw; bottom: 0; width: 0.5pt; background: var(--line); z-index: 0; }
.slide.s-timeline .event { display: grid; grid-template-columns: 7.5cqw 2cqw 1fr; gap: 1.5cqw; align-items: baseline; z-index: 1; }
.slide.s-timeline .event .date { font-family: var(--mono); font-size: 1cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; text-align: right; padding-top: 0.7cqw; }
.slide.s-timeline .event.milestone .date { color: var(--petroleo); font-weight: var(--fw-medium); }
.slide.s-timeline .event .dot-cell { display: flex; align-items: flex-start; justify-content: center; padding-top: 0.85cqw; }
.slide.s-timeline .event .dot { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--bg); border: 1pt solid var(--line); }
.slide.s-timeline .event.milestone .dot { background: var(--petroleo); border-color: var(--petroleo); }
.slide.s-timeline .event .info .name { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.85cqw; letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); color: var(--ink); }
.slide.s-timeline .event .info .name em { font-style: italic; font-weight: var(--fw-regular); color: var(--muted); }
.slide.s-timeline .event .info .desc { font-family: var(--serif); font-size: 1.1cqw; color: var(--ink-soft); margin-top: 0.3cqw; line-height: var(--lh-base); }
.slide.s-timeline .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 1.5cqw; }

/* ============================================================ *
 *  11 · GRADIENTE FULL-BLEED · statement de marca             *
 * ============================================================ */
.slide.s-fullbleed {
  background: var(--noche-bg); background-image: var(--grad-marca);
  color: var(--on-noche); padding: 6cqw; display: flex; flex-direction: column; justify-content: center; position: relative;
}
.slide.s-fullbleed .s-eyebrow { color: var(--verde); margin-bottom: 2cqw; }
.slide.s-fullbleed .s-eyebrow::before { background: var(--petroleo); }
.slide.s-fullbleed .big {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: 8cqw; line-height: var(--lh-tight); letter-spacing: var(--tracking-tightest);
  color: var(--on-noche); max-width: 90%;
}
.slide.s-fullbleed .big em { font-style: italic; font-weight: var(--fw-light); color: var(--verde); }
.slide.s-fullbleed .echo { font-family: var(--serif); font-style: italic; font-size: 2cqw; color: var(--on-noche-soft); margin-top: 2.5cqw; max-width: 70%; line-height: var(--lh-snug); }
.slide.s-fullbleed .s-mark { position: absolute; bottom: 4cqw; right: 5cqw; font-size: 2.8cqw; color: var(--on-noche); }

/* ============================================================ *
 *  12 · STATS GRID · varios KPIs                               *
 * ============================================================ */
.slide.s-stats {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-stats .head .s-eyebrow { color: var(--noche); }
.slide.s-stats .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4.4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1.2cqw; }
.slide.s-stats .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-stats .grid { flex: 1; display: grid; align-items: start; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; margin-top: 3.5cqw; }
.slide.s-stats .stat { background: var(--paper); border: 0.5pt solid var(--line); border-radius: var(--r-md); padding: 2.2cqw 2cqw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.slide.s-stats .stat.featured { background: var(--noche-bg); background-image: var(--grad-marca); border-color: var(--noche); }
.slide.s-stats .stat .n { font-family: var(--display); font-weight: var(--fw-black); font-size: 5.2cqw; line-height: 0.95; color: var(--noche); letter-spacing: var(--tracking-tightest); font-feature-settings: "tnum" 1; }
.slide.s-stats .stat.featured .n { background: var(--grad-fresh); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slide.s-stats .stat .l { font-family: var(--serif); font-style: italic; font-weight: var(--fw-regular); font-size: 1.4cqw; color: var(--ink-soft); margin-top: 0.6cqw; line-height: var(--lh-snug); }
.slide.s-stats .stat.featured .l { color: var(--on-noche-soft); }
.slide.s-stats .stat .ctx { font-family: var(--mono); font-size: 0.85cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-top: 1cqw; padding-top: 0.8cqw; border-top: 0.5pt solid var(--line); width: 100%; }
.slide.s-stats .stat.featured .ctx { color: var(--on-noche-soft); border-top-color: var(--line-onnoche); }
.slide.s-stats .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 2.5cqw; }

/* ============================================================ *
 *  13 · PROCESO · flujo de pasos horizontal                   *
 * ============================================================ */
.slide.s-process {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-process .head .s-eyebrow { color: var(--noche); }
.slide.s-process .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4.4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1.2cqw; }
.slide.s-process .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-process .flow { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw; align-items: start; padding: 4cqw 0 2cqw; position: relative; }
/* los dots van alineados a la IZQUIERDA de cada columna, no centrados: el
   riel tenía que terminar en el centro del dot 05, no al 90.5% del ancho.
   ancho de columna = (100% - 4 gaps) / 5 · centro del dot = +1.6cqw */
.slide.s-process .flow::before { content: ''; position: absolute; top: calc(4cqw + 1.6cqw); left: 1.6cqw; right: calc((100% - 4cqw) / 5 - 1.6cqw); height: 0.5pt; background: var(--line); z-index: 0; }
.slide.s-process .step { z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw; }
.slide.s-process .step .dot { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--bg); border: 1pt solid var(--line); display: grid; place-items: center; font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.4cqw; color: var(--ink-soft); font-feature-settings: "tnum" 1; }
.slide.s-process .step.active .dot { background: var(--noche-bg); background-image: var(--grad-marca); border-color: var(--noche); color: var(--on-noche); }
.slide.s-process .step .nm { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.7cqw; letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); }
.slide.s-process .step .nm em { font-style: italic; font-weight: var(--fw-regular); color: var(--petroleo); display: block; font-size: 1.2cqw; margin-top: 0.3cqw; }
.slide.s-process .step .d { font-family: var(--serif); font-size: 1cqw; color: var(--ink-soft); line-height: var(--lh-base); padding-top: 0.6cqw; border-top: 0.5pt solid var(--line-soft); margin-top: 0.4cqw; }
.slide.s-process .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); }

/* ============================================================ *
 *  14 · DONUT · composición                                    *
 * ============================================================ */
.slide.s-donut {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-donut .head .s-eyebrow { color: var(--noche); }
.slide.s-donut .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1cqw; }
.slide.s-donut .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-donut .donut-row { flex: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 4cqw; align-items: center; margin-top: 2cqw; }
.slide.s-donut .donut-svg-wrap { position: relative; aspect-ratio: 1; max-height: 30cqw; display: grid; place-items: center; justify-self: center; width: 100%; }
.slide.s-donut .donut-svg-wrap svg { width: 100%; height: 100%; max-width: 26cqw; max-height: 26cqw; transform: rotate(-90deg); }
.slide.s-donut .donut-center { position: absolute; text-align: center; pointer-events: none; }
.slide.s-donut .donut-center .n { font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; letter-spacing: var(--tracking-tightest); color: var(--noche); font-feature-settings: "tnum" 1; line-height: 0.95; }
.slide.s-donut .donut-center .l { font-family: var(--serif); font-style: italic; font-size: 1.1cqw; color: var(--ink-soft); margin-top: 0.5cqw; line-height: var(--lh-snug); }
.slide.s-donut .legend { display: flex; flex-direction: column; gap: 0; }
.slide.s-donut .legend-item { display: grid; grid-template-columns: 1.4cqw 4.5cqw 1fr 3.5cqw; gap: 1cqw; align-items: baseline; padding: 0.9cqw 0; border-bottom: 0.5pt solid var(--line-soft); }
.slide.s-donut .legend-item:last-child { border-bottom: none; }
.slide.s-donut .legend-item .swatch { width: 1.2cqw; height: 1.2cqw; border-radius: 0.25cqw; align-self: center; }
.slide.s-donut .legend-item .pct { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.7cqw; color: var(--ink); font-feature-settings: "tnum" 1; letter-spacing: var(--tracking-snug); }
.slide.s-donut .legend-item.featured .pct { color: var(--petroleo); }
.slide.s-donut .legend-item .lbl { font-family: var(--serif); font-size: 1.3cqw; color: var(--ink); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); }
.slide.s-donut .legend-item .lbl em { font-style: italic; font-weight: var(--fw-regular); color: var(--muted); display: block; font-size: 1cqw; margin-top: 0.15cqw; }
.slide.s-donut .legend-item .val { font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); text-align: right; letter-spacing: var(--tracking-wide); }
.slide.s-donut .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 1.5cqw; }

/* ============================================================ *
 *  15 · TRÍPTICO · tres planes / servicios                    *
 * ============================================================ */
.slide.s-threecol {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-threecol .head .s-eyebrow { color: var(--noche); }
.slide.s-threecol .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1cqw; }
.slide.s-threecol .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-threecol .cols { display: grid; margin-block: auto; grid-template-columns: 1fr 1fr 1fr; gap: 1.4cqw; margin-top: 3cqw; }
/* el degradado de la card recomendada termina en verde y la tinta blanca se
   perdía en los últimos bullets. Un velo noche de abajo hacia arriba
   devuelve el contraste sin apagar el degradado. */

.slide.s-threecol .col { background: var(--paper); border: 0.5pt solid var(--line); border-radius: var(--r-md); padding: 2.5cqw 2cqw; display: flex; flex-direction: column; position: relative; }
/* la card destacada llevaba --grad-marca (noche→menta→verde) y los últimos
   bullets quedaban en blanco sobre verde: ilegibles. Con cuatro líneas de copy
   el degradado a pleno no funciona — sí funciona con UN dato grande, como en
   la slide de stats. Acá va base noche + glow menta, igual que la portada:
   sigue siendo la card que salta, y el verde se reserva para el precio. */
.slide.s-threecol .col.featured {
  background: var(--noche-bg); background-image: var(--grad-hero);
  border-color: var(--noche); color: var(--on-noche);
  position: relative;
}
/* el glow se recorta con border-radius propio: si se recortara con
   overflow:hidden en la card, el badge "recomendado" —que sobresale por
   arriba— quedaría cortado. */
.slide.s-threecol .col.featured::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-menta-glow); pointer-events: none;
}
.slide.s-threecol .col.featured > * { position: relative; z-index: 1; }
.slide.s-threecol .col.featured::before { content: '★ recomendado'; position: absolute; top: -0.85cqw; left: 50%; transform: translateX(-50%); font-family: var(--label); font-size: 0.85cqw; padding: 0.4cqw 1.2cqw; background: var(--petroleo); color: var(--bg); border-radius: var(--r-pill); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-weight: var(--fw-medium); white-space: nowrap; }
.slide.s-threecol .col .lbl { font-family: var(--label); font-size: 0.95cqw; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); }
.slide.s-threecol .col.featured .lbl { color: var(--menta); }
.slide.s-threecol .col h3 { font-family: var(--display); font-weight: var(--fw-bold); font-size: 2.4cqw; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin-top: 0.6cqw; color: var(--ink); }
.slide.s-threecol .col.featured h3 { color: var(--on-noche); }
.slide.s-threecol .col h3 em { font-style: italic; font-weight: var(--fw-regular); color: var(--muted); }
.slide.s-threecol .col.featured h3 em { color: var(--menta); }
.slide.s-threecol .col .price { font-family: var(--display); font-weight: var(--fw-black); font-size: 2.6cqw; letter-spacing: var(--tracking-tight); margin-top: 1.2cqw; padding-top: 1cqw; border-top: 0.5pt solid var(--line); color: var(--ink); font-feature-settings: "tnum" 1; }
.slide.s-threecol .col.featured .price { border-top-color: var(--line-onnoche); color: var(--verde); }
.slide.s-threecol .col .price em { font-style: normal; font-weight: var(--fw-regular); color: var(--muted); font-size: 0.95cqw; display: block; margin-top: 0.2cqw; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-family: var(--mono); }
.slide.s-threecol .col.featured .price em { color: var(--on-noche-soft); }
.slide.s-threecol .col ul { list-style: none; padding: 0; margin: 1.5cqw 0 0; flex: 1; }
.slide.s-threecol .col li { font-family: var(--serif); padding: 0.7cqw 0; border-bottom: 0.5pt solid var(--line-soft); font-size: 1.1cqw; line-height: var(--lh-snug); display: flex; gap: 0.8cqw; align-items: baseline; color: var(--ink); }
.slide.s-threecol .col.featured li { border-bottom-color: var(--line-onnoche); color: var(--on-noche); }
.slide.s-threecol .col li::before { content: '+'; color: var(--petroleo); font-family: var(--mono); font-weight: var(--fw-bold); flex-shrink: 0; }
.slide.s-threecol .col.featured li::before { color: var(--verde); }
.slide.s-threecol .col li:last-child { border-bottom: none; }
.slide.s-threecol .col li b { font-weight: var(--fw-bold); }
.slide.s-threecol .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 1.5cqw; }

/* ============================================================ *
 *  16 · BARRAS · evolución / comparación                      *
 * ============================================================ */
.slide.s-bar {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-bar .head .s-eyebrow { color: var(--noche); }
.slide.s-bar .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1cqw; }
.slide.s-bar .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--ink-soft); }
.slide.s-bar .head .title .ac { color: var(--petroleo); }
/* las barras medían 28cqw fijos y empujaban el insight fuera del canvas.
   Ahora el chart cede el alto que sobra y el pie siempre cabe. */
.slide.s-bar .chart { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 3cqw 0 1cqw; position: relative; }
.slide.s-bar .bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6cqw; flex: 1; min-height: 0; padding: 0 1cqw; border-bottom: 0.5pt solid var(--line); position: relative; }
.slide.s-bar .bars::before { content: attr(data-unit); position: absolute; top: -1.6cqw; left: 0; font-family: var(--mono); font-size: 0.85cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.slide.s-bar .bar-col { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0.8cqw; height: 100%; justify-content: flex-end; min-width: 0; }
.slide.s-bar .bar-col .value { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.5cqw; text-align: center; font-feature-settings: "tnum" 1; color: var(--ink-soft); letter-spacing: var(--tracking-snug); }
.slide.s-bar .bar-col .bar { width: 100%; background: var(--noche-soft); border-radius: 0.4cqw 0.4cqw 0 0; min-height: 1cqw; }
.slide.s-bar .bar-col.featured .bar { background: var(--petroleo); }
.slide.s-bar .bar-col.featured .value { color: var(--petroleo); }
.slide.s-bar .axis { display: flex; justify-content: space-between; gap: 1.6cqw; padding: 1cqw 1cqw 0; }
.slide.s-bar .axis .tick { flex: 1; text-align: center; font-family: var(--mono); font-size: 1cqw; color: var(--muted); letter-spacing: var(--tracking-wide); }
.slide.s-bar .axis .tick.featured { color: var(--petroleo); font-weight: var(--fw-medium); }
.slide.s-bar .insight { margin-top: 2cqw; padding: 1.4cqw 1.8cqw; background: var(--paper); border-left: 0.3cqw solid var(--petroleo); border-radius: var(--r-sm); font-family: var(--serif); font-style: italic; font-size: 1.4cqw; line-height: var(--lh-base); color: var(--ink); max-width: 80%; }
.slide.s-bar .insight cite { display: block; font-family: var(--mono); font-style: normal; font-size: 0.85cqw; color: var(--muted); margin-top: 0.4cqw; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.slide.s-bar .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 1.5cqw; }

/* ============================================================ *
 *  17 · CONTACTO / WHATSAPP · onmichannel                      *
 * ============================================================ */
.slide.s-contact {
  background: var(--bg); color: var(--ink);
  padding: 4.5cqw 5cqw; display: flex; flex-direction: column;
}
.slide.s-contact .head .s-eyebrow { color: var(--noche); }
.slide.s-contact .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4.4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1.2cqw; }
.slide.s-contact .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-contact .channels { flex: 1; display: grid; align-items: start; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 3.5cqw; }
.slide.s-contact .channel { background: var(--paper); border: 0.5pt solid var(--line); border-radius: var(--r-md); padding: 2.4cqw 2.2cqw; display: flex; flex-direction: column; }
.slide.s-contact .channel .ico-wrap { width: 4cqw; height: 4cqw; border-radius: var(--r-md); background: var(--noche-bg); background-image: var(--grad-marca); display: grid; place-items: center; }
.slide.s-contact .channel .ico-wrap svg { width: 2cqw; height: 2cqw; color: var(--menta); }
.slide.s-contact .channel .k { font-family: var(--label); font-size: 1cqw; color: var(--petroleo); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: 1.4cqw; }
.slide.s-contact .channel .v { font-family: var(--display); font-weight: var(--fw-bold); font-size: 2.2cqw; letter-spacing: var(--tracking-snug); margin-top: 0.4cqw; color: var(--ink); }
.slide.s-contact .channel .d { font-family: var(--serif); font-size: 1.1cqw; color: var(--ink-soft); margin-top: 0.8cqw; line-height: var(--lh-base); }
.slide.s-contact .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); margin-top: 2.5cqw; }

/* ============================================================ *
 *  18 · CIERRE · gracias + contacto (espejo de portada)       *
 * ============================================================ */
.slide.s-closing {
  background: var(--noche-bg); background-image: var(--grad-hero);
  color: var(--on-noche); padding: 5cqw; display: flex; flex-direction: column; position: relative;
}
.slide.s-closing::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 80% 85%, rgba(69,196,176,0.28) 0%, rgba(69,196,176,0) 70%); pointer-events: none; }
.slide.s-closing .s-eyebrow { z-index: 1; color: var(--menta); }
.slide.s-closing .center { z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.slide.s-closing .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 6.4cqw; line-height: var(--lh-tight); letter-spacing: var(--tracking-tightest); color: var(--on-noche); max-width: 90%; }
.slide.s-closing .title em { font-style: italic; font-weight: var(--fw-light); color: var(--on-noche-soft); }
.slide.s-closing .title .ac { background: var(--grad-fresh); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slide.s-closing .echo { font-family: var(--serif); font-style: italic; font-size: 1.6cqw; color: var(--on-noche-soft); margin-top: 2cqw; max-width: 70%; line-height: var(--lh-base); }
.slide.s-closing .bottom { z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; padding-top: 2cqw; border-top: 0.5pt solid var(--line-onnoche); }
.slide.s-closing .col .lbl { font-family: var(--label); font-size: 0.95cqw; color: var(--menta); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: 0.8cqw; }
.slide.s-closing .col .val { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.9cqw; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--on-noche); }
.slide.s-closing .col .val em { font-style: italic; font-weight: var(--fw-regular); color: var(--on-noche-soft); }
.slide.s-closing .col .val a { color: var(--verde); text-decoration: none; }
.slide.s-closing .col .extra { font-family: var(--mono); font-size: 0.95cqw; color: var(--on-noche-soft); margin-top: 0.5cqw; letter-spacing: var(--tracking-wide); }
.slide.s-closing .mark-big { position: absolute; bottom: 3.6cqw; right: 5cqw; z-index: 2; font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; color: var(--on-noche); letter-spacing: var(--tracking-tight); }
.slide.s-closing .mark-big .dot { color: var(--petroleo); }
.slide.s-closing .mark-big { display: flex; }

/* ============================================================ *
 *  FOTOGRAFÍA · el tratamiento de imagen del deck               *
 * ============================================================ *
 *
 *  Amedi mueve cosas físicas. El deck era 100% tipográfico y no
 *  mostraba nunca la carga: ni el almacén de Yiwú, ni el puerto,
 *  ni la Feria de Cantón. Estas tres plantillas cierran ese hueco.
 *
 *  CÓMO SE PONE UNA FOTO
 *      <div class="ph-img" style="--photo: url(assets/fotos/almacen.jpg)">
 *
 *  Sin `--photo` el bloque cae en un marcador de marca que dice qué
 *  foto va ahí. Con `--photo`, aparece la imagen tratada. Nada más
 *  que cambiar: mismo marcado, misma caja.
 *
 *  REGLAS DE TRATAMIENTO
 *    · toda foto lleva tinte noche — la foto se integra a la marca,
 *      no compite con ella
 *    · el texto nunca va sobre la foto cruda: siempre sobre el velo
 *    · nunca una foto de stock genérica. Operación real o nada.
 *    · el punto petroleo jamás se pone encima de una foto
 */

/* el bloque de imagen · con foto o con marcador */
.slide .ph-img {
  position: relative; overflow: hidden; background: var(--noche-bg);
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}
/* tinte de marca · integra cualquier foto a la paleta */
.slide .ph-img::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(1,32,48,0.32) 0%, rgba(1,32,48,0.10) 45%, rgba(1,32,48,0.42) 100%);
  mix-blend-mode: multiply;
}
/* marcador · sólo visible mientras no haya foto */
.slide .ph-img .ph-hint {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2cqw; text-align: center;
  background-image: var(--grad-hero); padding: 2cqw;
}
.slide .ph-img[style*="--photo"] .ph-hint { display: none; }
.slide .ph-img .ph-hint svg { width: 4cqw; height: 4.5cqw; color: var(--menta); opacity: 0.55; }
.slide .ph-img .ph-hint .t {
  font-family: var(--mono); font-size: 0.95cqw; color: var(--menta);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.slide .ph-img .ph-hint .d {
  font-family: var(--serif); font-style: italic; font-size: 1.1cqw;
  color: var(--on-noche-soft); max-width: 22cqw; line-height: var(--lh-snug);
}

/* ============================================================ *
 *  19 · FOTO FULL-BLEED · pausa con imagen                     *
 * ============================================================ */
.slide.s-photo-full { position: relative; color: var(--on-noche); }
.slide.s-photo-full .ph-img { position: absolute; inset: 0; }
/* velo de lectura · la mitad inferior se oscurece para que el texto
   tenga contraste sin importar qué foto se ponga */
.slide.s-photo-full::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(1,32,48,0) 30%, rgba(1,32,48,0.55) 65%, rgba(1,18,58,0.88) 100%);
}
.slide.s-photo-full .body {
  position: absolute; inset: auto 5cqw 4cqw 5cqw; z-index: 2;
  display: flex; flex-direction: column; gap: 1.2cqw;
}
.slide.s-photo-full .title {
  font-family: var(--display); font-weight: var(--fw-black); font-size: 5.6cqw;
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tightest);
  max-width: 76%; text-wrap: balance;
}
.slide.s-photo-full .title em { font-style: italic; font-weight: var(--fw-light); color: var(--menta); }
.slide.s-photo-full .cap {
  font-family: var(--mono); font-size: 1cqw; color: var(--on-noche-soft);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.slide.s-photo-full .s-eyebrow { position: absolute; top: 4.5cqw; left: 5cqw; z-index: 2; }
.slide.s-photo-full .s-mark { position: absolute; bottom: 3.8cqw; right: 5cqw; z-index: 2; font-size: 2.2cqw; color: var(--on-noche); }

/* ============================================================ *
 *  20 · FOTO PARTIDA · imagen + contenido                      *
 * ============================================================ */
.slide.s-photo-split { background: var(--bg); color: var(--ink); display: grid; grid-template-columns: 44% 1fr; }
.slide.s-photo-split .ph-img { height: 100%; }
.slide.s-photo-split .body { padding: 4.5cqw 4.5cqw 4cqw; display: flex; flex-direction: column; }
.slide.s-photo-split .s-eyebrow { color: var(--noche); }
.slide.s-photo-split .title {
  font-family: var(--display); font-weight: var(--fw-black); font-size: 3.6cqw;
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-top: 1cqw; text-wrap: balance;
}
.slide.s-photo-split .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-photo-split .lead {
  font-family: var(--serif); font-size: 1.5cqw; line-height: var(--lh-base);
  color: var(--ink-soft); margin-top: 1.6cqw; text-wrap: balance;
}
.slide.s-photo-split .facts { margin-block: auto; display: grid; gap: 1.4cqw; padding-top: 2cqw; }
.slide.s-photo-split .fact { display: grid; grid-template-columns: 9cqw 1fr; gap: 1.6cqw; align-items: baseline; padding-bottom: 1.2cqw; border-bottom: 0.5pt solid var(--line); }
.slide.s-photo-split .fact:last-child { border-bottom: none; }
.slide.s-photo-split .fact .k { font-family: var(--label); font-size: 0.9cqw; color: var(--petroleo); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.slide.s-photo-split .fact .v { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.6cqw; letter-spacing: var(--tracking-snug); color: var(--ink); }
.slide.s-photo-split .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); }
/* .reverse pone la foto a la derecha · alterna el ritmo si van dos seguidas */
.slide.s-photo-split.reverse { grid-template-columns: 1fr 44%; }
.slide.s-photo-split.reverse .ph-img { order: 2; }

/* ============================================================ *
 *  21 · GRILLA DE FOTOS · la operación en imágenes             *
 * ============================================================ */
.slide.s-photo-grid { background: var(--bg); color: var(--ink); padding: 4.5cqw 5cqw; display: flex; flex-direction: column; }
.slide.s-photo-grid .head .s-eyebrow { color: var(--noche); }
.slide.s-photo-grid .head .title { font-family: var(--display); font-weight: var(--fw-black); font-size: 4cqw; line-height: 1; letter-spacing: var(--tracking-tight); margin-top: 1cqw; }
.slide.s-photo-grid .head .title em { font-style: italic; font-weight: var(--fw-light); color: var(--petroleo); }
.slide.s-photo-grid .shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; margin-block: auto; padding-top: 3cqw; }
.slide.s-photo-grid .shot .ph-img { aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.slide.s-photo-grid .shot .n { font-family: var(--mono); font-size: 0.85cqw; color: var(--petroleo); letter-spacing: var(--tracking-wider); margin-top: 1.2cqw; }
.slide.s-photo-grid .shot .c { font-family: var(--display); font-weight: var(--fw-bold); font-size: 1.5cqw; letter-spacing: var(--tracking-snug); margin-top: 0.3cqw; }
.slide.s-photo-grid .shot .d { font-family: var(--serif); font-size: 1.05cqw; color: var(--ink-soft); line-height: var(--lh-snug); margin-top: 0.4cqw; }
.slide.s-photo-grid .meta-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.95cqw; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1.4cqw; border-top: 0.5pt solid var(--line); }