/* HabitHackr — tarjetas que se transforman en sus rutas.
   El fondo de cada tarjeta se copia en tiempo real desde el CSS existente. */
#routeBackdrop{
  display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;overflow:hidden;border-radius:0;
  background-repeat:no-repeat;background-attachment:scroll;
  isolation:isolate;
  will-change:left,top,width,height,border-radius;
}
/* Copiamos LAS DOS películas transparentes de la tarjeta, respetando
   su posición respecto al fondo base y manteniendo el auténtico cristal. */
#routeBackdrop::before,#routeBackdrop::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
}
#routeBackdrop::before{
  background:var(--route-before-bg,transparent);
  z-index:1;
}
#routeBackdrop::after{
  background:var(--route-after-bg,transparent);
  z-index:0;
}
#routeBackdrop.moving{
  z-index:55;
  transition:left 1450ms cubic-bezier(.22,.72,.16,1),
    top 1450ms cubic-bezier(.22,.72,.16,1),
    width 1450ms cubic-bezier(.22,.72,.16,1),
    height 1450ms cubic-bezier(.22,.72,.16,1),
    border-radius 1450ms cubic-bezier(.22,.72,.16,1),
    box-shadow 1450ms cubic-bezier(.22,.72,.16,1);
}
body.route-in-motion{overflow:hidden}
body.route-in-motion .wrap{pointer-events:none}
.route-flight{
  position:fixed;z-index:60;pointer-events:none;white-space:nowrap;
  max-width:calc(100vw - 24px);overflow:visible;
  margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  transition:left 1450ms cubic-bezier(.22,.72,.16,1),
    top 1450ms cubic-bezier(.22,.72,.16,1),
    font-size 1450ms cubic-bezier(.22,.72,.16,1),
    letter-spacing 1450ms cubic-bezier(.22,.72,.16,1),
    color 1450ms cubic-bezier(.22,.72,.16,1);
  text-shadow:0 2px 20px rgba(0,0,0,.09);
}
/* El mismo cuadrado interior viaja desde la tarjeta hasta el botón de regreso. */
#backToEntry{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:58px;
  padding:7px 17px 7px 8px;
  border-radius:21px;
  white-space:nowrap;
}
#backToEntry .routeBackArrow{
  display:inline-grid;
  place-items:center;
  flex:none;
}
#backToEntry .routeBackArrow .choiceArrow{
  flex:none;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:16px;
  transform:rotate(180deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 26px rgba(0,0,0,.15);
}
body.route-study #backToEntry .choiceArrow{
  color:#fff;
  border:1px solid rgba(14,74,240,.65);
  background:radial-gradient(110px 80px at 20% 12%,rgba(14,74,240,.82),transparent 66%),
    linear-gradient(180deg,rgba(9,24,135,.84),rgba(5,14,78,.70));
}
body.route-personal #backToEntry .choiceArrow{
  color:#fff;
  border:1px solid rgba(245,87,2,.72);
  background:radial-gradient(110px 80px at 20% 12%,rgba(245,87,2,.86),transparent 66%),
    linear-gradient(180deg,rgba(171,49,0,.86),rgba(102,29,0,.72));
}
.route-arrow-flight{
  position:fixed;
  display:grid;place-items:center;
  z-index:61;
  pointer-events:none;
  transform-origin:center center;
  transition:left 1450ms cubic-bezier(.22,.72,.16,1),
    top 1450ms cubic-bezier(.22,.72,.16,1),
    transform 1450ms cubic-bezier(.22,.72,.16,1);
}
body.route-in-motion #backToEntry .routeBackArrow{visibility:hidden}

#contentShell.route-pending,#entryPanel.route-pending{visibility:hidden!important}
#contentShell.route-ready .contentTopbar{animation:routeContentArrival .72s .12s both}
#contentShell.route-ready .contentView.active > .section{
  animation:routeContentArrival .98s .36s both;
}
#contentShell.route-ready .contentView.active > .section:nth-child(2){
  animation-delay:.65s;
}
@keyframes routeContentArrival{
  from{opacity:0;transform:translateY(26px);filter:blur(5px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* Encabezados también de cristal: el fondo se percibe a través de ellos. */
body.route-study #contentShell .contentTopbar > div,
body.route-personal #contentShell .contentTopbar > div{
  padding:clamp(18px,3vw,28px);
  border:1px solid rgba(255,255,255,.35);
  border-radius:26px;
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  box-shadow:0 20px 48px rgba(19,16,52,.12),inset 0 1px 0 rgba(255,255,255,.25);
}
body.route-study #contentShell .contentTopbar > div{background:rgba(255,255,255,.09)}
body.route-personal #contentShell .contentTopbar > div{background:rgba(255,255,255,.42)}

/* Ruta 01 — fondo azul; títulos naranjas suaves y texto blanco.
   Cada tarjeta es un cristal translúcido, NO una placa opaca. */
body.route-study #contentShell .contentTopbar h1,
body.route-study #contentShell .contentTopbar .eyebrow,
body.route-study #studyContent .sectionTitle{
  color:#ffc9a5!important;
  text-shadow:0 2px 16px rgba(7,13,60,.18);
}
body.route-study #contentShell .contentTopbar p:not(.eyebrow){
  color:rgba(255,255,255,.88);
}
body.route-study #studyContent .card{
  background:
    radial-gradient(62vw 36vh at 0% 0%,rgba(255,255,255,.15),transparent 65%),
    linear-gradient(145deg,rgba(255,255,255,.22),rgba(242,247,255,.10))!important;
  border:1px solid rgba(255,255,255,.40)!important;
  box-shadow:0 22px 54px rgba(2,9,66,.18),inset 0 1px 0 rgba(255,255,255,.32)!important;
  backdrop-filter:blur(24px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(125%)!important;
}
body.route-study #studyContent .listWrap{
  background:none!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
body.route-study #studyContent .infoCard .eyebrow{
  color:#ffd2b4!important;
}
body.route-study #studyContent .infoCard .lead,
body.route-study #studyContent .videoSub{
  color:rgba(255,255,255,.90)!important;
}
body.route-study #studyContent .videoTitle{color:#fff!important}
body.route-study #studyContent .infoCard .ghostBtn{
  color:#fff!important;
  background:rgba(5,19,96,.30)!important;
  border-color:rgba(255,255,255,.42)!important;
  backdrop-filter:blur(14px);
}
body.route-study #studyContent .infoCard .ghostBtn:hover{
  background:rgba(255,255,255,.20)!important;
}
body.route-study #backToEntry{
  color:#fff;background:rgba(5,19,96,.26);
  border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(18px);
}

/* Ruta 02 — exactamente la mezcla naranja de su tarjeta sobre un fondo
   naranja cálido. Solo los títulos principales de la página son azules. */
body.route-personal #contentShell .contentTopbar h1,
body.route-personal #personalContent .sectionTitle{
  color:#091887!important;text-shadow:0 1px 12px rgba(255,255,255,.25);
}
body.route-personal #contentShell .contentTopbar .eyebrow,
body.route-personal #contentShell .contentTopbar p:not(.eyebrow){
  color:#302124!important;
}
body.route-personal #personalContent .ritmoTextCard,
body.route-personal #personalContent .ritmoActionCard{
  background:
    radial-gradient(58vw 40vh at 100% 0%,rgba(255,255,255,.18),transparent 70%),
    linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,246,238,.34))!important;
  border:1px solid rgba(255,255,255,.52)!important;
  box-shadow:0 20px 56px rgba(90,29,4,.15),inset 0 1px 0 rgba(255,255,255,.40)!important;
  backdrop-filter:blur(25px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(25px) saturate(125%)!important;
}
body.route-personal #personalContent .ritmoTextCard h3,
body.route-personal #personalContent .ritmoActionCard h3{
  color:#271b1d!important;
}
body.route-personal #personalContent .eyebrow,
body.route-personal #personalContent .ritmoTextCard p:not(.eyebrow){
  color:#302124!important;
}
body.route-personal #personalContent .viewBtn{
  color:white;background:rgba(88,32,17,.83)!important;
  border:1px solid rgba(255,255,255,.34);
}
body.route-personal #personalContent .ghostBtn{
  color:#2a1719!important;background:rgba(255,255,255,.26)!important;
  border-color:rgba(91,35,20,.30)!important;
}
body.route-personal #backToEntry{
  color:#fff;background:rgba(91,34,15,.30);border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(18px);
}
@media(max-width:640px){
  body.route-study #studyContent .infoCard{padding:26px 22px}
  #contentShell.route-ready .contentView.active > .section{animation-duration:.82s}
}
@media(prefers-reduced-motion:reduce){
  #routeBackdrop.moving,.route-flight,.route-arrow-flight{transition:none!important}
  #contentShell.route-ready .contentTopbar,
  #contentShell.route-ready .contentView.active > .section{animation:none!important}
}

/* v2026-10-12: revelado cinematográfico DESPUÉS de la expansión.
   El título llega con la transición; a continuación cristal, textos y tarjetas. */
#contentSubtitle[hidden]{display:none!important}

/* Desactivar la antigua entrada de medio segundo mientras está activa
   la versión secuenciada. Cada elemento entra con su propio ritmo. */
#contentShell.route-ready .contentTopbar,
#contentShell.route-ready .contentView.active > .section,
#contentShell.route-ready .contentView.active > .section > *,
#contentShell.route-ready .contentView.active .listWrap > *{
  animation:none!important;
}
#contentShell.route-ready .contentTopbar > div{
  animation:hhHeaderTextArrive 1150ms cubic-bezier(.2,.75,.2,1) .08s both!important;
}
#contentShell.route-ready .contentTopbar > #backToEntry{
  animation:hhSceneAppear 1200ms cubic-bezier(.2,.75,.2,1) .45s both!important;
}

/* La burbuja se materializa detrás del título; no aparece ya dibujada
   cuando termina la animación del encabezado. */
body.route-study #contentShell .contentTopbar > div,
body.route-personal #contentShell .contentTopbar > div{
  position:relative;
  isolation:isolate;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.route-study #contentShell .contentTopbar > div{
  --hh-head-glass:rgba(255,255,255,.09);
}
body.route-personal #contentShell .contentTopbar > div{
  --hh-head-glass:rgba(255,255,255,.42);
}
#contentShell .contentTopbar > div::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.38);
  border-radius:inherit;
  background:var(--hh-head-glass,rgba(255,255,255,.16));
  box-shadow:0 20px 48px rgba(19,16,52,.12),inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  z-index:0;
  pointer-events:none;
}
#contentShell .contentTopbar > div > *{
  position:relative;
  z-index:1;
}
#contentShell.route-ready .contentTopbar > div::before{
  animation:hhGlassMaterialize 1750ms cubic-bezier(.18,.75,.2,1) .32s both!important;
}

/* Los encabezados de sección llegan antes que el contenido. */
#contentShell.route-ready .contentView.active > .section > .sectionTitle{
  animation:hhSceneAppear 1150ms cubic-bezier(.2,.75,.2,1) .72s both!important;
}
/* Ruta 01: vídeo, explicación y siguiente vídeo entran escalonados. */
#contentShell.route-ready #studyContent .heroGrid > .card:first-child{
  animation:hhGlassCardArrive 1450ms cubic-bezier(.2,.75,.2,1) 1.12s both!important;
}
#contentShell.route-ready #studyContent .heroGrid > .card:nth-child(2){
  animation:hhGlassCardArrive 1450ms cubic-bezier(.2,.75,.2,1) 1.47s both!important;
}
#contentShell.route-ready #studyContent .section:nth-child(2) > .sectionTitle{
  animation-delay:1.78s!important;
}
#contentShell.route-ready #studyContent .comingSoon{
  animation:hhGlassCardArrive 1450ms cubic-bezier(.2,.75,.2,1) 2.04s both!important;
}
/* Ruta 02: primer cuadro de presentación y después las acciones. */
#contentShell.route-ready #personalContent .ritmoStory > .ritmoTextCard{
  animation:hhGlassCardArrive 1550ms cubic-bezier(.2,.75,.2,1) 1.15s both!important;
}
#contentShell.route-ready #personalContent .ritmoStory > .ritmoActionCard{
  animation:hhGlassCardArrive 1550ms cubic-bezier(.2,.75,.2,1) 1.68s both!important;
}
@keyframes hhHeaderTextArrive{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes hhGlassMaterialize{
  0%{opacity:0;transform:scale(.985);filter:blur(10px)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
@keyframes hhSceneAppear{
  from{opacity:0;transform:translateY(25px);filter:blur(5px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes hhGlassCardArrive{
  0%{opacity:0;transform:translateY(38px) scale(.988);filter:blur(8px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

/* Regreso a la portada: cada letra tiene su propia subida.
   Las azules forman una oleada simultánea; las naranjas otra. */
#entryPanel.welcome-return .welcomeTitle .titleBlue,
#entryPanel.welcome-return .welcomeTitle .titleOrange{
  display:inline-block;
  opacity:0;
  animation:hhWelcomeLetter 1400ms cubic-bezier(.19,.8,.2,1) both;
  will-change:transform,opacity,filter;
}
#entryPanel.welcome-return .welcomeTitle .titleBlue{
  animation-delay:.13s;
}
#entryPanel.welcome-return .welcomeTitle .titleOrange{
  animation-delay:.42s;
}
#entryPanel.welcome-return .accessHint{
  animation:hhSceneAppear 1150ms .52s both;
}
#entryPanel.welcome-return .choiceGrid{
  animation:hhSceneAppear 1350ms .72s both;
}
#entryPanel.welcome-return .accessBox{
  animation:hhSceneAppear 1400ms .94s both;
}
@keyframes hhWelcomeLetter{
  0%{opacity:0;transform:translateY(42px);filter:blur(7px)}
  70%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  #entryPanel.welcome-return .welcomeTitle .titleBlue,
  #entryPanel.welcome-return .welcomeTitle .titleOrange,
  #entryPanel.welcome-return .accessHint,
  #entryPanel.welcome-return .choiceGrid,
  #entryPanel.welcome-return .accessBox,
  #contentShell.route-ready .contentTopbar > div,
  #contentShell.route-ready .contentTopbar > #backToEntry,
  #contentShell.route-ready .contentTopbar > div::before,
  #contentShell.route-ready .contentView.active > .section > .sectionTitle,
  #contentShell.route-ready #studyContent .heroGrid > .card,
  #contentShell.route-ready #studyContent .comingSoon,
  #contentShell.route-ready #personalContent .ritmoStory > .card{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}


/* Cada letra reaparece de una en una, de izquierda a derecha, sin separar
   la velocidad por color. Los colores originales se conservan. */
#entryPanel.welcome-return .welcomeTitle .titleBlue,
#entryPanel.welcome-return .welcomeTitle .titleOrange{
  animation-delay:calc(.08s + var(--hh-letter-index, 0) * .075s)!important;
  animation-duration:950ms!important;
}
/* El cuadro al que acabamos de volver YA es visible. No se reanima:
   únicamente aparece el resto de la portada. */
#entryPanel.welcome-return .choiceGrid{animation:none!important}
#entryPanel.welcome-return .choiceCard.route-return-target{
  opacity:1!important;
  animation:none!important;
  filter:none!important;
}
#entryPanel.welcome-return .choiceCard:not(.route-return-target){
  animation:hhSceneAppear 1100ms cubic-bezier(.2,.75,.2,1) .6s both!important;
}