/* Clips de alambre con doble vuelta, color y reflejo. */
.paper-sheet::before,dialog.note-dialog::before { display: none; }
.real-paperclip { position: absolute; right: 22px; top: 6px; width: 28px; height: 56px; overflow: visible; transform: rotate(14deg); transform-origin: top center; filter: drop-shadow(2px 2px 1px rgb(15 23 42 / .3)); pointer-events: none; z-index: 2; }
.real-paperclip .clip-wire { stroke: var(--clip-color, #2DD4BF); stroke-width: 5; }
.real-paperclip .clip-shadow { stroke: #0F172A; stroke-opacity: .5; stroke-width: 6.5; }
.real-paperclip .clip-reflection { stroke: #FFFDF5; stroke-opacity: .75; stroke-width: 1.3; transform: translateX(-.8px); }
.paper-sheet:hover > .real-paperclip { animation: clip-swing 650ms ease-in-out; }
dialog.note-dialog .real-paperclip { height: 46px; top: 5px; }
@keyframes clip-swing { 0%,100% { transform: rotate(14deg); } 35% { transform: rotate(21deg); } 70% { transform: rotate(10deg); } }
/* Los trazos permanecen en el lienzo azul, detrás del contenido. */
.notebook-background { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
body > main,body > footer { position: relative; z-index: 1; }
.notebook-background path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: child-pencil 12s ease-in-out infinite; }
.notebook-background path:nth-child(2) { animation-delay: -3s; }
.notebook-background path:nth-child(3) { animation-delay: -6s; }
.notebook-background path:nth-child(4) { animation-delay: -9s; }
.notebook-background path:nth-child(5) { animation-delay: -1.5s; }
.notebook-background path:nth-child(6) { animation-delay: -4.5s; }
.notebook-background path:nth-child(7) { animation-delay: -7.5s; }
@keyframes child-pencil { 0%,5% { opacity: 0; stroke-dashoffset: 1; } 12% { opacity: .7; } 42%,65% { opacity: .65; stroke-dashoffset: 0; } 90%,100% { opacity: 0; stroke-dashoffset: 0; } }
/* Encendido visible, sin cambiar el tamaño de las zonas de interacción. */
main .ui-icon,.brand-header .header-download .ui-icon { border-radius: 5px; animation: icon-switch-on 4.8s ease-in-out infinite; }
main .ui-icon.icon-phase-1 { animation-delay: -1.2s; }
main .ui-icon.icon-phase-2 { animation-delay: -2.4s; }
main .ui-icon.icon-phase-3 { animation-delay: -3.6s; }
main .ui-icon :is(circle,rect,ellipse) { fill: rgb(45 212 191 / .38); }
@keyframes icon-switch-on {
  0%,65%,100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; filter: none; transform: scale(1); }
  28%,42% { background-color: #FFF6CC; box-shadow: 0 0 0 4px rgb(45 212 191 / .25),0 0 16px rgb(45 212 191 / .65); filter: drop-shadow(0 0 2px #8ABBE6); transform: scale(1.12); }
}
@media(max-width:600px) { .notebook-background path { stroke-width: 2.5; } }
.home-hero .hero-badges > div { color: #0F172A; }
.home-hero .hero-badges > div:nth-child(1) { background-color: #8ABBE6; --badge-glow: #8ABBE6; }
.home-hero .hero-badges > div:nth-child(2) { background-color: #FFAD84; --badge-glow: #FFAD84; }
.home-hero .hero-badges > div:nth-child(3) { background-color: #2DD4BF; --badge-glow: #2DD4BF; }
.hero-badges .ui-icon { animation: badge-light 3.6s ease-in-out infinite; background: #FFFDF5; }
.hero-badges > div:nth-child(2) .ui-icon { animation-delay: -.9s; }
.hero-badges > div:nth-child(3) .ui-icon { animation-delay: -1.8s; }
@keyframes badge-light {
  0%,70%,100% { box-shadow: 0 0 0 1px rgb(255 253 245 / .4); filter: drop-shadow(0 0 1px var(--badge-glow)); transform: scale(1); }
  30%,45% { box-shadow: 0 0 0 4px rgb(255 253 245 / .65),0 0 15px var(--badge-glow); filter: drop-shadow(0 0 5px var(--badge-glow)); transform: scale(1.12); }
}
.hero-mascot .fokito-bulb { overflow: visible; border-radius: 50%; background: #FFF6CC; animation: fokito-bulb-light 2.8s ease-in-out infinite; }
.hero-mascot .fokito-bulb path { fill: #FFF6CC; stroke: #0F172A; }
@keyframes fokito-bulb-light {
  0%,100% { box-shadow: 0 0 5px 3px #FFF6CC,0 0 10px 4px rgb(255 173 132 / .5); filter: drop-shadow(0 0 3px #FFAD84); transform: scale(1); }
  45%,60% { box-shadow: 0 0 9px 5px #FFF6CC,0 0 20px 9px rgb(255 173 132 / .7); filter: drop-shadow(0 0 8px #FFAD84); transform: scale(1.16); }
}
@media(prefers-reduced-motion:reduce) {
  .real-paperclip,.notebook-background path,main .ui-icon,.brand-header .header-download .ui-icon { animation: none !important; }
  .notebook-background path { stroke-dashoffset: 0; opacity: .16; }
  .hero-badges .ui-icon,.hero-mascot .fokito-bulb { animation: none !important; }
}