.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  
x-dc{display:none!important}

html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}

html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#FCFCFA;color:#141414;font-family:Barlow,system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,iframe{display:block;max-width:100%}
p,h1,h2,h3{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
::selection{background:#141414;color:#63E3C8}
:focus-visible{outline:3px solid #1F6F64;outline-offset:3px;border-radius:6px}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes halo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes logoIn{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
@keyframes shine{0%,70%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes floor{from{background-position:center 0}to{background-position:center 76px}}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-transparency:reduce){[style*="backdrop-filter"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* Estados de ratón, foco y pulsación (los mismos del prototipo) */
/* Los :hover solo en dispositivos con ratón: en pantallas táctiles un toque dejaba el efecto "pegado" */
@media (hover: hover) and (pointer: fine) {
  .scp0:hover { color: rgb(20, 20, 20) !important; }
  .scp1:hover { background: rgb(43, 46, 51) !important; color: rgb(252, 252, 250) !important; box-shadow: rgba(20, 20, 20, 0.55) 0px 14px 28px -14px !important; }
  .scp3:hover { color: rgb(31, 111, 100) !important; }
  .scp4:hover { background: rgb(43, 46, 51) !important; color: rgb(252, 252, 250) !important; box-shadow: rgba(20, 20, 20, 0.55) 0px 14px 28px -14px !important; transform: translateY(-2px) !important; }
  .scp5:hover { border-color: rgb(20, 20, 20) !important; background: rgba(20, 20, 20, 0.04) !important; }
  .scp6:hover { transform: translateY(-4px) rotate(-0.6deg) !important; }
  .scp7:hover { transform: translateY(-6px) !important; box-shadow: rgba(20, 20, 20, 0.06) 0px 2px 4px, rgba(20, 20, 20, 0.38) 0px 24px 48px -24px !important; }
  .scp8:hover { border-color: rgb(94, 196, 182) !important; gap: 14px !important; color: rgb(252, 252, 250) !important; }
  .scp9:hover { transform: scale(1.07) !important; background: rgb(99, 227, 200) !important; }
  .scpa:hover { background: rgba(255, 255, 255, 0.2) !important; }
  .scpb:hover { border-color: rgb(20, 20, 20) !important; }
  .scpc:hover { transform: translateY(-5px) !important; }
  .scpd:hover { background: rgb(20, 20, 20) !important; color: rgb(252, 252, 250) !important; border-color: rgb(20, 20, 20) !important; }
  .scpe:hover { gap: 12px !important; }
  .scpf:hover { background: rgb(99, 227, 200) !important; color: rgb(20, 20, 20) !important; box-shadow: rgba(99, 227, 200, 0.55) 0px 14px 30px -14px !important; }
  .scpg:hover { transform: translateY(-4px) !important; box-shadow: rgba(20, 20, 20, 0.06) 0px 2px 4px, rgba(20, 20, 20, 0.38) 0px 24px 48px -24px !important; }
  .scpi:hover { background: rgb(99, 227, 200) !important; color: rgb(20, 20, 20) !important; transform: translateY(-2px) !important; }
  .scpj:hover { color: rgb(252, 252, 250) !important; }
  .scpk:hover { background: rgb(43, 46, 51) !important; color: rgb(252, 252, 250) !important; }
  .scpl:hover { background: rgb(99, 227, 200) !important; color: rgb(20, 20, 20) !important; box-shadow: rgba(99, 227, 200, 0.55) 0px 14px 30px -14px !important; transform: translateY(-2px) !important; }
  .scpm:hover { border-color: rgb(252, 252, 250) !important; background: rgba(255, 255, 255, 0.07) !important; color: rgb(252, 252, 250) !important; }
}
.scp2:active { transform: scale(0.97) !important; transition-duration: 0.08s !important; }
.scph:focus { border-color: rgb(44, 138, 125) !important; box-shadow: rgba(94, 196, 182, 0.2) 0px 0px 0px 4px !important; }


/* --- Versión estática: comportamiento según el ancho, igual que el prototipo --- */
@media (max-width: 1023px) {
  [data-inv="cabecera"] nav { display: none !important; }
  [data-inv="pie"] { padding-bottom: 110px !important; }
}
@media (max-width: 559px) {
  [data-inv="cta-cabecera"] { display: none !important; }
}
@media (max-width: 959px) {
  [data-inv="cabecera-fija"] { position: static !important; }
}
@media (min-width: 1024px) {
  [data-inv="burger"],
  [data-inv="menu-panel"],
  [data-inv="menu-scrim"],
  [data-inv="barra-movil"] { display: none !important; }
}

/* --- Programas: foto reactiva al ratón --- */
[data-inv="foto-prog"] { will-change: rotate; }
[data-inv="foto-prog"] img { translate: calc(var(--px, 0) * -1.6px) calc(var(--py, 0) * -1.2px); }
[data-inv="brillo-prog"] {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(99, 227, 200, .16), rgba(99, 227, 200, 0) 62%);
  opacity: var(--go, 0);
}
@media (prefers-reduced-motion: reduce) {
  [data-inv="foto-prog"] img { translate: none; }
}

/* --- El equipo: carrusel 3D (anillo de tarjetas que gira; lo mueve runtime.js) --- */
/* Las tarjetas laterales asoman por los bordes de la pantalla: se recortan en la sección (a lo ancho de la
   pantalla) para que no ensanchen la página en móvil. "clip" no rompe la cabecera fija de la sección. */
#por-que { overflow-x: clip; }
[data-inv="coach-carrusel"] { --coach-ancho: clamp(180px, 50vw, 290px); position: relative; }
[data-inv="coach-escena"] {
  position: relative; height: calc(var(--coach-ancho) * 1.25 + 84px);
  perspective: 1400px; perspective-origin: 50% 38%;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab;
}
[data-inv="coach-escena"].arrastrando { cursor: grabbing; }
[data-inv="coach-anillo"] { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
[data-inv="coach"] {
  position: absolute; top: 0; left: 50%; width: var(--coach-ancho); margin-left: calc(var(--coach-ancho) / -2);
  cursor: pointer; will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
}
[data-inv="coach"][data-frente] { cursor: inherit; }
[data-inv="coach"] > p { transition: translate .3s cubic-bezier(0.23, 1, 0.32, 1), color .2s ease; }
[data-inv="coach-brillo"] {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-120%);
}
[data-inv="coach-aro"] {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  border: 2px solid #5EC4B6; box-shadow: inset 0 0 0 5px rgba(99, 227, 200, .16);
  opacity: 0; transform: scale(.97);
  transition: opacity .22s cubic-bezier(0.23, 1, 0.32, 1), transform .22s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes coachBrillo { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
[data-inv="coach-flecha"] {
  position: absolute; z-index: 3; top: calc(var(--coach-ancho) * .625 - 26px);
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1px solid rgba(20, 20, 20, .22); border-radius: 50%;
  background: rgba(252, 252, 250, .9); color: #141414;
  box-shadow: 0 12px 28px -18px rgba(20, 20, 20, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-inv="coach-flecha"][data-dir="-1"] { left: max(0px, calc(50% - var(--coach-ancho) * 1.45 - 26px)); }
[data-inv="coach-flecha"][data-dir="1"] { right: max(0px, calc(50% - var(--coach-ancho) * 1.45 - 26px)); }
[data-inv="coach-flecha"][aria-pressed="true"] { background: #141414; border-color: #141414; color: #63E3C8; }
[data-inv="coach-flecha"] svg { transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1); }
[data-inv="coach-flecha"][data-dir="-1"] svg { transform: scaleX(-1); }
[data-inv="coach-flecha"]:active { transform: scale(.97); transition-duration: .08s; }
[data-inv="coach-puntos"] { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
[data-inv="coach-puntos"] span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(20, 20, 20, .18);
  transition: background-color .25s ease, transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-inv="coach-puntos"] span[data-on] { background: #141414; transform: scale(1.35); }
@media (hover: hover) and (pointer: fine) {
  /* data-hover lo pone runtime.js (estable aunque la tarjeta se mueva en 3D bajo el cursor) */
  [data-inv="coach"][data-hover] [data-inv="coach-brillo"] { animation: coachBrillo .9s cubic-bezier(0.23, 1, 0.32, 1); }
  [data-inv="coach"][data-hover] [data-inv="coach-aro"] { opacity: 1; transform: scale(1); }
  [data-inv="coach"][data-hover] > p { translate: 6px 0 !important; }
  [data-inv="coach"][data-hover] > p:first-of-type { color: #1F6F64; }
  [data-inv="coach-flecha"]:not([aria-pressed="true"]):hover { border-color: #141414; }
  [data-inv="coach-flecha"][data-dir="1"]:hover svg { transform: translateX(3px); }
  [data-inv="coach-flecha"][data-dir="-1"]:hover svg { transform: scaleX(-1) translateX(3px); }
}

/* --- Movimiento reducido: sin desplazamientos, pero el color y la opacidad siguen respondiendo --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
    transition-timing-function: ease !important;
  }
  html { scroll-behavior: auto; }
}