/* VÉRTICE: hoja de estilos principal
   Paleta tomada del isotipo oficial (cian sobre fondo oscuro), tema único (dark lock). */

:root{
  --bg: #0a0d10;
  --bg-elev: #12161b;
  --bg-elev-2: #171d24;
  --text: #f3f4f2;
  --text-muted: #a2a8ae;
  /* Subido de #6b7178 (3,95:1 sobre el fondo oscuro) a 4,62:1. Es el
     color de los rotulos pequenos de todo el sitio; con el valor viejo
     ninguno llegaba al minimo de 4,5 para texto pequeno. */
  --text-faint: #767c83;
  --accent: #17b8e6;
  --accent-soft: rgba(23,184,230,.14);
  --accent-soft-2: rgba(23,184,230,.28);
  /* Segunda serie de los graficos (el polo opuesto en la tension) y
     el neutro de lo que queda fuera. Las dos escenas los interpolan. */
  --dato: #e0a63f;
  --dato-soft: rgba(224,166,63,.34);
  /* Tercera serie: hace falta cuando hay que distinguir tres entidades a
     la vez (semana-03). Validada con la skill dataviz junto al cian y al
     ambar, en oscuro y en claro. */
  --serie3: #9d8cf0;
  --serie3-soft: rgba(157,140,240,.30);
  --fuera: #6b7681;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --radius-card: 16px;
  --radius-pill: 999px;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --max: 1180px;
  --nav-h: 68px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; color: var(--text-muted); max-width: 65ch; }
a{ color: var(--accent); }

#scroll-sentinel{ position: absolute; top: 0; height: 1px; width: 1px; pointer-events: none; }

.grain{
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  background: rgba(10,13,16,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark{ display: block; }
.brand-word{ font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; font-size: 1.05rem; }
.site-header-right{ display: flex; align-items: center; gap: 16px; }

.nav-toggle{
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--text); font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  padding: 8px 16px 8px 18px; cursor: pointer;
}
.nav-toggle-bars{ display: inline-flex; flex-direction: column; gap: 4px; width: 16px; }
.nav-toggle-bars i{ display: block; height: 1.5px; background: var(--text); border-radius: 1px; }
.nav-toggle-bars i:first-child{ width: 100%; }
.nav-toggle-bars i:last-child{ width: 65%; }
.nav-toggle:hover{ border-color: var(--accent-soft-2); color: var(--accent); }

.site-nav{
  position: fixed; inset: 0; z-index: 45;
  background: rgba(8,10,13,.98);
  display: flex; flex-direction: column; justify-content: safe center;
  padding: calc(var(--nav-h) + 24px) clamp(20px, 6vw, 96px) 40px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  overflow-y: auto;
}
.site-nav.is-open{
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}
.site-nav-list{ list-style: none; margin: 0; padding: 0; max-width: 640px; }
.site-nav-list li + li{ margin-top: 4px; }
.site-nav-list a{
  display: flex; align-items: baseline; gap: 18px;
  font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight: 600;
  color: var(--text); text-decoration: none; padding: 10px 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.site-nav-list a:hover{ color: var(--accent); padding-left: 12px; border-color: var(--border); }
.site-nav-list .n{ font-family: var(--font-body); font-size: .85rem; color: var(--text-faint); font-weight: 600; min-width: 26px; }
.site-nav-foot{ margin-top: 40px; color: var(--text-faint); font-size: .8rem; letter-spacing: .04em; }

@media (max-height: 760px){
  .site-nav-list a{ font-size: clamp(1.1rem, 3.4vw, 1.5rem); padding: 6px 4px; }
  .site-nav-list li + li{ margin-top: 0; }
  .site-nav-foot{ margin-top: 20px; }
}

/* ---------- Layout helpers ---------- */
.section{ padding: clamp(72px, 10vw, 128px) clamp(20px, 5vw, 48px); }
.section-alt{ background: var(--bg-elev); }
.section-inner{ max-width: var(--max); margin: 0 auto; }
.section-title{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.section-lead{ font-size: 1.08rem; max-width: 58ch; margin-bottom: 2.5rem; }
.eyebrow{
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; font-weight: 600; color: var(--accent); margin: 0 0 .9em;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: 13px 24px; border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{ background: var(--accent); color: #06181d; }
.btn-primary:hover{ background: #37c6ee; }
.btn-secondary{ background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- Hero ---------- */
.hero{
  position: relative; min-height: 100dvh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 24px) clamp(20px, 5vw, 48px) 48px;
  overflow: hidden;
}
.hero-inner{
  max-width: var(--max); margin: 0 auto; width: 100%; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 64px);
}

.hero-copy{ max-width: 46ch; text-align: left; flex: 1 1 auto; }
.hero-eyebrow{ letter-spacing: .32em; margin: 0 0 1.2em; }
.hero-slogan{
  font-family: var(--font-display); font-weight: 700; color: var(--text);
  font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -.01em;
  margin: 0 0 .55em;
}
.hero-sub{ font-size: 1.05rem; max-width: 42ch; }

/* Full logo (isotipo + wordmark) as a large right-side panel: the main
   visual anchor of the hero, balancing the bold headline on the left. */
.hero-mark-panel{
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.hero-mark-large{
  display: block; width: clamp(320px, 34vw, 560px); height: auto; opacity: .96;
}
@media (max-width: 900px){
  .hero-inner{ flex-direction: column; text-align: center; }
  .hero-copy{ text-align: center; }
  .hero-mark-panel{ order: -1; }
  .hero-mark-large{ width: clamp(220px, 60vw, 360px); }
}

/* Canvas particle network: ambient upward beams + a drifting node field that
   connects to the cursor when nearby (adapted to vanilla canvas, brand cyan,
   no React/GSAP/Tailwind dependency). Sits behind the text. */
.hero-canvas{
  position: absolute; inset: 0; z-index: 0; display: block;
  width: 100%; height: 100%; pointer-events: none; opacity: .8;
}
@media (prefers-reduced-motion: reduce){
  .hero-canvas{ display: none; }
}
.hero-scrim{
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 50% 40%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.hero-edge{
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft-2) 45%, var(--accent-soft-2) 55%, transparent);
  box-shadow: 0 0 24px 1px var(--accent-soft);
}


/* ---------- Nosotros ---------- */
.nosotros-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 4rem;
}
/* Shared hover lift for interactive cards (feedback: card is inert content vs. explorable) */
.method-card, .resource-item, .valor-card, .entregable-card{
  transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .22s ease, box-shadow .22s ease;
}
.method-card:hover, .resource-item:hover:not(.is-empty), .entregable-card:hover{
  transform: translateY(-4px);
  border-color: var(--accent-soft-2);
  box-shadow: 0 14px 32px -18px rgba(23,184,230,.35);
}

.nosotros-card{
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px;
}
.nosotros-card h3{ font-size: 1.05rem; }
.nosotros-card p{ font-size: .95rem; margin: 0; }

/* #nosotros hosts a cursor spotlight, so it needs its own stacking context */
#nosotros{ position: relative; overflow: hidden; }
.section-spotlight{
  position: absolute; z-index: 0; left: 0; top: 0;
  width: 480px; height: 480px; margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
  transition: opacity .35s ease;
  will-change: transform;
}
.section-spotlight.is-active{ opacity: .55; }
@media (prefers-reduced-motion: reduce), (pointer: coarse){
  .section-spotlight{ display: none; }
}
#nosotros .section-inner{ position: relative; z-index: 1; }

.letters-block{ margin-bottom: 4rem; }
.letters-lead{ max-width: 52ch; margin-bottom: 2rem; }

/* Epic letter cards: bigger, spread edge-to-edge, glowing on hover/active */
.letters{ display: flex; justify-content: space-between; gap: 10px; margin-bottom: 2rem; }
.letter{
  position: relative; flex: 1 1 0; max-width: 132px; aspect-ratio: 1 / 1.05;
  border-radius: 18px; background: linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.letter::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, var(--accent-soft-2), transparent 45%, transparent 60%, var(--accent-soft-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .28s ease;
}
.letter-img{
  width: 42%; height: auto; display: block; position: relative; z-index: 1;
  filter: drop-shadow(0 0 0 rgba(23,184,230,0));
  transition: filter .28s ease, transform .28s ease;
}
.letter:hover{
  transform: translateY(-6px) scale(1.04);
  border-color: transparent;
  box-shadow: 0 22px 44px -20px rgba(23,184,230,.45);
}
.letter:hover::before{ opacity: 1; }
.letter:hover .letter-img{ filter: drop-shadow(0 0 10px var(--accent)); transform: scale(1.08); }
.letter.is-active{
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--accent), 0 24px 48px -18px rgba(23,184,230,.55);
  background: linear-gradient(160deg, var(--accent-soft), var(--bg-elev-2));
}
.letter.is-active .letter-img{ filter: drop-shadow(0 0 14px var(--accent)); }
.letter.is-active::before{ opacity: 1; }

.letter-detail{
  display: flex; gap: 26px; align-items: center;
  background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--accent-soft-2); border-radius: var(--radius-card);
  padding: 28px clamp(24px, 4vw, 40px); min-height: 120px;
  box-shadow: 0 30px 60px -30px rgba(23,184,230,.3);
}
.letter-detail-big{
  height: clamp(56px, 8vw, 84px); width: auto; flex: none;
  filter: drop-shadow(0 0 18px var(--accent-soft-2));
}
.letter-detail h4{ margin: 0 0 .3em; font-size: clamp(1.1rem, 2vw, 1.4rem); font-family: var(--font-display); }
.letter-detail p{ margin: 0; font-size: 1rem; max-width: 60ch; }
@keyframes letter-pulse-in{
  0%{ transform: scale(.97); box-shadow: 0 0 0 0 var(--accent-soft-2); }
  40%{ box-shadow: 0 0 0 10px rgba(23,184,230,0); }
  100%{ transform: scale(1); }
}
.letter-detail.is-pulsing{ animation: letter-pulse-in .5s cubic-bezier(.16,1,.3,1); }
.letter-detail.is-pulsing .letter-detail-big{ animation: letter-pulse-in .5s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce){
  .letter-detail.is-pulsing, .letter-detail.is-pulsing .letter-detail-big{ animation: none; }
}

.method-strip{ border-top: 1px solid var(--border); padding-top: 2.4rem; }
.method-strip-label{ font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 1em; }
.method-flow{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.5rem); color: var(--text-muted);
}
.method-flow span{ white-space: nowrap; animation: method-breathe 4.5s ease-in-out infinite; }
.method-flow span:nth-child(1){ animation-delay: 0s; }
.method-flow i:nth-child(2){ animation-delay: .35s; }
.method-flow span:nth-child(3){ animation-delay: .7s; }
.method-flow i:nth-child(4){ animation-delay: 1.05s; }
.method-flow span:nth-child(5){ animation-delay: 1.4s; }
.method-flow i:nth-child(6){ animation-delay: 1.75s; }
.method-flow span:nth-child(7){ animation-delay: 2.1s; }
.method-flow i:nth-child(8){ animation-delay: 2.45s; }
.method-flow span:nth-child(9){ animation-delay: 2.8s; }
.method-flow i:nth-child(10){ animation-delay: 3.15s; }
.method-flow span:nth-child(11){ animation-delay: 3.5s; font-weight: 600; }
.method-flow i{ color: var(--text-faint); font-style: normal; animation: method-breathe 4.5s ease-in-out infinite; }
.method-flow .is-final{ color: var(--accent); font-weight: 700; }
@keyframes method-breathe{
  0%, 100%{ opacity: .22; }
  50%{ opacity: 1; text-shadow: 0 0 18px var(--accent-soft-2); }
}
@media (prefers-reduced-motion: reduce){
  .method-flow span, .method-flow i{ animation: none; opacity: 1; text-shadow: none; }
}


/* ---------- Encanto ---------- */
.encanto-facts{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fact{ display: flex; flex-direction: column; gap: 6px; }
.fact-num{ font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--accent); }
.fact-label{ font-size: .86rem; color: var(--text-muted); }

.storytelling-icon{
  width: 44px; height: 44px; flex: none; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft-2);
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}

/* ---------- El Reto (la lista de pasos se sustituyo por la tarjeta interactiva) ---------- */
.source-note{ font-size: .82rem; color: var(--text-faint); max-width: 60ch; }

/* ---------- Entregables (la lista paso a ser el calendario, ver mas abajo) ---------- */

/* ---------- Metodología ---------- */
.method-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 3rem; }
.method-card{
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px;
}
.method-card.is-final{ border-color: var(--accent-soft-2); background: var(--accent-soft); }
.method-index{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-pill);
  background: var(--bg-elev-2); color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  margin-bottom: 14px;
}
.method-card.is-final .method-index{ background: var(--accent); color: #06181d; }
.method-card h3{ font-size: 1rem; }
.method-card p{ font-size: .9rem; margin: 0; }

.ai-note{
  border-top: 1px solid var(--border); padding-top: 2rem; max-width: 70ch;
}
.ai-note p:last-child{ font-size: .95rem; }

/* ---------- Valor / Recursos ---------- */
.valor-card{
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 34px clamp(24px, 4vw, 44px); max-width: 74ch;
}
.valor-card h3{ font-size: 1.35rem; max-width: 24ch; }
.valor-card p{ font-size: .98rem; }

.resource-list{ display: flex; flex-direction: column; gap: 14px; }
.resource-item{
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px 30px;
}
.resource-item.is-empty{ border-style: dashed; }
.resource-meta{ display: flex; gap: 14px; margin-bottom: .8em; }
.resource-week{ font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.resource-format{ font-size: .74rem; color: var(--text-faint); }
.resource-item h3{ font-size: 1.08rem; }
.resource-item p{ font-size: .93rem; max-width: 68ch; }
.resource-item a{ font-size: .9rem; font-weight: 600; text-decoration: none; }
.resource-item a:hover{ text-decoration: underline; }

/* ---------- Evolución / log ---------- */
.log{ display: flex; flex-direction: column; gap: 0; max-width: 74ch; }
.log-item{ display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--border); }
.log-item:first-child{ border-top: none; }
.log-date{ font-family: var(--font-display); font-size: .85rem; color: var(--accent); font-weight: 600; white-space: nowrap; }
.log-item p{ margin: 0; font-size: .93rem; }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--border); padding: 48px clamp(20px, 5vw, 48px) 40px; }
.site-footer-inner{ max-width: var(--max); margin: 0 auto; }
.site-footer .brand{ margin-bottom: 14px; }
.site-footer p{ font-size: .84rem; margin: 0 0 .4em; }
.site-footer-legal{ color: var(--text-faint); }

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nosotros-grid{ grid-template-columns: 1fr; }
  .method-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .letters{ overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .letter{ flex: 0 0 84px; max-width: none; }
  .letter-detail{ flex-direction: column; align-items: flex-start; text-align: left; }
  .method-grid{ grid-template-columns: 1fr; }
  .encanto-facts{ grid-template-columns: 1fr 1fr; }
  .log-item{ grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================
   Subpáginas de entregables (/entregables/*.html)
   ========================================================= */
.doc-header{
  padding: calc(var(--nav-h) + 56px) clamp(20px, 5vw, 48px) 56px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(70% 60% at 15% 0%, var(--accent-soft), transparent 65%);
}
.doc-header-inner{ max-width: var(--max); margin: 0 auto; }
.doc-back{
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--text-muted); font-size: .85rem; margin-bottom: 24px;
}
.doc-back:hover{ color: var(--accent); }
.doc-title{ font-size: clamp(1.9rem, 4vw, 3rem); max-width: 20ch; }
.doc-lead{ font-size: 1.05rem; max-width: 62ch; margin-bottom: 0; }
.doc-meta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.doc-meta-pill{
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: .78rem; color: var(--text-muted);
}
.doc-meta-pill.is-done{ border-color: var(--accent-soft-2); color: var(--accent); background: var(--accent-soft); }
.doc-meta-pill.is-pending{ border-color: var(--border-strong); color: var(--text-faint); }

.doc-toc{ display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.doc-toc a{ font-size: .84rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px dashed var(--border-strong); padding-bottom: 2px; }
.doc-toc a:hover{ color: var(--accent); border-color: var(--accent); }

.rubric-table{ width: 100%; border-collapse: collapse; margin: 1.5rem 0 2.5rem; font-size: .92rem; }
.rubric-table th, .rubric-table td{ text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rubric-table th{ font-family: var(--font-display); font-weight: 600; color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.rubric-table td:first-child{ font-weight: 600; color: var(--text); white-space: nowrap; }
.status-pill{
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: .76rem; font-weight: 600;
}
.status-pill.is-ok{ background: var(--accent-soft); color: var(--accent); }
.status-pill.is-fixed{ background: rgba(180,220,90,.14); color: #c7e86b; }

.doc-section{ padding: 56px clamp(20px, 5vw, 48px); border-top: 1px solid var(--border); }
.doc-section:first-of-type{ border-top: none; }
.doc-section-inner{ max-width: 78ch; margin: 0 auto; }
.doc-section.is-wide .doc-section-inner{ max-width: var(--max); }
.doc-section h2{ font-size: 1.5rem; margin-bottom: .6em; }
.doc-section h3{ font-size: 1.1rem; }
.doc-section p{ max-width: 72ch; }

.storytelling-embed{
  display: flex; gap: 26px; align-items: flex-start;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 28px clamp(22px, 4vw, 36px); margin: 1.5rem 0 2rem;
}
.storytelling-embed .storytelling-icon{ flex: none; }
.storytelling-embed p:last-child{ margin: 0; }

.seg-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 1.5rem 0 2rem; }
.seg-card{ background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 22px; }
.seg-card h4{ font-size: .92rem; color: var(--accent); margin-bottom: .5em; font-family: var(--font-body); font-weight: 600; }
.seg-card p{ font-size: .9rem; margin: 0; }

.profile-card{
  display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: flex-start;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px clamp(22px, 4vw, 32px); margin: 1.5rem 0 2rem;
}
.profile-avatar{
  width: 84px; height: 84px; border-radius: var(--radius-pill);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
}
.profile-fields{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; margin-top: 10px; font-size: .88rem; }
.profile-fields dt{ color: var(--text-faint); }
.profile-fields dd{ margin: 0 0 8px; color: var(--text-muted); }

.empathy-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 1.5rem 0; }
.empathy-card{ background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 22px; }
.empathy-card h4{ font-size: .88rem; color: var(--accent); margin-bottom: .5em; }
.empathy-card p{ font-size: .89rem; margin: 0; }
.empathy-lists{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 1.5rem 0 2rem; }
.empathy-list h4{ font-size: .95rem; margin-bottom: .6em; }
.empathy-list ul{ margin: 0; padding-left: 1.1em; font-size: .88rem; color: var(--text-muted); }
.empathy-list li{ margin-bottom: .4em; }

.insight-card{
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 24px clamp(20px, 4vw, 30px); margin-bottom: 16px;
}
.insight-card h4{ font-size: 1.02rem; margin-bottom: .8em; }
.insight-row{ display: grid; grid-template-columns: 130px 1fr; gap: 14px; margin-bottom: .7em; font-size: .89rem; }
.insight-row dt{ color: var(--text-faint); font-weight: 600; }
.insight-row dd{ margin: 0; color: var(--text-muted); }
.insight-quote{
  font-family: var(--font-display); font-size: 1rem; color: var(--text);
  border-left: 2px solid var(--accent); padding-left: 16px; margin: 14px 0;
}

.doc-refs{ font-size: .84rem; color: var(--text-faint); }
.doc-refs li{ margin-bottom: .6em; }

.entregable-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.entregable-card{
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px; text-decoration: none; display: block;
}
.entregable-card.is-pending{ opacity: .7; }
.entregable-card .week-tag{ font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.entregable-card h3{ font-size: 1.05rem; margin: .5em 0 .4em; color: var(--text); }
.entregable-card p{ font-size: .88rem; margin: 0; }

@media (max-width: 760px){
  .seg-grid, .empathy-grid, .empathy-lists, .entregable-grid{ grid-template-columns: 1fr; }
  .profile-card{ grid-template-columns: 1fr; }
  .insight-row{ grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   ESCENA CONTINUA: Nosotros + El equipo + El cliente
   Las tres secciones comparten un mismo fondo que se arrastra
   de oscuro a claro con el scroll. main.js interpola en cada
   frame las MISMAS variables globales (--bg, --text, --accent...)
   sobre .scene, asi que todas las reglas existentes de dentro
   cambian de color solas, sin duplicar CSS.
   ========================================================= */
.scene{
  position: relative;
  --sc-mix: 0;                      /* 0 = oscuro, 1 = claro */
  background-color: var(--bg);
  color: var(--text);
}
.scene .section{ background: transparent; }
.scene-section{ position: relative; z-index: 1; }


/* Rastro digital: solo aparece cuando el fondo ya viro a claro */
.scene-trail{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--sc-mix);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse){
  .scene-trail{ display: none; }
}

/* El spotlight cian de Nosotros se apaga a medida que aclara el fondo */
.section-spotlight.is-active{ opacity: calc(.55 * (1 - var(--sc-mix, 0))); }

/* Header adaptado al tramo claro */
body.is-light .site-header{
  background: rgba(250,251,252,.78);
  border-bottom-color: rgba(10,20,24,.10);
}
body.is-light .nav-toggle{ color: #0e1418; border-color: rgba(10,20,24,.20); }
body.is-light .nav-toggle:hover{ border-color: rgba(10,20,24,.38); }
body.is-light .nav-toggle-bars i{ background: #0e1418; }
.site-header, .nav-toggle, .nav-toggle-bars i{
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}

/* ---------- Titulos con entrada por scroll ---------- */
.display-title{
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  letter-spacing: -0.03em; line-height: .98;
  margin-bottom: .45em;
}
.display-title .w{ display: inline-block; overflow: hidden; vertical-align: bottom; }
.display-title .w > span{
  display: inline-block;
  transform: translateY(105%) rotate(4deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease;
  transition-delay: calc(var(--wi, 0) * 70ms);
}
.display-title.is-in .w > span{ transform: none; opacity: 1; }
.display-title::after{
  content: ""; display: block; height: 2px; width: min(260px, 42%);
  margin-top: .38em;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1) .25s;
}
.display-title.is-in::after{ transform: none; }
@media (prefers-reduced-motion: reduce){
  .display-title .w > span{ transform: none; opacity: 1; transition: none; }
  .display-title::after{ transform: none; transition: none; }
}

/* Entrada de cada seccion de la escena */
.scene-section > .section-inner{
  opacity: 0; transform: translateY(28px) scale(.995);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.scene-section.is-in > .section-inner{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .scene-section > .section-inner{ opacity: 1; transform: none; transition: none; }
}

/* ---------- El equipo: tarjetas 3D a la izquierda ---------- */
.team-layout{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.team-cards{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  perspective: 1400px;
}
.team-side{ position: sticky; top: calc(var(--nav-h) + 40px); }
.team-side .section-lead{ margin-bottom: 1.4rem; }
.team-side-note{
  font-size: .86rem; color: var(--text-faint);
  border-left: 2px solid var(--accent); padding-left: 14px; margin: 0;
}

.tcard{
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(46px) rotateY(-24deg) rotateX(9deg) scale(.94);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 130ms);
}
.team-cards.is-in .tcard{ opacity: 1; transform: none; }

.tcard-inner{
  position: relative; overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(23,184,230,.30) 0%, rgba(23,184,230,0) 58%),
    linear-gradient(170deg, #16222b 0%, #0b1116 62%, #070b0e 100%);
  border: 1px solid rgba(23,184,230,.20);
  box-shadow: 0 18px 40px -26px rgba(6,20,28,.85);
  transition: box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.tcard:hover .tcard-inner{
  border-color: rgba(23,184,230,.55);
  box-shadow: 0 34px 70px -34px rgba(10,80,110,.65), 0 0 0 1px rgba(23,184,230,.14);
}

.tcard-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px 12px 0;                /* margen acorde al recorte de la foto */
  overflow: hidden;
}
.tcard-photo::after{                    /* funde la base de la foto con la tarjeta */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, #070b0e 8%, rgba(7,11,14,0) 100%);
  pointer-events: none;
}
.tcard-photo img{
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  transform: translateZ(28px) scale(1.02);
  transition: transform .5s cubic-bezier(.16,1,.3,1), filter .5s ease;
  filter: saturate(.94);
}
.tcard:hover .tcard-photo img{ transform: translateZ(48px) scale(1.06); filter: saturate(1.06); }


.tcard-body{
  position: relative; z-index: 2;
  margin-top: -34px; padding: 0 22px 24px;
  transform: translateZ(34px);
}
.tcard-initials{
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .18em;
  color: #17b8e6; margin-bottom: 10px;
}
.tcard-body h3{
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.15;
  color: #f3f7f9; margin-bottom: .35em;
}
.tcard-role{ font-size: .74rem; color: #7f95a1; margin: 0 0 .8em; letter-spacing: .02em; }
.tcard-note{
  font-size: .82rem; color: #a9bcc6; margin: 0;
}

.tcard-glare{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
  opacity: 0; transition: opacity .35s ease;
}
.tcard:hover .tcard-glare{ opacity: 1; }
.tcard-edge{
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

@media (prefers-reduced-motion: reduce){
  .tcard{ opacity: 1; transform: none; transition: none; }
  .tcard-note{ max-height: none; opacity: 1; }
}

/* ---------- El cliente: video + relato ---------- */
.client-layout{
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: start;
}
.client-video{ margin: 0; position: sticky; top: calc(var(--nav-h) + 32px); }
.client-video-el{
  display: block; width: 100%; height: auto; max-height: 74vh;
  aspect-ratio: 9 / 16; object-fit: cover;
  background: #0a0d10;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px -40px rgba(10,40,55,.55);
}
.client-video-foot{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.client-video-meta{ font-size: .8rem; color: var(--text-faint); }
.dl-btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .84rem;
  text-decoration: none; color: var(--accent);
  border: 1px solid var(--accent-soft-2); border-radius: var(--radius-pill);
  padding: 9px 16px; background: var(--accent-soft);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.dl-btn:hover{ transform: translateY(-2px); border-color: var(--accent); }
.dl-btn svg{ flex: none; }

.client-copy .client-kicker{
  font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--accent); margin-bottom: 1.1em;
}
.client-copy .client-lead-big{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.18;
  letter-spacing: -0.02em; color: var(--text); max-width: 26ch;
  margin-bottom: 1.1em;
}
.client-copy p{ font-size: 1rem; }
.client-copy .client-closing{
  font-family: var(--font-display); font-weight: 600; color: var(--accent);
  font-size: 1.05rem; margin-bottom: 2.4rem;
}
.client-copy .encanto-facts{ gap: 26px 24px; }

@media (max-width: 1020px){
  .team-layout{ grid-template-columns: 1fr; }
  .team-side{ position: static; order: -1; margin-bottom: 2.4rem; }
  .client-layout{ grid-template-columns: 1fr; }
  .client-video{ position: static; max-width: 420px; }
}
@media (max-width: 620px){
  .team-cards{ grid-template-columns: 1fr; gap: 20px; }
  .tcard-note{ max-height: none; opacity: 1; }
  .client-video-el{ max-height: none; }
}

/* El boton de descarga tambien se usa dentro de las subpaginas de entregables */
.storytelling-actions{ margin: 1.2em 0 0; }

/* =========================================================
   ISOTIPO DEL HEADER: version para fondo claro
   El logo oficial tiene dos versiones; se cruzan cuando la
   escena vira a blanco (misma clase body.is-light que ya
   repinta el header).
   ========================================================= */
.brand{ position: relative; }
.brand-mark{ transition: opacity .45s ease; }
.brand-mark-light{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
body.is-light .brand-mark-dark{ opacity: 0; }
body.is-light .brand-mark-light{ opacity: 1; }

/* =========================================================
   COMENTARIOS: boton flotante + panel
   ========================================================= */
.fab-comment{
  position: fixed; z-index: 55;
  right: clamp(14px, 2.6vw, 26px);
  bottom: clamp(14px, 2.6vw, 26px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  color: #cfeffd;
  background: rgba(11, 24, 31, .42);
  border: 1px solid rgba(23, 184, 230, .34);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .95);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.16,1,.3,1), background-color .35s ease,
              border-color .35s ease, color .35s ease, box-shadow .25s ease;
}
.fab-comment:hover{
  transform: translateY(-2px);
  border-color: rgba(23, 184, 230, .7);
  box-shadow: 0 16px 34px -20px rgba(10, 90, 120, .9);
}
.fab-comment svg{ flex: none; opacity: .9; }
.fab-comment.is-open{ opacity: 0; pointer-events: none; transform: translateY(6px); }

body.is-light .fab-comment{
  color: #0a5f7f;
  background: rgba(255, 255, 255, .55);
  border-color: rgba(8, 124, 166, .3);
  box-shadow: 0 12px 30px -20px rgba(20, 60, 80, .5);
}
body.is-light .fab-comment:hover{ border-color: rgba(8, 124, 166, .65); }

/* --- Panel --- */
.cbox{
  position: fixed; z-index: 56;
  right: clamp(14px, 2.6vw, 26px);
  bottom: clamp(14px, 2.6vw, 26px);
  width: min(370px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 92px));
  display: flex; flex-direction: column;
  border-radius: 18px;
  background: rgba(12, 18, 23, .84);
  border: 1px solid rgba(23, 184, 230, .26);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85);
  color: #eef4f7;
  overflow: hidden;
  transform-origin: bottom right;
}
.cbox[hidden]{ display: none; }
.cbox.is-in{ animation: cboxIn .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes cboxIn{
  from{ opacity: 0; transform: translateY(14px) scale(.96); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .cbox.is-in{ animation: none; }
  .fab-comment{ transition: none; }
}

body.is-light .cbox{
  background: rgba(255, 255, 255, .9);
  border-color: rgba(8, 124, 166, .22);
  color: #101a1f;
  box-shadow: 0 30px 70px -34px rgba(20, 60, 80, .45);
}

.cbox-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 14px 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
body.is-light .cbox-head{ border-bottom-color: rgba(10, 30, 40, .1); }
.cbox-head h3{
  font-size: .98rem; margin: 0; letter-spacing: -0.01em;
}
.cbox-close{
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .14);
  color: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.cbox-close:hover{ border-color: rgba(23, 184, 230, .6); background: rgba(23, 184, 230, .12); }
body.is-light .cbox-close{ border-color: rgba(10, 30, 40, .16); }

.cbox-body{ padding: 14px 18px 16px; overflow-y: auto; }

/* Ubicación del comentario */
.cbox-where{
  border: 1px dashed rgba(23, 184, 230, .38);
  background: rgba(23, 184, 230, .08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
body.is-light .cbox-where{
  border-color: rgba(8, 124, 166, .34);
  background: rgba(8, 124, 166, .06);
}
.cbox-where-label{
  display: block;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 700;
  color: #4ecbf0; margin-bottom: 6px;
}
body.is-light .cbox-where-label{ color: #06718f; }
.cbox-where-page{
  display: block; font-size: .72rem; opacity: .72; margin-bottom: 6px;
}
.cbox-select{
  width: 100%;
  font-family: var(--font-body); font-size: .86rem; font-weight: 600;
  color: inherit;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px; padding: 7px 9px;
}
body.is-light .cbox-select{
  background: rgba(255, 255, 255, .9);
  border-color: rgba(10, 30, 40, .16);
}
.cbox-select:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

.cbox-field{ margin-bottom: 12px; }
.cbox-textarea{
  width: 100%; min-height: 116px; resize: vertical;
  font-family: var(--font-body); font-size: .9rem; line-height: 1.55;
  color: inherit;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; padding: 11px 12px;
}
body.is-light .cbox-textarea{
  background: rgba(255, 255, 255, .95);
  border-color: rgba(10, 30, 40, .16);
}
.cbox-textarea::placeholder{ color: currentColor; opacity: .42; }
.cbox-textarea:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.cbox-hint{
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .68rem; opacity: .6; margin-top: 6px;
}

/* Autor */
.cbox-author-label{
  display: block; font-size: .78rem; font-weight: 600; margin-bottom: 8px;
}
.cbox-authors{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cbox-author{
  font-family: var(--font-body); font-weight: 600; font-size: .84rem;
  color: inherit; cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px; padding: 9px 8px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
body.is-light .cbox-author{ border-color: rgba(10, 30, 40, .16); }
.cbox-author:hover{ border-color: rgba(23, 184, 230, .55); }
.cbox-author[aria-pressed="true"]{
  border-color: var(--accent);
  background: rgba(23, 184, 230, .16);
  color: #8fe2ff;
}
body.is-light .cbox-author[aria-pressed="true"]{
  background: rgba(8, 124, 166, .12);
  color: #05617f;
}

.cbox-send{
  width: 100%; margin-top: 14px;
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  color: #04222e;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill); padding: 11px 14px;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
.cbox-send:hover:not(:disabled){ transform: translateY(-1px); filter: brightness(1.08); }
.cbox-send:disabled{ opacity: .5; cursor: not-allowed; }

.cbox-status{
  margin: 10px 0 0; font-size: .78rem; min-height: 1.2em;
}
.cbox-status.is-error{ color: #ff8f8f; }
.cbox-status.is-ok{ color: #6fdca6; }
body.is-light .cbox-status.is-error{ color: #b02525; }
body.is-light .cbox-status.is-ok{ color: #10714a; }

/* Trampa para bots: fuera de pantalla, nunca visible ni enfocable con tab */
.cbox-trap{
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* =========================================================
   SUBPÁGINA DE COMENTARIOS
   ========================================================= */
.comentarios-toolbar{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 2.4rem;
}
.cfilter{
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  color: var(--text-muted); cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 7px 14px;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cfilter:hover{ border-color: var(--accent); color: var(--text); }
.cfilter[aria-pressed="true"]{
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
}

.cgroup{ margin-bottom: 3rem; }
.cgroup-head{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 4px;
}
.cgroup-page{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--accent);
}
.cgroup-title{
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  letter-spacing: -0.01em; margin: 0;
}
.cgroup-count{ font-size: .78rem; color: var(--text-faint); margin-left: auto; }

.citem{
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.citem:last-child{ border-bottom: none; }
.citem-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.cbadge{
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  border-radius: var(--radius-pill); padding: 4px 10px;
  border: 1px solid transparent;
}
.cbadge-docente{
  color: #8fe2ff; background: rgba(23, 184, 230, .14); border-color: rgba(23, 184, 230, .4);
}
.cbadge-empresa{
  color: #ffd79a; background: rgba(230, 160, 23, .12); border-color: rgba(230, 160, 23, .38);
}
/* El compañero de nucleo que califica la actividad individual de la
   semana 3. Usa la tercera serie, el violeta, que ya es el color de "una
   entidad mas" en este proyecto. */
.cbadge-evaluador{
  color: #c9bdff; background: rgba(157, 140, 240, .14); border-color: rgba(157, 140, 240, .40);
}
.citem-date{ font-size: .76rem; color: var(--text-faint); }
.citem-text{
  margin: 0; font-size: .98rem; white-space: pre-wrap; color: var(--text);
  max-width: 72ch;
}

.comentarios-empty{
  border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
  padding: 34px; text-align: center; color: var(--text-muted);
}
.comentarios-empty strong{ color: var(--text); display: block; margin-bottom: .4em; }

/* =========================================================
   TARJETAS DE "¿QUE ES VERTICE?"
   Entran una tras otra al aparecer en pantalla y, mientras el
   cursor esta sobre el grupo, la señalada crece y las otras
   ceden protagonismo. La escala queda por debajo del gap, asi
   que ninguna llega a montarse sobre su vecina.
   ========================================================= */
.nosotros-grid{ gap: clamp(20px, 2.3vw, 30px); align-items: start; }

.nosotros-card{
  position: relative;
  padding: 30px 28px;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .42s ease,
              border-color .3s ease, box-shadow .38s ease;
  transition-delay: var(--enter-delay, 0ms);
}
/* Entrada escalonada. Los retardos se anulan en cuanto hay cursor encima,
   para que el hover responda al instante. */
.nosotros-card:nth-child(1){ --enter-delay: 0ms; }
.nosotros-card:nth-child(2){ --enter-delay: 120ms; }
.nosotros-card:nth-child(3){ --enter-delay: 240ms; }
.nosotros-grid:hover .nosotros-card{ --enter-delay: 0ms; }

.nosotros-card[data-reveal]:not(.is-visible){
  opacity: 0;
  transform: translateY(30px) scale(.94);
}

.nosotros-card h3{
  color: var(--accent);
  font-size: 1.18rem;
  margin-bottom: .55em;
}
.nosotros-card p{ font-size: .97rem; }

@media (hover: hover) and (pointer: fine){
  .nosotros-grid:hover .nosotros-card{ transform: scale(.955); opacity: .6; }
  .nosotros-grid .nosotros-card:hover{
    transform: scale(1.045);
    opacity: 1;
    z-index: 2;
    border-color: var(--accent-soft-2);
    box-shadow: 0 26px 52px -30px rgba(23, 184, 230, .55);
  }
}

@media (prefers-reduced-motion: reduce){
  .nosotros-card{ transition: none; transition-delay: 0ms; }
  .nosotros-card[data-reveal]:not(.is-visible){ opacity: 1; transform: none; }
  .nosotros-grid:hover .nosotros-card{ transform: none; opacity: 1; }
  .nosotros-grid .nosotros-card:hover{ transform: none; }
}

/* =========================================================
   TARJETAS DEL EQUIPO: todas del mismo tamaño
   La de Bleidis lleva dos carreras y su línea de rol ocupa dos
   renglones, así que su tarjeta crecía y rompía la cuadrícula.
   Ahora la altura la fija la fila (1fr) y la tarjeta la llena:
   el texto de cada quien ya no cambia el tamaño de nada.
   Lo único que crece es la tarjeta señalada por el cursor.
   ========================================================= */
.team-cards{ grid-auto-rows: 1fr; }
.tcard{ display: flex; }
.tcard-inner{ flex: 1; display: flex; flex-direction: column; }
.tcard-photo{ flex: none; }

/* El bloque de texto sube un poco sobre la foto */
.tcard-body{ margin-top: -48px; }
.tcard-role{ line-height: 1.35; margin: 0 0 .7em; }

/* En reposo la nota no existe: la tarjeta mide foto + nombre + rol y no
   deja ningún hueco vacío debajo. Al pasar el cursor la tarjeta SE ALARGA
   y la nota se despliega dentro. Para que ese crecimiento no empuje a las
   demás, la tarjeta señalada saca su interior del flujo (position:absolute)
   y se desborda por debajo de su celda: la retícula no se mueve.
   En pantallas táctiles no hay hover, así que ahí la nota va siempre visible. */
.tcard-note{ overflow: visible; }

@media (hover: hover) and (pointer: fine){
  .tcard{ position: relative; }
  .tcard-note{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: max-height .55s cubic-bezier(.16,1,.3,1),
                opacity .3s ease,
                transform .5s cubic-bezier(.16,1,.3,1);
  }
  .tcard:hover .tcard-note,
  .tcard:focus-within .tcard-note{
    max-height: 240px; opacity: 1; transform: none;
    transition-delay: .04s;
  }

  /* La tarjeta señalada crece hacia abajo, anclada por arriba */
  .tcard:hover, .tcard:focus-within{ z-index: 6; }
  .tcard:hover > .tcard-inner,
  .tcard:focus-within > .tcard-inner{
    position: absolute; top: 0; left: 0; width: 100%;
  }

  /* Los retardos de la entrada se anulan al pasar el cursor,
     para que la expansión responda al instante. */
  .team-cards.is-in:hover .tcard{ transition-delay: 0ms; }
  .team-cards.is-in .tcard:hover{
    transform: scale(1.03); transform-origin: 50% 0; z-index: 6;
  }
}

@media (prefers-reduced-motion: reduce){
  .tcard-note{ max-height: none; opacity: 1; transform: none; transition: none; }
  .team-cards.is-in .tcard:hover{ transform: none; }
}

/* =========================================================
   EL RETO — una sola tarjeta que cambia de experiencia
   Las cuatro experiencias viven apiladas en la misma celda de
   grid, así que la tarjeta reserva desde el principio el alto de
   la más larga y nunca salta al cambiar de pestaña.
   ========================================================= */
#reto .section-lead{ max-width: 46ch; }

.reto-card{
  position: relative;
  border-radius: 22px;
  padding: clamp(18px, 2vw, 26px);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(23,184,230,.16) 0%, rgba(23,184,230,0) 60%),
    linear-gradient(172deg, #101a21 0%, #0b1116 58%, #080c10 100%);
  border: 1px solid rgba(23,184,230,.20);
  box-shadow: 0 40px 90px -50px rgba(4, 26, 36, .95);
  transition: border-color .5s ease, box-shadow .5s ease;
}
/* El borde reacciona un instante cuando se cambia de experiencia */
.reto-card.is-shifting{
  border-color: rgba(23,184,230,.52);
  box-shadow: 0 40px 90px -46px rgba(6, 60, 84, .95), 0 0 0 1px rgba(23,184,230,.16);
}

/* ---------- Pestañas ---------- */
.reto-tabs{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 15px;
  background: rgba(4, 10, 14, .5);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.reto-tab{
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #8fa4b0;
  font-family: var(--font-body); font-weight: 600; font-size: .84rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .28s ease, background-color .28s ease, border-color .28s ease,
              transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}
.reto-tab svg{ flex: none; opacity: .8; transition: opacity .28s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.reto-tab:hover{
  color: #dff3fb;
  background: rgba(23,184,230,.07);
  border-color: rgba(23,184,230,.22);
  transform: translateY(-1px);
}
.reto-tab:hover svg{ opacity: 1; transform: scale(1.08); }
.reto-tab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.reto-tab.is-active{
  color: #eafaff;
  background: linear-gradient(180deg, rgba(23,184,230,.22), rgba(23,184,230,.10));
  border-color: rgba(23,184,230,.55);
  box-shadow: 0 10px 26px -14px rgba(23,184,230,.75), inset 0 1px 0 rgba(255,255,255,.10);
}
.reto-tab.is-active svg{ opacity: 1; color: var(--accent); }

/* ---------- Escenario: las 4 experiencias apiladas ---------- */
.reto-stage{ display: grid; }
.reto-panel{
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
  padding: clamp(6px, 1vw, 14px) clamp(6px, 1.4vw, 18px) clamp(8px, 1vw, 14px);
}
.reto-panel:not(.is-active){
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.reto-panel.is-active{ opacity: 1; visibility: visible; }

/* ---------- Columna de texto ---------- */
.reto-cat{
  font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  color: var(--accent); margin: 0 0 .9em;
}
.reto-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.1;
  letter-spacing: -0.025em;
  color: #f2f8fb; margin: 0 0 .55em; max-width: 18ch;
}
.reto-rule{
  display: block; height: 2px; width: 74px; margin-bottom: 1.4em;
  background: linear-gradient(90deg, var(--accent), rgba(23,184,230,0));
}
.reto-desc{
  font-size: .99rem; line-height: 1.65; color: #a8bcc7; margin: 0 0 1.9em; max-width: 46ch;
}
.reto-points{ margin: 0; display: grid; gap: 16px; }
.reto-points > div{ padding-left: 18px; position: relative; }
.reto-points > div::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(23,184,230,.7);
}
.reto-points dt{
  font-family: var(--font-display); font-weight: 600; font-size: .96rem;
  color: #eaf4f8; margin-bottom: .18em;
}
.reto-points dd{ margin: 0; font-size: .87rem; line-height: 1.55; color: #91a6b2; }

/* ---------- Columna de imagen ---------- */
.reto-media{
  /* El ancho sale de la altura disponible: 0.8 es el ancho/alto de estas
     imagenes (4:5), asi que `54vh * 0.8` es el ancho que hace que midan
     54vh de alto. Con `min()` encoge sola en pantallas bajas sin
     deformarse. Se probo con 74vh y llenaba la columna entera, pero eso
     estiraba la tarjeta 220 px y la imagen se comia el bloque. */
  margin: 0 auto; position: relative;
  width: min(100%, calc(54vh * 0.8)); max-width: 100%;
  border-radius: 16px; overflow: hidden;
  background: #070b0e;
}
.reto-media::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07),
              inset 0 -70px 80px -60px rgba(8,12,16,.9);
}
.reto-media img{
  /* Manda el ancho del contenedor, no una altura fija. Con el tope viejo
     (40vh) la imagen quedaba en 303 px dentro de una columna de 493 y
     sobraban 190 px; centrada, ademas, dejaba holgura a los dos lados.
     Ahora llena la columna entera. */
  display: block; width: 100%; height: auto;
}

/* ---------- Indicadores ---------- */
.reto-dots{
  display: flex; justify-content: center; gap: 2px;
  margin-top: clamp(18px, 2vw, 26px);
}
.reto-dot{
  /* El boton mide lo que debe medir un objetivo tactil; el punto visible va
     dentro, asi su animacion de ancho no empuja a los demas indicadores. */
  width: 34px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  contain: layout;
}
.reto-dot > span{
  display: block; width: 9px; height: 9px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.18);
  transition: background-color .3s ease, box-shadow .3s ease, width .35s cubic-bezier(.16,1,.3,1);
}
.reto-dot:hover > span{ background: rgba(23,184,230,.6); }
.reto-dot:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.reto-dot.is-active > span{
  width: 24px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(23,184,230,.65);
}

/* =========================================================
   Transición entre experiencias
   La saliente se va corta y desenfocada; la entrante llega con
   la imagen desde un zoom leve y el texto escalonado. El título
   entra con más recorrido que el resto.
   ========================================================= */
.reto-panel{
  transition: opacity .26s ease, visibility 0s linear .26s;
}
.reto-panel.is-active{ transition: opacity .34s ease, visibility 0s; }

.reto-panel .reto-media img,
.reto-panel .reto-cat,
.reto-panel .reto-title,
.reto-panel .reto-rule,
.reto-panel .reto-desc,
.reto-panel .reto-points > div{
  will-change: transform, opacity;
}

.reto-panel:not(.is-active) .reto-media img{ transform: scale(1.05); }
.reto-panel:not(.is-active) .reto-cat,
.reto-panel:not(.is-active) .reto-desc,
.reto-panel:not(.is-active) .reto-points > div{ opacity: 0; transform: translateY(14px); }
.reto-panel:not(.is-active) .reto-title{ opacity: 0; transform: translateY(24px); filter: blur(5px); }
.reto-panel:not(.is-active) .reto-rule{ transform: scaleX(0); }

.reto-panel.is-active .reto-media img{
  transform: none;
  transition: transform .62s cubic-bezier(.16,1,.3,1);
}
.reto-panel.is-active .reto-cat,
.reto-panel.is-active .reto-desc,
.reto-panel.is-active .reto-points > div{
  opacity: 1; transform: none;
  transition: opacity .42s ease var(--d, 0ms), transform .52s cubic-bezier(.16,1,.3,1) var(--d, 0ms);
}
.reto-panel.is-active .reto-title{
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .46s ease 60ms, transform .60s cubic-bezier(.16,1,.3,1) 60ms, filter .46s ease 60ms;
}
.reto-panel.is-active .reto-rule{
  transform: none; transform-origin: left center;
  transition: transform .55s cubic-bezier(.16,1,.3,1) 150ms;
}
.reto-panel .reto-cat{ --d: 0ms; }
.reto-panel .reto-desc{ --d: 130ms; }
.reto-panel .reto-points > div:nth-child(1){ --d: 190ms; }
.reto-panel .reto-points > div:nth-child(2){ --d: 240ms; }
.reto-panel .reto-points > div:nth-child(3){ --d: 290ms; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .reto-panel{ grid-template-columns: 1fr; gap: 26px; }
  .reto-media{ order: -1; max-width: 420px; margin-inline: auto; }
  .reto-title{ max-width: none; }
  .reto-tabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .reto-card{ border-radius: 18px; }
  .reto-tab{ font-size: .78rem; gap: 7px; padding: 10px 6px; }
  .reto-media{ max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  .reto-panel,
  .reto-panel.is-active,
  .reto-panel .reto-media img,
  .reto-panel .reto-cat,
  .reto-panel .reto-title,
  .reto-panel .reto-rule,
  .reto-panel .reto-desc,
  .reto-panel .reto-points > div{
    transition: none;
  }
  .reto-panel:not(.is-active) .reto-media img{ transform: none; }
  .reto-panel:not(.is-active) .reto-cat,
  .reto-panel:not(.is-active) .reto-desc,
  .reto-panel:not(.is-active) .reto-points > div,
  .reto-panel:not(.is-active) .reto-title{ opacity: 0; transform: none; filter: none; }
  .reto-panel:not(.is-active) .reto-rule{ transform: none; }
  .reto-card.is-shifting{ border-color: rgba(23,184,230,.20); box-shadow: 0 40px 90px -50px rgba(4,26,36,.95); }
}

/* "El reto" cierra la escena: necesita un respiro arriba para que el fondo
   alcance a volver a oscuro antes de que llegue su título. */
#reto{ padding-top: calc(clamp(72px, 10vw, 128px) + 6vh); }

/* =========================================================
   RETICULA REVELADA POR EL CURSOR
   El reto y Entregables comparten fondo y este efecto. En vez
   de otra luz difusa —ya hay dos en la pagina— aqui el cursor
   REVELA una retícula técnica: el plano del proyecto que solo
   se ve donde uno lo esta mirando. El material es una mascara,
   no un brillo, asi que no se repite con nada anterior.
   ========================================================= */
#reto{ position: relative; isolation: isolate; }
#reto > .section-inner{ position: relative; z-index: 1; }

.grid-reveal{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  /* Un solo eje: la pauta de columnas sobre la que esta construida la pagina,
     con una marca de medida cada cuatro columnas. No es una textura de fondo
     (nunca se ve fuera de la mascara), es la regla del plano. */
  background-image: repeating-linear-gradient(to right,
    rgba(23,184,230,.62) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(circle 200px at var(--gx, -400px) var(--gy, -400px),
                      #000 0%, rgba(0,0,0,.5) 48%, transparent 74%);
  mask-image: radial-gradient(circle 200px at var(--gx, -400px) var(--gy, -400px),
              #000 0%, rgba(0,0,0,.5) 48%, transparent 74%);
}
.grid-reveal.is-on{ opacity: 1; }
@media (prefers-reduced-motion: reduce), (pointer: coarse){
  .grid-reveal{ display: none; }
}

/* =========================================================
   ENTREGABLES — no son tarjetas: es el calendario del curso
   Filas a ancho completo separadas por una línea, con la fecha
   en cifras grandes a la izquierda. El estado de cada una lo
   calcula el navegador con la fecha del día, así que la lista
   se desbloquea sola cuando el docente abre la actividad.
   ========================================================= */

/* =========================================================
   DESAFIOS VERTICE — una ruta, no cinco tarjetas
   Cinco paradas sobre una misma vía. La vía se ilumina hasta
   donde llega el progreso; lo que falta queda en penumbra. La
   parada abierta es la unica que despliega contenido: las otras
   solo dicen que llegaran.
   ========================================================= */
.desafios-lead{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.25;
  letter-spacing: -0.02em; color: var(--text); max-width: 30ch;
  margin-bottom: .8em;
}
.desafios-desc{ font-size: .99rem; max-width: 62ch; margin-bottom: clamp(48px, 6vw, 78px); }

.ruta{
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
  padding-top: 34px;
}
/* La vía */
.ruta-via{
  position: absolute; left: 0; right: 0; top: 12px; height: 1px;
  background: var(--border-strong);
}
.ruta-avance{
  position: absolute; left: 0; top: -1px; height: 3px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(23,184,230,.25));
  box-shadow: 0 0 14px rgba(23,184,230,.55);
  transition: width 1.4s cubic-bezier(.16,1,.3,1) .3s;
}

.parada{ position: relative; padding-right: 6px; }

.parada-nodo{
  position: absolute; top: -34px; left: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--border-strong);
  color: var(--text-faint);
  transition: color .4s ease, border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.parada.is-abierta .parada-nodo{
  width: 34px; height: 34px; top: -38px;
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 5px rgba(23,184,230,.09), 0 0 22px rgba(23,184,230,.45);
}
.parada.is-completa .parada-nodo{
  border-color: #7fd6a6; color: #7fd6a6; background: rgba(127,214,166,.12);
  box-shadow: 0 0 0 5px rgba(127,214,166,.08), 0 0 20px rgba(127,214,166,.35);
}

.parada-n{
  font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  color: var(--text-faint); margin: 0 0 .5em;
  transition: color .4s ease;
}
.parada.is-abierta .parada-n{ color: var(--accent); }
.parada.is-completa .parada-n{ color: #7fd6a6; }

.parada-titulo{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.15;
  letter-spacing: -0.02em; color: var(--text); margin: 0 0 .55em;
  transition: color .4s ease;
}
.parada-estado{
  display: inline-block;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 4px 10px; color: var(--text-faint); margin: 0 0 1em;
}
.parada.is-abierta .parada-estado{
  color: var(--accent); border-color: var(--accent-soft-2); background: var(--accent-soft);
}
.parada.is-completa .parada-estado{ color: #7fd6a6; border-color: rgba(127,214,166,.34); }

.parada-frase{ font-size: .89rem; margin: 0; max-width: 26ch; }
.parada.is-abierta .parada-frase{ font-size: .97rem; color: var(--text-muted); margin-bottom: 1.6em; }

/* Lo bloqueado baja de intensidad, pero no parece roto: sigue legible */
.parada.is-cerrada{ opacity: .42; transition: opacity .4s ease; }
.parada.is-cerrada:hover{ opacity: .62; }

.parada-btn{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: .87rem;
  text-decoration: none; color: #04222e;
  background: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--radius-pill); padding: 11px 20px;
  transition: transform .22s cubic-bezier(.16,1,.3,1), filter .22s ease, box-shadow .3s ease;
  box-shadow: 0 14px 30px -18px rgba(23,184,230,.9);
}
.parada-btn:hover{ transform: translateY(-2px); filter: brightness(1.08); }
.parada-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.parada-btn svg{ transition: transform .22s cubic-bezier(.16,1,.3,1); }
.parada-btn:hover svg{ transform: translateX(3px); }

@media (max-width: 900px){
  .ruta{ grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-left: 30px; }
  .ruta-via{ left: 12px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .ruta-avance{ left: -1px; top: 0; width: 3px !important; height: var(--avance, 0); transition: height 1.4s cubic-bezier(.16,1,.3,1) .3s; }
  .parada{ padding: 26px 0 26px 0; }
  .parada-nodo{ top: 24px; left: -30px; }
  .parada.is-abierta .parada-nodo{ top: 20px; left: -34px; }
  .parada-frase{ max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  .ruta-avance{ transition: none; }
  .parada-btn:hover{ transform: none; }
}

/* =========================================================
   ENTREGAMOS VALOR — la esfera de la marca
   Una esfera compuesta con las piezas que VERTICE ya produjo
   para El Encanto: giran despacio, tienen profundidad real
   (translateZ) y el cursor solo la inclina, no la dispara.
   ========================================================= */
.valor-layout{
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.valor-lead{
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.6;
  color: var(--text-muted); max-width: 42ch; margin-bottom: 2rem;
}
.valor-lista{
  list-style: none; margin: 0 0 2.4rem; padding: 0;
  display: grid; gap: 12px;
}
.valor-lista li{
  position: relative; padding-left: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--text);
}
.valor-lista li::before{
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(23,184,230,.7);
}
.valor-btn svg{ transition: transform .22s cubic-bezier(.16,1,.3,1); }
.valor-btn:hover svg{ transform: translateX(3px); }

.orb{
  position: relative;
  width: 100%; max-width: 520px; aspect-ratio: 1;
  margin-inline: auto;
  perspective: 1200px;
  /* La esfera se difumina hacia el borde: da volumen sin dibujar un circulo */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 78%);
}
.orb-tilt{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.orb-shell{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: orbGira 64s linear infinite;
}
@keyframes orbGira{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(360deg); }
}
.orb-item{
  position: absolute; top: 50%; left: 50%;
  width: var(--w, 74px);
  margin: calc(var(--w, 74px) * -0.89) 0 0 calc(var(--w, 74px) * -0.5);
  transform-style: preserve-3d;
  transform: rotateY(var(--a)) rotateX(var(--b)) translateZ(var(--r));
}
.orb-item img{
  display: block; width: 100%; height: auto; border-radius: 9px;
  border: 1px solid rgba(23,184,230,.22);
  box-shadow: 0 16px 34px -22px rgba(0,0,0,.95);
  /* Contragiro: cada pieza deshace el giro de la esfera y queda de frente */
  animation: orbGiraInv 64s linear infinite;
  opacity: .92;
}
@keyframes orbGiraInv{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(-360deg); }
}
.orb-nucleo{
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(23,184,230,.30), rgba(23,184,230,0) 70%);
}
.orb-nucleo img{ width: 40px; height: auto; opacity: .9; }

@media (max-width: 900px){
  .valor-layout{ grid-template-columns: 1fr; }
  .orb{ max-width: 360px; order: -1; }
  /* Las piezas de la esfera estan colocadas en 3D y sobresalen unos
     pixeles del contenedor: a 375 px eso daba 7 px de scroll horizontal
     en toda la pagina. Se recorta en el contenedor de la seccion y no en
     .orb, porque un overflow sobre un ancestro con preserve-3d aplana a
     los hijos y se pierde la esfera. Se usa clip y no hidden, para no
     crear un contenedor de scroll. */
  .valor-layout{ overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce){
  .orb-shell, .orb-item img{ animation: none; }
  .orb-tilt{ transition: none; }
}

/* =========================================================
   RETO 01 — la subpagina como mision
   ========================================================= */
.mision-header .doc-lead{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--accent);
  letter-spacing: -0.02em; margin-bottom: 1em;
}
.mision-proposito{ max-width: 62ch; font-size: 1rem; }

.mision-panel{
  position: relative;
  border-radius: 22px;
  padding: clamp(24px, 3.4vw, 44px);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(23,184,230,.16) 0%, rgba(23,184,230,0) 60%),
    linear-gradient(172deg, #101a21 0%, #0b1116 58%, #080c10 100%);
  border: 1px solid rgba(23,184,230,.20);
  box-shadow: 0 40px 90px -50px rgba(4, 26, 36, .95);
  transition: border-color .6s ease, box-shadow .6s ease;
}
.mision-panel.is-completo{
  border-color: rgba(127,214,166,.5);
  box-shadow: 0 40px 90px -46px rgba(20,80,60,.85), 0 0 0 1px rgba(127,214,166,.16);
}

.mision-cabecera{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: clamp(30px, 4vw, 46px);
}
.mision-etiqueta{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  color: var(--accent); margin: 0 0 .5em;
}
.mision-pct{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 7vw, 4.6rem); line-height: .9; letter-spacing: -0.05em;
  color: var(--text); margin: 0; font-variant-numeric: tabular-nums;
}
.mision-pct i{ font-style: normal; font-size: .38em; color: var(--accent); margin-left: .1em; }
.mision-panel.is-completo .mision-pct i{ color: #7fd6a6; }
.mision-resumen{ margin: 0; font-size: .92rem; max-width: 34ch; text-align: right; }

/* La senda de progreso: cuatro nodos sobre una via */
.senda{
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: clamp(30px, 4vw, 44px);
  padding-top: 26px;
}
.senda-via{
  position: absolute; left: 6%; right: 6%; top: 5px; height: 1px;
  background: var(--border-strong);
}
.senda-avance{
  position: absolute; left: 0; top: -1px; height: 3px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(23,184,230,.45));
  box-shadow: 0 0 14px rgba(23,184,230,.6);
  transition: width .7s cubic-bezier(.16,1,.3,1), background .5s ease, box-shadow .5s ease;
}
.mision-panel.is-completo .senda-avance{
  background: linear-gradient(90deg, #7fd6a6, rgba(127,214,166,.45));
  box-shadow: 0 0 16px rgba(127,214,166,.6);
}
.senda-nodo{
  position: relative; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--text-faint);
  transition: color .45s ease;
}
.senda-nodo::before{
  content: ""; position: absolute; top: -26px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.senda-nodo.is-on{ color: var(--accent); }
.senda-nodo.is-on::before{
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 14px rgba(23,184,230,.75); transform: scale(1.25);
}
.mision-panel.is-completo .senda-nodo.is-on{ color: #7fd6a6; }
.mision-panel.is-completo .senda-nodo.is-on::before{
  background: #7fd6a6; border-color: #7fd6a6; box-shadow: 0 0 14px rgba(127,214,166,.7);
}

/* Checkpoints */
.checkpoints{ list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 12px; }
.cp-btn{
  width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  text-align: left; cursor: pointer;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px;
  color: inherit; font-family: var(--font-body);
  transition: border-color .3s ease, background-color .3s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.cp-btn:hover{ border-color: var(--accent-soft-2); background: rgba(23,184,230,.05); transform: translateX(3px); }
.cp-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-caja{
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: transparent;
  transition: background-color .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, color .3s ease .1s, transform .4s cubic-bezier(.16,1,.3,1);
}
.cp-caja svg{ transform: scale(.4); opacity: 0; transition: transform .4s cubic-bezier(.16,1,.3,1) .06s, opacity .3s ease .06s; }
.cp-texto{ display: block; font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
.cp-texto b{
  display: block; font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  color: var(--text); margin-bottom: .25em;
  transition: color .35s ease;
}
.cp-btn[aria-pressed="true"]{ border-color: rgba(127,214,166,.34); background: rgba(127,214,166,.06); }
.cp-btn[aria-pressed="true"] .cp-caja{
  background: #7fd6a6; border-color: #7fd6a6; color: #06231a; transform: scale(1.06);
}
.cp-btn[aria-pressed="true"] .cp-caja svg{ transform: scale(1); opacity: 1; }
.cp-btn[aria-pressed="true"] .cp-texto b{ color: #a8e6c6; }

.mision-nota{ font-size: .78rem; color: var(--text-faint); margin: 0 0 1em; }
.mision-reset{
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px;
}
.mision-reset:hover{ color: var(--accent); }

/* Guía */
.guia-acciones{ display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0 1rem; }
.guia-nota{ font-size: .8rem; color: var(--text-faint); max-width: 56ch; }

/* Recompensa */
.premio{
  position: relative;
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(172deg, #0d1318 0%, #090d11 100%);
  padding: clamp(30px, 4.4vw, 56px);
  transition: border-color .8s ease, box-shadow .8s ease, background .8s ease;
}
.premio.is-abierto{
  border-color: rgba(127,214,166,.4);
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(127,214,166,.16) 0%, rgba(127,214,166,0) 62%),
    linear-gradient(172deg, #0d1318 0%, #090d11 100%);
  box-shadow: 0 40px 90px -50px rgba(20,80,60,.9);
}
.premio-cerrado{ text-align: center; opacity: .58; transition: opacity .5s ease; }
.premio-candado{
  display: inline-grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text-faint);
  margin-bottom: 20px;
}
.premio-etiqueta{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  color: var(--text-faint); margin: 0 0 .6em;
}
.premio-etiqueta.premio-ok{ color: #7fd6a6; }
.premio-titulo{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.025em;
  color: var(--text); margin: 0 0 .5em;
}
.premio-pista{ margin: 0; font-size: .9rem; }
.premio-desc{ max-width: 58ch; margin-bottom: 2rem; }

/* La apertura: se despliega, no aparece de golpe */
.premio-abierto[hidden]{ display: none; }
.premio-abierto{ animation: premioEntra .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes premioEntra{
  from{ opacity: 0; transform: translateY(18px) scale(.985); filter: blur(6px); }
  to{ opacity: 1; transform: none; filter: blur(0); }
}
.premio-lista{ list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 16px; }
.premio-lista li{ position: relative; padding-left: 20px; }
.premio-lista li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: #7fd6a6; box-shadow: 0 0 10px rgba(127,214,166,.7);
}
.premio-lista b{
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--text); margin-bottom: .2em;
}
.premio-lista span{ font-size: .89rem; color: var(--text-muted); }
.premio-acciones{ margin-bottom: 1.2rem; }
.premio-nota{ font-size: .8rem; color: var(--text-faint); max-width: 60ch; margin: 0; }

@media (max-width: 700px){
  .mision-cabecera{ flex-direction: column; align-items: flex-start; }
  .mision-resumen{ text-align: left; }
  .senda{ grid-template-columns: repeat(4, 1fr); }
  .senda-nodo{ font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce){
  .cp-btn:hover{ transform: none; }
  .premio-abierto{ animation: none; }
  .senda-avance, .senda-nodo::before, .cp-caja, .cp-caja svg{ transition: none; }
}

/* =========================================================
   BIBLIOTECA DE RECURSOS
   ========================================================= */
.rec-filtros{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2.6rem; }

.rec-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.rec{
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.rec:hover{
  border-color: var(--accent-soft-2); transform: translateY(-3px);
  box-shadow: 0 22px 44px -30px rgba(23,184,230,.5);
}
.rec[hidden]{ display: none; }

.rec-vista{
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: #070b0e; display: grid; place-items: center;
}
.rec-vista.is-vert{ aspect-ratio: 3 / 4; }
.rec-vista.is-doc{ color: var(--accent); background: var(--accent-soft); }
.rec-vista img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.rec:hover .rec-vista img{ transform: scale(1.04); }

.rec-pie{ padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.rec-pie h3{ font-size: .96rem; margin: 0 0 .35em; letter-spacing: -0.01em; }
.rec-pie p{ font-size: .85rem; margin: 0 0 1.1em; flex: 1; }
.rec-dl{
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  text-decoration: none; color: var(--accent);
  border: 1px solid var(--accent-soft-2); border-radius: var(--radius-pill);
  padding: 8px 14px; background: var(--accent-soft);
  transition: transform .2s ease, border-color .2s ease;
}
.rec-dl:hover{ transform: translateY(-2px); border-color: var(--accent); }
.rec-dl i{ font-style: normal; opacity: .7; font-weight: 500; }

@media (prefers-reduced-motion: reduce){
  .rec:hover{ transform: none; }
  .rec:hover .rec-vista img{ transform: none; }
  .rec-dl:hover{ transform: none; }
}

/* =========================================================
   GUIA DEL RETO 01 — pieza editorial, pensada tambien para imprimir
   ========================================================= */
.guia-body{ background: var(--bg); }
.guia-barra{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(20px, 5vw, 48px);
  background: rgba(10,13,16,.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.guia-volver{ font-size: .84rem; font-weight: 600; text-decoration: none; }

.guia{ max-width: 780px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) 100px; }

.guia-portada{
  padding: clamp(60px, 10vw, 120px) 0 clamp(50px, 7vw, 80px);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(50px, 7vw, 80px);
}
.guia-logo{ display: block; width: clamp(150px, 22vw, 210px); height: auto; margin-bottom: 40px; }
.guia-kicker{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 700;
  color: var(--accent); margin: 0 0 1em;
}
.guia-portada h1{
  font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.035em; line-height: .98;
  margin: 0 0 .3em;
}
.guia-sub{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--text-muted);
  max-width: 30ch; margin-bottom: 2.4em;
}
.guia-meta{
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: .76rem; letter-spacing: .04em; color: var(--text-faint);
}

.guia-sec{ margin-bottom: clamp(48px, 7vw, 84px); }
.guia-n{
  font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .18em; color: var(--accent);
  margin: 0 0 .9em;
}
.guia-sec h2{
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.03em;
  margin: 0 0 .7em; max-width: 22ch;
}
.guia-h3{ font-size: 1.05rem; margin: 2em 0 .6em; color: var(--accent); }
.guia-sec p{ font-size: 1rem; line-height: 1.7; }
.guia-destacado{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.08rem, 2vw, 1.28rem); line-height: 1.45;
  color: var(--text); border-left: 2px solid var(--accent);
  padding-left: 20px; margin-bottom: 1.6em; max-width: none;
}

.guia-pasos{ margin: 1.6em 0; padding: 0; list-style: none; counter-reset: gp; }
.guia-pasos li{
  position: relative; counter-increment: gp;
  padding: 0 0 20px 46px; font-size: .97rem; line-height: 1.65; color: var(--text-muted);
}
.guia-pasos li::before{
  content: counter(gp, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--accent);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--accent-soft-2); background: var(--accent-soft);
  display: grid; place-items: center;
}
.guia-pasos b{ color: var(--text); }
.guia-pasos i{ color: var(--text); font-style: italic; }

.guia-lista{ margin: 1em 0 1.6em; padding-left: 20px; }
.guia-lista li{ font-size: .97rem; line-height: 1.65; color: var(--text-muted); margin-bottom: .9em; }
.guia-lista b{ color: var(--text); }

.guia-caja{
  border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 26px; margin: 1.8em 0;
  background: var(--bg-elev);
}
.guia-caja h3{ font-size: 1rem; margin: 0 0 .7em; }
.guia-caja ul{ margin: 0; padding-left: 18px; }
.guia-caja li{ font-size: .93rem; line-height: 1.6; color: var(--text-muted); margin-bottom: .5em; }

.guia-tip{
  border-radius: 14px; padding: 20px 24px; margin: 1.8em 0;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2);
}
.guia-tip b{
  display: block; font-family: var(--font-display); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: .6em;
}
.guia-tip p{ margin: 0; font-size: .93rem; }

.guia-pub{ border-top: 1px solid var(--border); padding: 22px 0 6px; margin-top: 1.4em; }
.guia-pub h3{ font-size: 1.05rem; margin: 0 0 .6em; color: var(--accent); }
.guia-pub p{ font-size: .94rem; margin-bottom: .6em; }
.guia-pub b{ color: var(--text); }
.guia-pub i{ color: var(--text-muted); }

.guia-dos{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.6em 0; }
.guia-dos .guia-caja{ margin: 0; }

.guia-check{ list-style: none; margin: 1.4em 0; padding: 0; }
.guia-check li{
  position: relative; padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--border);
  font-size: .95rem; color: var(--text-muted);
}
.guia-check li::before{
  content: ""; position: absolute; left: 0; top: 14px;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--border-strong);
}

.guia-fig{ margin: 2em 0; }
.guia-fig img{ display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }
.guia-fig figcaption{ font-size: .8rem; color: var(--text-faint); margin-top: 10px; }

.guia-cierre{ border-top: 1px solid var(--border); padding-top: clamp(40px, 6vw, 64px); }
.guia-firma{ font-size: .82rem; color: var(--text-faint); margin-top: 2.4em; line-height: 1.7; }

@media (max-width: 640px){
  .guia-dos{ grid-template-columns: 1fr; }
}

/* --- Impresion: la guia sale como documento, sin barra ni fondos oscuros --- */
@media print{
  @page{ size: A4; margin: 16mm 14mm; }
  .guia-barra, .grain{ display: none; }
  .guia-body{ background: #fff; }
  .guia{ max-width: none; padding: 0; color: #12181d; }
  .guia h1, .guia h2, .guia h3, .guia b{ color: #0b1116; }
  .guia p, .guia li, .guia figcaption{ color: #2f3a42; }
  .guia-n, .guia-kicker, .guia-h3, .guia-pub h3, .guia-tip b{ color: #0a6c8e; }
  .guia-logo{ filter: invert(1) hue-rotate(180deg); }
  .guia-portada{ border-bottom-color: #ccd6dc; page-break-after: always; }
  .guia-sec{ page-break-inside: avoid; margin-bottom: 26px; }
  .guia-paso{ page-break-before: always; }
  .guia-caja, .guia-tip{ background: #f2f6f8; border-color: #d5e0e6; }
  .guia-pasos li::before{ background: #e4f2f8; border-color: #b9dcea; color: #0a6c8e; }
  .guia-destacado{ border-left-color: #0a6c8e; }
  .guia-fig img{ border-color: #d5e0e6; }
  .guia-check li::before{ border-color: #9fb0ba; }
}

/* =========================================================
   ENTREGABLES — no son tarjetas: es el calendario del curso
   Filas a ancho completo separadas por una línea, con la fecha
   en cifras grandes a la izquierda. El estado de cada una lo
   calcula el navegador con la fecha del día, así que la lista
   se desbloquea sola cuando el docente abre la actividad.
   ========================================================= */
.roster{
  list-style: none; margin: 0 0 2.6rem; padding: 0;
  border-top: 1px solid var(--border);
}
.roster-row{
  position: relative;
  display: grid;
  grid-template-columns: 44px 74px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 30px) 6px;
  border-bottom: 1px solid var(--border);
  transition: background-color .35s ease;
}
/* La línea de la fila se enciende de izquierda a derecha al acercarse el cursor */
.roster-row::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(23,184,230,0));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.roster-row:hover::after,
.roster-row:focus-within::after{ transform: scaleX(1); }
.roster-row:hover{ background: rgba(23,184,230,.035); }

.roster-n{
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--text-faint); letter-spacing: .06em;
  transition: color .35s ease;
}
.roster-row:hover .roster-n{ color: var(--accent); }

.roster-when{
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1;
}
.roster-when b{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: color .35s ease;
}
.roster-when i{
  font-style: normal; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-faint); margin-top: 5px;
}
.roster-row.is-abierto .roster-when b{ color: var(--accent); }
.roster-row.is-bloqueado .roster-when b{ color: var(--text-faint); }

.roster-main h3{
  font-size: clamp(1rem, 1.5vw, 1.16rem); margin: 0 0 .3em;
  color: var(--text); letter-spacing: -0.012em;
}
.roster-intro{ margin: 0 0 .5em; font-size: .92rem; max-width: 58ch; }
.roster-meta{
  margin: 0; font-size: .74rem; letter-spacing: .04em;
  color: var(--text-faint);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.roster-chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  border-radius: var(--radius-pill); padding: 4px 10px;
  border: 1px solid var(--border-strong); color: var(--text-faint);
}
.roster-chip::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.roster-row.is-abierto .roster-chip{
  color: var(--accent); border-color: var(--accent-soft-2); background: var(--accent-soft);
}
.roster-row.is-abierto .roster-chip::before{ box-shadow: 0 0 8px currentColor; }
.roster-row.is-cerrado .roster-chip{ color: #7fd6a6; border-color: rgba(127,214,166,.32); }

/* Acción: enlace real cuando la subpágina existe, aviso cuando todavía no */
.roster-btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .82rem;
  text-decoration: none; white-space: nowrap;
  color: var(--accent);
  border: 1px solid var(--accent-soft-2); border-radius: var(--radius-pill);
  padding: 9px 16px; background: var(--accent-soft);
  transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .22s ease, background-color .22s ease;
}
.roster-btn:hover{ transform: translateX(3px); border-color: var(--accent); }
.roster-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.roster-btn svg{ flex: none; transition: transform .22s cubic-bezier(.16,1,.3,1); }
.roster-btn:hover svg{ transform: translateX(3px); }

.roster-espera{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  color: var(--text-faint);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-pill);
  padding: 9px 16px;
}

@media (max-width: 860px){
  .roster-row{
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-areas:
      "fecha titulo"
      "fecha meta"
      "accion accion";
    row-gap: 12px; align-items: start;
  }
  .roster-n{ display: none; }
  .roster-when{ grid-area: fecha; }
  .roster-main{ grid-area: titulo; }
  .roster-go{ grid-area: accion; }
  .roster-intro{ font-size: .89rem; }
}

/* =========================================================
   TRAMO CLARO — Desafíos VÉRTICE + Entregamos valor
   Las dos últimas secciones viven sobre fondo blanco. Usan el
   MISMO mecanismo que la escena oscura de arriba: main.js
   interpola las variables globales de color sobre el contenedor,
   así que todo lo de dentro (textos, bordes, acentos) se repinta
   solo. Aquí solo van los remates que llevan color fijo y que
   sobre blanco había que corregir a mano.
   ========================================================= */
.scene-clara{
  position: relative;
  isolation: isolate;
}
.scene-clara > .section{ position: relative; }
.scene-clara > .section > .section-inner{ position: relative; z-index: 2; }

/* La retícula de Entregables se apaga a medida que el fondo aclara, igual
   que el foco de Nosotros en la escena de arriba: cuando el tramo ya es
   blanco, el efecto de cursor que manda es la imantación. */
.scene-clara .grid-reveal{ z-index: 0; }
.scene-clara .grid-reveal.is-on{ opacity: calc(1 - var(--sc-mix, 0)); }

/* ---- Remates de color sobre blanco ---- */
.scene-clara.is-clara .ruta-avance{
  background: linear-gradient(90deg, #087ca6, rgba(8,124,166,.28));
  box-shadow: 0 0 14px rgba(8,124,166,.35);
}
.scene-clara.is-clara .parada.is-abierta .parada-nodo{
  box-shadow: 0 0 0 5px rgba(8,124,166,.10), 0 0 18px rgba(8,124,166,.28);
}
.scene-clara.is-clara .parada.is-completa .parada-nodo{
  border-color: #2f9e68; color: #2f9e68; background: rgba(47,158,104,.12);
  box-shadow: 0 0 0 5px rgba(47,158,104,.09), 0 0 18px rgba(47,158,104,.22);
}
.scene-clara.is-clara .parada.is-completa .parada-n,
.scene-clara.is-clara .parada.is-completa .parada-estado{ color: #2f9e68; }
.scene-clara.is-clara .parada.is-completa .parada-estado{ border-color: rgba(47,158,104,.36); }
.scene-clara.is-clara .parada.is-cerrada{ opacity: .5; }
.scene-clara.is-clara .parada.is-cerrada:hover{ opacity: .72; }

/* Los botones: sobre blanco el acento se oscurece, así que el texto va claro */
.scene-clara.is-clara .parada-btn,
.scene-clara.is-clara .btn-primary{
  color: #ffffff;
  box-shadow: 0 14px 30px -18px rgba(8,124,166,.75);
}
.scene-clara.is-clara .btn-primary:hover{ background: #0a92c2; }
.scene-clara.is-clara .valor-lista li::before{ box-shadow: 0 0 10px rgba(8,124,166,.45); }
.scene-clara.is-clara .orb-item img{
  border-color: rgba(8,124,166,.28);
  box-shadow: 0 18px 34px -22px rgba(12,40,55,.45);
}
.scene-clara.is-clara .orb-nucleo{
  background: radial-gradient(circle at 50% 40%, rgba(8,124,166,.22), rgba(8,124,166,0) 70%);
}

/* Isotipo del núcleo de la esfera: cruza a la versión para fondo claro */
.orb-nucleo{ position: relative; }
.orb-mark{
  grid-area: 1 / 1;
  width: 40px; height: auto;
  transition: opacity .5s ease;
}
.orb-mark-light{ opacity: 0; }
.scene-clara.is-clara .orb-mark-dark{ opacity: 0; }
.scene-clara.is-clara .orb-mark-light{ opacity: .95; }

/* =========================================================
   ESFERA: giro gobernado por JS
   Al tomar el mando main.js, el giro deja de ser una animación
   CSS fija y pasa a un ángulo (--spin) que se puede acelerar,
   frenar e inclinar con inercia. El contragiro de cada pieza
   hereda la misma variable, así que una sola escritura por
   fotograma mueve las catorce. Sin JS o con movimiento reducido
   siguen valiendo las animaciones CSS de siempre.
   ========================================================= */
.orb.is-live .orb-shell{
  animation: none;
  transform: rotateY(var(--spin, 0deg));
}
.orb.is-live .orb-item img{
  animation: none;
  transform: rotateY(calc(-1 * var(--spin, 0deg)));
}
.orb.is-live .orb-tilt{ transition: none; }
.orb.is-live{ cursor: grab; }
.orb.is-live.is-drag{ cursor: grabbing; }
/* Al poder arrastrarse, la esfera tiene que recibir el puntero ella misma:
   las piezas lo dejan pasar y las imágenes no se pueden arrastrar sueltas. */
.orb.is-live .orb-item,
.orb.is-live .orb-nucleo{ pointer-events: none; }
.orb.is-live img{ -webkit-user-drag: none; user-select: none; }
.orb.is-live{ touch-action: pan-y; }
/* Sobre blanco el acento (#087ca6) con texto blanco queda justo de contraste
   para un botón pequeño: se oscurece un punto solo en los botones. */
.scene-clara.is-clara .parada-btn{ background: #05688d; border-color: #05688d; }
.scene-clara.is-clara .parada-btn:hover{ filter: brightness(1.14); }
.scene-clara.is-clara .btn-primary{ background: #05688d; }
.scene-clara.is-clara .btn-primary:hover{ background: #077ba7; }

/* =========================================================
   IMANTACIÓN VÉRTICE — el efecto de cursor del tramo claro
   Aquí NO se dibuja nada detrás del texto: sobre blanco cualquier
   capa de fondo compite con la lectura. Lo que reacciona es la
   propia página. Tres piezas:
   1. Un vértice —la marca— que sigue al cursor con retardo y gira
      hacia la dirección del movimiento. Vive pegado al puntero, no
      se cruza con ningún párrafo.
   2. Imantación: los botones y las paradas se dejan atraer hacia
      el cursor cuando pasa cerca, y vuelven a su sitio al salir.
   3. Una luz que recorre la vía de Desafíos siguiendo al cursor.
   Ninguno de los cinco efectos anteriores del sitio hace esto.
   ========================================================= */
.iman-cursor{
  position: fixed; left: 0; top: 0; z-index: 45;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  pointer-events: none;
  color: #066e94;
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
.iman-cursor.is-on{ opacity: 1; }
.iman-anillo{
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(6, 110, 148, .42);
  background: rgba(6, 110, 148, 0);
  transform: scale(var(--esc, 1));
  transition: background-color .3s ease, border-color .3s ease;
}
.iman-cursor.is-activo .iman-anillo{
  border-color: rgba(6, 110, 148, .7);
  background: rgba(6, 110, 148, .10);
}
.iman-v{
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px; margin: -7px 0 0 -7.5px;
  transform: rotate(var(--rot, 0deg));
  opacity: .85;
  transition: opacity .3s ease;
}
.iman-cursor.is-activo .iman-v{ opacity: 0; }

/* Los elementos imantados vuelven solos a su sitio al salir el cursor */
.scene-clara .parada,
.scene-clara .parada-btn,
.scene-clara .valor-btn{ will-change: transform; }
.scene-clara .parada{ transition: transform .5s cubic-bezier(.16,1,.3,1); }
.scene-clara .parada-btn,
.scene-clara .valor-btn{ transition: transform .35s cubic-bezier(.16,1,.3,1), filter .22s ease, box-shadow .3s ease; }
.scene-clara.is-iman .parada,
.scene-clara.is-iman .parada-btn,
.scene-clara.is-iman .valor-btn{ transition: none; }

/* La luz que recorre la vía: va sobre la línea, nunca sobre el texto */
@media (min-width: 901px){
  .ruta-via{ overflow: visible; }
  .ruta-via::after{
    content: ""; position: absolute; top: -3px; height: 7px; width: 220px;
    left: calc(var(--ix, -600px) - 110px);
    pointer-events: none; border-radius: 4px;
    background: radial-gradient(closest-side, rgba(6,110,148,.5), rgba(6,110,148,0));
    opacity: var(--iluz, 0);
    transition: opacity .45s ease;
  }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse){
  .iman-cursor{ display: none; }
  .ruta-via::after{ display: none; }
}

/* =========================================================
   HERO DE MALLA — encabezado de entregables/semana-02.html
   Fondo de constelación: una retícula de nodos unidos por
   líneas que se apartan del cursor con física de resorte y
   vuelven a su sitio. Portado a JS vanilla desde el componente
   React de referencia: mismo comportamiento, sin framework, sin
   build y con el cian de la marca en vez del azul genérico.
   La malla se detiene sola cuando el hero sale de pantalla.
   ========================================================= */
.doc-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: #05080a;
  padding-block: calc(var(--nav-h) + clamp(56px, 9vw, 104px)) clamp(56px, 8vw, 96px);
}
.malla{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
/* Vela el fondo justo debajo del texto: la malla se ve, pero no compite */
.doc-hero-scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(78% 92% at 22% 55%, rgba(5,8,10,.90) 0%, rgba(5,8,10,.45) 45%, rgba(5,8,10,0) 78%),
    linear-gradient(to bottom, rgba(5,8,10,.55) 0%, rgba(5,8,10,0) 30%, rgba(5,8,10,.55) 100%);
}
.doc-hero .doc-header-inner{ position: relative; z-index: 2; }

.doc-hero-logo{
  display: block; width: clamp(158px, 21vw, 248px); height: auto;
  margin-bottom: clamp(24px, 3.2vw, 40px);
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.65));
}
/* El título es lo único que compite con la malla: va grande y en versales */
.doc-hero-titulo{
  font-size: clamp(2.9rem, 9.5vw, 7rem);
  line-height: .9; letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: none; margin-bottom: .38em;
  text-shadow: 0 16px 46px rgba(0,0,0,.7);
}
.doc-hero-lead{
  font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.6;
  max-width: 58ch; color: var(--text-muted);
  text-shadow: 0 6px 22px rgba(0,0,0,.75);
}

@media (prefers-reduced-motion: reduce), (pointer: coarse){
  /* Sin cursor no hay interacción que justifique el bucle: se apaga */
  .malla{ display: none; }
  .doc-hero{
    background:
      radial-gradient(70% 60% at 15% 0%, var(--accent-soft), transparent 65%), #05080a;
  }
}

/* =========================================================
   PUNTO 1 · CONTEXTO SITUACIONAL — el tambor de evidencia
   (entregables/semana-02.html)

   Las ocho dimensiones del diagnóstico viven en las ocho caras
   de un tambor que gira, y cada cara es una pieza REAL del
   material de la marca. El tambor no decora: es la navegación.
   Se arrastra, se gira con el teclado y al elegir una dimensión
   rueda hasta ella.

   Decisión de color: el material del cliente es ilustración
   saturada (azules, verdes, amarillos de caricatura). Si la
   interfaz también usa esos colores, todo se mezcla y nada
   manda. Así que el cromo es cian de marca + ámbar + violeta
   sobre casi negro, SIN verde: el único verde de la sección
   está dentro de las fotos del cliente, que es donde le toca.
   Las caras que no están al frente se apagan y desaturan; la
   activa recupera el color pleno. Eso convierte la saturación
   del material en un recurso en vez de un problema.
   ========================================================= */
.ctx{
  --ctx-bg: var(--bg);
  --ctx-bg-2: var(--bg-elev);
  --ctx-borde: var(--border-strong);
  --c-marca:  #17b8e6;   /* cian: la marca y lo que ya existe */
  --c-brecha: #e0a63f;   /* ámbar: la tensión, lo que falta */
  --c-digital:#8f7bd8;   /* violeta: el terreno digital */
  --c-rival:  #5b8fe0;   /* azul: la referencia competitiva */
  position: relative;
  /* El fondo lo pone ahora la escena que comparten los cinco puntos */
  background: transparent;
  isolation: isolate;
}
.ctx .doc-section-inner{ position: relative; z-index: 1; }
.ctx-intro{ max-width: 64ch; color: var(--text-muted); }
.ctx-h3{
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 .5em;
}
.ctx-p{ color: var(--text-muted); max-width: 62ch; margin: 0 0 1.6em; }

/* ---------------- EL TAMBOR ---------------- */
.tam-zona{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  margin: clamp(34px, 5vw, 60px) 0 clamp(56px, 8vw, 96px);
}
.tam-visor{ display: grid; justify-items: center; gap: 16px; }
/* En pantallas estrechas las caras laterales del tambor se salen del
   ancho de la ventana (a 375px llegaban a 529) y arrastraban a TODA la
   pagina a scroll horizontal: los elementos fijos —grano, cabecera,
   boton de comentarios— se estiraban hasta 491px.
   Se recorta en la seccion y no en el visor, porque en escritorio las
   caras sobresalen 49px del visor a proposito y ahi no hay nada que
   recortar. Y con clip en vez de hidden, para no crear un contenedor
   de scroll ni romper los sticky de la pagina. */
@media (max-width: 860px){
  .doc-section.ctx{ overflow-x: clip; }
}
.tam{
  position: relative;
  width: 100%; height: clamp(300px, 40vw, 420px);
  perspective: 1250px;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}
.tam.is-arrastrando{ cursor: grabbing; }
.tam:focus-visible{ outline: 2px solid var(--c-marca); outline-offset: 8px; border-radius: 12px; }
.tam-aro{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-6deg) rotateY(var(--giro, 0deg));
  will-change: transform;
}
.tam-cara{
  position: absolute; left: 50%; top: 50%;
  width: var(--cw, 232px); height: var(--ch, 290px);
  margin: calc(var(--ch, 290px) / -2) 0 0 calc(var(--cw, 232px) / -2);
  transform: rotateY(var(--a)) translateZ(var(--r));
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #0a1116;
  /* Las caras del fondo se apagan: la de delante es la que habla */
  transition: opacity .5s ease, filter .5s ease, border-color .5s ease, box-shadow .5s ease;
  opacity: .3;
  filter: saturate(.25) brightness(.5) contrast(1.05);
}
.tam-cara img{
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
}
.tam-cara.is-activa{
  opacity: 1;
  filter: none;
  border-color: rgba(23,184,230,.65);
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(23,184,230,.18);
}
/* Marca de esquina: convierte la foto en material fichado, no en adorno */
.tam-cara-marca{
  position: absolute; left: 10px; bottom: 9px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .62rem; letter-spacing: .18em;
  color: rgba(255,255,255,.55);
  padding: 3px 8px; border-radius: 5px;
  background: rgba(5,8,10,.6);
  backdrop-filter: blur(3px);
}
.tam-cara.is-activa .tam-cara-marca{ color: var(--c-marca); }

/* La cara 07 no es una foto: de la competencia tenemos una cifra, no una imagen */
.tam-placa{
  display: grid; align-content: center; justify-items: center; gap: 4px;
  width: 100%; height: 100%; padding: 20px; text-align: center;
  background: linear-gradient(168deg, #101a24 0%, #070c11 100%);
}
.tam-placa b{
  font-family: var(--font-display); font-weight: 700;
  font-size: 2rem; letter-spacing: -0.03em; color: var(--c-rival);
}
.tam-placa span{ font-size: .7rem; color: var(--text-faint); letter-spacing: .06em; }
.tam-placa i{
  font-style: normal; font-size: .62rem; color: var(--text-faint);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1);
}
.tam-placa em{
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; color: var(--c-marca); letter-spacing: -0.02em;
}

.tam-pista{
  margin: 0; font-size: .74rem; color: var(--text-faint);
  letter-spacing: .04em;
  transition: opacity .5s ease;
}
.tam-pista.is-off{ opacity: 0; }

/* ---------------- LA LECTURA ---------------- */
.tam-lectura{ min-width: 0; }
.tam-indice{
  margin: 0 0 .3em; font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.tam-indice b{ font-size: 2.1rem; color: var(--c-marca); }
.tam-indice i{ font-style: normal; font-size: .9rem; color: var(--text-faint); margin-left: 6px; }
.tam-titulo{
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.05;
  letter-spacing: -0.03em; margin: 0 0 .6em;
}
.tam-cuerpo{ min-height: 190px; }
.tam-cuerpo p{ color: var(--text-muted); margin: 0 0 1em; max-width: 46ch; }
.tam-cuerpo .tam-lead{
  color: var(--text); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.16rem); line-height: 1.4; letter-spacing: -0.015em;
}
.tam-cuerpo .tam-nota{
  font-size: .84rem; color: var(--text-faint);
  border-left: 1px solid var(--c-brecha); padding-left: 13px; max-width: 44ch;
}
.tam-fichas{
  list-style: none; margin: 0 0 1.1em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.tam-fichas li{
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--ctx-borde);
  font-size: .8rem; color: var(--text);
}
/* La entrada del contenido acompaña al giro del tambor */
.tam-cuerpo > *, .tam-titulo, .tam-indice{
  animation: tamEntra .5s cubic-bezier(.16,1,.3,1) backwards;
}
.tam-cuerpo > *:nth-child(2){ animation-delay: .06s; }
.tam-cuerpo > *:nth-child(3){ animation-delay: .12s; }
@keyframes tamEntra{ from{ opacity: 0; transform: translateY(9px); } }

.tam-selector{ display: flex; flex-wrap: wrap; gap: 6px; margin: 1.6em 0 1em; }
.tam-btn{
  width: 38px; height: 34px;
  border: 1px solid var(--ctx-borde); border-radius: 8px;
  background: transparent; color: var(--text-faint);
  font-family: var(--font-display); font-weight: 700; font-size: .76rem;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.tam-btn:hover{ color: var(--text); border-color: rgba(255,255,255,.28); }
.tam-btn:focus-visible{ outline: 2px solid var(--c-marca); outline-offset: 2px; }
.tam-btn.is-visto{ color: var(--text-muted); border-color: rgba(23,184,230,.3); }
.tam-btn.is-on{
  color: var(--ctx-bg); background: var(--c-marca); border-color: var(--c-marca);
}
.tam-recorrido{ margin: 0; font-size: .76rem; color: var(--text-faint); }
.tam-recorrido.is-full{ color: var(--c-marca); }

/* ---------------- LECTURA DEL DIAGNÓSTICO ---------------- */
.ctx-lectura{
  display: grid; gap: clamp(46px, 7vw, 84px);
  padding-top: clamp(10px, 2vw, 20px);
}

/* Balance */
.bal-cuerpo{
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(18px, 3vw, 40px); align-items: stretch;
}
.bal-rotulo{
  margin: 0 0 1em; font-family: var(--font-display); font-weight: 700;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.bal-lado ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bal-lado li{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  padding: 12px 16px; border-radius: 10px;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
  opacity: 0;
}
.bal.is-in .bal-lado li{ opacity: 1; }
.bal-tiene .bal-rotulo{ color: var(--c-marca); }
.bal-tiene li{
  background: rgba(23,184,230,.09); color: #cdeefc;
  transform: translateX(-16px);
}
.bal.is-in .bal-tiene li{ transform: none; }
.bal-falta .bal-rotulo{ color: var(--c-brecha); }
.bal-falta li{
  background: rgba(224,166,63,.09); color: #f4e0bd;
  transform: translateX(16px);
}
.bal.is-in .bal-falta li{ transform: none; }
.bal-lado li:nth-child(1){ transition-delay: .05s; }
.bal-lado li:nth-child(2){ transition-delay: .13s; }
.bal-lado li:nth-child(3){ transition-delay: .21s; }
.bal-lado li:nth-child(4){ transition-delay: .29s; }
.bal-eje{ display: grid; place-items: center; }
.bal-eje > span{
  display: block; width: 1px; height: 100%;
  background: linear-gradient(to bottom,
    rgba(23,184,230,0), rgba(23,184,230,.5) 30%, rgba(224,166,63,.5) 70%, rgba(224,166,63,0));
}

/* Territorio */
.terr-lista{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.terr-lista li{
  padding: 9px 17px; border-radius: var(--radius-pill);
  border: 1px solid rgba(23,184,230,.25);
  background: rgba(23,184,230,.06);
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: #bfe7f8;
}

/* Comparación */
.comp-barras{ display: grid; gap: 18px; margin-bottom: 1.6em; }
.comp-fila{
  display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
}
.comp-marca{ margin: 0; font-size: .88rem; color: var(--text-muted); }
.comp-pista{ height: 10px; border-radius: 5px; background: rgba(255,255,255,.05); overflow: hidden; }
.comp-barra{
  display: block; height: 100%; width: 0; border-radius: 5px;
  transition: width 1.5s cubic-bezier(.16,1,.3,1);
}
.comp.is-in .comp-barra{ width: var(--w); }
.comp-barra-nos{ background: var(--c-marca); }
.comp-barra-ellos{ background: rgba(91,143,224,.55); }
.comp-cifra{
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -0.02em; min-width: 74px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.comp-fila:first-child .comp-cifra{ color: var(--c-marca); }
.comp-fila:last-child .comp-cifra{ color: var(--c-rival); }
.comp-aviso{
  font-size: .9rem; color: var(--text-muted); max-width: 62ch; margin: 0;
  border-left: 1px solid var(--c-brecha); padding-left: 15px;
}
.comp-aviso b{ color: var(--c-brecha); }

/* ---------------- VIDEO ---------------- */
.ctx-video{ margin-top: clamp(46px, 7vw, 84px); }
.ctx-video-btn{
  display: grid; grid-template-columns: 128px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px); align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: 16px; border-radius: 14px;
  border: 1px solid var(--ctx-borde); background: transparent;
  color: var(--text); font-family: var(--font-body);
  transition: border-color .3s ease, background-color .3s ease;
}
.ctx-video-btn:hover{ border-color: rgba(23,184,230,.5); background: rgba(23,184,230,.04); }
.ctx-video-btn:focus-visible{ outline: 2px solid var(--c-marca); outline-offset: 3px; }
.ctx-video-thumb{
  position: relative; display: block; overflow: hidden;
  border-radius: 10px; aspect-ratio: 4 / 5; background: #000;
}
.ctx-video-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.5) brightness(.7);
  transition: filter .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.ctx-video-btn:hover .ctx-video-thumb img{ filter: none; transform: scale(1.04); }
.ctx-video-play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(5,8,10,.7); border: 1px solid rgba(23,184,230,.6);
  color: var(--c-marca);
}
.ctx-video-txt{ display: grid; gap: 7px; }
.ctx-video-t{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: -0.025em;
}
.ctx-video-d{ font-size: .88rem; color: var(--text-muted); max-width: 58ch; }
.ctx-video-meta{ font-size: .74rem; color: var(--text-faint); letter-spacing: .06em; }

/* Modal del video: el archivo solo se pide cuando alguien decide verlo */
.ctx-modal{
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: clamp(14px, 3vw, 36px);
  background: rgba(3,6,8,.88); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .35s ease;
}
.ctx-modal.is-on{ opacity: 1; }
.ctx-modal-caja{
  position: relative; width: min(420px, 100%);
  transform: scale(.94); transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.ctx-modal.is-on .ctx-modal-caja{ transform: none; }
.ctx-modal video{
  display: block; width: 100%; height: auto; max-height: 82vh;
  border-radius: 14px; background: #000;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95);
}
.ctx-modal-cerrar{
  position: absolute; top: -46px; right: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: rgba(255,255,255,.05);
  color: var(--text); font-family: var(--font-body); font-weight: 600;
  font-size: .8rem; cursor: pointer;
}
.ctx-modal-cerrar:hover{ border-color: var(--c-marca); color: var(--c-marca); }
.ctx-modal-cerrar:focus-visible{ outline: 2px solid var(--c-marca); outline-offset: 3px; }
.ctx-modal-pie{ margin: 12px 0 0; text-align: center; font-size: .78rem; color: var(--text-faint); }

/* ---------------- CIERRE ---------------- */
.ctx-cierre{
  margin-top: clamp(50px, 8vw, 92px);
  padding-top: clamp(36px, 5vw, 58px);
  border-top: 1px solid var(--ctx-borde);
}
.ctx-cierre-preg{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: -0.03em;
  margin: 0 0 1.1em; color: var(--text);
}
.ctx-cierre-final{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.3;
  letter-spacing: -0.025em; max-width: 34ch; margin: 0; color: var(--text);
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease 1.45s, transform .8s cubic-bezier(.16,1,.3,1) 1.45s;
}
.ctx-cierre.is-in .ctx-cierre-final{ opacity: 1; transform: none; }

/* ---------------- TEXTO ACADÉMICO ---------------- */
.ctx-texto{ margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ctx-borde); }
.ctx-texto > summary{
  cursor: pointer; padding: 18px 0 16px; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem; color: var(--text);
}
.ctx-texto > summary::-webkit-details-marker{ display: none; }
.ctx-texto > summary::before{ content: "＋"; margin-right: 10px; color: var(--c-marca); font-weight: 700; }
.ctx-texto[open] > summary::before{ content: "－"; }
.ctx-texto > summary:focus-visible{ outline: 2px solid var(--c-marca); outline-offset: 2px; }
.ctx-texto-cuerpo{ padding: 0 0 20px; max-width: 72ch; }
.ctx-texto-cuerpo p{ color: var(--text-muted); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1000px){
  .tam-zona{ grid-template-columns: 1fr; gap: 30px; }
  .tam-cuerpo{ min-height: 0; }
}
@media (max-width: 700px){
  .bal-cuerpo{ grid-template-columns: 1fr; gap: 22px; }
  .bal-eje{ display: none; }
  .bal-tiene li, .bal-falta li{ transform: translateY(12px); }
  .comp-fila{ grid-template-columns: 1fr auto; grid-template-areas: "marca cifra" "pista pista"; gap: 8px 12px; }
  .comp-marca{ grid-area: marca; }
  .comp-cifra{ grid-area: cifra; }
  .comp-pista{ grid-area: pista; }
  .ctx-video-btn{ grid-template-columns: 1fr; }
  .ctx-video-thumb{ aspect-ratio: 16 / 10; }
}

/* ---------------- MOVIMIENTO REDUCIDO ---------------- */
@media (prefers-reduced-motion: reduce){
  .tam-aro{ transition: none !important; }
  .tam-cuerpo > *, .tam-titulo, .tam-indice{ animation: none; }
  .bal-lado li, .comp-barra, .veredicto-haber li, .veredicto-no,
  .veredicto-si, .ruta-valor-lista li, .ruta-valor-rotulo, .ctx-cierre-final{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .comp-barra{ width: var(--w); }
  .ctx-modal, .ctx-modal-caja, .ctx-video-thumb img{ transition: none; }
}

/* ---------------- IMPRESIÓN ---------------- */
@media print{
  .tam-zona, .ctx-video, .tam-selector{ display: none !important; }
  .ctx-texto{ border: 0; }
  .ctx-texto > summary{ display: none; }
  .ctx-texto-cuerpo{ padding: 0; }
}

/* =========================================================
   SUPERFICIES DEL NAVEGADOR
   Selección, barras de desplazamiento y anillo de foco no se
   dibujan solos: si se dejan por defecto, son lo único de la
   página que no pertenece a ningún sistema de diseño.
   ========================================================= */
::selection{ background: rgba(23,184,230,.30); color: #f3f7f9; }
::-moz-selection{ background: rgba(23,184,230,.30); color: #f3f7f9; }
html{ scrollbar-color: rgba(23,184,230,.4) transparent; scrollbar-width: thin; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(23,184,230,.28); border-radius: 7px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(23,184,230,.5); background-clip: content-box; }

/* Bloque "¿con quién queremos empatizar?" del punto 4 */
.empatiza{
  border-left: 1px solid var(--accent); padding-left: clamp(16px, 2.4vw, 24px);
  margin-bottom: clamp(24px, 3.5vw, 36px);
}
.empatiza-rotulo{
  margin: 0 0 .5em; font-family: var(--font-display); font-weight: 700;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.empatiza-quien{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: -0.02em;
  margin: 0 0 .5em; color: var(--text);
}
.empatiza-detalle{ font-size: .93rem; color: var(--text-muted); max-width: 62ch; margin: 0 0 .9em; }
.empatiza-nota{ font-size: .84rem; color: var(--text-faint); max-width: 62ch; margin: 0; }

/* =========================================================
   EL VEREDICTO — cierre del punto 1
   La conclusión del diagnóstico no puede ser una lista de
   viñetas: es el alegato final. Tres movimientos, en este
   orden y no en otro:
   1. El haber verificado. Cuatro cosas que la marca YA tiene
      y que el diagnóstico no tuvo que suponer. Van marcadas,
      compactas, como un inventario cerrado.
   2. El veredicto. Una sola frase a escala de titular, con la
      negación apagada y la afirmación en ámbar: ahí está todo
      el argumento de la consultoría.
   3. La ruta. Cuatro nodos sobre una vía que se dibuja sola:
      el primero lleno porque ya existe, los otros huecos
      porque hay que construirlos. La forma dice lo mismo que
      el texto.
   ========================================================= */
.ctx-cierre-preg{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.03em;
  margin: 0 0 1.4em; color: var(--text-faint);
}

/* 1. El haber */
.veredicto-haber{
  list-style: none; margin: 0 0 .9em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.veredicto-haber li{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.3rem); letter-spacing: -0.02em;
  color: var(--text);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.ctx-cierre.is-in .veredicto-haber li{ opacity: 1; transform: none; }
.ctx-cierre.is-in .veredicto-haber li:nth-child(1){ transition-delay: .05s; }
.ctx-cierre.is-in .veredicto-haber li:nth-child(2){ transition-delay: .14s; }
.ctx-cierre.is-in .veredicto-haber li:nth-child(3){ transition-delay: .23s; }
.ctx-cierre.is-in .veredicto-haber li:nth-child(4){ transition-delay: .32s; }
.veredicto-tic{
  display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: rgba(23,184,230,.14); color: var(--c-marca);
}
.veredicto-pie{
  font-size: .86rem; color: var(--text-faint); max-width: 52ch;
  margin: 0 0 clamp(34px, 5vw, 56px);
}

/* 2. El veredicto */
.veredicto{
  display: grid; gap: .12em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.6vw, 3.2rem);
  line-height: 1.06; letter-spacing: -0.04em;
  max-width: 20ch; margin: 0 0 clamp(40px, 6vw, 68px);
}
.veredicto-no, .veredicto-si{
  display: block;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.veredicto-no{ color: var(--text-faint); transition-delay: .5s; }
.veredicto-si{ color: var(--c-brecha); transition-delay: .78s; }
.ctx-cierre.is-in .veredicto-no,
.ctx-cierre.is-in .veredicto-si{ opacity: 1; transform: none; }

/* 3. La ruta */
.ruta-valor-rotulo{
  font-family: var(--font-display); font-weight: 700;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-marca); margin: 0 0 1.7em;
  opacity: 0; transition: opacity .6s ease 1.05s;
}
.ctx-cierre.is-in .ruta-valor-rotulo{ opacity: 1; }
.ruta-valor-lista{
  position: relative; list-style: none; margin: 0 0 clamp(40px, 6vw, 64px); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
}
.ruta-valor-lista::before{            /* la vía */
  content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px;
  background: rgba(255,255,255,.12);
}
.ruta-valor-lista::after{             /* lo recorrido: se dibuja al llegar */
  content: ""; position: absolute; left: 6px; top: 6px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--c-marca), rgba(224,166,63,.7));
  transition: width 1.6s cubic-bezier(.16,1,.3,1) 1.15s;
}
.ctx-cierre.is-in .ruta-valor-lista::after{ width: calc(100% - 12px); }
.ruta-valor-lista li{
  position: relative; display: grid; gap: 3px;
  padding-top: 26px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.ctx-cierre.is-in .ruta-valor-lista li{ opacity: 1; transform: none; }
.ctx-cierre.is-in .ruta-valor-lista li:nth-child(1){ transition-delay: 1.20s; }
.ctx-cierre.is-in .ruta-valor-lista li:nth-child(2){ transition-delay: 1.44s; }
.ctx-cierre.is-in .ruta-valor-lista li:nth-child(3){ transition-delay: 1.68s; }
.ctx-cierre.is-in .ruta-valor-lista li:nth-child(4){ transition-delay: 1.92s; }
.ruta-valor-nodo{
  position: absolute; left: 0; top: 0;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: var(--ctx-bg);
}
.ruta-valor-lista li.is-hecho .ruta-valor-nodo{
  border-color: var(--c-marca); background: var(--c-marca);
  box-shadow: 0 0 0 4px rgba(23,184,230,.14);
}
.ruta-valor-lista b{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, 1.7vw, 1.15rem); letter-spacing: -0.02em;
  color: var(--text);
}
.ruta-valor-lista li.is-hecho b{ color: var(--c-marca); }
.ruta-valor-lista i{
  font-style: normal; font-size: .72rem; letter-spacing: .04em;
  color: var(--text-faint);
}
.ctx-cierre-final{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem); line-height: 1.3;
  letter-spacing: -0.025em; max-width: 34ch; margin: 0; color: var(--text);
  padding-left: 18px; border-left: 1px solid var(--c-brecha);
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease 2.15s, transform .8s cubic-bezier(.16,1,.3,1) 2.15s;
}
.ctx-cierre.is-in .ctx-cierre-final{ opacity: 1; transform: none; }

@media (max-width: 620px){
  .ruta-valor-lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .ruta-valor-lista::before, .ruta-valor-lista::after{ display: none; }
  .ruta-valor-lista li{ padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce){
  .ruta-valor-lista::after{ width: calc(100% - 12px); transition: none; }
}

/* =========================================================
   ESCENA DEL DOCUMENTO — los cinco puntos comparten fondo
   (entregables/semana-02.html)

   Mismo mecanismo que la página de inicio: main.js interpola
   las variables globales de color sobre el contenedor, así que
   todo lo de dentro cambia solo. El recorrido va de oscuro a
   blanco y ocurre DENTRO del punto 2 —nunca en el borde entre
   dos secciones—, que es la regla que ya gobierna la home:
   puntos 1 y 2 oscuros, puntos 3, 4, 5 y referencias en claro.
   El corte contra el pie de página oscuro va limpio.
   ========================================================= */
.doc-escena{
  position: relative;
  isolation: isolate;
}
.doc-escena > .doc-section{ background: transparent; position: relative; z-index: 1; }

/* ---------- Separadores: línea de energía entre puntos ---------- */
.doc-sep{
  position: relative; overflow: hidden;
  height: 3px;
  width: min(var(--max), calc(100% - clamp(56px, 12vw, 160px)));
  margin: clamp(10px, 2vw, 22px) auto;
  z-index: 1;
}
.doc-sep::before{                     /* la línea en reposo, sin llegar a los bordes */
  content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--border-strong) 12%, var(--border-strong) 88%, transparent 100%);
}
.doc-sep > i{                         /* el pulso que la recorre */
  position: absolute; top: 0; left: 0;
  width: 190px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(23,184,230,0) 0%, rgba(23,184,230,.35) 35%,
    #4fd2ff 50%, rgba(23,184,230,.35) 65%, rgba(23,184,230,0) 100%);
  box-shadow: 0 0 16px 2px rgba(23,184,230,.55);
  opacity: 0;
  transform: translate3d(-190px, 0, 0);
}
/* Solo corre cuando el separador está en pantalla; --recorrido lo fija main.js */
.doc-sep.is-on > i{ animation: sepPulso 2.8s cubic-bezier(.45,0,.25,1) both; }
@keyframes sepPulso{
  0%   { transform: translate3d(-190px, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(var(--recorrido, 100vw), 0, 0); opacity: 0; }
}

/* ---------- LA HUELLA — efecto de cursor del documento
   Van cuatro descartadas: un desenfoque que tapaba la página, una
   cruz de tiro con rótulo que perseguía al cursor, un contorno de
   elementos, y una primera huella tan tenue que Juli no la veía.
   Las tres primeras compartían el mismo defecto: pedían atención
   en una página que hay que LEER. La cuarta tenía el contrario:
   existía en el código y no en la pantalla (partículas de 1px con
   alfa .6 sobre un fondo casi negro).

   Esta versión mantiene la regla —nada encima del texto, nada que
   enmarque, nada que escriba— y resuelve la visibilidad donde
   tocaba: brasas con halo real, dibujadas desde un sprite de
   degradado radial y sumadas en modo `lighter` sobre el tramo
   oscuro. Sobre blanco el sumado no existe, así que ahí se pinta
   en modo normal con la tinta oscura de la marca.
   El puntero vuelve a ser el del sistema: la cruz de `crosshair`
   sobraba desde que el efecto dejó de ser una mira. ---------- */
.mira{
  position: fixed; inset: 0; z-index: 42;
  pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.mira.is-on{ opacity: 1; }
.mira canvas{ display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce), (pointer: coarse){
  .mira{ display: none; }
  .doc-sep.is-on > i{ animation: none; opacity: 0; }
}

/* =========================================================
   PUNTO 2 · SEGMENTACIÓN
   Cuatro variables, cuatro gráficos distintos, y ninguno
   repetido: magnitud por municipio, composición de la
   población, eje de tensión y jornada de consumo.

   Lo que se corrigió aquí (2026-08-28):
   - La psicográfica no se veía. Sus rótulos nacían en
     `opacity: 0` esperando una clase `is-in` que el JS solo
     ponía a los elementos con `--p`; los de la tensión no lo
     tienen, así que nunca se encendían. Quedaba un hueco.
   - La conductual eran píldoras: una lista de palabras con
     borde, no un gráfico. Ahora las siete variables de decisión
     se agrupan y se miden (3 / 3 / 1), que es lo que permite
     ver que una sola depende de la marca.
   - Los tres números grandes de la cuantificación eran tres
     tarjetas que decían lo mismo sin dejar ver que cada corte
     se come una parte del anterior. Son una cascada.

   Registro visual: instrumento de medida. Carril con muescas de
   graduación, cifras tabulares, luz sobre el segmento lleno. La
   retícula segmentada está permitida aquí porque esto sí es un
   instrumento, no una textura decorativa.

   Color: cian de marca para lo que entra, gris neutro para lo
   que queda fuera, ámbar para el polo opuesto en la tensión.
   Validados con el script de la skill dataviz sobre las dos
   superficies: en claro pasan las cinco comprobaciones; en
   oscuro pasan CVD (ΔE 21,7 protan), visión normal (ΔE 26,0) y
   contraste, y solo falla la banda de luminosidad porque el cian
   #17b8e6 es el del logotipo oficial y no se toca.
   ========================================================= */
.seg-intro{ max-width: 66ch; color: var(--text-muted); }
.seg-h3{
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: -0.025em; line-height: 1.18; margin: 0 0 .55em;
}
.seg-p{ color: var(--text-muted); max-width: 64ch; margin: 0 0 1.1em; }

/* ---------- Las dos mitades del dato ----------
   Es una clave de lectura, no tres tarjetas: un solo bloque con
   filetes que lo dividen, sin caja ni fondo por elemento. */
.mitades{
  list-style: none; margin: clamp(26px, 3.5vw, 38px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.mitad{ padding: 18px 24px 20px; border-left: 1px solid var(--border); }
.mitad:first-child{ border-left: 0; padding-left: 0; }
.mitad-rot{
  display: block; margin-bottom: .6em;
  font-family: var(--font-display); font-weight: 700; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}
.mitad-num .mitad-rot{ color: var(--accent); }
.mitad-cual .mitad-rot{ color: var(--dato); }
.mitad-txt{ margin: 0; font-size: .87rem; line-height: 1.55; color: var(--text-muted); }
.mitad-txt b{ color: var(--text); font-weight: 600; }

/* ---------- Armazón de las cuatro variables ---------- */
.emb{ margin: clamp(28px, 4vw, 46px) 0 clamp(44px, 6.5vw, 76px); }
/* Las dos columnas se estiran a la misma altura y cada una tiene una
   pieza elástica que se come la holgura: a la izquierda, la nota de
   lectura, que se pega abajo; a la derecha, la imagen, que crece hasta
   un tope. Sin esto, la columna más corta deja un hueco muerto —los
   cuatro gráficos no miden lo mismo y no tienen por qué. */
.emb-cuerpo{
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 3.6vw, 52px); align-items: stretch;
}
.emb-tablero{ min-width: 0; display: flex; flex-direction: column; }
.emb-ficha{ min-width: 0; display: flex; flex-direction: column; }
.emb-figura{
  margin: 0 0 18px; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--border);
  flex: 1 1 auto; min-height: 190px; max-height: 380px;
}
.emb-figura img{
  display: block; width: 100%; height: 100%; min-height: 190px;
  object-fit: cover; transition: opacity .18s ease;
}
.emb-figura.is-cambiando img{ opacity: 0; }
.emb-lectura h4{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
.emb-lectura{ flex: none; }
.emb-lectura p{ color: var(--text-muted); font-size: .95rem; line-height: 1.62; margin: 0; }
.lec{ animation: embEntra .45s cubic-bezier(.16,1,.3,1) backwards; }

/* ---------- Pestañas ---------- */
.emb-filtros{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 clamp(22px, 3vw, 30px); padding: 0; list-style: none;
}
.emb-btn{
  display: inline-grid; grid-template-columns: auto auto;
  grid-template-rows: auto auto; align-items: baseline;
  column-gap: 9px; row-gap: 2px;
  padding: 9px 16px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-family: var(--font-body); text-align: left;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.emb-btn:hover{ border-color: var(--border-strong); color: var(--text); }
.emb-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.emb-btn-n{
  /* Igual que .emb-btn-k: sobre el gris muy claro de la escena el faint
     se queda en 4,46:1 y estas cifras rotulan la pestana, no decoran. */
  grid-row: 1; font-family: var(--font-display); font-weight: 700;
  font-size: .64rem; letter-spacing: .12em; color: var(--text-muted);
}
.emb-btn-t{
  grid-row: 1; font-family: var(--font-display); font-weight: 600;
  font-size: .95rem; letter-spacing: -0.015em;
}
.emb-btn-k{
  /* --text-muted y no --text-faint: sobre el fondo tenido de la pestana
     activa el faint se quedaba en 4,46:1, y el minimo de texto pequeno
     es 4,5. */
  grid-row: 2; grid-column: 2; font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.emb-btn.is-on{ border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.emb-btn.is-on .emb-btn-n{ color: var(--accent); }
.emb-btn[disabled]{ opacity: .38; cursor: not-allowed; }
.emb-btn[disabled]:hover{ transform: none; border-color: var(--border); }

/* ---------- Cabecera común de cada gráfico ---------- */
.viz{ margin: 0; flex: 1; display: flex; flex-direction: column; }
.viz[hidden]{ display: none; }
.viz-cab{ margin: 0 0 1.35em; }
.viz-t{
  margin: 0 0 .35em; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; letter-spacing: -0.02em; color: var(--text);
}
.viz-u{
  margin: 0; font-size: .72rem; letter-spacing: .04em;
  color: var(--text-faint);
}
.viz-lee{
  /* margin-top auto: la conclusión del gráfico se pega al pie de la
     columna, así la holgura queda como aire entre gráfico y nota y no
     como un vacío al final. */
  margin: auto 0 0; padding-top: 1.7em; font-size: .87rem; line-height: 1.6;
  color: var(--text-muted); max-width: 56ch;
  border-left: 1px solid var(--accent); padding-left: 15px;
}
.viz-lee b{ color: var(--text); font-weight: 600; }

/* ---------- 01 · Barras por municipio ---------- */
.viz-barras{ list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.viz-barras li{
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 52px;
  align-items: center; gap: 14px;
}
.viz-barras b{
  font-family: var(--font-body); font-weight: 500; font-size: .84rem;
  color: var(--text-muted);
}
.viz-barras i{
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--text); font-size: .92rem; text-align: right;
}
.viz-barras em{
  font-style: normal; font-family: var(--font-display); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: .8rem;
  color: var(--text-faint); text-align: right;
}
.viz-b{
  position: relative; display: block; height: 18px; border-radius: 2px;
  /* El carril: muescas de graduación, como una regla */
  background-image: repeating-linear-gradient(90deg,
    var(--border) 0 1px, transparent 1px 7px);
  overflow: hidden;
}
.viz-b::after{
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 0; border-radius: 2px 4px 4px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(5,8,10,.5) 0 1px, transparent 1px 7px),
    var(--accent);
  box-shadow: 0 0 16px -3px var(--accent);
  transition: width 1.05s cubic-bezier(.16,1,.3,1);
}
.viz.is-in .viz-b::after{ width: var(--p); }

/* ---------- 02 · Composición de la población ---------- */
.viz-comp{ margin: 0 0 1.9em; }
.viz-comp-rot{
  margin: 0 0 .85em; font-family: var(--font-display); font-weight: 700;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
/* Barra apilada al 100 %: 2px de superficie entre tramos, sin texto
   dentro (a 11,8 % no cabe ninguna palabra) — la identidad la da la
   clave de abajo, nunca el color en solitario. */
.viz-pila{ display: flex; gap: 2px; height: 30px; }
.viz-pila > span{
  flex: 0 0 calc(var(--w) - 2px); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .85s cubic-bezier(.16,1,.3,1);
}
.viz-pila > span:first-child{ border-radius: 4px 2px 2px 4px; }
.viz-pila > span:last-child{ border-radius: 2px 4px 4px 2px; }
.viz.is-in .viz-pila > span{ transform: none; }
.viz.is-in .viz-pila > span:nth-child(2){ transition-delay: .08s; }
.viz.is-in .viz-pila > span:nth-child(3){ transition-delay: .16s; }
.viz-pila .es-dentro{ background: var(--accent); box-shadow: 0 0 18px -5px var(--accent); }
.viz-pila .es-fuera{ background: var(--fuera); }

.viz-clave{
  list-style: none; margin: .95em 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
}
.viz-clave li{ display: flex; align-items: baseline; gap: 8px; font-size: .8rem; }
.viz-clave li::before{
  content: ""; width: 9px; height: 9px; border-radius: 2px; flex: none;
  transform: translateY(-1px);
}
.viz-clave .es-dentro::before{ background: var(--accent); }
.viz-clave .es-fuera::before{ background: var(--fuera); }
.viz-clave b{ font-weight: 500; color: var(--text-muted); }
.viz-clave i{
  font-style: normal; font-variant-numeric: tabular-nums;
  font-family: var(--font-display); font-weight: 700; color: var(--text);
}
.viz-clave .es-fuera i{ color: var(--text-faint); }
.viz-contiene{
  margin: .8em 0 0; font-size: .78rem; line-height: 1.55; color: var(--text-faint);
  max-width: 56ch;
}
.viz-contiene b{ color: var(--text-muted); font-weight: 600; }

/* ---------- 03 · El eje de la tensión ----------
   Tres oposiciones explícitas. Antes eran dos listas sueltas y no
   se veía qué se opone a qué; el par es la unidad de lectura. */
.viz-eje-cab{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(40px, 9vw, 96px); margin-bottom: .85em;
}
.viz-eje-cab span{
  font-family: var(--font-display); font-weight: 700; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}
.viz-eje-cab span:last-child{ text-align: right; }
.viz-eje{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.viz-eje li{
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 0;
}
.viz-eje b{
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: 12px 16px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  color: var(--text);
  opacity: 0; transform: translateY(7px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.viz.is-in .viz-eje b{ opacity: 1; transform: none; }
.viz-eje li:nth-child(2) b{ transition-delay: .07s; }
.viz-eje li:nth-child(3) b{ transition-delay: .14s; }
.viz-eje .eje-a{ border-color: var(--accent-soft-2); }
.viz-eje .eje-b{ border-color: var(--dato-soft); text-align: right; }
/* La vía: la línea que sostiene el "pero". Es el eje del gráfico. */
.eje-via{
  position: relative; width: clamp(52px, 8vw, 92px); height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--dato));
  opacity: 0; transition: opacity .5s ease .1s;
}
.viz.is-in .eje-via{ opacity: 1; }
.eje-via i{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg); padding: 3px 7px;
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
/* El nodo donde las tres resuelven */
.viz-nodo{
  position: relative; margin: 2.1em 0 0; padding: 18px 22px;
  border: 1px solid var(--accent-soft-2); border-radius: 12px;
  background: var(--accent-soft);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.2rem); letter-spacing: -0.02em;
  line-height: 1.35; color: var(--text);
}
.viz-nodo::before{
  content: ""; position: absolute; left: 50%; top: -1.35em;
  width: 1px; height: 1.35em; background: var(--border-strong);
}
.viz-nodo-rot{
  display: block; margin-bottom: .5em;
  font-family: var(--font-display); font-weight: 700; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}

/* ---------- 04 · La jornada y el circuito ---------- */
.viz-dia{ margin: 0 0 1.8em; }
.viz-momentos{
  list-style: none; margin: 0; padding: 0;
  position: relative; height: 58px;
}
/* El carril del día. La posición de cada momento es su hora, no un
   valor medido: por eso el carril no lleva escala numérica. */
.viz-momentos::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    var(--border-strong), var(--accent) 50%, var(--border-strong));
}
.viz-momentos li{
  position: absolute; bottom: 0; left: var(--h); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-bottom: 13px; white-space: nowrap;
  opacity: 0; transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.viz.is-in .viz-momentos li{ opacity: 1; }
.viz-momentos li:nth-child(2){ transition-delay: .09s; }
.viz-momentos li:nth-child(3){ transition-delay: .18s; }
.viz-momentos li::after{
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px -1px var(--accent);
}
.viz-momentos li::before{
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 11px;
  background: var(--accent-soft-2);
}
.viz-momentos b{
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  letter-spacing: -0.015em; color: var(--text);
}
.viz-momentos i{
  font-style: normal; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.viz-transversal{
  margin: .85em 0 0; padding: 7px 13px; border-radius: 8px;
  border: 1px dashed var(--border-strong);
  font-size: .8rem; color: var(--text-muted);
}
.viz-transversal b{ color: var(--text); font-weight: 600; }

/* Las siete variables, agrupadas y medidas: 3 / 3 / 1. Antes eran
   siete píldoras sueltas, que es una lista con borde, no un gráfico. */
.viz-grupos{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.viz-grupos li{
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  grid-template-areas: "rot barra n" "rot detalle detalle";
  align-items: center; gap: 5px 14px;
}
.viz-grupos li > span:first-child{
  grid-area: rot; font-family: var(--font-display); font-weight: 700;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.viz-g-b{
  grid-area: barra; position: relative; display: block; height: 13px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg,
    var(--border) 0 1px, transparent 1px 7px);
  overflow: hidden;
}
.viz-g-b::after{
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 2px 4px 4px 2px; background: var(--accent);
  transition: width .9s cubic-bezier(.16,1,.3,1);
}
.viz.is-in .viz-g-b::after{ width: var(--n); }
.viz-grupos .es-sola .viz-g-b::after{ background: var(--dato); }
.viz-grupos b{
  grid-area: detalle; font-weight: 400; font-size: .8rem; color: var(--text-muted);
}
.viz-grupos i{
  grid-area: n; font-style: normal; font-family: var(--font-display);
  font-weight: 700; font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
/* El circuito que se cierra: la línea vuelve sobre sí misma */
.viz-bucle{
  position: relative; margin: 1.2em 0 0 74px; padding: 11px 16px 11px 30px;
  border-left: 1px solid var(--dato);
  border-radius: 0 8px 8px 0;
  font-size: .82rem; color: var(--text-muted);
}
.viz-bucle::before{
  content: ""; position: absolute; left: 0; top: 11px;
  width: 16px; height: 16px;
  border-left: 1px solid var(--dato); border-bottom: 1px solid var(--dato);
  border-bottom-left-radius: 10px;
}
.viz-bucle b{ color: var(--text); font-weight: 600; }

/* ---------- El desarrollo completo, plegado ---------- */
.emb-full{
  margin: clamp(26px, 3.5vw, 38px) 0 0;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.emb-full > summary{
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: -0.01em; color: var(--text-muted);
  display: flex; align-items: center; gap: 9px;
  transition: color .2s ease;
}
.emb-full > summary::-webkit-details-marker{ display: none; }
.emb-full > summary::before{
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(-45deg); transition: transform .25s ease;
}
.emb-full[open] > summary::before{ transform: rotate(45deg); }
.emb-full > summary:hover{ color: var(--text); }
.emb-full > summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.emb-full-cuerpo{ padding-top: 16px; }
.emb-full-cuerpo p{
  color: var(--text-muted); font-size: .89rem; line-height: 1.68;
  margin: 0 0 1em; max-width: 78ch;
}
.emb-full-cuerpo p:last-child{ margin-bottom: 0; }

/* =========================================================
   CUANTIFICACIÓN DEL MERCADO
   Es el criterio de 5 puntos de la rúbrica, el más pesado de
   los cinco. Va con tabla de fuentes y con la aritmética a la
   vista: cada corte se aplica sobre el resultado del anterior.
   ========================================================= */
.cuant{ margin-bottom: clamp(46px, 7vw, 80px); }
.cuant-tabla{
  width: 100%; border-collapse: collapse; margin: 1.4rem 0 0;
  font-size: .88rem;
}
.cuant-caption{
  caption-side: top; text-align: left; margin-bottom: .9em;
  font-family: var(--font-display); font-weight: 700; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}
.cuant-tabla th, .cuant-tabla td{
  padding: 11px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.cuant-tabla thead th{
  font-family: var(--font-display); font-weight: 700; font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border-bottom-color: var(--border-strong);
}
.cuant-tabla td{ color: var(--text-muted); }
.cuant-tabla tbody td:first-child{ color: var(--text); }
.cuant-num{
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--text) !important;
}
.cuant-tabla tfoot th, .cuant-tabla tfoot td{
  border-bottom: 0; border-top: 1px solid var(--border-strong);
  font-family: var(--font-display); font-weight: 700;
  padding-top: 13px;
}
.cuant-tabla tfoot .cuant-num{ color: var(--accent) !important; font-size: 1.05rem; }

/* ---------- La cascada de cortes ---------- */
.casc{ margin: clamp(30px, 4vw, 44px) 0 0; }
.casc-pasos{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.casc-pasos li{
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto;
  grid-template-areas: "op barra cifra" "op rotulo rotulo";
  align-items: center; gap: 6px 14px;
}
.casc-op{
  grid-area: op; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--dato); letter-spacing: -0.01em;
}
.casc-b{
  grid-area: barra; position: relative; display: block; height: 22px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg,
    var(--border) 0 1px, transparent 1px 7px);
  overflow: hidden;
}
.casc-b::after{
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 2px 4px 4px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(5,8,10,.5) 0 1px, transparent 1px 7px),
    var(--accent);
  box-shadow: 0 0 18px -4px var(--accent);
  transition: width 1.1s cubic-bezier(.16,1,.3,1);
}
.casc.is-in .casc-b::after{ width: var(--p); }
.casc.is-in li:nth-child(2) .casc-b::after{ transition-delay: .12s; }
.casc.is-in li:nth-child(3) .casc-b::after{ transition-delay: .24s; }
.casc-pasos b{
  grid-area: cifra; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; color: var(--text); text-align: right;
}
.casc-pasos .es-techo b{ color: var(--accent); }
.casc-pasos i{
  grid-area: rotulo; font-style: normal; font-size: .74rem;
  line-height: 1.45; color: var(--text-faint);
}
.casc-techo{
  margin: 1.5em 0 0; padding: 15px 20px;
  border: 1px solid var(--accent-soft-2); border-radius: 12px;
  background: var(--accent-soft);
}
.casc-techo-rot{
  display: block; margin-bottom: .35em;
  font-family: var(--font-display); font-weight: 700; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.casc-techo b{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); letter-spacing: -0.03em;
  color: var(--text);
}

.cuant-honestidad{
  margin: 1.6em 0 1.1em; font-size: .84rem; line-height: 1.6;
  color: var(--text-muted); max-width: 72ch;
  border-left: 1px solid var(--border-strong); padding-left: 16px;
}
.cuant-honestidad b{ color: var(--text); font-weight: 600; }

.seg-cierre{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
}
.seg-perfil-txt{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.55;
  letter-spacing: -0.01em; color: var(--text); margin: 0;
}
.terr-rot{
  margin: 0 0 .7em; font-family: var(--font-display); font-weight: 700;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
}
.terr-lista + .terr-rot{ margin-top: 1.4em; }
.terr-lista-com li{ border-style: dashed; }

@media (max-width: 980px){
  .emb-cuerpo{ grid-template-columns: 1fr; }
  .emb-ficha{ display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: start; }
  .emb-figura{ margin-bottom: 0; }
}
@media (max-width: 760px){
  .mitades{ grid-template-columns: 1fr; }
  .mitad{ border-left: 0; border-top: 1px solid var(--border); padding: 16px 0 18px; }
  .mitad:first-child{ border-top: 0; }
  .seg-cierre{ grid-template-columns: 1fr; }
  .emb-ficha{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .viz-barras li{ grid-template-columns: 74px minmax(0, 1fr) auto; gap: 5px 9px; }
  .viz-barras em{ display: none; }
  .viz-barras b{ font-size: .78rem; }
  .viz-barras i{ font-size: .82rem; }
  .viz-eje li{ grid-template-columns: 1fr; gap: 4px; }
  .viz-eje .eje-b{ text-align: left; }
  .eje-via{
    width: 100%; height: 1px; margin: 6px 0;
    background: linear-gradient(90deg, var(--accent), var(--dato));
  }
  .viz-eje-cab{ display: none; }
  .viz-grupos li{ grid-template-columns: 1fr auto; grid-template-areas: "rot n" "barra barra" "detalle detalle"; }
  .viz-bucle{ margin-left: 0; }
  .casc-pasos li{ grid-template-columns: 1fr auto; grid-template-areas: "op cifra" "barra barra" "rotulo rotulo"; }
  .cuant-tabla{ font-size: .82rem; }
  .cuant-tabla th, .cuant-tabla td{ padding: 9px 8px; }
}
@media (prefers-reduced-motion: reduce){
  .lec{ animation: none; }
  .emb-figura img{ transition: none; }
  .viz-b::after, .casc-b::after{ transition: none; width: var(--p); }
  .viz-g-b::after{ transition: none; width: var(--n); }
  .viz-eje b, .eje-via, .viz-momentos li{ opacity: 1; transform: none; transition: none; }
  .viz-pila > span{ transform: none; transition: none; }
}

/* =========================================================
   PUNTO 3 · DEFINICIÓN DEL CLIENTE
   ---------------------------------------------------------
   POR QUÉ NO SE PARECE AL PUNTO 1 NI AL PUNTO 2.
   En esta misma página el punto 1 ya es un tambor de ocho caras
   que se arrastra, y el punto 2 son cuatro pestañas que conmutan
   paneles. Repetir cualquiera de los dos aquí habría convertido
   el documento en el mismo juguete tres veces. Este punto usa dos
   mecanismos que no existen en el resto del sitio:

     · El retrato es un DIAGRAMA ANOTADO: cuatro puntos calientes
       sobre objetos reales de la foto —el pelo, el blazer, el
       celular, el casco— enlazados con su rasgo en la lista. Se
       señala, no se conmuta. Ninguno cae sobre la cara: un punto
       encima de un ojo arruina el retrato y era el defecto de la
       primera versión.
     · El día es SCROLLYTELLING: el visor se queda quieto y los
       cuatro momentos pasan por al lado. La foto cambia sola al
       leer. No hay pestañas, no hay botones, no hay que arrastrar.

   LAS FOTOS SON VERTICALES (1086x1448 = 3:4; la cena 1024x1536).
   Una versión anterior las declaraba 1536x1024 y las recortaba a
   3:2: metía un retrato vertical en una ventana horizontal, así
   que se veía una franja del centro y se perdían cabeza y manos.
   Todo aquí está dimensionado en 3/4, que es el ratio del archivo,
   y por eso no recorta nada.

   EL REPARTO DEL AIRE, MEDIDO Y NO A OJO. La versión anterior
   dejaba 322 px muertos bajo el retrato y entre 203 y 275 px de
   blanco dentro de cada momento del día: unos 1.600 px de aire en
   una sección de 4.900. Se corrigió por estructura —la leyenda de
   procedencia bajó a la columna del retrato, que era la corta, y
   el alto de cada momento pasó de un 62vh fijo a un rango atado al
   contenido— y no subiendo tamaños hasta taparlo.

   Color, con el idioma del punto 2: cian (--accent) para lo que
   sale del dato y para lo que la clienta espera; ámbar (--dato)
   para lo que construye el equipo y para lo que la pierde.
   ========================================================= */

/* ---------------------------------------------------------
   1 · EL RETRATO ANOTADO
   --------------------------------------------------------- */
.cli-origen{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(26px, 3.8vw, 54px);
  align-items: start;
  margin: clamp(28px, 4.2vw, 46px) 0 clamp(42px, 5.8vw, 70px);
}

/* La columna izquierda lleva el retrato Y la leyenda de
   procedencia. La leyenda vivía a la derecha y era justo lo que
   desnivelaba las dos columnas. */
.cli-retrato{ position: sticky; top: calc(var(--nav-h) + 24px); }
.cli-retrato-marco{
  position: relative; margin: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--bg-elev);
  /* Elevación declarada una sola vez: sombra, sin filete. Un borde
     de 1px bajo una sombra ancha es la tarjeta fantasma. */
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.62);
}
.cli-retrato img{
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4;      /* el ratio exacto del archivo: no recorta */
  object-fit: cover;
}
.cli-retrato-marco::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, rgba(6,9,12,.9), rgba(6,9,12,0));
  pointer-events: none;
}
.cli-retrato-id{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 17px clamp(15px, 2vw, 20px); z-index: 3;
  pointer-events: none;
}
.cli-retrato-nom{
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.85vw, 1.28rem); letter-spacing: -0.03em;
  line-height: 1.14; color: #f3f4f2;   /* fijo: siempre sobre el velo oscuro */
}
.cli-retrato-sub{
  display: block; margin-top: .4em;
  font-size: .75rem; line-height: 1.5; color: rgba(243,244,242,.76);
}
.cli-retrato-pie{
  margin: 13px 0 0;
  font-size: .78rem; line-height: 1.55; color: var(--text-faint);
}

/* --- Los puntos calientes ---
   Colocados sobre objetos y nunca sobre la cara: pelo (1), blazer
   (2), celular (3), casco (4). Numerados de arriba abajo, que es
   como se recorre un retrato. */
.cli-pin{
  position: absolute; z-index: 2;
  width: 23px; height: 23px; padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%; cursor: pointer;
  background: rgba(6,9,12,.52);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  font-family: var(--font-display); font-weight: 700;
  font-size: .58rem; color: #fff;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
/* El punto mide 23 px porque más grande taparía la foto, pero el área
   que se puede tocar llega a 44, que es el mínimo con el dedo. */
.cli-pin::before{
  content: "";
  position: absolute; inset: -11px;
  border-radius: 50%;
}
/* El latido que delata que la foto se puede tocar. */
.cli-pin::after{
  content: "";
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference){
  .cli-origen.is-in .cli-pin::after{ animation: cliLatido 3.6s ease-out infinite; }
  .cli-origen.is-in .cli-pin:nth-of-type(2)::after{ animation-delay: .55s; }
  .cli-origen.is-in .cli-pin:nth-of-type(3)::after{ animation-delay: 1.1s; }
  .cli-origen.is-in .cli-pin:nth-of-type(4)::after{ animation-delay: 1.65s; }
}
@keyframes cliLatido{
  0%{ opacity: .8; transform: scale(1); }
  55%, 100%{ opacity: 0; transform: scale(2.4); }
}
.cli-pin:hover, .cli-pin:focus-visible, .cli-pin.is-on{
  background: var(--accent); border-color: #fff;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 5px rgba(23,184,230,.28);
}
.cli-pin:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.cli-pin.es-construccion:hover,
.cli-pin.es-construccion:focus-visible,
.cli-pin.es-construccion.is-on{
  background: var(--dato); box-shadow: 0 0 0 5px rgba(224,166,63,.32);
}
.cli-pin.is-on::after{ animation: none !important; opacity: 0; }

.cli-rasgos{ min-width: 0; }

/* --- La lista de rasgos --- */
.cli-lista{ list-style: none; margin: 0; padding: 0; }
.cli-lista li{
  display: grid; grid-template-columns: 15px minmax(0, 1fr);
  gap: 4px 13px;
  padding: 13px 12px 13px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 9px;
  transition: background-color .24s, box-shadow .24s;
}
.cli-lista li:first-child{ border-top: 1px solid var(--border); }
.cli-lista li::before{
  content: ""; grid-row: 1 / span 2;
  width: 9px; height: 9px; border-radius: 50%;
  margin-top: .4em;
  transition: box-shadow .22s, transform .22s;
}
.cli-lista .es-dato::before{ background: var(--accent); }
.cli-lista .es-construccion::before{ background: var(--dato); }
/* Los rasgos con ancla en la foto se anuncian como tocables. */
.cli-lista li[data-pin]{ cursor: pointer; }
.cli-lista li[data-pin] .cli-rasgo::after{
  content: attr(data-n);
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  width: 16px; height: 16px; margin-left: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
  font-size: .6rem; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  transition: border-color .22s, color .22s, background-color .22s;
}
.cli-lista li:hover, .cli-lista li.is-on{ background: var(--bg-elev); }
.cli-lista li.is-on{ box-shadow: inset 1px 0 0 var(--accent); }
.cli-lista li.es-construccion.is-on{ box-shadow: inset 1px 0 0 var(--dato); }
.cli-lista li.is-on.es-dato[data-pin] .cli-rasgo::after{
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.cli-lista li.is-on.es-construccion[data-pin] .cli-rasgo::after{
  border-color: var(--dato); color: var(--dato); background: var(--dato-soft);
}
.cli-lista .es-dato:hover::before{ box-shadow: 0 0 0 5px var(--accent-soft); transform: scale(1.15); }
.cli-lista .es-construccion:hover::before{ box-shadow: 0 0 0 5px var(--dato-soft); transform: scale(1.15); }

.cli-rasgo{
  font-family: var(--font-display); font-weight: 600;
  font-size: .96rem; letter-spacing: -0.017em; line-height: 1.35; color: var(--text);
}
.cli-fuente{ font-size: .82rem; line-height: 1.55; color: var(--text-muted); }
.cli-fuente em{ font-style: normal; color: var(--text-faint); }

/* --- La barra de procedencia: 5 de 8 salen del dato --- */
.cli-balance{ margin: clamp(16px, 2vw, 22px) 0 0; }
.cli-balance-pista{
  display: flex; gap: 2px; height: 7px;
  border-radius: 999px; overflow: hidden; background: var(--bg-elev-2);
}
.cli-balance-pista i{
  display: block; height: 100%;
  transform-origin: left;
  transition: transform .9s cubic-bezier(.22,.9,.3,1);
}
.cli-balance-pista .es-dato{ background: var(--accent); flex: 5; }
.cli-balance-pista .es-construccion{ background: var(--dato); flex: 3; }
/* El estado de partida solo existe si el JS está vivo y ya marcó el
   bloque con .cli-anim. Sin esa clase la barra nace llena. Ver la
   nota sobre `is-in` al final de este archivo. */
.cli-anim .cli-balance-pista i{ transform: scaleX(0); }
.cli-anim.is-in .cli-balance-pista i{ transform: scaleX(1); }
.cli-anim.is-in .cli-balance-pista .es-construccion{ transition-delay: .18s; }
.cli-balance-txt{
  display: grid; gap: 3px;
  margin: 10px 0 0; font-size: .77rem; line-height: 1.45; color: var(--text-muted);
}
.cli-balance-txt b{ color: var(--text); font-weight: 600; }
.cli-punto{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.cli-punto.es-dato{ background: var(--accent); }
.cli-punto.es-construccion{ background: var(--dato); }

/* ---------------------------------------------------------
   2 · UN DÍA DE MARÍA — SCROLLYTELLING
   --------------------------------------------------------- */
.cli-dia{ margin: 0 0 clamp(42px, 5.8vw, 70px); }
/* La misma retícula que .cli-origen a propósito: las dos fotos del
   punto —el retrato y el visor del día— salen exactamente del mismo
   tamaño y alineadas en la misma columna, así que el punto se lee como
   una sola pieza y no como dos bloques distintos. */
.cli-scroll{
  display: grid;
  /* El texto a la izquierda y la foto a la derecha, al reves que el
     retrato anotado de arriba: las dos piezas del punto alternan lado
     y el ojo no repite el mismo recorrido dos veces seguidas. */
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(26px, 3.8vw, 54px);
  align-items: start;
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* --- La columna que se queda --- */
.cli-visor-col{
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  align-self: start;
  order: 2;
}
.cli-momentos{ order: 1; }
.cli-visor{
  position: relative; margin: 0;
  aspect-ratio: 3 / 4;
  width: 100%;              /* el mismo ancho que el retrato de arriba */
  border-radius: 16px; overflow: hidden;
  background: var(--bg-elev-2);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.62);
}
.cli-visor img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.cli-visor img.is-on{ opacity: 1; }
/* La cena viene en 2:3 y es la única que pide encuadre. */
.cli-visor img[data-alto]{ object-position: 50% 38%; }
.cli-visor::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, rgba(6,9,12,.88), rgba(6,9,12,0));
  pointer-events: none; z-index: 1;
}
/* Sobre la foto va la hora sola, grande. El nombre del momento
   está debajo, en el contador: repetirlo en los dos sitios era
   ruido. */
.cli-visor-reloj{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px 18px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  letter-spacing: -0.035em; line-height: 1;
  color: #f3f4f2; font-variant-numeric: tabular-nums;
}

/* --- El arco del día: amanecer a noche, no una barra de pestañas --- */
.cli-arco{ display: block; width: 100%; margin: 15px 0 0; }
.cli-arco svg{ display: block; width: 100%; height: auto; overflow: visible; }
.cli-arco-riel{ fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.cli-arco-hecho{
  fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round;
  transition: stroke-dashoffset .5s cubic-bezier(.22,.9,.3,1);
}
.cli-arco-sol{
  fill: var(--accent);
  transition: cx .5s cubic-bezier(.22,.9,.3,1), cy .5s cubic-bezier(.22,.9,.3,1);
}
.cli-arco-halo{ fill: var(--accent); opacity: .2; transition: inherit; }
.cli-arco-ext{
  font-family: var(--font-display); font-weight: 700;
  font-size: 7px; letter-spacing: .16em; text-transform: uppercase;
  fill: var(--text-faint);
}

/* --- El contador, debajo del arco ---
   Da presencia a la columna fija (que sin él quedaba 260 px más
   corta que la ventana) y dice a la vez en qué momento va la
   lectura y cuántos faltan. */
.cli-contador{
  display: flex; align-items: baseline; gap: 9px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cli-cont-n{
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; letter-spacing: -0.035em; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.cli-cont-t{
  font-family: var(--font-display); font-weight: 600;
  font-size: .76rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.cli-cont-m{
  margin-left: auto; text-align: right;
  font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: -0.015em; color: var(--text);
}

/* --- Los momentos que pasan ---
   El alto ya no es un 62vh fijo (que dejaba entre 203 y 275 px de
   blanco por momento con solo 233 px de texto): es un rango atado
   al contenido, con tope para que en pantallas altas el
   scrollytelling siga teniendo recorrido. */
.cli-momentos{ min-width: 0; }
.cli-momento{
  min-height: clamp(300px, 42vh, 420px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(12px, 1.6vw, 18px) 0;
  opacity: .32;
  transition: opacity .45s ease;
}
.cli-momento.is-on{ opacity: 1; }
.cli-momento:first-child{ padding-top: 0; }
.cli-momento:last-child{ padding-bottom: 0; }
.cli-momento-h{
  margin: 0 0 .9em;
  font-family: var(--font-display); font-weight: 700;
  font-size: .61rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 11px;
}
.cli-momento-h::before{
  content: ""; width: 24px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22,.9,.3,1);
}
.cli-momento.is-on .cli-momento-h::before{ transform: scaleX(1); }
.cli-momento h4{
  margin: 0 0 .55em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -0.032em; line-height: 1.16;
  text-wrap: balance; color: var(--text);
}
.cli-momento p{
  margin: 0 0 .85em;
  font-size: .95rem; line-height: 1.7; color: var(--text-muted);
  max-width: 54ch;
}
.cli-momento p:last-child{ margin-bottom: 0; }
.cli-momento b{ color: var(--text); font-weight: 600; }
.cli-remate{
  margin-top: 1.05em !important;
  padding-left: 15px; border-left: 1px solid var(--accent);
  font-size: .87rem !important;
}

/* ---------------------------------------------------------
   3 · LO QUE ESPERA Y LO QUE LA PIERDE
   Las siete necesidades del documento y las siete frustraciones
   se corresponden casi una a una. Enfrentadas dejan de ser dos
   listas y se vuelven siete lugares donde la marca gana o pierde
   a la clienta.
   --------------------------------------------------------- */
.cli-libro{ margin: 0 0 clamp(42px, 5.8vw, 70px); }
.cli-pares{ list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; }
.cli-pares li{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.cli-pares li::before{
  content: ""; grid-column: 2; grid-row: 1;
  width: 1px; background: var(--border-strong);
}
.cli-pares-cab{
  padding-bottom: 9px !important;
  border-bottom: 1px solid var(--border-strong) !important;
}
.cli-pares-cab span{
  font-family: var(--font-display); font-weight: 700;
  font-size: .61rem; letter-spacing: .17em; text-transform: uppercase;
}
.cli-pares-cab span:first-child{ color: var(--accent); }
.cli-pares-cab span:last-child{ color: var(--dato); }
.cli-espera, .cli-pierde{
  display: flex; align-items: baseline; gap: 10px;
  font-size: .89rem; line-height: 1.55;
}
.cli-espera{ grid-column: 1; color: var(--text); }
.cli-pierde{ grid-column: 3; color: var(--text-muted); }
.cli-espera::before, .cli-pierde::before{
  content: ""; width: 7px; height: 7px; flex: none;
  border-radius: 50%; transform: translateY(-1px);
}
.cli-espera::before{ background: var(--accent); }
.cli-pierde::before{ background: var(--dato); }
/* Los rótulos solo aparecen en móvil, donde las columnas se apilan
   y el color solo dejaría de bastar para distinguirlas. */
.cli-espera i, .cli-pierde i{ display: none; }

@media (prefers-reduced-motion: no-preference){
  .cli-anim .cli-pares li:not(.cli-pares-cab){
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.3,1);
  }
  .cli-anim.is-in .cli-pares li:not(.cli-pares-cab){ opacity: 1; transform: none; }
  .cli-anim.is-in .cli-pares li:nth-child(2){ transition-delay: .04s; }
  .cli-anim.is-in .cli-pares li:nth-child(3){ transition-delay: .10s; }
  .cli-anim.is-in .cli-pares li:nth-child(4){ transition-delay: .16s; }
  .cli-anim.is-in .cli-pares li:nth-child(5){ transition-delay: .22s; }
  .cli-anim.is-in .cli-pares li:nth-child(6){ transition-delay: .28s; }
  .cli-anim.is-in .cli-pares li:nth-child(7){ transition-delay: .34s; }
  .cli-anim.is-in .cli-pares li:nth-child(8){ transition-delay: .40s; }
}

/* ---------------------------------------------------------
   4 · LOS TRES CANALES
   No son tres logos: son tres funciones encadenadas. Si falla el
   último eslabón, los dos primeros no sirvieron de nada, y esa
   secuencia es la información —por eso van numeradas.
   --------------------------------------------------------- */
.cli-digital{ margin: 0 0 clamp(42px, 5.8vw, 70px); }
.cli-canales{
  list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  counter-reset: canal;
}
.cli-canales li{
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elev);
  counter-increment: canal;
}
.cli-canales li:not(:last-child)::after{
  content: "";
  position: absolute; right: -13px; top: 50%;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--border-strong);
  border-right: 1.5px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.cli-canal-f{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .61rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent);
}
.cli-canal-f::before{
  content: "0" counter(canal);
  color: var(--text-faint); letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.cli-canal-n{
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; letter-spacing: -0.022em; color: var(--text);
}
.cli-canal-d{ font-size: .86rem; line-height: 1.6; color: var(--text-muted); }
.cli-canales li:last-child{ border-color: var(--accent-soft-2); }

@media (prefers-reduced-motion: no-preference){
  .cli-anim .cli-canales li{
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1);
  }
  .cli-anim.is-in .cli-canales li{ opacity: 1; transform: none; }
  .cli-anim.is-in .cli-canales li:nth-child(2){ transition-delay: .10s; }
  .cli-anim.is-in .cli-canales li:nth-child(3){ transition-delay: .20s; }
}

/* --- Nota de lectura, compartida por los bloques de arriba --- */
.cli-nota{
  margin: 1.4em 0 0;
  font-size: .86rem; line-height: 1.65; color: var(--text-muted);
  max-width: 70ch;
  border-left: 1px solid var(--border-strong); padding-left: 16px;
}
.cli-nota b{ color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------
   5 · EL PUENTE AL PUNTO 4
   --------------------------------------------------------- */
.cli-puente{
  padding: clamp(24px, 3.4vw, 36px) clamp(24px, 3.6vw, 40px);
  border: 1px solid var(--accent-soft-2);
  border-radius: 16px;
  background: var(--accent-soft);
}
.cli-puente-rot{
  margin: 0 0 .8em;
  font-family: var(--font-display); font-weight: 700;
  font-size: .61rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent);
}
.cli-puente-txt{
  margin: 0 0 .8em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.5vw, 1.66rem);
  letter-spacing: -0.033em; line-height: 1.26;
  text-wrap: balance; color: var(--text);
  max-width: 34ch;
}
.cli-puente-d{
  margin: 0; font-size: .9rem; line-height: 1.68;
  color: var(--text-muted); max-width: 72ch;
}
.cli-puente-d b{ color: var(--text); font-weight: 600; }

.cli-full{ margin-top: clamp(28px, 3.6vw, 40px); }

/* En pantallas bajas la columna pegada no puede ser más alta que la
   ventana: si lo es, lo último (la leyenda del retrato, el contador del
   día) queda fuera de alcance por mucho que se baje. Se limita por
   ancho, no por alto, para conservar el 3/4 exacto del archivo — y con
   la misma cuenta en los dos, que es lo que los mantiene idénticos. */
@media (min-width: 901px){
  /* 320px es lo que ocupa todo lo que acompaña a la foto más alta de
     las dos —el arco, el contador y el hueco de la cabecera—, medido
     en el navegador y no estimado. */
  .cli-retrato-marco, .cli-visor{ max-width: calc((100vh - 320px) * 0.75); }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 900px){
  .cli-origen{ grid-template-columns: 1fr; gap: 26px; }
  .cli-retrato{ position: static; max-width: 360px; }

  /* El visor se pega arriba y encoge; los momentos pasan por
     debajo. Sigue siendo una sola foto en pantalla. */
  .cli-scroll{ grid-template-columns: 1fr; gap: 0; }
  /* Apilado el visor vuelve arriba: es la cabecera pegada. */
  .cli-visor-col{
    order: 0;
    top: calc(var(--nav-h) + 6px);
    z-index: 3; padding: 10px 0 12px;
    background: var(--bg);
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-areas: "foto arco" "foto cont";
    gap: 4px 16px; align-items: end;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
  }
  .cli-visor{ grid-area: foto; max-width: 108px; }
  .cli-visor-reloj{ padding: 10px 11px; font-size: 1.05rem; }
  .cli-arco{ grid-area: arco; margin: 0; max-width: none; align-self: center; }
  .cli-contador{
    grid-area: cont; max-width: none;
    margin: 0; padding-top: 10px;
  }
  .cli-cont-n{ font-size: 1.05rem; }
  .cli-momento{ min-height: 0; padding: 24px 0; opacity: 1; }
  .cli-momento:first-child{ padding-top: 12px; }

  .cli-canales{ grid-template-columns: 1fr; }
  .cli-canales li:not(:last-child)::after{
    right: auto; left: 26px; top: auto; bottom: -13px;
    transform: rotate(135deg);
  }
}

@media (max-width: 620px){
  .cli-pares li{ grid-template-columns: 1fr; gap: 8px; }
  .cli-pares li::before{ display: none; }
  .cli-espera, .cli-pierde{ grid-column: 1; }
  .cli-pares-cab{ display: none !important; }
  .cli-espera i, .cli-pierde i{
    display: inline; font-style: normal;
    font-family: var(--font-display); font-weight: 700;
    font-size: .58rem; letter-spacing: .15em; text-transform: uppercase;
  }
  .cli-espera i::after, .cli-pierde i::after{ content: " · "; }
  .cli-espera i{ color: var(--accent); }
  .cli-pierde i{ color: var(--dato); }
  .cli-cont-m{ font-size: .74rem; }
}

/* ---------------------------------------------------------
   IMPRESIÓN
   En papel no hay scroll ni puntos calientes: los cuatro momentos
   se despliegan enteros y nada queda atenuado.
   --------------------------------------------------------- */
@media print{
  .cli-retrato, .cli-visor-col{ position: static; }
  .cli-pin, .cli-arco, .cli-contador{ display: none; }
  .cli-scroll{ grid-template-columns: 1fr; }
  .cli-momento{
    min-height: 0 !important; opacity: 1 !important;
    padding: 0 0 1.4em; break-inside: avoid;
  }
  .cli-pares li, .cli-canales li{ opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   PUNTO 4 · MAPA DE EMPATÍA — EL ACORDEÓN
   ---------------------------------------------------------
   Cuatro columnas que se abren al pasar el cursor. La referencia
   era un componente de React con Tailwind; aquí está hecho nativo
   porque este sitio es HTML, CSS y JS planos sin build, y meter
   React para un acordeón habría obligado a reconstruir las otras
   ocho páginas.

   POR QUÉ LAS IMÁGENES APAISADAS SÍ FUNCIONAN EN COLUMNAS.
   Parece que no, y por eso una versión intermedia volteó el
   acordeón a filas. No hacía falta: con `object-fit: cover`, un
   original de 1536×1024 dentro de una hoja de 480 px de alto se
   escala por la altura (×0,469 → 720×480), así que **la altura
   completa se ve siempre**, abierta o cerrada, y lo único que se
   recorta son los lados. Abierta enseña el 74 % del ancho; cerrada,
   el 10 % central — y como María está centrada en las cuatro fotos,
   ese 10 % es justo su cara. No se pierde nada arriba ni abajo.

   `flex-grow` es lo que se anima, no el ancho: es el único número
   que el navegador interpola sin recalcular la caja de las cuatro
   hojas en cada fotograma.

   EL DESTELLO. Al abrirse, una banda de luz cruza la hoja una vez.
   No es decoración: marca el momento del cambio, que es justo lo
   que un acordeón sin él deja sin señalar.
   ========================================================= */

.emp-acordeon{
  display: flex;
  gap: 10px;
  /* El alto sale de la proporcion de las fotos, no a ojo: con la
     seccion al ancho de las demas la hoja abierta mide 928 px, y un
     original 3:2 pide 619 de alto para no recortar nada. A 480 se
     comia el 22 % del alto y le cortaba la cabeza a Maria. */
  height: clamp(400px, 64vh, 612px);
  margin: clamp(24px, 3.4vw, 38px) 0 clamp(34px, 4.6vw, 52px);
}

.emp-hoja{
  position: relative;
  flex: 0 0 74px;              /* cerrada: solo el lomo */
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-elev-2);
  transition: flex-grow .62s cubic-bezier(.22,.9,.3,1);
}
.emp-hoja.is-on{ flex-grow: 1; }

.emp-foto{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transition: filter .6s ease, transform 1.1s cubic-bezier(.22,.9,.3,1);
  /* Cerrada la foto es un rastro, no una imagen: si las cuatro se
     vieran a la vez ninguna sería la que manda. */
  filter: grayscale(.88) brightness(.46) contrast(1.05);
  transform: scale(1.06);
}
.emp-hoja.is-on .emp-foto{ filter: none; transform: scale(1); }
.emp-hoja:not(.is-on):hover .emp-foto{ filter: grayscale(.5) brightness(.66) contrast(1.05); }

/* El velo que sostiene el texto. Sube al abrirse porque entonces hay
   un párrafo debajo, no solo un rótulo. */
.emp-hoja::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(6,9,12,.96), rgba(6,9,12,.62) 42%, rgba(6,9,12,0));
  pointer-events: none; z-index: 1;
  transition: height .62s cubic-bezier(.22,.9,.3,1);
}
.emp-hoja.is-on::after{ height: 80%; }

/* El filete cian que marca cuál manda. */
.emp-hoja::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22,.9,.3,1);
}
.emp-hoja.is-on::before{ transform: scaleX(1); }

/* --- El destello que cruza la hoja al abrirse --- */
.emp-destello{
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden; opacity: 0;
}
.emp-hoja.is-on .emp-destello{ opacity: 1; }
.emp-destello::before{
  content: "";
  position: absolute; top: -20%; bottom: -20%; width: 30%;
  background: linear-gradient(100deg,
    transparent,
    rgba(23,184,230,.18) 38%,
    rgba(255,255,255,.32) 50%,
    rgba(23,184,230,.18) 62%,
    transparent);
  transform: translateX(-180%) skewX(-14deg);
}
@media (prefers-reduced-motion: no-preference){
  .emp-hoja.is-on .emp-destello::before{
    animation: empDestello 1s cubic-bezier(.3,.7,.25,1) .08s both;
  }
}
@keyframes empDestello{
  from{ transform: translateX(-180%) skewX(-14deg); }
  to{ transform: translateX(460%) skewX(-14deg); }
}

/* --- El tirador: cubre la hoja entera --- */
.emp-tirador{
  position: absolute; inset: 0; z-index: 5;
  padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; color: inherit;
}
.emp-hoja.is-on .emp-tirador{ cursor: default; }
.emp-tirador:focus-visible{
  outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 16px;
}
/* El número, arriba del lomo. */
.emp-n{
  position: absolute; top: 16px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: .68rem; letter-spacing: .1em;
  color: rgba(243,244,242,.55);
  font-variant-numeric: tabular-nums;
  transition: color .4s ease, opacity .34s ease;
}
.emp-hoja.is-on .emp-n{ text-align: left; padding-left: clamp(20px, 2.2vw, 28px); color: var(--accent); }
/* El lomo: el rótulo girado que se lee con la hoja cerrada. */
.emp-lomo{
  position: absolute; left: 27px; bottom: 24px;
  transform-origin: left bottom; transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: .92rem; letter-spacing: -0.02em;
  color: rgba(243,244,242,.9);
  transition: opacity .34s ease;
}
.emp-hoja.is-on .emp-lomo{ opacity: 0; pointer-events: none; }

/* --- El panel de texto, con su propio título --- */
.emp-panel{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 clamp(20px, 2.2vw, 28px) clamp(18px, 2.2vw, 24px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: visibility 0s .4s;
}
.emp-hoja.is-on .emp-panel{
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: visibility 0s;
}
/* El título manda sobre el cuerpo: más grande, no más pequeño. Era
   el defecto de una versión anterior, donde el rótulo iba en
   versalitas de .61rem sobre un texto de .87rem. */
.emp-titulo{
  margin: 0 0 .34em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.24rem, 2.1vw, 1.62rem);
  letter-spacing: -0.035em; line-height: 1.12;
  text-wrap: balance; color: #f3f4f2;
}
.emp-donde{
  margin: 0 0 .9em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.76rem, 1.1vw, .86rem);
  letter-spacing: -0.01em; line-height: 1.35;
  color: var(--accent);
}
.emp-cuerpo{
  margin: 0;
  font-size: .85rem; line-height: 1.6;
  color: rgba(243,244,242,.87);
  max-width: 54ch;
}

/* La entrada del contenido: sube y enfoca. El desenfoque es lo que
   hace que se lea como "aparecer" y no como "estar". */
@media (prefers-reduced-motion: no-preference){
  .emp-hoja.is-on .emp-panel > *{
    animation: empSube .62s cubic-bezier(.22,.9,.3,1) both;
  }
  .emp-hoja.is-on .emp-titulo{ animation-delay: .16s; }
  .emp-hoja.is-on .emp-donde{ animation-delay: .24s; }
  .emp-hoja.is-on .emp-cuerpo{ animation-delay: .32s; }
}
@keyframes empSube{
  from{ opacity: 0; transform: translateY(16px); filter: blur(7px); }
  to{ opacity: 1; transform: none; filter: blur(0); }
}

/* ---------------------------------------------------------
   EL SALDO · dolores contra ganancias
   Siete contra ocho. El número grande es el dato de la sección:
   cada ganancia es el revés de un dolor, y hay una de más.
   --------------------------------------------------------- */
.emp-saldo{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  margin: 0 0 clamp(26px, 3.4vw, 38px);
}
.emp-col{ position: relative; padding-top: 18px; }
.emp-col::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s cubic-bezier(.22,.9,.3,1);
}
.emp-col.es-dolor::before{ background: var(--dato); }
.emp-col.es-gana::before{ background: var(--accent); }
.is-in .emp-col::before{ transform: scaleX(1); }
.is-in .emp-col.es-gana::before{ transition-delay: .12s; }

.emp-col-n{
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  letter-spacing: -0.05em; line-height: .9;
  font-variant-numeric: tabular-nums;
}
.emp-col.es-dolor .emp-col-n{ color: var(--dato); }
.emp-col.es-gana .emp-col-n{ color: var(--accent); }
/* El título es más grande que el texto que encabeza. */
.emp-col-t{
  margin: .32em 0 .3em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.12rem, 1.9vw, 1.34rem);
  letter-spacing: -0.03em; line-height: 1.15;
  color: var(--text);
}
.emp-col-t em{
  font-style: normal; font-weight: 600;
  font-size: .74em; color: var(--text-faint);
}
.emp-col-d{
  margin: 0 0 1.3em;
  font-size: .84rem; line-height: 1.55; color: var(--text-muted);
  max-width: 40ch;
}
.emp-lista{ list-style: none; margin: 0; padding: 0; }
.emp-lista li{
  position: relative;
  display: flex; align-items: baseline; gap: 11px;
  padding: 9px 10px 9px 4px;
  border-radius: 8px;
  font-size: .87rem; line-height: 1.55;
  border-bottom: 1px solid var(--border);
  transition: background-color .24s ease, padding-left .24s ease;
}
.emp-lista li:hover{ background: var(--bg-elev); padding-left: 10px; }
.emp-lista li::before{
  content: ""; width: 6px; height: 6px; flex: none;
  border-radius: 50%; transform: translateY(-1px);
  transition: box-shadow .24s ease;
}
.emp-col.es-dolor .emp-lista li{ color: var(--text-muted); }
.emp-col.es-dolor .emp-lista li::before{ background: var(--dato); }
.emp-col.es-dolor .emp-lista li:hover::before{ box-shadow: 0 0 0 4px var(--dato-soft); }
.emp-col.es-gana .emp-lista li{ color: var(--text); }
.emp-col.es-gana .emp-lista li::before{ background: var(--accent); }
.emp-col.es-gana .emp-lista li:hover::before{ box-shadow: 0 0 0 4px var(--accent-soft); }

/* La entrada escalonada. El estado oculto cuelga de .cli-anim, que
   pone el JS: si el JS no corre, nada nace invisible. */
@media (prefers-reduced-motion: no-preference){
  .cli-anim .emp-lista li{
    opacity: 0; transform: translateX(-10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.3,1),
                background-color .24s ease, padding-left .24s ease;
  }
  .cli-anim.is-in .emp-lista li{ opacity: 1; transform: none; }
  .cli-anim.is-in .emp-lista li:nth-child(1){ transition-delay: .06s; }
  .cli-anim.is-in .emp-lista li:nth-child(2){ transition-delay: .12s; }
  .cli-anim.is-in .emp-lista li:nth-child(3){ transition-delay: .18s; }
  .cli-anim.is-in .emp-lista li:nth-child(4){ transition-delay: .24s; }
  .cli-anim.is-in .emp-lista li:nth-child(5){ transition-delay: .30s; }
  .cli-anim.is-in .emp-lista li:nth-child(6){ transition-delay: .36s; }
  .cli-anim.is-in .emp-lista li:nth-child(7){ transition-delay: .42s; }
  .cli-anim.is-in .emp-lista li:nth-child(8){ transition-delay: .48s; }
  .cli-anim .emp-col-n{
    opacity: 0; transform: translateY(8px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1);
  }
  .cli-anim.is-in .emp-col-n{ opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   RESPONSIVE
   Por debajo de 900 px cuatro lomos de 74 px no dejan sitio para
   nada: el acordeón se convierte en cuatro fichas apiladas, con la
   foto de banda y el texto entero. Nada se esconde.
   --------------------------------------------------------- */
@media (max-width: 900px){
  .emp-acordeon{
    display: grid; grid-template-columns: 1fr;
    gap: 14px; height: auto;
  }
  .emp-hoja{
    flex: none;
    border: 1px solid var(--border);
    background: var(--bg-elev);
  }
  .emp-foto{
    position: relative; inset: auto;
    height: 190px; width: 100%;
    filter: none; transform: none;
    border-radius: 15px 15px 0 0;
  }
  .emp-hoja::after{
    inset: 0 0 auto 0; height: 190px;
    background: linear-gradient(to top, rgba(6,9,12,.7), rgba(6,9,12,0) 58%);
  }
  .emp-hoja::before{ transform: scaleX(1); }
  .emp-destello{ display: none; }
  /* Apilado no hay nada que abrir: el tirador estorbaría. */
  .emp-tirador{ display: none; }
  .emp-panel,
  .emp-hoja.is-on .emp-panel{
    position: static;
    opacity: 1; visibility: visible; pointer-events: auto;
    padding: 16px clamp(16px, 4vw, 20px) clamp(18px, 4vw, 22px);
  }
  .emp-hoja.is-on .emp-panel > *{ animation: none; }
  .emp-titulo{ color: var(--text); font-size: clamp(1.15rem, 4.6vw, 1.4rem); }
  .emp-cuerpo{ color: var(--text-muted); }
  .emp-saldo{ grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 560px){
  .emp-foto, .emp-hoja::after{ height: 168px; }
}

@media (prefers-reduced-motion: reduce){
  .emp-hoja, .emp-foto, .emp-hoja::after, .emp-hoja::before,
  .emp-lomo, .emp-panel, .emp-col::before{ transition: none; }
  .emp-destello{ display: none; }
}

/* ---------------------------------------------------------
   IMPRESIÓN
   En papel no hay cursor: las cuatro hojas se despliegan enteras.
   --------------------------------------------------------- */
@media print{
  .emp-acordeon{ display: block; height: auto; }
  .emp-hoja{
    display: grid; grid-template-columns: 150px minmax(0, 1fr);
    margin-bottom: 12px; break-inside: avoid;
    border: 1px solid #ccc; border-radius: 8px; background: none;
  }
  .emp-hoja::after, .emp-hoja::before, .emp-tirador, .emp-destello{ display: none; }
  .emp-foto{
    position: relative; inset: auto; height: 100%;
    filter: none; transform: none;
  }
  .emp-panel{
    position: static;
    opacity: 1 !important; visibility: visible !important;
    padding: 12px;
  }
  .emp-panel > *{ animation: none !important; }
  .emp-titulo{ color: #000; }
  .emp-cuerpo{ color: #222; }
  .emp-lista li{ opacity: 1 !important; transform: none !important; }
  .emp-saldo{ break-inside: avoid; }
}

/* =========================================================
   PUNTO 5 · CONCEPTUALIZACIÓN DE INSIGHTS
   ---------------------------------------------------------
   EL PUNTO VALE 2,0 DE LA RÚBRICA y el nivel "excelente" pide los
   insights "con calidad y excelencia, proponiendo opciones de
   solución al problema del cliente". Por eso la recomendación no es
   un renglón al final: cierra cada ficha con peso propio.

   LA REGLA QUE LO GOBIERNA la dio el docente el 25 de agosto: «las
   empresas manifiestan muchos insights de manera cualitativa, y ahí
   hay un error muy grande de concepto. Lo primero que un insight nos
   pide es un dato, y ese dato es cuantitativo». De ahí el orden de
   cada ficha —cifra, información, hallazgo— y de ahí que la
   información se declare viniendo del mapa de empatía.

   EL FONDO NO ES DE ESTA SECCIÓN. Una versión anterior le puso a
   este punto su propio fondo oscuro y eso rompía el modelo de la
   página: las secciones son transparentes y el color lo pinta
   `.doc-escena` completo. Ahora el mismo viraje que aclara antes del
   punto 3 se devuelve antes del punto 5 —ver `docDeScroll` en
   main.js—, así que el fondo es uno solo y compartido, vira con el
   scroll y arranca dentro del punto 4 para no cambiar en la costura
   entre dos secciones. Aquí no se declara ni un color de fondo.

   LAS FICHAS SE APILAN Y TIENEN CUERPO. Cada una se queda pegada y
   encoge mientras la siguiente se le monta encima; la de delante se
   inclina siguiendo el cursor sobre un plano en perspectiva. La pila
   dice a la vez cuántas van y cuántas faltan, que es lo que una
   lista de cuatro bloques largos no dice nunca.
   ========================================================= */

/* ---------------------------------------------------------
   LA REGLA DE LA CLASE
   --------------------------------------------------------- */
.ins-regla{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: start;
  margin: clamp(26px, 3.6vw, 44px) 0 clamp(34px, 5vw, 62px);
  padding: clamp(22px, 3vw, 32px) 0 0;
  border-top: 1px solid var(--border-strong);
}
.ins-regla blockquote{ margin: 0; }
.ins-regla blockquote p{
  margin: 0 0 .8em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.9vw, 1.28rem);
  letter-spacing: -0.025em; line-height: 1.4;
  text-wrap: pretty; color: var(--text);
}
.ins-regla blockquote p::before{ content: "“"; }
.ins-regla blockquote p::after{ content: "”"; }
.ins-regla cite{
  font-style: normal;
  font-family: var(--font-display); font-weight: 700;
  font-size: .6rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent);
}
.ins-regla-d{
  margin: 0; font-size: .89rem; line-height: 1.68; color: var(--text-muted);
}

/* ---------------------------------------------------------
   LA PILA
   El apilado sale de `position: sticky` con un tope distinto por
   ficha: la que viene se detiene 16 px más abajo, así que el canto
   de las de atrás sigue visible. El margen inferior es el recorrido
   de scroll entre una y la siguiente.
   --------------------------------------------------------- */
.ins-pila{
  margin: 0 0 clamp(34px, 5vw, 58px);
  perspective: 1600px;          /* el plano donde se inclinan las fichas */
  perspective-origin: 50% 42%;
}

.ins-carta{
  position: sticky;
  top: calc(var(--nav-h) + 26px + var(--i) * 16px);
  margin-bottom: 56vh;
  display: grid;
  /* Las imagenes de este punto son verticales 2:3 de cuadro completo,
     no fondos: piden una columna real, no una rendija. */
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: 0;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
  /* La escala la escribe el JS según cuánto la cubre la siguiente;
     el giro, según dónde está el cursor. Van juntas en una sola
     transformación para no pelearse entre ellas. */
  transform:
    scale(var(--s, 1))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform .18s linear, box-shadow .4s ease;
}
.ins-carta:last-child{ margin-bottom: 0; }
.ins-carta.es-frente{
  box-shadow:
    0 40px 90px -48px rgba(0,0,0,.95),
    0 0 0 1px var(--accent-soft-2);
  transition: transform .12s ease-out, box-shadow .4s ease;
}
/* El velo que hunde a las de atrás: sube con --t, que también
   escribe el JS. */
.ins-carta::after{
  content: "";
  position: absolute; inset: 0; border-radius: 18px;
  background: #05070a;
  opacity: calc(var(--t, 0) * .55);
  pointer-events: none; z-index: 4;
}
/* El brillo especular que sigue al cursor: es lo que convence de que
   la ficha tiene una superficie y no es un rectángulo pintado. */
.ins-brillo{
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0;
  border-radius: 18px;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    rgba(23,184,230,.16), rgba(23,184,230,.05) 42%, transparent 68%);
  transition: opacity .35s ease;
}
.ins-carta.es-frente .ins-brillo{ opacity: 1; }

.ins-cuerpo{
  padding: clamp(24px, 3.2vw, 40px);
  min-width: 0;
}

/* --- La foto de la ficha --- */
.ins-foto{
  position: relative; margin: 0; grid-column: 2; grid-row: 1;
  min-height: 100%;
  overflow: hidden;
}
.ins-foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
  filter: grayscale(.28) contrast(1.03) brightness(.9);
  transform: scale(1.04);
  transition: filter .7s ease, transform 1.2s cubic-bezier(.22,.9,.3,1);
}
.ins-carta.es-frente .ins-foto img{
  filter: grayscale(0) contrast(1.02) brightness(1);
  transform: scale(1);
}
/* La foto se funde con la ficha por el lado del texto: pegada de
   canto se vería como una estampilla encima de la tarjeta. */
.ins-foto::after{
  content: "";
  position: absolute; inset: 0;
  /* El desvanecido come el tercio izquierdo de la foto: por eso las
     imagenes de este punto llevan el sujeto en los dos tercios de la
     derecha. Ver PROMPTS-PUNTO-5.md en assets-fuente. */
  /* Un borde, no un velo: el fondo de estas cuatro fotos ya es casi
     negro y se funde solo con la ficha. Con el desvanecido largo de
     antes, el plato de arepas de la primera quedaba tapado. */
  background: linear-gradient(to right,
    var(--bg-elev) 0%, rgba(18,22,27,.5) 5%, rgba(18,22,27,.12) 14%, rgba(18,22,27,0) 26%);
  pointer-events: none;
}

.ins-cab{
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px; margin-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--border);
}
.ins-n{
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.05em; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.ins-tema{
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.24rem);
  letter-spacing: -0.028em; line-height: 1.2;
  text-wrap: balance; color: var(--text);
}

/* --- El insight: la voz de la clienta, y el centro de la ficha --- */
.ins-voz{
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 1px solid var(--accent);
}
.ins-voz p{
  margin: 0 0 .7em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  letter-spacing: -0.032em; line-height: 1.3;
  text-wrap: pretty; color: var(--text);
}
.ins-voz p::before{ content: "“"; }
.ins-voz p::after{ content: "”"; }
.ins-voz cite{
  font-style: normal;
  font-family: var(--font-display); font-weight: 700;
  font-size: .58rem; letter-spacing: .17em; text-transform: uppercase;
  /* --text-faint no sirve aquí: está calibrado contra el fondo de la
     página y la ficha va sobre --bg-elev, que es más claro; ahí cae a
     4,31 y no llega al mínimo de texto pequeño. */
  color: var(--text-muted);
}

/* --- La cadena: dato + información = hallazgo --- */
.ins-cadena{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: 0 0 clamp(18px, 2.4vw, 24px);
}
.ins-paso{
  position: relative;
  padding: 14px 15px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color .24s ease, transform .24s ease;
}
.ins-paso:hover{ border-color: var(--border-strong); transform: translateY(-2px); }
/* Los signos que hacen la cuenta explícita: dato + información = hallazgo */
.ins-paso.es-info::before,
.ins-paso.es-hall::before{
  content: "+";
  position: absolute; left: calc(clamp(12px, 1.6vw, 18px) / -2 - 3px); top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: .84rem;
  color: var(--text-faint);
}
.ins-paso.es-hall::before{ content: "="; color: var(--accent); }
.ins-paso-r{
  margin: 0 0 .55em;
  font-family: var(--font-display); font-weight: 700;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
}
.ins-paso-r em{ font-style: normal; opacity: .62; }
.es-dato .ins-paso-r{ color: var(--dato); }
.es-info .ins-paso-r{ color: var(--fuera); }
.es-hall .ins-paso-r{ color: var(--accent); }
.ins-paso-t{
  margin: 0; font-size: .82rem; line-height: 1.55; color: var(--text-muted);
}
.ins-paso-t b{ color: var(--text); font-weight: 600; }
.ins-paso-f{
  margin: .7em 0 0;
  font-size: .68rem; letter-spacing: .01em; color: var(--text-faint);
}

/* --- La recomendación: es lo que la rúbrica llama "opciones de
       solución al problema del cliente", así que cierra fuerte. --- */
.ins-reco{
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px; align-items: baseline;
  padding: clamp(15px, 2vw, 19px) clamp(16px, 2.2vw, 22px);
  border-radius: 12px;
  border: 1px solid var(--accent-soft-2);
  background: var(--accent-soft);
}
.ins-reco-r{
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.ins-reco-t{
  margin: 0; font-size: .86rem; line-height: 1.6; color: var(--text);
}
.ins-reco-t b{ font-weight: 600; }

/* --- La cadena se construye cuando la ficha llega al frente --- */
@media (prefers-reduced-motion: no-preference){
  .ins-carta .ins-voz,
  .ins-carta .ins-paso,
  .ins-carta .ins-reco{
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1);
  }
  .ins-carta.es-frente .ins-voz,
  .ins-carta.es-frente .ins-paso,
  .ins-carta.es-frente .ins-reco{ opacity: 1; transform: none; }
  /* El orden del modelo: primero la cifra, después lo cualitativo,
     después el cruce; el insight abre y la recomendación cierra. */
  .ins-carta.es-frente .ins-voz{ transition-delay: .06s; }
  .ins-carta.es-frente .es-dato{ transition-delay: .20s; }
  .ins-carta.es-frente .es-info{ transition-delay: .32s; }
  .ins-carta.es-frente .es-hall{ transition-delay: .46s; }
  .ins-carta.es-frente .ins-reco{ transition-delay: .60s; }
  .ins-paso.es-info::before, .ins-paso.es-hall::before{
    opacity: 0; transition: opacity .4s ease;
  }
  .ins-carta.es-frente .es-info::before{ opacity: 1; transition-delay: .40s; }
  .ins-carta.es-frente .es-hall::before{ opacity: 1; transition-delay: .54s; }
}

.ins-cierre{
  margin: 0 0 clamp(24px, 3.4vw, 36px);
  font-size: .92rem; line-height: 1.68; color: var(--text-muted);
  max-width: 74ch;
  border-left: 1px solid var(--border-strong); padding-left: 18px;
}
.ins-cierre b{ color: var(--text); font-weight: 600; }
.ins-full{ margin-top: 0; }

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1040px){
  .ins-carta{ grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
}

@media (max-width: 900px){
  .ins-regla{ grid-template-columns: 1fr; gap: 18px; }
  /* La foto pasa a banda superior: de canto ya no cabe. */
  .ins-carta{ grid-template-columns: 1fr; }
  .ins-foto{ grid-column: 1; grid-row: 1; height: 168px; min-height: 0; }
  .ins-foto::after{
    background: linear-gradient(to bottom,
      rgba(18,22,27,0) 30%, rgba(18,22,27,.72) 76%, var(--bg-elev) 100%);
  }
  .ins-cuerpo{ grid-column: 1; grid-row: 2; }
  .ins-cadena{ grid-template-columns: 1fr; gap: 10px; }
  .ins-paso.es-info::before, .ins-paso.es-hall::before{
    left: 22px; top: -5px; transform: translate(0, -50%);
  }
  .ins-carta{ margin-bottom: 34vh; }
  .ins-reco{ grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 620px){
  /* Con la ficha casi tan alta como el visor, apilar deja de
     funcionar: se sueltan y se leen de corrido. */
  .ins-pila{ perspective: none; }
  .ins-carta{
    position: static;
    transform: none !important;
    margin-bottom: 16px;
  }
  .ins-carta::after, .ins-brillo{ display: none; }
  .ins-carta .ins-voz,
  .ins-carta .ins-paso,
  .ins-carta .ins-reco{ opacity: 1; transform: none; }
  .ins-paso.es-info::before, .ins-paso.es-hall::before{ opacity: 1; }
  .ins-foto img{ filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .ins-carta{ transition: none; transform: none !important; }
  .ins-carta::after, .ins-brillo{ display: none; }
  .ins-foto img{ transition: none; }
}

/* ---------------------------------------------------------
   IMPRESIÓN
   En papel no hay pila: las cuatro fichas se despliegan de corrido.
   --------------------------------------------------------- */
@media print{
  .ins-pila{ perspective: none; }
  .ins-carta{
    position: static; transform: none !important;
    grid-template-columns: 1fr;
    margin-bottom: 14px; break-inside: avoid;
    box-shadow: none; background: none;
    border: 1px solid #ccc;
  }
  .ins-carta::after, .ins-brillo, .ins-foto{ display: none; }
  .ins-carta .ins-voz, .ins-carta .ins-paso, .ins-carta .ins-reco{
    opacity: 1 !important; transform: none !important;
  }
  .ins-paso.es-info::before, .ins-paso.es-hall::before{ opacity: 1 !important; }
}

/* =========================================================
   PUNTO 1 · LA MARCA EN CIFRAS
   ---------------------------------------------------------
   Cuatro numeros del diagnostico puestos juntos, antes del
   tambor. El docente lo pidio: "si presentan datos o cifras de
   la empresa o de la industria, se puede apreciar mucho mejor la
   oportunidad o problema que se presenta".

   No es una fila de tarjetas de metrica. La cuarta lleva un cero
   y va en ambar: es la unica que dice lo que NO hay, y el
   contraste entre las tres primeras y ella es la tesis del punto.
   Sin esa cuarta, las otras tres serian un adorno.
   ========================================================= */
.ctx-cifras{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  margin: clamp(24px, 3.4vw, 38px) 0 clamp(16px, 2vw, 22px);
  padding: 0;
}
.ctx-cifras > div{
  padding-top: 14px;
  border-top: 2px solid var(--accent-soft-2);
}
.ctx-cifras > div.es-cero{ border-top-color: var(--dato-soft); }
.ctx-cifras dt{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -0.05em; line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ctx-cifras .es-cero dt{ color: var(--dato); }
.ctx-cifras dd{
  margin: .55em 0 0;
  font-size: .84rem; line-height: 1.55; color: var(--text-muted);
}
.ctx-cifras dd b{ color: var(--text); font-weight: 600; }

.ctx-cifras-lee{
  margin: 0 0 clamp(8px, 1.4vw, 14px);
  font-size: .89rem; line-height: 1.65; color: var(--text-muted);
  max-width: 74ch;
  border-left: 1px solid var(--border-strong); padding-left: 16px;
}
.ctx-cifras-lee b{ color: var(--text); font-weight: 600; }

/* La entrada escalonada cuelga de .cli-anim, la misma guarda del
   resto del sitio: si el JS no corre, las cifras no nacen ocultas. */
@media (prefers-reduced-motion: no-preference){
  .ctx-cifras.cli-anim > div{
    opacity: 0; transform: translateY(12px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1);
  }
  .ctx-cifras.cli-anim.is-in > div{ opacity: 1; transform: none; }
  .ctx-cifras.cli-anim.is-in > div:nth-child(2){ transition-delay: .09s; }
  .ctx-cifras.cli-anim.is-in > div:nth-child(3){ transition-delay: .18s; }
  .ctx-cifras.cli-anim.is-in > div:nth-child(4){ transition-delay: .30s; }
}

@media (max-width: 820px){
  .ctx-cifras{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px){
  .ctx-cifras{ grid-template-columns: 1fr; gap: 16px; }
}

@media print{
  .ctx-cifras{ grid-template-columns: repeat(4, 1fr); break-inside: avoid; }
  .ctx-cifras > div{ opacity: 1 !important; transform: none !important; }
}