/* Doodue — animaciones del inicio: calendario, hábitos y metas, proyecto.
   Estados: .anim.preparada = estado inicial (lo pone animaciones.js);
   .p1, .p2… = pasos. Sin JS o con "Reducir movimiento" se ve el estado final. */

.historia { padding-block: clamp(72px, 10vw, 140px); overflow: hidden; }
.historia + .historia:not(.historia-oscura) { border-top: 1px solid var(--borde); }
.historia-texto { max-width: 44rem; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; display: grid; gap: 14px; justify-items: center; }
.historia-texto h2 { font-size: clamp(2.1rem, 1.3rem + 3vw, 4rem); letter-spacing: -.025em; line-height: 1.04; }
.historia-ceja { font: 600 .82rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); }
.historia-oscura { background: #14110D; color: #F2EAD8; border: 0; }
.historia-oscura .historia-texto h2 { color: #F7F0DF; }
.historia-oscura .entrada, .historia-oscura .demo-nota { color: #C9BBA0; }
.historia-oscura .historia-ceja { color: #E0A867; }
.historia-oscura .otra-vez { color: #E8B77E; }
.anim-controles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 22px; }
.anim { position: relative; }
.anim.inicio, .anim.inicio * { transition: none !important; animation: none !important; }

:root { --c-esc: #4F7CAC; --c-gym: #5E8B5B; --c-tra: #B8843D; --c-apl: #D2574E; --c-hab: #8E6BB8; }

/* ---------------------------------------------------------------- Calendario */
.cal-ventana { position: relative; max-width: 1000px; margin-inline: auto; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: clamp(18px, 2.4vw, 30px); box-shadow: 0 1px 0 rgba(43,36,28,.05), 0 50px 90px -50px rgba(70,48,16,.55); padding: clamp(12px, 2.2vw, 26px); overflow: hidden; }
.cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-mes { position: relative; font: 600 clamp(1.15rem, .9rem + 1vw, 1.7rem)/1.2 var(--serif); letter-spacing: -.01em; min-height: 1.2em; flex: 1; }
.cal-mes > span { display: block; transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
.cal-t-sem { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); }
.cal-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: rgba(43,36,28,.07); font: 500 .85rem/1 var(--sans); }
.cal-seg span { position: relative; padding: 8px clamp(10px, 1.6vw, 18px); text-align: center; z-index: 1; color: var(--sec); transition: color .4s; }
.cal-seg span:first-of-type { color: var(--texto); }
.cal-seg-luz { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--superficie); box-shadow: 0 1px 3px rgba(0,0,0,.14); transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.cal-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde); font: 500 .78rem/1 var(--sans); color: var(--sec); }
.chip i { width: 8px; height: 8px; border-radius: 50%; }
.c-esc { background: var(--c-esc); } .c-gym { background: var(--c-gym); } .c-tra { background: var(--c-tra); } .c-apl { background: var(--c-apl); }

.cal-vistas { position: relative; }
.cal-vmes { transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.cal-cab, .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cab span { font: 600 .72rem/1 var(--sans); color: var(--sec); text-align: center; padding-bottom: 8px; }
.cal-rejilla { gap: 4px; }
.dia { position: relative; min-height: clamp(52px, 8.6vw, 96px); border-radius: 10px; background: rgba(43,36,28,.035); padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden;
  transition: opacity .5s var(--d, 0s), transform .6s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.dia.fuera { background: none; }
.dia.fuera .num { opacity: .35; }
.num { font: 600 .74rem/1 var(--sans); color: var(--sec); }
.dia.hoy .num { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--acento); color: #fff; }
.punto { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-gym);
  transition: transform .45s cubic-bezier(.3,1.6,.5,1) var(--d, 0s); }
.evento { display: block; border-radius: 6px; padding: 3px 5px; font: 500 .68rem/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid currentColor; transition: opacity .45s var(--d, 0s), transform .6s cubic-bezier(.25,1.5,.5,1) var(--d, 0s); }
.evento span { color: var(--texto); }
.ev-esc { color: var(--c-esc); background: rgba(79,124,172,.14); }
.ev-tra { color: var(--c-tra); background: rgba(184,132,61,.16); }
.ev-apl { color: var(--c-apl); background: rgba(210,87,78,.13); }
.ev-nuevo { transition: opacity .3s, transform .6s cubic-bezier(.25,1.6,.5,1); }
.anim-cal.p6 .ev-nuevo { animation: brillo 1.4s ease-out .2s 1; }
@keyframes brillo { 0% { box-shadow: 0 0 0 0 rgba(79,124,172,.55); } 100% { box-shadow: 0 0 0 10px rgba(79,124,172,0); } }

.cal-nota { position: absolute; right: clamp(14px, 4vw, 48px); bottom: clamp(14px, 3vw, 36px); width: auto; max-width: 70%; padding: 18px 18px 22px; background: #FFE59A; color: #3D5266;
  box-shadow: 0 18px 30px -16px rgba(80,60,10,.55); transform: rotate(-3deg); font: 400 clamp(1.05rem, .8rem + 1.1vw, 1.6rem)/1.25 var(--mano); z-index: 3;
  transition: transform .9s cubic-bezier(.6,0,.2,1), opacity .5s .55s; }
.cal-nota-texto { display: block; white-space: nowrap; transition: clip-path 1s steps(20, end) calc(.2s + var(--l, 0) * 1.05s); clip-path: inset(0 0 0 0); }

.cal-vsem { position: absolute; inset: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); opacity: 0; pointer-events: none; transform: scale(1.02); transition: opacity .5s .15s, transform .6s cubic-bezier(.2,.8,.2,1) .15s; }
.sem-horas-et { position: relative; margin-top: 62px; }
.sem-horas-et span { position: absolute; left: 0; transform: translateY(-50%); font: 500 .68rem/1 var(--sans); color: var(--sec); }
.sem-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sem-col { display: grid; grid-template-rows: auto 30px 1fr; gap: 4px; min-width: 0; }
.sem-dia { font: 600 .74rem/1 var(--sans); color: var(--sec); text-align: center; padding: 6px 0 4px; }
.sem-dia.hoy { color: var(--acento-texto); }
.sem-todo { min-width: 0; }
.sem-horas { position: relative; border-radius: 10px; background: repeating-linear-gradient(to bottom, rgba(43,36,28,.045) 0 1px, transparent 1px calc(100% / 5.5)), rgba(43,36,28,.03); }
.bloque, .bloque-dia { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 4px 6px; font: 600 .66rem/1.2 var(--sans); overflow: hidden; color: #fff;
  transform-origin: top; transition: transform .55s cubic-bezier(.25,1.3,.5,1) var(--d, 0s), opacity .35s var(--d, 0s); }
.bloque span, .bloque-dia span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloque-dia { position: relative; left: 0; right: 0; display: block; height: 100%; }
.b-gym { background: var(--c-gym); } .b-esc { background: var(--c-esc); } .b-tra { background: var(--c-tra); } .b-apl { background: var(--c-apl); } .b-hab { background: var(--c-hab); }
.bloque.fuerte { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }

/* Estado inicial */
.anim-cal.preparada .dia { opacity: 0; transform: translateY(10px) scale(.97); }
.anim-cal.preparada .punto { transform: scale(0); }
.anim-cal.preparada .evento { opacity: 0; transform: translateY(-16px) scale(.85); }
.anim-cal.preparada .cal-nota { opacity: 0; transform: rotate(-3deg) translateY(20px) scale(.9); }
.anim-cal.preparada .cal-nota-texto { clip-path: inset(0 100% 0 0); }
.anim-cal.preparada .bloque, .anim-cal.preparada .bloque-dia { transform: scaleY(0); opacity: 0; }
/* Pasos */
.anim-cal.p1 .dia { opacity: 1; transform: none; }
.anim-cal.p2 .punto { transform: none; }
.anim-cal.p3 .evento:not(.ev-nuevo) { opacity: 1; transform: none; }
.anim-cal.p4 .cal-nota { opacity: 1; transform: rotate(-3deg); }
.anim-cal.p4 .cal-nota-texto { clip-path: inset(0 0 0 0); }
.anim-cal.p5 .cal-nota { transform: translate(var(--vx, 0), var(--vy, 0)) scale(var(--vs, .3)) rotate(0deg); opacity: 0; }
.anim-cal.p6 .ev-nuevo { opacity: 1; transform: none; }
.anim-cal.p7 .cal-vmes { opacity: 0; transform: scale(.96); }
.anim-cal.p7 .cal-vsem { opacity: 1; transform: none; }
.anim-cal.p7 .bloque, .anim-cal.p7 .bloque-dia { transform: none; opacity: 1; transition-delay: calc(var(--d, 0s) + .45s); }
.anim-cal.p7 .cal-seg-luz { transform: translateX(100%); }
.anim-cal.p7 .cal-seg span:first-of-type { color: var(--sec); }
.anim-cal.p7 .cal-seg span:last-of-type { color: var(--texto); }
.anim-cal.p7 .cal-t-mes { opacity: 0; transform: translateY(-8px); }
.anim-cal.p7 .cal-t-sem { opacity: 1; transform: none; }
/* Sin JS: solo la vista de mes, sin la nota */
html:not(.js) .cal-nota { display: none; }

/* ---------------------------------------------------------------- Hábitos (Diseño Postal cálida) */
.hab-escenario { position: relative; display: grid; justify-items: center; }
.tel { width: min(360px, 88vw); background: #0B0907; border-radius: 52px; padding: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -40px rgba(0,0,0,.9); }
.tel-pantalla { background: #FBF0E9; color: #3A2620; border-radius: 43px; padding: 26px 16px 22px; font-family: var(--redonda); display: grid; gap: 10px; }
.tel-titulo { font: 700 1.9rem/1.1 var(--redonda); padding-inline: 4px; }
.h-tarjeta { background: #fff; border-radius: 20px; padding: 14px; box-shadow: 0 1px 2px rgba(120,60,40,.08); }
.h-stats { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: end; }
.h-anillo { position: relative; width: 84px; text-align: center; }
.h-anillo svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.h-anillo circle { fill: none; stroke-width: 11; }
.h-anillo .fondo { stroke: #F3DDD2; }
.h-anillo .avance { stroke: #C9694F; stroke-linecap: round; stroke-dasharray: 100; }
.h-anillo p { position: absolute; top: 28px; left: 0; right: 0; font: 700 1.05rem/1 var(--redonda); }
.h-anillo small, .h-trofeo small, .h-barras small { display: block; font: 500 .62rem/1.2 var(--redonda); color: #8A6A5E; }
.h-trofeo { text-align: center; padding-bottom: 2px; }
.h-trofeo svg { width: 30px; height: 30px; fill: #E2A13B; }
.h-trofeo p { font: 600 .82rem/1.2 var(--redonda); }
.h-trofeo b { font-size: 1.15rem; }
.h-barras > div { display: flex; align-items: end; gap: 4px; height: 58px; margin-top: 4px; }
.h-bar { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 3px; }
.h-bar i { align-self: end; height: var(--h); border-radius: 4px; background: #E8B4A2; transform-origin: bottom; transition: transform .7s cubic-bezier(.25,1.2,.5,1) var(--d, 0s); }
.h-bar:last-child i { background: #C9694F; }
.h-bar b { font: 600 .55rem/1 var(--redonda); color: #8A6A5E; text-align: center; }
.h-sec { font: 700 1.02rem/1.2 var(--redonda); padding: 6px 4px 0; }
.h-fila { background: #fff; border-radius: 18px; padding: 11px 12px; display: grid; gap: 8px; transition: opacity .5s var(--d, 0s), transform .6s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.h-fila-top { display: flex; align-items: center; gap: 10px; }
.h-nombre { flex: 0 1 auto; min-width: 0; font: 600 .92rem/1.2 var(--redonda); position: relative; transition: color .4s; }
.h-nombre::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,0,.2,1) .15s; }
.h-racha { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font: 700 .86rem/1 var(--redonda); color: #C9694F; }
.flama { width: 15px; height: 15px; fill: currentColor; }
.palomita { width: 24px; height: 24px; flex: none; }
.palomita circle { fill: transparent; stroke: #D8B8AA; stroke-width: 1.6; transition: fill .35s, stroke .35s; }
.palomita path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s cubic-bezier(.6,0,.2,1) .12s; }
.marcada .palomita circle, .hecho-ya .palomita circle { fill: #C9694F; stroke: #C9694F; }
.marcada .palomita path, .hecho-ya .palomita path { stroke-dashoffset: 0; }
.marcada .palomita, .hecho-ya .palomita { animation: latido .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes latido { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.h-fila.marcada .h-nombre, .h-fila.hecho-ya .h-nombre { color: #A88B80; }
.h-fila.marcada .h-nombre::after, .h-fila.hecho-ya .h-nombre::after { transform: scaleX(1); }
.h-fila.h-agua.marcada .h-nombre { color: #3A2620; }
.h-fila.h-agua.marcada .h-nombre::after { transform: scaleX(0); }
.h-cuadros { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.h-cuadros .q { aspect-ratio: 1.6; border-radius: 3px; background: #F0E2DA; transition: background .4s var(--d, 0s), transform .4s var(--d, 0s); }
.h-med .q.f, .h-med .q.hoy.marca-ok { background: #A0453A; }
.h-agua .q.f { background: #34506E; } .h-ej .q.f { background: #C9694F; } .h-leer .q.f, .h-leer .q:last-child { background: #557A4E; }
.h-med.marcada .q.hoy { background: #A0453A; } .h-agua.marcada .q.hoy { background: #34506E; } .h-ej.marcada .q.hoy { background: #C9694F; }
.marcada .q.hoy { animation: latido .5s cubic-bezier(.3,1.6,.5,1) .2s backwards; }
.h-meta { display: flex; align-items: center; gap: 10px; font: 500 .74rem/1 var(--redonda); color: #8A6A5E; }
.h-meta-barra { flex: 1; height: 6px; border-radius: 999px; background: #F0E2DA; overflow: hidden; }
.h-meta-barra i { display: block; height: 100%; width: calc(var(--m, 100) * 1%); background: #34506E; border-radius: inherit; }
.h-dejar { display: grid; gap: 2px; }
.h-dejar-nombre { font: 600 .9rem/1.2 var(--redonda); color: #8A6A5E; }
.h-dejar-dias { font: 700 2rem/1.05 var(--redonda); color: #C9694F; }
.h-dejar-dias small { font: 600 .82rem/1 var(--redonda); color: #3A2620; }
.h-dejar-ahorro { font: 600 .86rem/1.2 var(--redonda); color: #557A4E; }
.burbuja { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 18px; background: rgba(42,34,26,.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.12); color: #F7F0DF; font: 600 .95rem/1.2 var(--sans);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transition: opacity .5s, transform .7s cubic-bezier(.25,1.4,.5,1); }
.burbuja .flama { width: 20px; height: 20px; color: #E8935F; }
.burbuja .palomita { width: 22px; height: 22px; }
.burbuja .palomita circle { fill: #5B7FA6; stroke: #5B7FA6; } .burbuja .palomita path { stroke-dashoffset: 0; }
.burbuja-1 { top: 31%; left: calc(50% - 420px); }
.burbuja-2 { top: 50%; right: calc(50% - 450px); transition-delay: .25s; }
@media (max-width: 900px) { .burbuja { display: none; } }

.anim-hab.preparada .h-bar i { transform: scaleY(0); }
.anim-hab.preparada .h-fila, .anim-hab.preparada .h-dejar, .anim-hab.preparada .h-sec { opacity: 0; transform: translateY(14px); }
.anim-hab.preparada .h-cuadros .q.f { background: #F0E2DA; }
.anim-hab.preparada .burbuja { opacity: 0; transform: translateY(16px) scale(.92); }
.anim-hab .h-sec, .anim-hab .h-dejar { transition: opacity .5s .3s, transform .6s cubic-bezier(.2,.8,.2,1) .3s; }
.anim-hab.p1 .h-bar i { transform: none; }
.anim-hab.p2 .h-fila, .anim-hab.p2 .h-dejar, .anim-hab.p2 .h-sec { opacity: 1; transform: none; }
.anim-hab.p2 .h-med .q.f { background: #A0453A; } .anim-hab.p2 .h-agua .q.f { background: #34506E; }
.anim-hab.p2 .h-ej .q.f { background: #C9694F; } .anim-hab.p2 .h-leer .q.f { background: #557A4E; }
.anim-hab.p6 .h-dejar { animation: realce 1.6s ease-out; }
@keyframes realce { 0% { box-shadow: 0 0 0 0 rgba(201,105,79,.5); } 100% { box-shadow: 0 0 0 14px rgba(201,105,79,0); } }
.anim-hab.p7 .burbuja { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Proyecto */
.pro-tarjeta { max-width: 760px; margin-inline: auto; }
.pro-migas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin-bottom: 18px; font: 500 clamp(.92rem, .8rem + .5vw, 1.1rem)/1.2 var(--sans); color: var(--sec); }
.miga { padding: 7px 13px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); transition: opacity .45s, transform .55s cubic-bezier(.25,1.4,.5,1); }
.miga:last-child { background: var(--texto); color: var(--fondo); border-color: transparent; }
.miga-sep { opacity: .5; transition: opacity .45s; }
.pro-cuerpo { background: var(--superficie); border: 1px solid var(--borde); border-radius: clamp(20px, 2.4vw, 28px); padding: clamp(18px, 3vw, 32px);
  box-shadow: 0 1px 0 rgba(43,36,28,.05), 0 50px 90px -50px rgba(70,48,16,.55); transition: opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1); }
.pro-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pro-cabeza h3 { font: 600 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.05 var(--serif); letter-spacing: -.02em; }
.pro-pct { position: relative; font: 700 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--acento-texto); text-align: right; }
.pro-pct small { font: 500 .85rem/1 var(--sans); color: var(--sec); letter-spacing: 0; margin-left: 2px; }
.pro-chispas { position: absolute; top: -30px; right: -34px; width: 62px; height: 62px; overflow: visible; opacity: 0; transition: opacity .2s .45s; }
.pro-chispas line { stroke-width: 6; stroke-linecap: round; stroke-dasharray: 15; stroke-dashoffset: 0; transition: stroke-dashoffset .45s cubic-bezier(.6,0,.2,1); }
.pro-chispas line:nth-child(1) { stroke: #71ACF4; } .pro-chispas line:nth-child(2) { stroke: #FFC45E; transition-delay: .08s; } .pro-chispas line:nth-child(3) { stroke: #F6808B; transition-delay: .16s; }
.pro-barra { height: 12px; border-radius: 999px; background: rgba(43,36,28,.08); margin: 16px 0 14px; overflow: hidden; }
.pro-barra i { display: block; height: 100%; width: calc(var(--avance, 100) * 1%); border-radius: inherit; background: linear-gradient(90deg, #C99A55, var(--acento)); }
.pro-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font: 500 .9rem/1 var(--sans); color: var(--sec); margin-bottom: 14px; }
.pro-datos b { color: var(--texto); font-variant-numeric: tabular-nums; }
.pro-vistas { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(43,36,28,.07); font-size: .78rem; }
.pro-vistas span { padding: 6px 11px; border-radius: 999px; }
.pro-vistas .activa { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pro-tareas { list-style: none; margin: 0; padding: 0; display: grid; }
.p-tarea { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--borde); transition: opacity .45s var(--d, 0s), transform .55s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.p-tarea-txt { flex: 0 1 auto; min-width: 0; font: 500 1rem/1.3 var(--sans); position: relative; transition: color .4s; }
.p-tarea-txt::after { content: ""; position: absolute; left: 0; top: 55%; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,0,.2,1) .15s; }
.p-tarea-fecha { margin-left: auto; padding-left: 12px; font: 500 .82rem/1 var(--sans); color: var(--sec); white-space: nowrap; }
.p-tarea .palomita circle { stroke: var(--borde); stroke-width: 1.8; }
.p-tarea.marcada .palomita circle { fill: var(--acento); stroke: var(--acento); }
.p-tarea.marcada .p-tarea-txt { color: var(--sec); }
.p-tarea.marcada .p-tarea-txt::after { transform: scaleX(1); }

.anim-pro.preparada .miga, .anim-pro.preparada .miga-sep { opacity: 0; transform: translateX(-12px); }
.anim-pro.preparada .pro-cuerpo { opacity: 0; transform: translateY(24px) scale(.98); }
.anim-pro.preparada .p-tarea { opacity: 0; transform: translateY(10px); }
.anim-pro.preparada .pro-chispas line { stroke-dashoffset: 15; }
.anim-pro.preparada .pro-chispas { opacity: 0; }
.anim-pro.p9 .pro-chispas, html:not(.js) .pro-chispas { opacity: 1; }
.anim-pro.p1 .pro-migas > :nth-child(1), .anim-pro.p2 .pro-migas > :nth-child(-n+3), .anim-pro.p3 .pro-migas > :nth-child(-n+5), .anim-pro.p4 .pro-migas > :nth-child(-n+7) { opacity: 1; transform: none; }
.anim-pro.p5 .pro-cuerpo { opacity: 1; transform: none; }
.anim-pro.p5 .p-tarea { opacity: 1; transform: none; transition-delay: calc(var(--d, 0s) + .25s); }
.anim-pro.p9 .pro-chispas line { stroke-dashoffset: 0; transition-delay: .5s; }
.anim-pro.p9 .pro-chispas line:nth-child(2) { transition-delay: .58s; } .anim-pro.p9 .pro-chispas line:nth-child(3) { transition-delay: .66s; }
.anim-pro.p9 .pro-pct { animation: latido .6s cubic-bezier(.3,1.6,.5,1) .45s; }

/* ---------------------------------------------------------------- Pantallas chicas */
@media (max-width: 640px) {
  .evento { height: 6px; padding: 0; border-left: 0; background: currentColor; }
  .evento span { display: none; }
  .dia { padding: 4px; min-height: 46px; }
  .punto { top: 5px; right: 5px; width: 5px; height: 5px; }
  .cal-filtros .chip:nth-child(n+3) { display: none; }
  .bloque span, .bloque-dia span { display: none; }
  .cal-vsem { grid-template-columns: 30px minmax(0, 1fr); }
  .sem-horas-et span { font-size: .58rem; }
  .sem-dia { font-size: .62rem; }
  .cal-nota { right: 12px; bottom: 12px; padding: 12px 14px 14px; font-size: 1.1rem; }
  .cal-mes { font-size: 1rem; }
  .pro-chispas { right: -6px; top: -34px; width: 48px; height: 48px; }
  .pro-vistas { margin-left: 0; }
  .p-tarea-fecha { display: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dia { background: rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .cal-seg, :root:not([data-theme="light"]) .pro-vistas, :root:not([data-theme="light"]) .pro-barra { background: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .sem-horas { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px calc(100% / 5.5)), rgba(255,255,255,.03); }
  :root:not([data-theme="light"]) .cal-ventana, :root:not([data-theme="light"]) .pro-cuerpo { box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 50px 90px -50px rgba(0,0,0,.9); }
}