@import url("fonts/fonts.css");

/* ============================================================
   MyWorkIn — Formacion AI First · Deck interactivo
   Tokens tomados del design system de Claude Design
   (design-system-d876f90c-83f0-4bac-9a3c-3b03006e5fa3)
   ============================================================ */
:root {
  --blue-50:#EAF2FE; --blue-100:#D2E2FC; --blue-200:#A6C6FA; --blue-300:#6B9FF2;
  --blue-400:#3E86EC; --blue-500:#1B6FE8; --blue-600:#155ACB; --blue-700:#1147A0;
  --blue-800:#0E3A82; --blue-900:#0A2A5E;
  --navy-50:#E9EDF5; --navy-100:#C9D2E3; --navy-300:#6B7793; --navy-500:#28406B;
  --navy-700:#14294F; --navy-900:#0A1F44;
  --cyan-50:#E2F4FA; --cyan-200:#9BD9EC; --cyan-400:#2BA6CF; --cyan-500:#028BBF; --cyan-700:#02638A;
  --white:#FFFFFF;
  --ink-50:#F0F4FA; --ink-100:#E6ECF5; --ink-200:#D7DEEA; --ink-300:#B9C3D6;
  --ink-400:#8794AC; --ink-500:#5A6884; --ink-600:#3D4B68; --ink-700:#28406B; --ink-900:#0A1F44;
  --success-500:#1E9E6A; --warning-500:#E8A11B; --danger-500:#E4493B;

  --font-display:"Sora", system-ui, -apple-system, sans-serif;
  --font-body:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px;
  --radius-2xl:32px; --radius-pill:999px;
  --shadow-sm:0 2px 6px rgba(10,31,68,.08);
  --shadow-md:0 6px 18px rgba(10,31,68,.10);
  --shadow-lg:0 16px 40px rgba(10,31,68,.14);
  --shadow-xl:0 40px 120px rgba(10,31,68,.36);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;}
body{
  margin:0; background:#05122A; overflow:hidden;
  font-family:var(--font-body); color:var(--navy-900);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Escenario 1920x1080 escalado a la ventana ---------- */
#viewport{
  position:fixed; inset:0; overflow:hidden;
  background:radial-gradient(1200px 700px at 50% -10%, #10305F 0%, #05122A 60%, #030C1C 100%);
}
#stage{
  position:absolute; top:50%; left:50%; width:1920px; height:1080px;
  transform:translate(-50%,-50%); transform-origin:center center;
  border-radius:6px; overflow:hidden;
  box-shadow:0 60px 160px rgba(0,0,0,.55);
  background:var(--ink-50);
}

/* ---------- Diapositivas ---------- */
.slide{
  position:absolute; inset:0; width:1920px; height:1080px;
  overflow:hidden; font-family:var(--font-body);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transform:scale(1.012);
}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;}

/* Entrada escalonada de los bloques al mostrar la slide */
.slide.is-active [data-reveal]{animation:reveal .58s var(--ease-out) both;}
.slide.is-active [data-reveal="1"]{animation-delay:.02s}
.slide.is-active [data-reveal="2"]{animation-delay:.09s}
.slide.is-active [data-reveal="3"]{animation-delay:.16s}
.slide.is-active [data-reveal="4"]{animation-delay:.23s}
.slide.is-active [data-reveal="5"]{animation-delay:.30s}
@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .slide,[data-reveal]{transition:none!important;animation:none!important;}
}

/* ---------- Componente Tag (del design system) ---------- */
.ds-tag{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--white); color:var(--navy-700);
  border:1.5px solid var(--ink-200);
  font-family:var(--font-body); font-weight:500; font-size:26px;
  padding:6px 18px; border-radius:var(--radius-pill); height:48px;
  white-space:nowrap; flex:none;
  transition:all var(--dur-fast) var(--ease-out);
}

/* ============================================================
   HOTSPOTS — zonas con "Mas info"
   ============================================================ */
.hot{
  position:relative; cursor:pointer; outline:none;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.hot::after{
  content:""; position:absolute; inset:-10px;
  border:2px solid transparent; border-radius:inherit;
  pointer-events:none;
  transition:border-color var(--dur-base) var(--ease-out);
}
.hot:hover{transform:translateY(-3px);}
.hot:hover::after{border-color:rgba(27,111,232,.5);}
.hot:focus-visible::after{border-color:var(--blue-500);border-width:3px;}
.hot--ondark:hover::after{border-color:rgba(255,255,255,.55);}

/* Punto indicador: siempre visible, discreto */
.hot > .hot-dot{
  position:absolute; top:-9px; right:-9px; z-index:6;
  width:20px; height:20px; border-radius:50%;
  background:var(--blue-500); border:3px solid var(--white);
  box-shadow:0 2px 8px rgba(10,31,68,.28);
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.hot > .hot-dot::before{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--blue-500); opacity:.7;
  animation:hotPulse 2.8s var(--ease-out) infinite;
}
@keyframes hotPulse{0%{transform:scale(.85);opacity:.6}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
.hot--ondark > .hot-dot{background:var(--white);border-color:rgba(10,31,68,.5);}
.hot--ondark > .hot-dot::before{border-color:var(--white);}
.hot:hover > .hot-dot{transform:scale(0);opacity:0;}

/* Pastilla "Mas info" al pasar el cursor */
.hot > .hot-cue{
  position:absolute; top:-20px; right:-14px; z-index:7;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue-500); color:#fff;
  font-family:var(--font-body); font-weight:700; font-size:19px;
  letter-spacing:.02em; white-space:nowrap;
  padding:9px 18px; border-radius:var(--radius-pill);
  box-shadow:0 8px 24px rgba(27,111,232,.42);
  opacity:0; transform:translateY(6px) scale(.94); pointer-events:none;
  transition:all var(--dur-base) var(--ease-out);
}
.hot > .hot-cue svg{width:17px;height:17px;flex:none;}
.hot:hover > .hot-cue,.hot:focus-visible > .hot-cue{opacity:1;transform:none;}
.hot--cue-left > .hot-cue{right:auto;left:-14px;}

/* El primer punto del deck lleva la pastilla SIEMPRE visible, unida al punto por
   una linea: asi el público aprende que los puntos azules abren más información
   y lo reconoce en las diapositivas siguientes. */
.hot--cue-fija > .hot-cue{
  opacity:1; transform:none; pointer-events:none;
  top:-20px; bottom:auto; right:auto; left:100%; margin-left:28px;
}
.hot--cue-fija:hover > .hot-cue{transform:none;}
.hot--cue-fija:hover > .hot-dot{transform:none;opacity:1;}
.hot--cue-fija > .hot-cue::before{
  content:""; position:absolute; left:-28px; top:50%;
  width:28px; height:2px; margin-top:-1px;
  background:var(--blue-500); opacity:.5;
}
.hot--cue-in > .hot-cue{top:16px;right:16px;}
.hot--cue-below > .hot-cue{top:auto;bottom:-20px;}

/* Variantes de realce segun el fondo */
.hot--card:hover{box-shadow:0 22px 52px rgba(10,31,68,.20)!important;}
.hot--tag:hover{border-color:var(--blue-500)!important;color:var(--blue-600)!important;}
.hot--tag > .hot-dot{width:16px;height:16px;top:-6px;right:-6px;border-width:2.5px;}
.hot--tag > .hot-cue{font-size:17px;padding:7px 14px;top:-17px;}

/* Un hotspot "fantasma": solo la senal, sin caja propia */
.hot--ghost::before{
  content:""; position:absolute; inset:-14px -18px; border-radius:18px;
  background:rgba(27,111,232,.09); opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.hot--ghost:hover::before{opacity:1;}
.hot--ghost.hot--ondark::before{background:rgba(255,255,255,.12);}

/* ============================================================
   MODAL — "Mas info"
   ============================================================ */
#scrim{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  background:rgba(4,14,32,.72); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  display:grid; place-items:center; padding:40px;
}
#scrim.is-open{opacity:1;visibility:visible;pointer-events:auto;}

.modal{
  position:relative; width:min(1180px,94vw); max-height:88vh;
  background:var(--white); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(26px) scale(.975); opacity:0;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
#scrim.is-open .modal{transform:none;opacity:1;}
.modal--wide{width:min(1420px,96vw);}

.modal-head{
  position:relative; flex:none;
  padding:38px 96px 30px 48px;
  background:linear-gradient(120deg,var(--navy-900) 0%,#123163 62%,var(--blue-800) 100%);
  color:#fff; overflow:hidden;
}
.modal-head::after{
  content:""; position:absolute; right:-70px; top:-120px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(107,159,242,.30),transparent 68%);
}
.modal-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:14px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue-300); margin-bottom:12px;
}
.modal-eyebrow .bar{width:30px;height:3px;background:var(--blue-400);flex:none;}
.modal-title{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:38px; line-height:1.1; letter-spacing:-.02em; text-wrap:balance;
}
.modal-sub{
  margin:12px 0 0; font-size:18px; line-height:1.5;
  color:rgba(255,255,255,.76); max-width:82ch; text-wrap:pretty;
}
.modal-body{
  padding:40px 48px 46px; overflow-y:auto; overscroll-behavior:contain;
  font-size:17px; line-height:1.62; color:var(--ink-600);
}
.modal-body::-webkit-scrollbar{width:10px;}
.modal-body::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:99px;border:3px solid #fff;}

.modal-close{
  position:absolute; top:26px; right:26px; z-index:3;
  width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  display:grid; place-items:center;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.modal-close:hover{background:rgba(255,255,255,.28);transform:rotate(90deg);}
.modal-close svg{width:20px;height:20px;}

/* --- Piezas reutilizables dentro del modal --- */
.m-h3{
  margin:0 0 18px; font-family:var(--font-display); font-weight:700;
  font-size:21px; letter-spacing:-.01em; color:var(--navy-900);
  display:flex; align-items:center; gap:12px;
}
.m-h3::before{content:"";width:22px;height:3px;background:var(--blue-500);flex:none;border-radius:2px;}
.m-section + .m-section{margin-top:38px;padding-top:34px;border-top:1px solid var(--ink-100);}
.m-p{margin:0 0 14px;text-wrap:pretty;}
.m-p:last-child{margin-bottom:0;}
.m-lead{font-size:19px;line-height:1.6;color:var(--ink-700);}

.m-grid{display:grid;gap:18px;}
.m-grid--2{grid-template-columns:repeat(2,1fr);}
.m-grid--3{grid-template-columns:repeat(3,1fr);}
.m-grid--4{grid-template-columns:repeat(4,1fr);}

.m-card{
  background:var(--ink-50); border:1px solid var(--ink-200);
  border-radius:var(--radius-lg); padding:22px 24px;
}
.m-card h4{
  margin:0 0 8px; font-family:var(--font-display); font-weight:700;
  font-size:17px; color:var(--navy-900);
}
.m-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-500);}
.m-card--accent{background:var(--blue-50);border-color:var(--blue-100);}
.m-card--cyan{background:var(--cyan-50);border-color:var(--cyan-200);}
.m-card--dark{background:var(--navy-900);border-color:var(--navy-900);}
.m-card--dark h4{color:#fff;} .m-card--dark p{color:rgba(255,255,255,.72);}

.m-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px;}
.m-list li{position:relative;padding-left:34px;text-wrap:pretty;}
.m-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:16px; height:16px; border-radius:50%;
  background:var(--blue-50); border:2px solid var(--blue-500);
}
.m-list li strong{color:var(--navy-900);font-weight:700;}
/* listas largas, a dos columnas */
.m-list--dos{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;}
.m-list--check li::before{
  background:var(--blue-500) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/11px no-repeat;
  border-color:var(--blue-500);
}
.m-list--x li::before{
  background:#FBE7E5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4493B' stroke-width='4' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/10px no-repeat;
  border-color:#E4493B;
}

.m-steps{counter-reset:s;display:flex;flex-direction:column;}
.m-step{position:relative;padding:0 0 26px 62px;counter-increment:s;}
.m-step:last-child{padding-bottom:0;}
.m-step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  width:42px; height:42px; border-radius:50%;
  background:var(--blue-500); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:15px;
  display:grid; place-items:center; z-index:1;
}
.m-step:not(:last-child)::after{
  content:""; position:absolute; left:20px; top:44px; bottom:2px;
  width:2px; background:linear-gradient(180deg,var(--blue-200),var(--ink-200));
}
.m-step h4{margin:8px 0 6px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--navy-900);}
.m-step p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-500);}

.m-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1.5px solid var(--ink-200);
  border-radius:var(--radius-pill); padding:7px 16px;
  font-size:15px; font-weight:600; color:var(--navy-700);
}
.m-pill--accent{background:var(--blue-500);border-color:var(--blue-500);color:#fff;}
.m-pill--cyan{background:var(--cyan-50);border-color:var(--cyan-200);color:var(--cyan-700);}
.m-pills{display:flex;flex-wrap:wrap;gap:10px;}

.m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.m-kpi{background:var(--navy-900);border-radius:var(--radius-lg);padding:22px 24px;color:#fff;}
.m-kpi b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:34px; line-height:1; letter-spacing:-.025em; margin-bottom:8px;
}
.m-kpi span{font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.7);}

.m-quote{
  background:var(--blue-50); border-left:5px solid var(--blue-500);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:24px 28px; margin:0;
}
.m-quote p{margin:0 0 12px;font-size:19px;line-height:1.55;color:var(--navy-900);font-style:italic;}
.m-quote footer{font-size:15px;color:var(--ink-500);font-weight:600;}

.m-table{width:100%;border-collapse:collapse;font-size:15.5px;}
.m-table th{
  text-align:left; padding:12px 16px; background:var(--ink-50);
  font-weight:700; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-500);
  border-bottom:1px solid var(--ink-200);
}
.m-table td{padding:14px 16px;border-bottom:1px solid var(--ink-100);color:var(--ink-600);vertical-align:top;}
.m-table tr:last-child td{border-bottom:none;}
.m-table td strong{color:var(--navy-900);}

/* ---------- Diagramas de flujo dentro del modal ---------- */
.m-flow{display:grid;gap:38px;}
.m-flow--3{grid-template-columns:repeat(3,1fr);}
.m-flow--4{grid-template-columns:repeat(4,1fr);}
.m-flow > *{
  position:relative; border-radius:var(--radius-lg); padding:22px 24px;
  background:var(--white); border:1px solid var(--ink-200);
  display:flex; flex-direction:column;
}
/* la flecha que une un paso con el siguiente */
.m-flow > * + *::before{
  content:""; position:absolute; left:-27px; top:50%;
  width:16px; height:16px; margin-top:-8px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23028BBF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='12' x2='19' y2='12'/><polyline points='13 6 19 12 13 18'/></svg>") center/16px no-repeat;
}
.m-flow h4{
  margin:0 0 12px; font-family:var(--font-display); font-weight:700;
  font-size:19px; color:var(--navy-900);
}
/* la etapa del framework, como antetítulo de cada paso */
.m-flow .etapa{
  display:block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-700); margin-bottom:6px;
}
.m-flow .paso .etapa{color:rgba(255,255,255,.78);}
.m-flow .cierre .etapa{color:var(--blue-300);}
.m-flow .etapa + h4{margin-top:0;}
.m-flow ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;flex:1;}
.m-flow li{font-size:15.5px;line-height:1.4;color:var(--ink-500);}
/* la linea de formato cierra la tarjeta, separada del texto */
.m-flow li.formato{
  margin-top:auto; padding-top:13px; font-size:14.5px;
  border-top:1px solid var(--ink-200); color:var(--ink-400);
}
.m-flow .paso li.formato{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.82);}
.m-flow .cierre li.formato{border-top-color:rgba(255,255,255,.18);color:var(--blue-300);}
.m-flow .paso{background:var(--cyan-500);border-color:var(--cyan-500);}
.m-flow .paso h4{color:#fff;}
.m-flow .paso li{color:rgba(255,255,255,.88);}
.m-flow .cierre{background:var(--navy-900);border-color:var(--navy-900);}
.m-flow .cierre h4{color:#fff;}
.m-flow .cierre li{color:rgba(255,255,255,.78);}

/* La banda de "qué se mide" */
.m-mide{
  margin-top:24px; background:var(--blue-50); border:1px solid var(--blue-100);
  border-radius:var(--radius-lg); padding:20px 26px;
}
.m-mide b{
  display:block; font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-600); margin-bottom:7px;
}
.m-mide span{font-size:16px;line-height:1.5;color:var(--navy-900);}

/* Título de una vía dentro del diagrama (Champion / Manager) */
.m-via{
  display:flex; align-items:baseline; gap:12px; margin:0 0 14px;
  font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--navy-900);
}
.m-via em{font-family:var(--font-body);font-style:normal;font-weight:500;font-size:16px;color:var(--ink-500);}
.m-via + .m-flow{margin-bottom:30px;}

/* Botones de enlace dentro del modal */
.m-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.m-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blue-500); color:#fff; text-decoration:none;
  border:1.5px solid var(--blue-500); border-radius:var(--radius-pill);
  padding:12px 24px; font-size:15.5px; font-weight:700;
  transition:all var(--dur-base) var(--ease-out);
}
.m-cta:hover{background:var(--blue-600);border-color:var(--blue-600);transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,111,232,.32);}
.m-cta svg{width:16px;height:16px;}
.m-cta--ghost{background:transparent;color:var(--blue-600);border-color:var(--ink-200);}
.m-cta--ghost:hover{background:var(--blue-50);border-color:var(--blue-300);color:var(--blue-700);box-shadow:none;}

/* Marco del certificado (se rellena solo si existe assets/certificado.png) */
.m-cert{
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--ink-50); border:1px solid var(--ink-200);
}
.m-cert img{display:block;width:100%;height:auto;}
.m-cert-empty{display:none;}
.m-cert.is-empty{border:2px dashed var(--ink-300);background:var(--ink-50);}
.m-cert.is-empty .m-cert-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:260px; padding:32px; text-align:center;
}
.m-cert-empty svg{width:34px;height:34px;color:var(--ink-300);}
.m-cert-empty b{font-family:var(--font-display);font-size:16px;color:var(--ink-500);}
.m-cert-empty span{font-size:14px;color:var(--ink-400);max-width:44ch;line-height:1.5;}
.m-cert-empty code{background:var(--white);border:1px solid var(--ink-200);border-radius:5px;padding:1px 6px;font-size:13px;}

.m-note{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--ink-50); border:1px dashed var(--ink-300);
  border-radius:var(--radius-md); padding:16px 20px;
  font-size:15px; color:var(--ink-500);
}
.m-note svg{width:20px;height:20px;flex:none;color:var(--blue-500);margin-top:2px;}

/* Galeria de fotos dentro del modal */
.m-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.m-gallery figure{margin:0;border-radius:var(--radius-md);overflow:hidden;position:relative;background:var(--ink-100);}
.m-gallery img{display:block;width:100%;height:210px;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.m-gallery figure:hover img{transform:scale(1.05);}
.m-gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 16px 12px; font-size:13.5px; color:#fff; font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(10,31,68,.86));
}

/* ---------- Portafolio: fotos y videos ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pf-grid--wide{grid-template-columns:repeat(2,1fr);}
.pf-grid--one{grid-template-columns:minmax(0,540px);justify-content:center;}
.pf-item{
  position:relative; margin:0; border-radius:var(--radius-md);
  overflow:hidden; background:var(--ink-100); cursor:zoom-in;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pf-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.pf-item:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(10,31,68,.20);}
.pf-item:hover img{transform:scale(1.06);}
.pf-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 14px 11px; font-size:13px; font-weight:600; color:#fff; line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(10,31,68,.9));
}
.pf-tall img{height:300px;}
.pf-wide img{height:230px;}
.pf-shot{cursor:zoom-in;}
.pf-shot img{height:auto;}

/* Videos */
.pf-video{cursor:pointer;}
.pf-video img{height:300px;}
.pf-video::after{
  content:""; position:absolute; top:50%; left:50%;
  width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%;
  background:rgba(255,255,255,.94) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A1F44'><path d='M8 5v14l11-7z'/></svg>") 55% center/24px no-repeat;
  box-shadow:0 8px 26px rgba(0,0,0,.36); pointer-events:none;
  transition:transform var(--dur-base) var(--ease-out);
}
.pf-video:hover::after{transform:scale(1.12);}
.pf-dur{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(10,31,68,.82); color:#fff; border-radius:6px;
  padding:3px 8px; font-family:var(--font-mono); font-size:11.5px; font-weight:500;
}

/* Cuadricula de empresas (modal de talleres in-company) */
.m-companies{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.m-company{
  background:var(--white); border:1px solid var(--ink-200);
  border-radius:var(--radius-lg); padding:22px 18px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.m-company .logo{height:54px;display:grid;place-items:center;width:100%;}
.m-company .logo img{max-height:54px;max-width:100%;object-fit:contain;}
.m-company b{font-family:var(--font-display);font-size:15.5px;color:var(--navy-900);}
.m-company small{font-size:13px;color:var(--ink-400);line-height:1.4;}

/* Volver dentro de un modal anidado */
.m-back{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:14px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--blue-300); padding:0; margin-bottom:14px;
  transition:color var(--dur-fast) var(--ease-out);
}
.m-back:hover{color:#fff;}
.m-back svg{width:15px;height:15px;}

/* ============================================================
   REDES SOCIALES Y WEB
   ============================================================ */
.social{display:flex;align-items:center;gap:16px;}
.social a{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  width:70px; height:70px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  text-decoration:none; backdrop-filter:blur(6px);
  transition:all var(--dur-base) var(--ease-out);
}
.social a:hover{
  background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.55);
  transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.34);
}
.social a img{width:31px;height:31px;display:block;}
.social .social-web{
  width:auto; padding:0 34px; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:700; font-size:27px; color:#fff;
  letter-spacing:-.01em;
}
.social .social-web svg{width:28px;height:28px;flex:none;}

/* Versión compacta para la portada */
.social--sm{gap:12px;}
.social--sm a{width:50px;height:50px;}
.social--sm a img{width:22px;height:22px;}
.social--sm .social-web{padding:0 24px;font-size:22px;}
.social--sm .social-web svg{width:21px;height:21px;}

/* Dentro de un pop-up (fondo claro) */
.m-social{display:flex;flex-wrap:wrap;gap:12px;}
.m-social a{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--white); border:1.5px solid var(--ink-200);
  border-radius:var(--radius-pill); padding:11px 22px;
  font-size:15.5px; font-weight:700; color:var(--navy-900); text-decoration:none;
  transition:all var(--dur-base) var(--ease-out);
}
.m-social a:hover{border-color:var(--blue-400);background:var(--blue-50);transform:translateY(-2px);}
.m-social a img,.m-social a svg{width:19px;height:19px;flex:none;}

/* ============================================================
   SLIDE 07 — Experiencia de los colaboradores
   ============================================================ */
.phone{
  position:relative; width:452px; height:804px; flex:none;
  border-radius:44px; padding:12px; background:linear-gradient(160deg,#1B2B4A,#0A1F44 60%,#050F26);
  box-shadow:0 40px 90px rgba(4,14,32,.55), inset 0 0 0 1px rgba(255,255,255,.10);
}
.phone::before{
  content:""; position:absolute; top:26px; left:50%; transform:translateX(-50%);
  width:112px; height:9px; border-radius:99px; background:rgba(255,255,255,.16); z-index:3;
}
.phone video{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:34px; background:#000;
}
.phone-play{
  position:absolute; inset:12px; border-radius:34px; border:none; cursor:pointer;
  background:linear-gradient(180deg,rgba(10,31,68,.10),rgba(10,31,68,.62));
  display:grid; place-items:center; gap:16px; align-content:center;
  transition:opacity var(--dur-base) var(--ease-out);
}
.phone-play.is-hidden{opacity:0;pointer-events:none;}
.phone-play i{
  width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); box-shadow:0 14px 40px rgba(0,0,0,.4);
  transition:transform var(--dur-base) var(--ease-out);
}
.phone-play:hover i{transform:scale(1.08);}
.phone-play i svg{width:38px;height:38px;color:var(--navy-900);margin-left:5px;}
.phone-play span{
  font-family:var(--font-body); font-weight:700; font-size:22px; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.phone-badge{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-22px; z-index:4;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blue-500); color:#fff; border-radius:var(--radius-pill);
  padding:12px 26px; font-weight:700; font-size:21px; white-space:nowrap;
  box-shadow:0 12px 30px rgba(27,111,232,.45);
}
.phone-badge svg{width:19px;height:19px;}

.tst{
  position:relative; background:var(--white); border:1px solid var(--ink-200);
  border-radius:var(--radius-xl); box-shadow:0 10px 34px rgba(10,31,68,.09);
  padding:44px 48px 40px; overflow:hidden; min-height:352px;
  display:flex; flex-direction:column;
}
.tst::before{
  content:"\201C"; position:absolute; top:-26px; right:36px;
  font-family:var(--font-display); font-weight:800; font-size:200px;
  color:var(--blue-50); line-height:1; pointer-events:none;
}
.tst-track{position:relative;flex:1;}
.tst-item{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:26px;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.tst-item.is-on{opacity:1;transform:none;pointer-events:auto;}
.tst-quote{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:35px; line-height:1.34; letter-spacing:-.015em;
  color:var(--navy-900); text-wrap:pretty;
}
.tst-who{display:flex;align-items:center;gap:18px;margin-top:auto;}
.tst-av{
  width:64px; height:64px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:24px; color:#fff;
  background:linear-gradient(145deg,var(--blue-500),var(--cyan-500));
}
.tst-txt{display:block;}
.tst-txt b{display:block;font-family:var(--font-display);font-weight:700;font-size:25px;color:var(--navy-900);}
.tst-txt span{display:block;font-size:22px;color:var(--ink-500);line-height:1.35;}
.tst-dots{display:flex;gap:10px;margin-top:30px;}
.tst-dot{
  width:38px; height:6px; border-radius:99px; border:none; padding:0;
  background:var(--ink-200); cursor:pointer;
  transition:background var(--dur-base) var(--ease-out);
}
.tst-dot.is-on{background:var(--blue-500);}
.tst-dot:hover{background:var(--blue-300);}

/* Lightbox de video */
#lightbox{
  position:fixed; inset:0; z-index:85; display:grid; place-items:center;
  background:rgba(3,10,24,.9); backdrop-filter:blur(14px); padding:40px; pointer-events:none;
  opacity:0; visibility:hidden; transition:all var(--dur-slow) var(--ease-out);
}
#lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto;}
#lightbox video,#lightbox img{
  max-height:88vh; max-width:92vw; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); background:#000; display:block;
}
#lightbox img{background:transparent;}
#lightbox .modal-close{background:rgba(255,255,255,.16);top:34px;right:34px;position:fixed;}

/* ============================================================
   CHROME — barra de navegacion
   ============================================================ */
#chrome{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px 16px;
  background:linear-gradient(180deg,transparent,rgba(3,10,24,.78) 55%);
  opacity:0; transition:opacity var(--dur-slow) var(--ease-out);
  pointer-events:none;
}
#chrome.is-visible{opacity:1;pointer-events:auto;}
.c-btn{
  height:42px; min-width:42px; padding:0 14px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:13.5px; font-weight:600;
  backdrop-filter:blur(8px);
  transition:all var(--dur-fast) var(--ease-out);
}
.c-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:#fff;}
.c-btn:disabled{opacity:.3;cursor:default;}
.c-btn svg{width:17px;height:17px;}
.c-count{
  font-family:var(--font-mono); font-size:14px; letter-spacing:.08em;
  color:rgba(255,255,255,.62); padding:0 12px; min-width:78px; text-align:center;
}
.c-count b{color:#fff;font-weight:600;}

#progress{
  position:fixed; left:0; top:0; height:3px; z-index:70; width:0;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-500));
  transition:width var(--dur-slow) var(--ease-out);
}

/* Flechas laterales */
.edge{
  position:fixed; top:0; bottom:0; width:11vw; max-width:150px; z-index:55;
  display:grid; place-items:center; cursor:pointer; border:none; background:none;
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.edge.is-visible{opacity:1;}
.edge:disabled{opacity:0!important;pointer-events:none;}
#edgePrev{left:0;} #edgeNext{right:0;}
.edge i{
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); display:grid; place-items:center; color:#fff;
  transition:all var(--dur-base) var(--ease-out);
}
.edge:hover i{background:rgba(255,255,255,.24);transform:scale(1.08);}
.edge svg{width:22px;height:22px;}

/* ---------- Vista general (tecla O) ---------- */
#overview{
  position:fixed; inset:0; z-index:75; background:rgba(4,14,32,.94);
  backdrop-filter:blur(14px); overflow-y:auto; padding:70px 56px; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
#overview.is-open{opacity:1;visibility:visible;pointer-events:auto;}
#overview h2{margin:0 0 6px;font-family:var(--font-display);font-weight:700;font-size:26px;color:#fff;letter-spacing:-.02em;}
#overview .hint{margin:0 0 34px;font-size:14px;color:rgba(255,255,255,.5);}
.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.ov-item{
  cursor:pointer; border-radius:var(--radius-md); overflow:hidden;
  border:2px solid transparent; background:rgba(255,255,255,.05);
  transition:all var(--dur-base) var(--ease-out);
}
.ov-item:hover{border-color:var(--blue-400);transform:translateY(-5px);}
.ov-item.is-current{border-color:#fff;}
.ov-thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ink-50);}
.ov-thumb .slide{
  position:absolute; top:0; left:0; opacity:1!important; visibility:visible!important;
  transform-origin:top left; pointer-events:none;
}
.ov-thumb .slide [data-reveal]{animation:none!important;opacity:1!important;transform:none!important;}
.ov-thumb .hot-dot,.ov-thumb .hot-cue{display:none;}
.ov-meta{padding:12px 14px;display:flex;align-items:baseline;gap:10px;}
.ov-meta b{font-family:var(--font-mono);font-size:12px;color:var(--blue-300);}
.ov-meta span{font-size:14px;color:rgba(255,255,255,.86);font-weight:600;}

/* ---------- Ayuda de teclado ---------- */
#help{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:rgba(4,14,32,.8); backdrop-filter:blur(10px); pointer-events:none;
  opacity:0; visibility:hidden; transition:all var(--dur-base) var(--ease-out);
}
#help.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.help-card{
  background:var(--white); border-radius:var(--radius-xl); padding:38px 42px;
  width:min(560px,92vw); box-shadow:var(--shadow-xl);
}
.help-card h3{margin:0 0 22px;font-family:var(--font-display);font-size:22px;color:var(--navy-900);}
.help-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--ink-100);font-size:15px;color:var(--ink-600);}
.help-row:last-child{border:none;}
kbd{
  font-family:var(--font-mono); font-size:12.5px; background:var(--ink-50);
  border:1px solid var(--ink-200); border-bottom-width:2px;
  border-radius:6px; padding:4px 9px; color:var(--navy-900); margin-left:5px;
}

/* ---------- Impresion / PDF ---------- */
@media print{
  @page{size:1920px 1080px;margin:0;}
  body{overflow:visible;background:#fff;}
  #viewport{position:static;display:block;background:none;overflow:visible;}
  #stage{position:static;width:1920px;height:auto;box-shadow:none;border-radius:0;overflow:visible;transform:none!important;}
  .slide{position:relative;opacity:1!important;visibility:visible!important;transform:none!important;
         page-break-after:always;break-after:page;}
  .slide [data-reveal]{animation:none!important;opacity:1!important;transform:none!important;}
  .hot-dot,.hot-cue,#chrome,#progress,.edge,#help,#scrim,#overview,#lightbox{display:none!important;}
}

/* ============================================================
   MÓVIL
   El deck es 16:9; en un teléfono vertical queda al 18% y no se
   lee. Los pop-ups, en cambio, sí pueden funcionar bien: son
   donde vive el contenido, así que se rehacen como hoja completa.
   ============================================================ */
@media (max-width: 900px) {

  /* ---- el pop-up pasa a ocupar toda la pantalla ---- */
  #scrim{padding:0;}
  /* Todo el pop-up desplaza a la vez: así la cabecera se aparta al bajar
     y no se queda comiendo un cuarto de la pantalla. */
  .modal,.modal--wide{
    width:100%; max-width:100%; height:100%; max-height:100%;
    border-radius:0;
    display:block; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .modal-body{overflow-y:visible;}
  .modal-head{padding:18px 60px 16px 20px;}
  .modal-eyebrow{font-size:10.5px;letter-spacing:.14em;margin-bottom:7px;}
  .modal-eyebrow .bar{width:18px;height:2px;}
  .modal-title{font-size:21px;line-height:1.15;}
  .modal-sub{font-size:14px;line-height:1.45;margin-top:7px;}
  /* La X queda flotando sobre el contenido, también al desplazar */
  .modal-close{
    position:fixed; top:12px; right:12px; width:42px; height:42px;
    background:rgba(10,31,68,.72); backdrop-filter:blur(6px);
    box-shadow:0 3px 12px rgba(0,0,0,.28);
  }
  .modal-body{padding:20px 20px 40px;font-size:15px;line-height:1.55;}

  .m-h3{font-size:16.5px;margin-bottom:13px;}
  .m-h3::before{width:16px;}
  .m-section + .m-section{margin-top:26px;padding-top:22px;}
  .m-lead{font-size:16px;}
  .m-p{margin-bottom:11px;}

  /* ---- todas las rejillas, a una columna ---- */
  .m-grid--2,.m-grid--3,.m-grid--4{grid-template-columns:1fr;gap:12px;}
  .m-card{padding:16px 18px;}
  .m-card h4{font-size:16px;}
  .m-card p{font-size:14.5px;}

  /* ---- el flujo se apila y la flecha apunta hacia abajo ---- */
  .m-flow--3,.m-flow--4{grid-template-columns:1fr;}
  .m-flow{gap:30px;}
  .m-flow > *{padding:16px 18px;}
  .m-flow > * + *::before{
    left:50%; top:-23px; margin:0 0 0 -8px; transform:rotate(90deg);
  }
  .m-flow h4{font-size:17px;margin-bottom:9px;}
  .m-flow li{font-size:14.5px;}
  .m-flow .etapa{font-size:11px;}
  .m-via{font-size:17px;flex-wrap:wrap;gap:6px;}
  .m-via em{font-size:14px;}

  /* ---- listas ---- */
  .m-list--dos{grid-template-columns:1fr;gap:12px;}
  .m-list li{padding-left:28px;}
  .m-list li::before{width:14px;height:14px;}

  /* ---- la tabla se convierte en fichas apiladas ---- */
  .m-table thead{display:none;}
  .m-table,.m-table tbody{display:block;}
  .m-table tr{
    display:block; padding:14px 0;
    border-bottom:1px solid var(--ink-100);
  }
  .m-table tr:last-child{border-bottom:none;}
  .m-table td{display:block;padding:0 0 6px;border:none;font-size:14.5px;}
  .m-table td:first-child{font-size:16px;margin-bottom:6px;}
  .m-table td:nth-child(2){color:var(--navy-700);font-weight:600;}
  .m-table td:last-child{padding-bottom:0;color:var(--ink-500);}

  /* ---- portafolio ---- */
  .pf-grid,.pf-grid--wide{grid-template-columns:1fr 1fr;gap:10px;}
  .pf-grid--one{grid-template-columns:1fr;}
  .pf-tall img,.pf-video img{height:190px;}
  .pf-item figcaption{font-size:11.5px;padding:22px 10px 9px;}
  .pf-video::after{width:46px;height:46px;margin:-23px 0 0 -23px;background-size:18px;}
  .pf-dur{font-size:10.5px;padding:2px 6px;}
  .m-companies{grid-template-columns:1fr 1fr;gap:10px;}
  .m-kpis{grid-template-columns:1fr 1fr;}

  /* ---- otros bloques ---- */
  .m-mide{padding:15px 18px;margin-top:18px;}
  .m-mide span{font-size:14.5px;}
  .m-note{padding:13px 15px;font-size:13.5px;}
  .m-quote{padding:18px 20px;}
  .m-quote p{font-size:16px;}
  .m-social a,.m-cta{font-size:14px;padding:10px 16px;}
  .m-ctas{gap:9px;}
  #lightbox{padding:14px;}

  /* ---- la barra inferior, con área táctil suficiente ---- */
  #chrome{gap:7px;padding:10px 12px 14px;}
  .c-btn{height:44px;min-width:44px;padding:0 12px;font-size:13px;}
  .c-count{padding:0 6px;min-width:64px;font-size:13px;}
  .edge{display:none;}          /* en móvil se navega deslizando */
  #overview{padding:48px 18px;}
  .ov-grid{grid-template-columns:1fr 1fr;gap:14px;}
}

/* ---- aviso de girar el teléfono, solo en vertical ---- */
#rotate{display:none;}
@media (orientation: portrait) and (max-width: 820px) {
  #rotate{
    position:fixed; left:50%; bottom:86px; transform:translateX(-50%);
    z-index:59; display:flex; align-items:center; gap:11px;
    background:rgba(10,31,68,.92); border:1px solid rgba(255,255,255,.2);
    border-radius:var(--radius-pill); padding:12px 20px;
    color:#fff; font-size:13.5px; font-weight:600; line-height:1.3;
    backdrop-filter:blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.4);
    max-width:92vw; text-align:left; white-space:nowrap;
  }
  #rotate svg{width:22px;height:22px;flex:none;color:var(--blue-300);}
  #rotate.is-hidden{display:none;}
}

/* Móvil en horizontal y tablets: cabe una segunda columna. El flujo con
   flechas se queda en una sola, porque se lee como una secuencia. */
@media (min-width: 620px) and (max-width: 900px) {
  .modal-head{padding:22px 68px 20px 28px;}
  .modal-title{font-size:25px;}
  .modal-body{padding:24px 28px 44px;}
  .m-grid--2,.m-grid--3,.m-grid--4{grid-template-columns:1fr 1fr;}
  .m-list--dos{grid-template-columns:1fr 1fr;gap:12px 28px;}
  .pf-grid,.pf-grid--wide{grid-template-columns:repeat(3,1fr);}
  .m-companies{grid-template-columns:repeat(3,1fr);}
  .m-kpis{grid-template-columns:repeat(4,1fr);}
  .pf-tall img,.pf-video img{height:170px;}
}

/* Zona segura: con viewport-fit=cover la página pasa por debajo de la muesca
   y del indicador de inicio, así que los controles se apartan de ambos. */
@media (max-width: 900px) {
  #chrome{padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  #rotate{bottom:calc(86px + env(safe-area-inset-bottom));}
  .modal-close{
    top:calc(12px + env(safe-area-inset-top));
    right:calc(12px + env(safe-area-inset-right));
  }
  #lbClose{
    top:calc(14px + env(safe-area-inset-top));
    right:calc(14px + env(safe-area-inset-right));
  }
  .modal-head{
    padding-left:calc(20px + env(safe-area-inset-left));
    padding-right:calc(60px + env(safe-area-inset-right));
  }
  .modal-body{
    padding-left:calc(20px + env(safe-area-inset-left));
    padding-right:calc(20px + env(safe-area-inset-right));
    padding-bottom:calc(40px + env(safe-area-inset-bottom));
  }
}