/* ===================================================================== CAPA DE TEMPORADA · MIDES · septiembre 2026 Decoración estacional para los cinco sistemas. La enciende temporada.js con el calendario de Guatemala; aquí solo se dibuja. Lo que esta hoja NO hace, y por qué: · NO asigna ni un token ajeno (--jade, --oro, --tang, --celeste, --texto, --cuerpo-fondo, --ok, --critico…). Cada persona eligió su paleta -12 en el cómic, ~20 en el institucional- y una decoración de temporada no tiene ningún derecho a pisarla: sería cambiarle el sistema entero por un adorno de diez días. Todo lo que se define aquí lleva prefijo --temporada-, y de los tokens ajenos solo se LEE data-paleta-tipo y data-comic-tema para saber si el fondo es claro. · NO usa body::before ni body::after. Las dos ranuras ya están ocupadas en las cinco apps: la textura de glifos (repo/estilo.css:85, sellada con !important) y la aurora (actas-repo/index.html:236). Todo cuelga del único div #temporadaCapa que inyecta el JS. · NO pinta el fondo del : en el cómic está sellado con !important en las cuatro propiedades y ganarle exigiría otro !important que nadie quiere heredar. Esta hoja no usa !important en ninguna línea. · CERO recursos externos: ni fuentes, ni imágenes, ni siquiera un SVG en data: URI -la CSP de Supervisión es default-src 'none' sin img-src, así que un data: en background-image también se bloquearía-. Todo es gradiente, clip-path, border-radius y mask. · Sin data-temporada en no pinta absolutamente nada: todos los selectores arrancan por ahí. Ese es el apagado y el estado por defecto. ===================================================================== */ /* --------------------------------------------------------------------- 1 · TINTA Tres niveles. El techo absoluto es .22 y ningún color de esta hoja lo pasa: la capa se ve a media mañana de reojo, no se mira. --------------------------------------------------------------------- */ html[data-temporada]{ --temporada-filo:.13; /* el cambio de color del canto */ --temporada-motivo:.09; /* el motivo grande que sangra por una esquina */ --temporada-eco:.12; /* el segundo motivo, pequeño */ /* La brasa de la antorcha: el único color que no sale de las cinco paletas, porque el corazón de una llama es más claro que su naranja. */ --temporada-brasa-rgb:255,243,208; /* Tonos -y una capa entera- que cambian según el fondo. Se declaran aquí con el valor de las paletas OSCURAS; el bloque de paletas claras los pisa. */ --temporada-velo-rgb:var(--temporada-2-rgb); /* halloween · morado de anochecer */ --temporada-velo-img:radial-gradient(140% 110% at 50% 0%, rgba(var(--temporada-velo-rgb),0) 55%, rgba(var(--temporada-velo-rgb),var(--temporada-filo)) 100%); --temporada-hilo-rgb:var(--temporada-5-rgb); /* difuntos · anillos de papel de china */ --temporada-hueso-rgb:var(--temporada-5-rgb); /* difuntos · la calavera */ --temporada-costilla-rgb:var(--temporada-3-rgb); /* halloween · costillas de la calabaza */ --temporada-copo-rgb:var(--temporada-4-rgb); /* navidad · los copos */ --temporada-asta-rgb:var(--temporada-4-rgb); /* patria · el palo de la antorcha */ --temporada-bandera-rgb:var(--temporada-4-rgb); /* difuntos · la quinta banderita del papel picado */ --temporada-punta-a-rgb:var(--temporada-3-rgb); /* navidad · la punta izquierda del filo */ --temporada-punta-b-rgb:var(--temporada-2-rgb); /* navidad · la punta derecha */ } html[data-temporada][data-temporada-intensidad="discreto"]{ --temporada-filo:.13 } html[data-temporada][data-temporada-intensidad="normal"]{ --temporada-filo:.15; --temporada-motivo:.09 } html[data-temporada][data-temporada-intensidad="festivo"]{ --temporada-filo:.18; --temporada-motivo:.12; --temporada-eco:.14 } /* PALETAS CLARAS · más alfa donde se puede, y menos donde el contraste manda. La primera mitad es la de siempre: un color tenue sobre papel casi blanco contrasta MUCHO menos que sobre obsidiana, porque la distancia de luminancia entre la tinta y el fondo se acorta; con .13 sobre papel no se ve nada. La segunda mitad la puso la medición. El texto que va directo sobre el lienzo tiene que seguir por encima de 4.5:1, y en eso el contrato no admite matices: la capa no puede bajar el contraste de lo que ya cumple. Con la aritmética de la WCAG sobre las nueve paletas claras del institucional y su texto-tenue, el filo no aguanta más de .18, y los motivos que se APILAN (cuerpo + costilla de la calabaza, cuña + anillo del barrilete) no pasan de .12. Por eso en «festivo» la alfa clara ya no sube por encima de la oscura: ahí manda el contraste y no el gusto. Las claras del cómic son exactamente papel, nube, rosa y menta-clara; en el institucional basta con data-paleta-tipo (~20 paletas y no conviene enumerarlas). */ html[data-temporada][data-temporada-intensidad="discreto"][data-paleta-tipo="claro"], html[data-temporada][data-temporada-intensidad="discreto"][data-comic-tema="papel"], html[data-temporada][data-temporada-intensidad="discreto"][data-comic-tema="nube"], html[data-temporada][data-temporada-intensidad="discreto"][data-comic-tema="rosa"], html[data-temporada][data-temporada-intensidad="discreto"][data-comic-tema="menta-clara"]{ --temporada-filo:.16; } html[data-temporada][data-temporada-intensidad="normal"][data-paleta-tipo="claro"], html[data-temporada][data-temporada-intensidad="normal"][data-comic-tema="papel"], html[data-temporada][data-temporada-intensidad="normal"][data-comic-tema="nube"], html[data-temporada][data-temporada-intensidad="normal"][data-comic-tema="rosa"], html[data-temporada][data-temporada-intensidad="normal"][data-comic-tema="menta-clara"]{ --temporada-filo:.17; --temporada-motivo:.12; } html[data-temporada][data-temporada-intensidad="festivo"][data-paleta-tipo="claro"], html[data-temporada][data-temporada-intensidad="festivo"][data-comic-tema="papel"], html[data-temporada][data-temporada-intensidad="festivo"][data-comic-tema="nube"], html[data-temporada][data-temporada-intensidad="festivo"][data-comic-tema="rosa"], html[data-temporada][data-temporada-intensidad="festivo"][data-comic-tema="menta-clara"]{ /* Mismos valores que en oscuro: aquí el techo de contraste ya está tocando y subir más hundiría el texto por debajo de AA. */ --temporada-filo:.18; --temporada-motivo:.12; --temporada-eco:.14; } /* Y los tonos que además hay que CAMBIAR, no solo subir. Dos motivos: los que DESAPARECEN sobre papel (el blanco de asta, la crema, la brasa) y los que PESAN demasiado (el carbón de las costillas hundía el texto de 6.00:1 a 3.94:1; el verde de pino y el rojo de Pascua en las puntas del filo, y el morado de ofrenda en el papel picado, se pasaban por poco). Nada de esto toca las paletas oscuras, donde todos esos colores están bien. */ html[data-temporada][data-paleta-tipo="claro"], html[data-temporada][data-comic-tema="papel"], html[data-temporada][data-comic-tema="nube"], html[data-temporada][data-comic-tema="rosa"], html[data-temporada][data-comic-tema="menta-clara"]{ /* Halloween: en paleta clara no se oscurece NADA. El velo de anochecer se cambia por un filo de 3px de ámbar en el canto de arriba. Dos razones, y la segunda es la que manda: oscurecer un fondo papel lo ensucia y parece un error de impresión; y un velo que cubre TODA la pantalla se suma a cualquier motivo que caiga encima -y la calabaza cae encima-, que es justo donde se perdía el contraste. Un filo arriba no se apila con nada. */ --temporada-velo-rgb:var(--temporada-1-rgb); --temporada-velo-img:linear-gradient(180deg, rgba(var(--temporada-velo-rgb),var(--temporada-filo)) 0 3px, rgba(var(--temporada-velo-rgb),0) 3px); /* La calavera en blanco cal no se ve sobre papel. Va en rojo de papel de china, que es con lo que se pican de verdad; el morado de ofrenda lee bien pero es el color que ensucia y encima no le queda margen de alfa. */ --temporada-hueso-rgb:var(--temporada-1-rgb); /* Los anillos del barrilete NO cambian: el blanco cal cae siempre sobre una cuña con tinta, así que se lee como el pliegue del papel, y es lo que menos contraste roba. Las costillas de la calabaza tampoco: el oro viejo sirve para las dos familias de paleta; el carbón era el defecto. */ --temporada-copo-rgb:var(--temporada-5-rgb); /* terracota: la crema desaparece */ --temporada-asta-rgb:var(--temporada-5-rgb); /* verde de ceiba: el blanco de asta era invisible */ --temporada-brasa-rgb:var(--temporada-3-rgb); /* amarillo de farol en el corazón de la llama */ --temporada-bandera-rgb:var(--temporada-2-rgb); /* maíz en vez de morado de ofrenda */ --temporada-punta-a-rgb:var(--temporada-1-rgb); /* las dos puntas del filo de navidad, en oro: */ --temporada-punta-b-rgb:var(--temporada-1-rgb); /* el verde y el rojo pesan demasiado sobre papel */ } /* --------------------------------------------------------------------- 2 · LA CAPA Un div fijo, vacío, mudo y sordo. z-index negativo: va DETRÁS del contenido, muy por debajo del banner de versión (99999) y del botón de paletas del cómic (2147483000). Con z-index:0 se pondría por delante del texto -el contenido sin posicionar se pinta antes que los positivos- y teñiría la letra; con -1 se pinta sobre el fondo del lienzo y bajo todo lo demás, que es exactamente lo que hace la textura de glifos. --------------------------------------------------------------------- */ html[data-temporada] #temporadaCapa{ position:fixed; inset:0; z-index:-1; pointer-events:none; /* nunca intercepta un clic */ overflow:hidden; /* los motivos sangran por las esquinas: aquí se recortan */ contain:layout paint style; /* no puede empujar ni repintar nada del sistema */ background-repeat:no-repeat; } /* La única animación: una entrada y se acabó. Quien trabaja ocho horas con esto delante no debe ver NADA moviéndose, así que no hay bucles y solo la usan las intensidades festivas. Es únicamente opacidad, sin transform, para que el escalado de pantallas pequeñas no se lo lleve por delante al acabar. */ @keyframes temporada-asoma{ from{ opacity:0 } to{ opacity:1 } } /* ===================================================================== 3 · PATRIA · 1 al 30 de septiembre Motivos: la antorcha (llama grande sangrando por la esquina inferior izquierda, y la antorcha completa -palo + llama- en festivo) y las dos bandas de la bandera pegadas a los cantos. ===================================================================== */ html[data-temporada="patria"]{ --temporada-1:#4E9BD8; --temporada-1-rgb:78,155,216; /* azul cielo de bandera */ --temporada-2:#FF8A1F; --temporada-2-rgb:255,138,31; /* naranja de antorcha */ --temporada-3:#FFC93C; --temporada-3-rgb:255,201,60; /* amarillo de farol */ --temporada-4:#F7FAFC; --temporada-4-rgb:247,250,252; /* blanco de asta */ --temporada-5:#146B3A; --temporada-5-rgb:20,107,58; /* verde de ceiba */ } /* Filo · la construcción de la bandera: dos franjas de 3px en los cantos. En «discreto» esto es TODO lo que se ve. */ html[data-temporada="patria"] #temporadaCapa{ background-image: linear-gradient(rgba(var(--temporada-1-rgb),var(--temporada-filo)), rgba(var(--temporada-1-rgb),var(--temporada-filo))), linear-gradient(rgba(var(--temporada-1-rgb),var(--temporada-filo)), rgba(var(--temporada-1-rgb),var(--temporada-filo))); background-size:3px 100%, 3px 100%; background-position:left top, right top; } /* Motivo grande · la llama, recortada con clip-path y rellena de brasa a naranja. Sangra por la esquina: solo se ve un trozo, como una bandera que asoma por una ventana. */ html[data-temporada="patria"]:not([data-temporada-intensidad="discreto"]) #temporadaCapa::before{ content:''; position:absolute; left:-104px; bottom:-130px; width:320px; height:410px; transform-origin:left bottom; clip-path:polygon(50% 0%,78% 38%,84% 66%,66% 92%,34% 92%,16% 66%,22% 38%); background:radial-gradient(56% 46% at 50% 64%, rgba(var(--temporada-brasa-rgb),var(--temporada-motivo)) 0%, rgba(var(--temporada-3-rgb),var(--temporada-motivo)) 40%, rgba(var(--temporada-2-rgb),var(--temporada-motivo)) 100%); } /* Festivo (14 y 15) · la antorcha de mano. El palo va en el fondo de la capa y no en el pseudo-elemento porque el clip-path de la llama recortaría cualquier cosa que compartiera su caja. */ html[data-temporada="patria"][data-temporada-intensidad="festivo"] #temporadaCapa{ background-image: linear-gradient(108deg, rgba(var(--temporada-asta-rgb),0) 42%, rgba(var(--temporada-asta-rgb),var(--temporada-eco)) 42% 50%, rgba(var(--temporada-5-rgb),var(--temporada-eco)) 50% 58%, rgba(var(--temporada-5-rgb),0) 58%), linear-gradient(rgba(var(--temporada-1-rgb),var(--temporada-filo)), rgba(var(--temporada-1-rgb),var(--temporada-filo))), linear-gradient(rgba(var(--temporada-1-rgb),var(--temporada-filo)), rgba(var(--temporada-1-rgb),var(--temporada-filo))); background-size:26px 28px, 3px 100%, 3px 100%; /* El palo termina por debajo de donde empieza la tinta de la llama, sin tocarla: dos motivos que se cruzan suman su tinta, y sumados hundían el texto por debajo de AA justo en el cruce. La punta de la llama baja más de lo que parece -el clip-path la cierra al 92% de la caja-, así que el palo se aparta 10px en total. A esta escala el hueco no se ve; el cruce sí se medía. */ background-position:right 82px bottom 4px, left top, right top; } html[data-temporada="patria"][data-temporada-intensidad="festivo"] #temporadaCapa::after{ content:''; position:absolute; right:82px; bottom:38px; width:26px; height:30px; clip-path:polygon(50% 0%,78% 38%,84% 66%,66% 92%,34% 92%,16% 66%,22% 38%); background:radial-gradient(58% 48% at 50% 62%, rgba(var(--temporada-brasa-rgb),var(--temporada-eco)) 0%, rgba(var(--temporada-3-rgb),var(--temporada-eco)) 42%, rgba(var(--temporada-2-rgb),var(--temporada-eco)) 100%); } /* ===================================================================== 4 · HALLOWEEN · 24 al 31 de octubre Motivos: la viñeta de anochecer y la calabaza (grande sangrando por la esquina inferior derecha; pequeña, con rabo, en festivo). SIN cara tallada, sin telarañas y sin sangre: esto es un sistema del Estado y la fiesta entra de puntillas. ===================================================================== */ html[data-temporada="halloween"]{ --temporada-1:#E2761B; --temporada-1-rgb:226,118,27; /* ámbar de calabaza */ --temporada-2:#4B2E5E; --temporada-2-rgb:75,46,94; /* morado de anochecer */ --temporada-3:#C9A227; --temporada-3-rgb:201,162,39; /* oro viejo de vela */ --temporada-4:#1B1622; --temporada-4-rgb:27,22,34; /* carbón de noche */ } /* Filo · el anochecer entra por las esquinas. La capa entera vive en el token --temporada-velo-img porque en paleta clara no es una viñeta sino un filo de 3px (ver arriba); así el intercambio es de una sola línea y el recuento de capas de background no se descuadra. Dentro del degradado se escribe rgba(color,0) en vez de «transparent» porque transparent es negro transparente y al interpolar deja un halo gris. */ html[data-temporada="halloween"] #temporadaCapa{ background-image:var(--temporada-velo-img); background-size:100% 100%; background-position:center; } /* Motivo grande · la calabaza: una elipse con dos costillas. */ html[data-temporada="halloween"]:not([data-temporada-intensidad="discreto"]) #temporadaCapa::before{ content:''; position:absolute; right:-118px; bottom:-92px; width:360px; height:300px; transform-origin:right bottom; border-radius:50%/44%; background: radial-gradient(16% 84% at 33% 50%, rgba(var(--temporada-costilla-rgb),var(--temporada-motivo)) 0 58%, rgba(var(--temporada-costilla-rgb),0) 100%), radial-gradient(16% 84% at 67% 50%, rgba(var(--temporada-costilla-rgb),var(--temporada-motivo)) 0 58%, rgba(var(--temporada-costilla-rgb),0) 100%), radial-gradient(78% 78% at 50% 46%, rgba(var(--temporada-1-rgb),var(--temporada-motivo)) 0 100%, rgba(var(--temporada-1-rgb),var(--temporada-motivo)) 100%); } /* Festivo (31) · la calabaza de 24px. El rabo va en el fondo de la capa, justo encima de la elipse. */ html[data-temporada="halloween"][data-temporada-intensidad="festivo"] #temporadaCapa{ background-image: linear-gradient(96deg, rgba(var(--temporada-3-rgb),0) 44%, rgba(var(--temporada-3-rgb),var(--temporada-eco)) 44% 56%, rgba(var(--temporada-3-rgb),0) 56%), var(--temporada-velo-img); background-size:24px 7px, 100% 100%; /* El rabo arranca 2px por encima del casquete de la calabaza: se tocaban en una banda de 4x2 px y las dos capas de ámbar se sumaban. */ background-position:left 78px bottom 73px, center; } html[data-temporada="halloween"][data-temporada-intensidad="festivo"] #temporadaCapa::after{ content:''; position:absolute; left:78px; bottom:52px; width:24px; height:19px; border-radius:50%/44%; background: radial-gradient(16% 84% at 33% 50%, rgba(var(--temporada-costilla-rgb),var(--temporada-eco)) 0 58%, rgba(var(--temporada-costilla-rgb),0) 100%), radial-gradient(16% 84% at 67% 50%, rgba(var(--temporada-costilla-rgb),var(--temporada-eco)) 0 58%, rgba(var(--temporada-costilla-rgb),0) 100%), radial-gradient(78% 78% at 50% 46%, rgba(var(--temporada-1-rgb),var(--temporada-eco)) 0 100%, rgba(var(--temporada-1-rgb),var(--temporada-eco)) 100%); } /* ===================================================================== 5 · DIFUNTOS · todo noviembre Las dos culturas juntas: el BARRILETE DE SUMPANGO -que es la cara pública de estos días en Guatemala- como motivo estrella, y el papel picado, el cempasúchil y la calavera del lado mexicano. Sin cruces, sin lápidas y sin portones de panteón. ===================================================================== */ html[data-temporada="difuntos"]{ --temporada-1:#E0322E; --temporada-1-rgb:224,50,46; /* rojo de papel de china */ --temporada-2:#F2A60D; --temporada-2-rgb:242,166,13; /* amarillo maíz */ --temporada-3:#0F8F86; --temporada-3-rgb:15,143,134; /* verde-turquesa */ --temporada-4:#6B3FA0; --temporada-4-rgb:107,63,160; /* morado de ofrenda */ --temporada-5:#F0E6D2; --temporada-5-rgb:240,230,210; /* blanco cal */ --temporada-6:#FF6B1A; --temporada-6-rgb:255,107,26; /* naranja de cempasúchil */ } /* Filo · el papel picado del canto superior: banderitas de paradas duras, con el corte entre una y otra y las perforaciones como paradas transparentes DENTRO del mismo degradado. No lleva mask porque el mask se aplica al elemento y a sus descendientes: en este div se comería también el barrilete y la flor, que cuelgan de sus pseudo-elementos. */ html[data-temporada="difuntos"] #temporadaCapa{ background-image:repeating-linear-gradient(90deg, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 0 14px, rgba(var(--temporada-1-rgb),0) 14px 17px, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 17px 31px, rgba(var(--temporada-1-rgb),0) 31px 38px, rgba(var(--temporada-2-rgb),var(--temporada-filo)) 38px 52px, rgba(var(--temporada-2-rgb),0) 52px 55px, rgba(var(--temporada-2-rgb),var(--temporada-filo)) 55px 69px, rgba(var(--temporada-2-rgb),0) 69px 76px, rgba(var(--temporada-3-rgb),var(--temporada-filo)) 76px 90px, rgba(var(--temporada-3-rgb),0) 90px 93px, rgba(var(--temporada-3-rgb),var(--temporada-filo)) 93px 107px, rgba(var(--temporada-3-rgb),0) 107px 114px, rgba(var(--temporada-6-rgb),var(--temporada-filo)) 114px 128px, rgba(var(--temporada-6-rgb),0) 128px 131px, rgba(var(--temporada-6-rgb),var(--temporada-filo)) 131px 145px, rgba(var(--temporada-6-rgb),0) 145px 152px, rgba(var(--temporada-bandera-rgb),var(--temporada-filo)) 152px 166px, rgba(var(--temporada-bandera-rgb),0) 166px 169px, rgba(var(--temporada-bandera-rgb),var(--temporada-filo)) 169px 183px, rgba(var(--temporada-bandera-rgb),0) 183px 190px); background-size:100% 7px; background-position:left top; } /* Motivo estrella · EL BARRILETE DE SUMPANGO. Círculo de 400px que sangra por la esquina inferior derecha; solo se ve poco más de la mitad. Las cuñas van PLANAS y saturadas, con paradas duras (color 0 Ndeg) y ningún degradado interno ni filter:blur. El papel de china no tiene sombreado: suavizarlo lo convierte en plástico y mata el motivo. Lo único que se difumina es la máscara del borde, para que el círculo no termine en un canto de plato. */ html[data-temporada="difuntos"]:not([data-temporada-intensidad="discreto"]) #temporadaCapa::before{ content:''; position:absolute; right:-150px; bottom:-158px; width:400px; height:400px; transform-origin:right bottom; border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(var(--temporada-hilo-rgb),var(--temporada-motivo)) 0 2px, rgba(var(--temporada-hilo-rgb),0) 2px 46px), conic-gradient(from -18deg at 50% 50%, rgba(var(--temporada-1-rgb),var(--temporada-motivo)) 0 30deg, rgba(var(--temporada-2-rgb),var(--temporada-motivo)) 0 60deg, rgba(var(--temporada-3-rgb),var(--temporada-motivo)) 0 90deg, rgba(var(--temporada-4-rgb),var(--temporada-motivo)) 0 120deg, rgba(var(--temporada-6-rgb),var(--temporada-motivo)) 0 150deg, rgba(var(--temporada-2-rgb),var(--temporada-motivo)) 0 180deg, rgba(var(--temporada-1-rgb),var(--temporada-motivo)) 0 210deg, rgba(var(--temporada-3-rgb),var(--temporada-motivo)) 0 240deg, rgba(var(--temporada-4-rgb),var(--temporada-motivo)) 0 270deg, rgba(var(--temporada-2-rgb),var(--temporada-motivo)) 0 300deg, rgba(var(--temporada-6-rgb),var(--temporada-motivo)) 0 330deg, rgba(var(--temporada-3-rgb),var(--temporada-motivo)) 0 360deg); -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 62%, rgba(0,0,0,0) 84%); mask-image:radial-gradient(circle at 50% 50%, #000 62%, rgba(0,0,0,0) 84%); } /* Festivo (1 y 2) · la ofrenda en la esquina de abajo a la izquierda: el cempasúchil y, debajo, la calavera. */ html[data-temporada="difuntos"][data-temporada-intensidad="festivo"] #temporadaCapa{ /* La calavera es SILUETA y nada más: cráneo redondo y mandíbula, sin cuencas ni dientes. Las cuencas serían huecos, y un hueco hay que restarlo; las capas de fondo solo suman. Una calavera con los ojos pintados encima no es una calavera, es una mancha. */ background-image: radial-gradient(50% 50% at 50% 50%, rgba(var(--temporada-hueso-rgb),var(--temporada-eco)) 0 82%, rgba(var(--temporada-hueso-rgb),0) 100%), radial-gradient(50% 60% at 50% 34%, rgba(var(--temporada-hueso-rgb),var(--temporada-eco)) 0 82%, rgba(var(--temporada-hueso-rgb),0) 100%), repeating-linear-gradient(90deg, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 0 14px, rgba(var(--temporada-1-rgb),0) 14px 17px, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 17px 31px, rgba(var(--temporada-1-rgb),0) 31px 38px, rgba(var(--temporada-2-rgb),var(--temporada-filo)) 38px 52px, rgba(var(--temporada-2-rgb),0) 52px 55px, rgba(var(--temporada-2-rgb),var(--temporada-filo)) 55px 69px, rgba(var(--temporada-2-rgb),0) 69px 76px, rgba(var(--temporada-3-rgb),var(--temporada-filo)) 76px 90px, rgba(var(--temporada-3-rgb),0) 90px 93px, rgba(var(--temporada-3-rgb),var(--temporada-filo)) 93px 107px, rgba(var(--temporada-3-rgb),0) 107px 114px, rgba(var(--temporada-6-rgb),var(--temporada-filo)) 114px 128px, rgba(var(--temporada-6-rgb),0) 128px 131px, rgba(var(--temporada-6-rgb),var(--temporada-filo)) 131px 145px, rgba(var(--temporada-6-rgb),0) 145px 152px, rgba(var(--temporada-bandera-rgb),var(--temporada-filo)) 152px 166px, rgba(var(--temporada-bandera-rgb),0) 166px 169px, rgba(var(--temporada-bandera-rgb),var(--temporada-filo)) 169px 183px, rgba(var(--temporada-bandera-rgb),0) 183px 190px); background-size:18px 18px, 10px 8px, 100% 7px; /* Cráneo y mandíbula se rozaban por una franja de 8x1 px. Separados 2px, el hueco lee como la línea de la boca y deja de haber suma de tinta. */ background-position:left 96px bottom 132px, left 100px bottom 122px, left top; } html[data-temporada="difuntos"][data-temporada-intensidad="festivo"] #temporadaCapa::after{ content:''; position:absolute; left:-40px; bottom:150px; width:150px; height:150px; border-radius:50%; /* Roseta de cempasúchil: pétalos planos alternando naranja y rojo, con el hueco entre pétalo y pétalo, y el corazón en amarillo maíz. Misma regla que el barrilete: paradas duras, sin degradado dentro del pétalo. */ background: radial-gradient(circle at 50% 50%, rgba(var(--temporada-2-rgb),var(--temporada-eco)) 0 21%, rgba(var(--temporada-2-rgb),0) 23%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(var(--temporada-6-rgb),var(--temporada-eco)) 0 12deg, rgba(var(--temporada-6-rgb),0) 12deg 15deg, rgba(var(--temporada-1-rgb),var(--temporada-eco)) 15deg 27deg, rgba(var(--temporada-1-rgb),0) 27deg 30deg); } /* ===================================================================== 6 · NAVIDAD · 1 de diciembre al 6 de enero Manda el FAROL DE PAPEL y el color líder es el oro. Los copos entran como motivo secundario y se quedan QUIETOS: no caen, no se repiten, no hay bucle. Aquí la Navidad son 20-25 grados; el copo es un guiño de adorno de papel, no un pronóstico. ===================================================================== */ html[data-temporada="navidad"]{ --temporada-1:#E8B04B; --temporada-1-rgb:232,176,75; /* oro de farol · MANDA */ --temporada-2:#C1272D; --temporada-2-rgb:193,39,45; /* rojo de flor de Pascua */ --temporada-3:#1E6B3A; --temporada-3-rgb:30,107,58; /* verde de pino */ --temporada-4:#F4E3C1; --temporada-4-rgb:244,227,193; /* crema de nacimiento */ --temporada-5:#8C3A1E; --temporada-5-rgb:140,58,30; /* terracota */ } /* Filo · una banda de oro en el canto de arriba, con verde y rojo solo en las puntas: el oro manda y los otros dos lo acompañan. */ html[data-temporada="navidad"] #temporadaCapa{ background-image:linear-gradient(90deg, rgba(var(--temporada-punta-a-rgb),var(--temporada-filo)) 0%, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 20%, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 80%, rgba(var(--temporada-punta-b-rgb),var(--temporada-filo)) 100%); background-size:100% 3px; background-position:left top; } /* Copos · ocho puntos repartidos a mano, cada uno una capa de fondo. Están quietos y no se animan: animarlos exigiría mover el div entero, que es también quien sostiene el filo, y no vale la pena a cambio de nada. */ html[data-temporada="navidad"]:not([data-temporada-intensidad="discreto"]) #temporadaCapa{ background-image: radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 1.6px, rgba(var(--temporada-copo-rgb),0) 2.8px), radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 1.1px, rgba(var(--temporada-copo-rgb),0) 2.2px), radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 2.1px, rgba(var(--temporada-copo-rgb),0) 3.4px), radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 1.3px, rgba(var(--temporada-copo-rgb),0) 2.4px), radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 1.8px, rgba(var(--temporada-copo-rgb),0) 3.0px), radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 1.1px, rgba(var(--temporada-copo-rgb),0) 2.2px), radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 1.6px, rgba(var(--temporada-copo-rgb),0) 2.8px), radial-gradient(circle, rgba(var(--temporada-copo-rgb),var(--temporada-eco)) 0 1.3px, rgba(var(--temporada-copo-rgb),0) 2.4px), linear-gradient(90deg, rgba(var(--temporada-punta-a-rgb),var(--temporada-filo)) 0%, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 20%, rgba(var(--temporada-1-rgb),var(--temporada-filo)) 80%, rgba(var(--temporada-punta-b-rgb),var(--temporada-filo)) 100%); background-size:9px 9px, 9px 9px, 9px 9px, 9px 9px, 9px 9px, 9px 9px, 9px 9px, 9px 9px, 100% 3px; background-position: 11% 16%, 26% 44%, 39% 11%, 57% 31%, 68% 63%, 82% 19%, 92% 48%, 33% 76%, left top; } /* Motivo grande · el farol de papel, recortado en estrella y relleno de oro que cae a terracota, sangrando por la esquina inferior izquierda. */ html[data-temporada="navidad"]:not([data-temporada-intensidad="discreto"]) #temporadaCapa::before{ content:''; position:absolute; left:-88px; bottom:-92px; width:300px; height:300px; transform-origin:left bottom; clip-path:polygon(50% 0%,61% 33%,96% 33%,68% 55%,79% 90%,50% 68%,21% 90%,32% 55%,4% 33%,39% 33%); background:radial-gradient(58% 58% at 50% 42%, rgba(var(--temporada-4-rgb),var(--temporada-motivo)) 0%, rgba(var(--temporada-1-rgb),var(--temporada-motivo)) 46%, rgba(var(--temporada-5-rgb),var(--temporada-motivo)) 100%); } /* Festivo (16 al 24 y el 31) · el segundo farol, pequeño y del otro lado. */ html[data-temporada="navidad"][data-temporada-intensidad="festivo"] #temporadaCapa::after{ content:''; /* En porcentaje, igual que los copos. Mezclar % con px era el fallo de fondo: la estrella se anclaba a 92px del borde de arriba y los copos a un porcentaje del alto, así que a según qué altura de ventana un copo le caía encima. Medido sobre una malla de 320x380 a 2560x1600, así no se cruzan en ninguna, con 9.7px de holgura en el peor caso. */ position:absolute; right:6%; top:6%; width:38px; height:38px; clip-path:polygon(50% 0%,61% 33%,96% 33%,68% 55%,79% 90%,50% 68%,21% 90%,32% 55%,4% 33%,39% 33%); background:radial-gradient(58% 58% at 50% 42%, rgba(var(--temporada-4-rgb),var(--temporada-eco)) 0%, rgba(var(--temporada-1-rgb),var(--temporada-eco)) 46%, rgba(var(--temporada-5-rgb),var(--temporada-eco)) 100%); } /* ===================================================================== 7 · LA ENTRADA Una sola pasada al cargar, solo en festivo, y se queda quieta para siempre. iteration-count:1 explícito en las dos. ===================================================================== */ html[data-temporada][data-temporada-intensidad="festivo"] #temporadaCapa::before{ animation:temporada-asoma 1100ms ease-out both; animation-iteration-count:1; } html[data-temporada][data-temporada-intensidad="festivo"] #temporadaCapa::after{ animation:temporada-asoma 900ms ease-out 320ms both; animation-iteration-count:1; } /* ===================================================================== 8 · PANTALLAS PEQUEÑAS Un círculo de 400px sobre un teléfono de 360 es medio fondo. Se encoge sobre la esquina por la que sangra -de ahí el transform-origin de cada motivo- para que siga entrando por el mismo sitio. ===================================================================== */ @media (max-width:640px){ html[data-temporada][data-temporada-intensidad] #temporadaCapa::before{ transform:scale(.62) } } /* ===================================================================== 9 · CUÁNDO SE APAGA SOLA Apagar la capa entera se hace SIN condiciones -#temporadaCapa a secas-, para que no quede ningún hueco: cualquier regla de esta hoja que pinte, pinta dentro de ese div, y si mañana alguien deja un data-temporada puesto a mano en una plantilla sin la intensidad, la decoración sigue sin llegar al papel. Como ninguna regla de arriba declara «display», gana igual sin subir especificidad. Apagar solo la ANIMACIÓN sí necesita empatar con los selectores que la encienden, y por eso ese bloque los repite. Ni una línea de esta hoja necesita !important. ===================================================================== */ /* PAPEL · estos sistemas imprimen actas diarias, cuadros consolidados y oficios de pago: documentos con valor probatorio y firma. Una decoración de temporada en un acta oficial no es un adorno, es un defecto -y encima gasta tinta-. La capa y las piezas son de pantalla y solo de pantalla. */ @media print{ #temporadaCapa, #temporadaPieza, #temporadaEco, #temporadaBanda, #temporadaGuirnalda, .temporada-acuse{ display:none } } /* MENOS MOVIMIENTO · quien lo pide no quiere ni una entrada. Se queda el dibujo, quieto, sin animación. */ @media (prefers-reduced-motion: reduce){ html[data-temporada][data-temporada-intensidad] #temporadaCapa, html[data-temporada][data-temporada-intensidad] #temporadaCapa::before, html[data-temporada][data-temporada-intensidad] #temporadaCapa::after, html[data-temporada] #temporadaPieza, html[data-temporada] #temporadaEco, html[data-temporada] #temporadaBanda, html[data-temporada] #temporadaGuirnalda{ animation:none } } /* MÁS CONTRASTE · quien lo pide necesita la pantalla limpia. La capa entera y las piezas desaparecen: no hay decoración que valga una lectura peor. */ @media (prefers-contrast: more){ #temporadaCapa, #temporadaPieza, #temporadaEco, #temporadaBanda, #temporadaGuirnalda, .temporada-acuse{ display:none } .temporada-realce{ outline:none } } /* ===================================================================== 10 · LA PIEZA 3D El render con transparencia que pide temporada.js (temporada-arte/) y que es lo que de verdad SE NOTA: un objeto opaco, bien iluminado, encima del contenido y en una esquina sin texto. La capa de fondo sigue siendo la misma; esto es OTRA cosa y por eso es otro elemento, hermano del div y no hijo: #temporadaCapa lleva contain:paint y z-index:-1, y cualquier hijo suyo quedaría encerrado debajo del contenido para siempre. Dónde: abajo a la IZQUIERDA. La derecha está ocupada en las cuatro apps de cómic (el botón de paletas y la guía viven en right:16px bottom:16px) y en Supervisión la boleta tiene barra inferior: por eso el pie de la pieza lee --barra-h, que esa pantalla publica, y vale 0 en las demás. z-index:12: por encima del contenido (1, 2) y por debajo de la cabecera (40), el aviso de piloto (45), las sugerencias del chat (30, ancladas abajo, justo donde va la pieza), el aviso de idioma (70), el velo de modal (80) y el cajón (81). Al abrir cualquier modal queda tapada, que es lo correcto. La sombra la pone el CSS y no la imagen: drop-shadow sigue el canal alfa, da la sombra de la forma real y se ajusta por familia de paleta. ===================================================================== */ html[data-temporada]{ --temporada-pieza-ancho:176px; --temporada-pieza-abajo:calc(var(--barra-h, 0px) + 12px + env(safe-area-inset-bottom, 0px)); --temporada-sombra:drop-shadow(0 10px 14px rgba(0,0,0,.45)); } html[data-temporada][data-paleta-tipo="claro"], html[data-temporada][data-comic-tema="papel"], html[data-temporada][data-comic-tema="nube"], html[data-temporada][data-comic-tema="rosa"], html[data-temporada][data-comic-tema="menta-clara"]{ --temporada-sombra:drop-shadow(0 8px 12px rgba(20,40,45,.22)); } html[data-temporada] #temporadaPieza, html[data-temporada] #temporadaEco{ position:fixed; z-index:12; left:max(10px, env(safe-area-inset-left, 0px)); bottom:var(--temporada-pieza-abajo); width:var(--temporada-pieza-ancho); height:auto; pointer-events:none; /* nunca intercepta un clic ni un arrastre */ user-select:none; filter:var(--temporada-sombra); animation:temporada-llega 700ms ease-out both; animation-iteration-count:1; } /* La segunda pieza de los días festivos (el cempasúchil, el reno): más pequeña y a los pies de la primera, para que todo viva en una esquina y no haya que buscar otra libre. */ html[data-temporada] #temporadaEco{ left:calc(max(10px, env(safe-area-inset-left, 0px)) + var(--temporada-pieza-ancho) * .78); width:calc(var(--temporada-pieza-ancho) * .5); animation-delay:260ms; } @keyframes temporada-llega{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } } /* Los DOS únicos bucles de toda la capa, pedidos por el cliente («que haya movimiento»): la pieza flota o se mece, despacio y solo transform. Son decoración pura encima o detrás de un panel; prefers-reduced-motion los apaga con todo lo demás. La prueba E7 permite bucle únicamente aquí. */ @keyframes temporada-flota{ from{ transform:translateY(0) } to{ transform:translateY(-7px) } } @keyframes temporada-mece{ from{ transform:rotate(-1.4deg) translateY(1px) } to{ transform:rotate(1.6deg) translateY(-2px) } } html[data-temporada] #temporadaPieza:not([data-modo="asoma"]){ animation:temporada-llega 700ms ease-out both, temporada-flota 5200ms ease-in-out 900ms infinite alternate; } /* ── MODO ASOMADO ───────────────────────────────────────────────────── La pieza vive DENTRO del panel ancla (primer hijo), con el cuerpo recortado por clip-path: solo la cabeza y lo que lleve en alto salen por el borde superior, como agarrada al panel. Nada de la pieza pisa el contenido: lo visible queda por ENCIMA del panel, y la franja que entra al panel (8 px) la tapan los hermanos siguientes en el orden de pintado. */ html[data-temporada] .temporada-ancla{ position:relative } html[data-temporada] #temporadaPieza[data-modo="asoma"]{ position:absolute; left:auto; bottom:auto; right:clamp(12px, 6%, 48px); width:var(--temporada-asoma-ancho, 168px); top:calc(var(--temporada-asoma-ancho, 168px) * -0.60); clip-path:inset(0 0 32% 0); filter:var(--temporada-sombra); transform-origin:50% 62%; animation:temporada-llega 700ms ease-out both, temporada-mece 5600ms ease-in-out 900ms infinite alternate; } @media (max-width:1024px){ html[data-temporada] #temporadaPieza[data-modo="asoma"]{ --temporada-asoma-ancho:136px } } @media (max-width:640px){ html[data-temporada] #temporadaPieza[data-modo="asoma"]{ --temporada-asoma-ancho:104px } } /* Con la pieza en pantalla, el motivo grande dibujado se retira: era el que hacía su papel cuando no había imagen. El filo y los detalles menudos se quedan, que son el ambiente. */ html[data-temporada][data-temporada-arte="si"] #temporadaCapa::before{ content:none } html[data-temporada][data-temporada-eco="si"] #temporadaCapa::after{ content:none } /* Tamaños: la pieza es del tamaño de una mano en escritorio, de un pulgar en tableta y de una moneda en teléfono, donde la segunda pieza ya no cabe. En un teléfono apaisado la pantalla es solo teclado y campo: nada. */ @media (max-width:1024px){ html[data-temporada]{ --temporada-pieza-ancho:140px } } @media (max-width:640px){ html[data-temporada]{ --temporada-pieza-ancho:88px } html[data-temporada] #temporadaEco{ display:none } } @media (max-width:900px) and (max-height:480px) and (orientation:landscape){ html[data-temporada] #temporadaPieza, html[data-temporada] #temporadaEco{ display:none } } /* ===================================================================== 11 · LA BANDA · técnica «Nexotech» (banners.md) Un listón EN EL FLUJO, insertado por temporada.js después del panel ancla (data-temporada-banner). El personaje —la misma #temporadaPieza— vive ACOPLADO a la banda: asomado tras su canto, sentado encima o rematando un extremo. Es la única parte de la capa que ocupa espacio, y el espacio es suyo: reserva su propio aire con margin-top, así el personaje sobresale sin pisar jamás el panel de arriba. Quitar el archivo deja la página exactamente como hoy. La idea de dirección: la banda ES el listón que las piezas patrias sostienen en alto — cada época lo re-teje. ===================================================================== */ html[data-temporada]{ --temporada-banda-alto:76px; --temporada-banda-pieza:112px; --temporada-banda-clip:.30; /* fracción recortada abajo (gesto asoma) */ /* cuánto sube la línea de recorte sobre el fondo de la banda. La subida de cabeza resultante es muerde + pieza·(1−clip) − alto: con el 10px fijo de antes, en tableta y móvil daba cero o negativa y el personaje quedaba ENTERRADO en la banda (lo cazó la prueba de dispositivos). */ --temporada-banda-muerde:32px; --temporada-banda-trazo:#F7EFDF; /* cómic oscuro; los claros lo pisan */ --temporada-banda-tinta:#F7EFDF; --temporada-banda-filo-rgb:var(--jade-rgb, 37,184,148); /* Lavado por defecto: cada temporada tiñe su banda con su primer color; patria (y las paletas claras) lo afinan más abajo. */ --temporada-banda-lavado:linear-gradient(180deg, rgba(var(--temporada-1-rgb),.26), rgba(var(--temporada-1-rgb),.14)); } html[data-temporada] #temporadaBanda{ position:relative; height:var(--temporada-banda-alto); margin:72px 0 18px; /* 72px = reserva del gesto asoma */ border-radius:14px; background:var(--temporada-banda-lavado); pointer-events:none; user-select:none; animation:temporada-llega 480ms ease-out both; animation-iteration-count:1; } html[data-temporada] #temporadaBanda[data-gesto="sienta"]{ margin-top:98px } html[data-temporada] #temporadaBanda[data-gesto="tapa"]{ margin-top:46px } /* La pieza acoplada. El bucle cambia de gesto: sobre una banda, un personaje que rota parece tambalearse; aquí RESPIRA (scaleY mínimo, origen en la base). Es el mismo permiso de un solo bucle, gastado en otro gesto. */ @keyframes temporada-respira{ from{ transform:scaleY(1) } to{ transform:scaleY(1.03) } } html[data-temporada] #temporadaPersonaje{ position:absolute; top:auto; left:auto; right:clamp(10px, 4%, 28px); /* asoma: el borde VISIBLE del recorte muerde el canto de la banda */ bottom:calc(var(--temporada-banda-muerde) - var(--temporada-banda-pieza)*var(--temporada-banda-clip)); width:var(--temporada-banda-pieza); clip-path:inset(0 0 calc(var(--temporada-banda-clip)*100%) 0); filter:var(--temporada-sombra); transform-origin:50% 100%; animation:temporada-llega 640ms cubic-bezier(.34,1.56,.64,1) 140ms both, temporada-respira 4800ms ease-in-out 1s infinite alternate; } html[data-temporada] #temporadaBanda[data-lado="izq"] #temporadaPersonaje{ right:auto; left:clamp(10px, 4%, 28px); } html[data-temporada] #temporadaBanda[data-gesto="sienta"] #temporadaPersonaje{ clip-path:none; bottom:calc(var(--temporada-banda-alto) - 18px); } html[data-temporada] #temporadaBanda[data-gesto="tapa"] #temporadaPersonaje{ clip-path:none; bottom:6px; } /* El asiento (solo sienta): la elipse que ancla el peso del personaje */ html[data-temporada] #temporadaBanda[data-gesto="sienta"]::after{ content:''; position:absolute; top:-5px; right:calc(clamp(10px, 4%, 28px) + var(--temporada-banda-pieza)*.14); width:calc(var(--temporada-banda-pieza)*.72); height:10px; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%); } html[data-temporada] #temporadaBanda[data-gesto="sienta"][data-lado="izq"]::after{ right:auto; left:calc(clamp(10px, 4%, 28px) + var(--temporada-banda-pieza)*.14); } /* El texto: decorativo, cadena CSS por temporada; sin cadena, banda muda. */ html[data-temporada] #temporadaBanda .temporada-banda-texto{ position:absolute; inset:0; display:flex; align-items:center; padding-inline:24px calc(var(--temporada-banda-pieza) + 40px); color:var(--temporada-banda-tinta); font-weight:800; font-size:15px; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; } html[data-temporada] #temporadaBanda .temporada-banda-texto::before{ content:var(--temporada-banda-texto, ""); } html[data-temporada] #temporadaBanda[data-lado="izq"] .temporada-banda-texto{ justify-content:flex-end; padding-inline:calc(var(--temporada-banda-pieza) + 40px) 24px; } /* ── Vestimenta CÓMIC: la banda es una calcomanía ── */ html[data-temporada][data-comic-tema] #temporadaBanda{ border:3px solid var(--temporada-banda-trazo); box-shadow:5px 5px 0 #000; transform:rotate(-.4deg); } html[data-temporada][data-comic-tema="papel"], html[data-temporada][data-comic-tema="nube"], html[data-temporada][data-comic-tema="rosa"], html[data-temporada][data-comic-tema="menta-clara"]{ --temporada-banda-trazo:#140D06; --temporada-banda-tinta:#140D06; } /* ── Vestimenta INSTITUCIONAL (Supervisión): un friso tenue con hilo jade. Actas Diarias publica data-paleta-tipo="claro" pero es papel, no institucional: se excluye con :not([data-app="actas"]). ── */ html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda{ --temporada-banda-alto:60px; --temporada-banda-pieza:88px; --temporada-banda-clip:.42; /* la monja: solo la orquídea */ --temporada-banda-tinta:#D8E7E1; margin-top:46px; /* reserva del clip .42 */ border-radius:10px; box-shadow:inset 0 1px 0 rgba(var(--temporada-banda-filo-rgb),.35), inset 0 -1px 0 rgba(var(--temporada-banda-filo-rgb),.35); } html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda::before{ content:''; position:absolute; left:8%; right:8%; bottom:-6px; height:1px; background:linear-gradient(90deg, rgba(var(--temporada-banda-filo-rgb),0), rgba(var(--temporada-banda-filo-rgb),.45) 30%, rgba(var(--temporada-3-rgb),.40) 50%, rgba(var(--temporada-banda-filo-rgb),.45) 70%, rgba(var(--temporada-banda-filo-rgb),0)); } html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda .temporada-banda-texto{ font-weight:600; font-size:13.5px; letter-spacing:.02em; text-transform:none; } html[data-temporada][data-paleta-tipo="claro"]{ --temporada-banda-tinta:#0B242C } /* ── Vestimenta PAPEL (Actas Diarias, data-app="actas"): panel blanco suave como sus tarjetas; medidas de cómic, modales de papel. ── */ html[data-temporada][data-app="actas"] #temporadaBanda{ border-radius:18px; box-shadow:0 1px 3px rgba(23,42,71,.07); --temporada-banda-tinta:#1C2733; } /* ── El vestido PATRIO: listón tejido con orillo de bandera ── */ html[data-temporada="patria"]{ --temporada-banda-lavado:linear-gradient(180deg, rgba(var(--temporada-1-rgb),.30), rgba(var(--temporada-1-rgb),.16)); --temporada-banda-texto:"Septiembre, mes patrio"; } html[data-temporada="patria"][data-temporada-intensidad="festivo"]{ --temporada-banda-texto:"14 y 15 · fiesta patria"; } html[data-temporada="patria"][data-comic-tema="papel"], html[data-temporada="patria"][data-comic-tema="nube"], html[data-temporada="patria"][data-comic-tema="rosa"], html[data-temporada="patria"][data-comic-tema="menta-clara"], html[data-temporada="patria"][data-paleta-tipo="claro"]{ --temporada-banda-lavado:linear-gradient(180deg, rgba(var(--temporada-1-rgb),.18), rgba(var(--temporada-1-rgb),.18)); } /* El orillo de bandera v2 (festividad.md §1.3): las tres franjas, puntadas horizontales y un canto interior de flecos cortados con mask de gradiente. En Supervisión cede al hilo de la greca (su ::before de familia gana por orden y especificidad del :not): sobrio, como debe. */ html[data-temporada="patria"] #temporadaBanda::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:34px; border-radius:14px 0 0 14px; background: repeating-linear-gradient(0deg, rgba(var(--temporada-asta-rgb),0) 0 6px, rgba(var(--temporada-asta-rgb),.28) 6px 7px), linear-gradient(90deg, rgba(var(--temporada-1-rgb),.55) 0 9px, rgba(var(--temporada-asta-rgb),.55) 9px 20px, rgba(var(--temporada-1-rgb),.55) 20px 29px, rgba(var(--temporada-1-rgb),0) 29px); -webkit-mask: linear-gradient(#000 0 0) left/29px 100% no-repeat, repeating-linear-gradient(0deg, #000 0 4px, rgba(0,0,0,0) 4px 7px) left 29px top/5px 100% no-repeat; mask: linear-gradient(#000 0 0) left/29px 100% no-repeat, repeating-linear-gradient(0deg, #000 0 4px, rgba(0,0,0,0) 4px 7px) left 29px top/5px 100% no-repeat; } html[data-temporada="patria"] #temporadaBanda[data-lado="izq"]::before{ left:auto; right:0; border-radius:0 14px 14px 0; background: repeating-linear-gradient(0deg, rgba(var(--temporada-asta-rgb),0) 0 6px, rgba(var(--temporada-asta-rgb),.28) 6px 7px), linear-gradient(270deg, rgba(var(--temporada-1-rgb),.55) 0 9px, rgba(var(--temporada-asta-rgb),.55) 9px 20px, rgba(var(--temporada-1-rgb),.55) 20px 29px, rgba(var(--temporada-1-rgb),0) 29px); -webkit-mask: linear-gradient(#000 0 0) right/29px 100% no-repeat, repeating-linear-gradient(0deg, #000 0 4px, rgba(0,0,0,0) 4px 7px) right 29px top/5px 100% no-repeat; mask: linear-gradient(#000 0 0) right/29px 100% no-repeat, repeating-linear-gradient(0deg, #000 0 4px, rgba(0,0,0,0) 4px 7px) right 29px top/5px 100% no-repeat; } /* ── Responsive ── */ @media (max-width:1024px){ html[data-temporada]{ --temporada-banda-alto:64px; --temporada-banda-pieza:92px; --temporada-banda-muerde:30px } html[data-temporada] #temporadaBanda{ margin-top:64px } html[data-temporada] #temporadaBanda[data-gesto="sienta"]{ margin-top:78px } html[data-temporada] #temporadaBanda[data-gesto="tapa"]{ margin-top:38px } } @media (max-width:640px){ html[data-temporada]{ --temporada-banda-alto:52px; --temporada-banda-pieza:84px; --temporada-banda-muerde:26px } html[data-temporada] #temporadaBanda{ margin:48px 0 12px; border-radius:12px } html[data-temporada] #temporadaBanda[data-gesto="sienta"]{ margin-top:64px } html[data-temporada] #temporadaBanda[data-gesto="tapa"]{ margin-top:30px } html[data-temporada] #temporadaBanda .temporada-banda-texto{ font-size:12.5px } html[data-temporada="patria"] #temporadaBanda::before{ width:18px } } @media (max-width:900px) and (max-height:480px) and (orientation:landscape){ html[data-temporada] #temporadaPersonaje{ display:none } html[data-temporada] #temporadaBanda{ --temporada-banda-alto:44px; margin-top:0 } } /* ── Sin pieza (webp roto, ahorro de datos): banda sola, sin hueco ── */ html[data-temporada] #temporadaBanda:not(:has(#temporadaPieza)){ margin-top:0 } html[data-temporada] #temporadaBanda:not(:has(#temporadaPieza)) .temporada-banda-texto{ padding-inline:24px; justify-content:flex-start; } /* ===================================================================== 12 · BANDAS V2 · el centro deja de estar vacío (festividad.md §1) Dos spans nuevos (los inserta temporada.js): .temporada-banda-trama es el relleno del centro y .temporada-banda-remate el fleco que cuelga del canto. Cada temporada teje el suyo con SUS tokens; los tonos que cambian entre paleta clara y oscura reutilizan los tokens semánticos de la sección 1 (asta, hueso, copo), que ya traen esa corrección puesta. Nada de esto se anima: la banda entra una vez (temporada-llega, que ya la trae) y después está quieta para siempre. ===================================================================== */ html[data-temporada]{ --temporada-banda-trama-op:1; /* atenuador por vestimenta (papel: .8) */ } html[data-temporada][data-app="actas"]{ /* papel de Actas: misma trama, un punto más tenue — es la app más clara y la textura a plena alfa se veía impresa, no tejida */ --temporada-banda-trama-op:.8; } html[data-temporada] #temporadaBanda .temporada-banda-trama{ position:absolute; inset:0; border-radius:inherit; /* la textura respeta las esquinas */ opacity:var(--temporada-banda-trama-op); } html[data-temporada] #temporadaBanda .temporada-banda-remate{ position:absolute; left:18px; right:18px; top:100%; height:8px; background-repeat:repeat-x; } /* En cómic la sombra dura ocupa los primeros 5px bajo la banda: el fleco la pisa a propósito -calcomanía con flecos- pero se aparta de las esquinas para no chocar con el radio ni con el desplome de la sombra. */ html[data-temporada][data-comic-tema] #temporadaBanda .temporada-banda-remate{ left:24px; right:24px; } /* ── PATRIA · listón tejido con greca ── */ html[data-temporada="patria"] #temporadaBanda .temporada-banda-trama{ background-image: repeating-linear-gradient(90deg, rgba(var(--temporada-asta-rgb),.14) 0 10px, rgba(var(--temporada-asta-rgb),0) 10px 20px), linear-gradient(rgba(var(--temporada-asta-rgb),.14), rgba(var(--temporada-asta-rgb),.14)), repeating-linear-gradient(45deg, rgba(var(--temporada-asta-rgb),.05) 0 2px, rgba(var(--temporada-asta-rgb),0) 2px 7px), repeating-linear-gradient(-45deg, rgba(var(--temporada-asta-rgb),.05) 0 2px, rgba(var(--temporada-asta-rgb),0) 2px 7px); background-size:20px 3px, 100% 1px, 100% 100%, 100% 100%; background-position:left bottom 8px, left bottom 6px, 0 0, 0 0; background-repeat:repeat-x, no-repeat, repeat, repeat; } /* Remate patrio: banderincitos celeste y blanco (asta) cada 16px */ html[data-temporada="patria"] #temporadaBanda .temporada-banda-remate{ background-image: conic-gradient(from 150deg at 8px 0, rgba(var(--temporada-1-rgb),.5) 0 60deg, rgba(var(--temporada-1-rgb),0) 0), conic-gradient(from 150deg at 24px 0, rgba(var(--temporada-asta-rgb),.5) 0 60deg, rgba(var(--temporada-asta-rgb),0) 0); background-size:32px 8px, 32px 8px; } /* ── HALLOWEEN · retícula de rombos en oro viejo, y nada más: la fiesta entra de puntillas. El oro viejo sirve en las dos familias (es la misma razón por la que las costillas de la calabaza no cambian). ── */ html[data-temporada="halloween"] #temporadaBanda .temporada-banda-trama{ background-image: repeating-linear-gradient(45deg, rgba(var(--temporada-3-rgb),.07) 0 1px, rgba(var(--temporada-3-rgb),0) 1px 9px), repeating-linear-gradient(-45deg, rgba(var(--temporada-3-rgb),.07) 0 1px, rgba(var(--temporada-3-rgb),0) 1px 9px); background-size:auto, auto; background-position:0 0, 0 0; background-repeat:repeat, repeat; } html[data-temporada="halloween"] #temporadaBanda .temporada-banda-remate{ background-image: conic-gradient(from 150deg at 8px 0, rgba(var(--temporada-1-rgb),.5) 0 60deg, rgba(var(--temporada-1-rgb),0) 0), conic-gradient(from 150deg at 24px 0, rgba(var(--temporada-2-rgb),.5) 0 60deg, rgba(var(--temporada-2-rgb),0) 0); background-size:32px 8px, 32px 8px; } /* ── DIFUNTOS · la banda ES una banderita de papel picado ── */ html[data-temporada="difuntos"]{ /* lavado por segmentos: banderitas de 64px, paradas duras */ --temporada-banda-lavado:linear-gradient(90deg, rgba(var(--temporada-1-rgb),.20) 0 64px, rgba(var(--temporada-2-rgb),.20) 64px 128px, rgba(var(--temporada-3-rgb),.20) 128px 192px, rgba(var(--temporada-bandera-rgb),.20) 192px 256px, rgba(var(--temporada-6-rgb),.20) 256px 320px, rgba(var(--temporada-1-rgb),.20) 320px); } html[data-temporada="difuntos"][data-comic-tema="papel"], html[data-temporada="difuntos"][data-comic-tema="nube"], html[data-temporada="difuntos"][data-comic-tema="rosa"], html[data-temporada="difuntos"][data-comic-tema="menta-clara"], html[data-temporada="difuntos"][data-paleta-tipo="claro"]{ --temporada-banda-lavado:linear-gradient(90deg, rgba(var(--temporada-1-rgb),.12) 0 64px, rgba(var(--temporada-2-rgb),.12) 64px 128px, rgba(var(--temporada-3-rgb),.12) 128px 192px, rgba(var(--temporada-bandera-rgb),.12) 192px 256px, rgba(var(--temporada-6-rgb),.12) 256px 320px, rgba(var(--temporada-1-rgb),.12) 320px); } /* Trama: el picado — dos mallas de perforaciones al tresbolillo, en hueso (blanco cal en oscuro, rojo de china en claras: token ya mapeado) */ html[data-temporada="difuntos"] #temporadaBanda .temporada-banda-trama{ background-image: radial-gradient(circle, rgba(var(--temporada-hueso-rgb),.16) 0 1.6px, rgba(var(--temporada-hueso-rgb),0) 2.6px), radial-gradient(circle, rgba(var(--temporada-hueso-rgb),.12) 0 1.2px, rgba(var(--temporada-hueso-rgb),0) 2.1px); background-size:26px 16px, 26px 16px; background-position:0 0, 13px 8px; background-repeat:repeat, repeat; } /* Remate: el fleco picado, rojo y maíz */ html[data-temporada="difuntos"] #temporadaBanda .temporada-banda-remate{ background-image: conic-gradient(from 150deg at 8px 0, rgba(var(--temporada-1-rgb),.5) 0 60deg, rgba(var(--temporada-1-rgb),0) 0), conic-gradient(from 150deg at 24px 0, rgba(var(--temporada-2-rgb),.5) 0 60deg, rgba(var(--temporada-2-rgb),0) 0); background-size:32px 8px, 32px 8px; } /* Orillo de difuntos: tres tiras verticales de papel de china con su perforación, en el extremo opuesto al personaje (el ::before está libre en esta temporada; el institucional sigue ganando con su hilo) */ html[data-temporada="difuntos"] #temporadaBanda::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:26px; border-radius:14px 0 0 14px; background: radial-gradient(circle, rgba(var(--temporada-hueso-rgb),.35) 0 1.4px, rgba(var(--temporada-hueso-rgb),0) 2.2px) left 3px top 6px/9px 12px repeat-y, linear-gradient(90deg, rgba(var(--temporada-1-rgb),.5) 0 8px, rgba(var(--temporada-2-rgb),.5) 8px 17px, rgba(var(--temporada-3-rgb),.5) 17px 26px); } html[data-temporada="difuntos"] #temporadaBanda[data-lado="izq"]::before{ left:auto; right:0; border-radius:0 14px 14px 0; } /* ── NAVIDAD · guirnalda de farol: oro que manda, luces quietas ── */ html[data-temporada="navidad"]{ --temporada-banda-lavado:linear-gradient(90deg, rgba(var(--temporada-punta-a-rgb),.24) 0%, rgba(var(--temporada-1-rgb),.24) 14%, rgba(var(--temporada-1-rgb),.14) 86%, rgba(var(--temporada-punta-b-rgb),.24) 100%); } html[data-temporada="navidad"][data-comic-tema="papel"], html[data-temporada="navidad"][data-comic-tema="nube"], html[data-temporada="navidad"][data-comic-tema="rosa"], html[data-temporada="navidad"][data-comic-tema="menta-clara"], html[data-temporada="navidad"][data-paleta-tipo="claro"]{ --temporada-banda-lavado:linear-gradient(90deg, rgba(var(--temporada-punta-a-rgb),.16) 0%, rgba(var(--temporada-1-rgb),.16) 14%, rgba(var(--temporada-1-rgb),.10) 86%, rgba(var(--temporada-punta-b-rgb),.16) 100%); } /* Trama: el cordel con sus bombillas (oro/rojo/verde alternadas cada 12px, QUIETAS: son adorno de papel, no luces que titilan) y los copos arriba. El copo usa su token, que en claras ya se vuelve terracota solo. */ html[data-temporada="navidad"] #temporadaBanda .temporada-banda-trama{ background-image: radial-gradient(circle, rgba(var(--temporada-1-rgb),.30) 0 1.8px, rgba(var(--temporada-1-rgb),0) 3px), radial-gradient(circle, rgba(var(--temporada-2-rgb),.26) 0 1.8px, rgba(var(--temporada-2-rgb),0) 3px), radial-gradient(circle, rgba(var(--temporada-3-rgb),.26) 0 1.8px, rgba(var(--temporada-3-rgb),0) 3px), linear-gradient(rgba(var(--temporada-copo-rgb),.14), rgba(var(--temporada-copo-rgb),.14)), radial-gradient(circle, rgba(var(--temporada-copo-rgb),.20) 0 1.2px, rgba(var(--temporada-copo-rgb),0) 2.2px); background-size:36px 8px, 36px 8px, 36px 8px, 100% 1px, 23px 11px; background-position:left 6px bottom 6px, left 18px bottom 6px, left 30px bottom 6px, left bottom 9px, left top 4px; background-repeat:repeat-x, repeat-x, repeat-x, no-repeat, repeat-x; } /* Remate navideño: gotas de luz colgando (círculos, no triángulos) */ html[data-temporada="navidad"] #temporadaBanda .temporada-banda-remate{ background-image: radial-gradient(circle at 8px 3px, rgba(var(--temporada-1-rgb),.5) 0 2.4px, rgba(var(--temporada-1-rgb),0) 3.4px), radial-gradient(circle at 24px 4px, rgba(var(--temporada-2-rgb),.45) 0 2px, rgba(var(--temporada-2-rgb),0) 3px); background-size:32px 8px, 32px 8px; } /* ── Marco interior: un filo de 1px en el color líder, las cuatro esquinas vestidas sin un pseudo-elemento nuevo. En cómic se suma a la sombra dura re-declarándola (esta sección va después: gana por orden). ── */ html[data-temporada][data-comic-tema] #temporadaBanda{ box-shadow:5px 5px 0 #000, inset 0 0 0 1px rgba(var(--temporada-1-rgb),.22); } html[data-temporada][data-app="actas"] #temporadaBanda{ box-shadow:0 1px 3px rgba(23,42,71,.07), inset 0 0 0 1px rgba(var(--temporada-1-rgb),.20); } /* El institucional ya tiene su marco (los dos filos jade inset): no se toca. */ /* ── Vestimenta institucional: hilo fino, no confeti. UNA textura —el rombo de hilo— teñida por el color líder de la época. El atajo background resetea a propósito los longhands de las reglas por temporada. ── */ html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda .temporada-banda-trama{ background: repeating-linear-gradient(45deg, rgba(var(--temporada-1-rgb),.05) 0 1px, rgba(var(--temporada-1-rgb),0) 1px 10px), repeating-linear-gradient(-45deg, rgba(var(--temporada-1-rgb),.05) 0 1px, rgba(var(--temporada-1-rgb),0) 1px 10px); } html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda .temporada-banda-remate{ display:none; } /* ── Tipografía con intención ── */ /* El rombito de acento tras el texto (el ::before del span lleva la cadena; el ::after estaba libre). Si una temporada futura va muda, que apague también este ::after: un rombo sin palabra es un botón perdido. */ html[data-temporada] #temporadaBanda .temporada-banda-texto::after{ content:''; flex:none; width:7px; height:7px; margin-left:14px; transform:rotate(45deg); background:rgba(var(--temporada-2-rgb),.65); } /* Cómic: sombra de imprenta en oscuro; en los cuatro temas claros, ninguna (una sombra sobre crema ensucia) */ html[data-temporada][data-comic-tema] #temporadaBanda .temporada-banda-texto{ text-shadow:1px 1px 0 rgba(0,0,0,.4); } html[data-temporada][data-comic-tema="papel"] #temporadaBanda .temporada-banda-texto, html[data-temporada][data-comic-tema="nube"] #temporadaBanda .temporada-banda-texto, html[data-temporada][data-comic-tema="rosa"] #temporadaBanda .temporada-banda-texto, html[data-temporada][data-comic-tema="menta-clara"] #temporadaBanda .temporada-banda-texto{ text-shadow:none; } /* Institucional: versalitas de sastre, sin rombo */ html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda .temporada-banda-texto{ font-variant-caps:all-small-caps; font-weight:600; font-size:13px; letter-spacing:.14em; } html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda .temporada-banda-texto::after{ display:none; } /* ── Los textos que faltaban: las otras tres bandas salían mudas ── */ html[data-temporada="halloween"]{ --temporada-banda-texto:"Última semana de octubre" } html[data-temporada="halloween"][data-temporada-intensidad="festivo"]{ --temporada-banda-texto:"Noche de brujas" } html[data-temporada="difuntos"]{ --temporada-banda-texto:"Noviembre · barriletes y flores" } html[data-temporada="difuntos"][data-temporada-intensidad="festivo"]{ --temporada-banda-texto:"Día de los Santos y de los Difuntos" } html[data-temporada="navidad"]{ --temporada-banda-texto:"Diciembre de posadas" } html[data-temporada="navidad"][data-temporada-intensidad="festivo"]{ --temporada-banda-texto:"¡Felices fiestas!" } /* ===================================================================== 13 · LA GUIRNALDA · el canto superior de toda la página Banderines de papel picado colgando de un cordel, cruzando el visor. z-index 41: sobre la cabecera (40) -a z negativo cualquier cabecera opaca la tragaba-, bajo el aviso de piloto (45) y bajo cualquier velo de modal (80): al abrir un modal, la fiesta se aparta, correcto. Solo transform y opacity se animan; el único bucle es la ondulación de festivo, con su permiso declarado en la batería. ===================================================================== */ html[data-temporada]{ --temporada-guirnalda-a:var(--temporada-1-rgb); --temporada-guirnalda-b:var(--temporada-2-rgb); --temporada-guirnalda-c:var(--temporada-3-rgb); } /* Patria iza la bandera: celeste-blanco-celeste (asta ya corregido en claras) */ html[data-temporada="patria"]{ --temporada-guirnalda-b:var(--temporada-asta-rgb); --temporada-guirnalda-c:var(--temporada-1-rgb); } html[data-temporada] #temporadaGuirnalda{ position:fixed; top:0; left:0; right:0; height:15px; /* 41 = sobre la cabecera tipica (40), bajo pilotos y velos. Las apps cuya cabecera pegajosa vive mas arriba lo suben con su token (Mesa: 55). */ z-index:var(--temporada-guirnalda-z, 41); pointer-events:none; user-select:none; background-image: conic-gradient(from 150deg at 11px 0, rgba(var(--temporada-guirnalda-a),.55) 0 60deg, rgba(var(--temporada-guirnalda-a),0) 0), conic-gradient(from 150deg at 33px 0, rgba(var(--temporada-guirnalda-b),.55) 0 60deg, rgba(var(--temporada-guirnalda-b),0) 0), conic-gradient(from 150deg at 55px 0, rgba(var(--temporada-guirnalda-c),.55) 0 60deg, rgba(var(--temporada-guirnalda-c),0) 0), linear-gradient(rgba(var(--temporada-guirnalda-a),.4), rgba(var(--temporada-guirnalda-a),.4)); background-size:66px 12px, 66px 12px, 66px 12px, 100% 1px; background-position:0 2px, 0 2px, 0 2px, left top 1px; background-repeat:repeat-x, repeat-x, repeat-x, no-repeat; animation:temporada-guirnalda-cae 700ms cubic-bezier(.34,1.56,.64,1) 350ms both; animation-iteration-count:1; } /* Difuntos: banderitas RECTANGULARES con su perforación — papel picado de verdad, no triángulos genéricos. Banderas de 12px cada 16, colores en ciclo de 48, y el punto de luz (hueso) centrado en cada bandera. */ html[data-temporada="difuntos"] #temporadaGuirnalda{ background-image: radial-gradient(circle, rgba(var(--temporada-hueso-rgb),.8) 0 1px, rgba(var(--temporada-hueso-rgb),0) 1.8px), linear-gradient(90deg, rgba(var(--temporada-1-rgb),.55) 0 12px, rgba(var(--temporada-1-rgb),0) 12px), linear-gradient(90deg, rgba(var(--temporada-2-rgb),.55) 0 12px, rgba(var(--temporada-2-rgb),0) 12px), linear-gradient(90deg, rgba(var(--temporada-3-rgb),.55) 0 12px, rgba(var(--temporada-3-rgb),0) 12px), linear-gradient(rgba(var(--temporada-5-rgb),.5), rgba(var(--temporada-5-rgb),.5)); background-size:16px 10px, 48px 11px, 48px 11px, 48px 11px, 100% 1px; background-position:left -2px top 4px, 0 1px, 16px 1px, 32px 1px, left top; background-repeat:repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; } /* Institucional: nada de banderines. El hilo de la época -uno solo, de 2px, al modo de su greca- cruzando el canto. Elegancia de hilo fino. */ html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaGuirnalda{ height:2px; background-image:linear-gradient(90deg, rgba(var(--temporada-1-rgb),0), rgba(var(--temporada-1-rgb),.5) 30%, rgba(var(--temporada-3-rgb),.45) 50%, rgba(var(--temporada-1-rgb),.5) 70%, rgba(var(--temporada-1-rgb),0)); background-size:100% 100%; background-position:0 0; background-repeat:no-repeat; } /* La ondulación: SOLO en festivo, SOLO fuera del institucional, 9s por vaivén (≥8s), 2px de amplitud, transform puro. El permiso está en la tabla de la batería. */ @keyframes temporada-ondea{ from{ transform:translateY(0) } to{ transform:translateY(2px) } } html[data-temporada][data-temporada-intensidad="festivo"]:not([data-paleta-tipo]) #temporadaGuirnalda, html[data-temporada][data-temporada-intensidad="festivo"][data-app="actas"] #temporadaGuirnalda{ animation:temporada-guirnalda-cae 700ms cubic-bezier(.34,1.56,.64,1) 350ms both, temporada-ondea 9000ms ease-in-out 1600ms infinite alternate; } @media (max-width:640px){ html[data-temporada] #temporadaGuirnalda{ height:11px; background-image: conic-gradient(from 150deg at 11px 0, rgba(var(--temporada-guirnalda-a),.55) 0 60deg, rgba(var(--temporada-guirnalda-a),0) 0), conic-gradient(from 150deg at 33px 0, rgba(var(--temporada-guirnalda-b),.55) 0 60deg, rgba(var(--temporada-guirnalda-b),0) 0), conic-gradient(from 150deg at 55px 0, rgba(var(--temporada-guirnalda-c),.55) 0 60deg, rgba(var(--temporada-guirnalda-c),0) 0), linear-gradient(rgba(var(--temporada-guirnalda-a),.4), rgba(var(--temporada-guirnalda-a),.4)); background-size:54px 9px, 54px 9px, 54px 9px, 100% 1px; background-position:0 2px, 0 2px, 0 2px, left top 1px; } html[data-temporada="difuntos"] #temporadaGuirnalda{ background-image: radial-gradient(circle, rgba(var(--temporada-hueso-rgb),.8) 0 1px, rgba(var(--temporada-hueso-rgb),0) 1.8px), linear-gradient(90deg, rgba(var(--temporada-1-rgb),.55) 0 12px, rgba(var(--temporada-1-rgb),0) 12px), linear-gradient(90deg, rgba(var(--temporada-2-rgb),.55) 0 12px, rgba(var(--temporada-2-rgb),0) 12px), linear-gradient(90deg, rgba(var(--temporada-3-rgb),.55) 0 12px, rgba(var(--temporada-3-rgb),0) 12px), linear-gradient(rgba(var(--temporada-5-rgb),.5), rgba(var(--temporada-5-rgb),.5)); background-size:14px 8px, 42px 8px, 42px 8px, 42px 8px, 100% 1px; background-position:left -2px top 3px, 0 1px, 14px 1px, 28px 1px, left top; } } @media (max-width:900px) and (max-height:480px) and (orientation:landscape){ html[data-temporada] #temporadaGuirnalda{ display:none } } /* ===================================================================== 14 · EL REALCE · un filo de época en los paneles de trabajo outline + offset: no pisa la sombra dura ni el trazo del cómic, no ocupa espacio (cero reflow al entrar la temporada) y sigue el radio del panel. La clase la pone temporada.js leyendo data-temporada-realce de la etiqueta de la app; sin atributo, la app no participa. ===================================================================== */ html[data-temporada]:not([data-temporada-intensidad="discreto"]) .temporada-realce{ outline:1px solid rgba(var(--temporada-1-rgb),.22); outline-offset:3px; } /* Cómic: el filo es el segundo trazo de la calcomanía — 2px y más presente */ html[data-temporada]:not([data-temporada-intensidad="discreto"])[data-comic-tema] .temporada-realce{ outline-width:2px; outline-offset:4px; outline-color:rgba(var(--temporada-1-rgb),.34); } /* Institucional: hilo fino, apenas */ html[data-temporada]:not([data-temporada-intensidad="discreto"])[data-paleta-tipo]:not([data-app="actas"]) .temporada-realce{ outline-color:rgba(var(--temporada-1-rgb),.14); } /* ===================================================================== 15 · EL ACUSE FESTIVO · una celebración de un segundo 8 papelitos + 1 anillo, colores de la época, ~900ms y se limpia solo (el JS retira el nodo a los 1000ms). z-index 90: sobre el velo de modal (80) y el cajón (81) -los acuses también nacen dentro de modales-, bajo el banner de versión (99999). Todo es transform/opacity, iteración 1: no consume ningún permiso de bucle. Bajo reduced-motion el JS ya no inserta nada; el display:none de abajo es el cinturón además de los tirantes. ===================================================================== */ html[data-temporada] .temporada-acuse{ position:fixed; width:0; height:0; z-index:90; pointer-events:none; } html[data-temporada] .temporada-acuse .temporada-acuse-halo{ position:absolute; left:-18px; top:-18px; width:36px; height:36px; border-radius:50%; border:2px solid rgba(var(--temporada-3-rgb),.55); animation:temporada-acuse-halo 480ms ease-out both; animation-iteration-count:1; } html[data-temporada] .temporada-acuse .temporada-acuse-part{ position:absolute; left:-3px; top:-5px; width:6px; height:10px; border-radius:1.5px; animation:temporada-acuse-vuela 620ms cubic-bezier(.16,.84,.44,1) both; animation-iteration-count:1; } /* Papelito o confetito: los pares van redondos */ html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(2n){ width:7px; height:7px; border-radius:50%; } /* Trayectorias y colores: 4 tintas de la época en ciclo. La brasa existe en las cuatro temporadas y las claras ya la corrigen a amarillo farol. El halo es :nth-child(1); los papelitos van del 2 al 9. */ html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(2){ --temporada-tx:-64px; --temporada-ty:-58px; --temporada-giro:-200deg; background:rgba(var(--temporada-1-rgb),.95) } html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(3){ --temporada-tx:-30px; --temporada-ty:-74px; --temporada-giro:160deg; background:rgba(var(--temporada-2-rgb),.95); animation-delay:30ms } html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(4){ --temporada-tx:6px; --temporada-ty:-80px; --temporada-giro:-140deg; background:rgba(var(--temporada-3-rgb),.95); animation-delay:10ms } html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(5){ --temporada-tx:40px; --temporada-ty:-66px; --temporada-giro:220deg; background:rgba(var(--temporada-brasa-rgb),.95); animation-delay:40ms } html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(6){ --temporada-tx:70px; --temporada-ty:-44px; --temporada-giro:180deg; background:rgba(var(--temporada-1-rgb),.95); animation-delay:20ms } html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(7){ --temporada-tx:-70px; --temporada-ty:-18px; --temporada-giro:-160deg; background:rgba(var(--temporada-2-rgb),.95); animation-delay:50ms } html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(8){ --temporada-tx:52px; --temporada-ty:-8px; --temporada-giro:140deg; background:rgba(var(--temporada-3-rgb),.95); animation-delay:60ms } html[data-temporada] .temporada-acuse .temporada-acuse-part:nth-child(9){ --temporada-tx:-12px; --temporada-ty:-92px; --temporada-giro:-240deg; background:rgba(var(--temporada-brasa-rgb),.95) } @keyframes temporada-acuse-vuela{ 0%{ transform:translate(0,0) rotate(0) scale(.6); opacity:0 } 12%{ opacity:1 } 100%{ transform:translate(var(--temporada-tx),var(--temporada-ty)) rotate(var(--temporada-giro)) scale(1); opacity:0 } } @keyframes temporada-acuse-halo{ from{ transform:scale(.5); opacity:.9 } to{ transform:scale(2.1); opacity:0 } } /* Navidad: los impares vuelan como rombitos de estrella */ html[data-temporada="navidad"] .temporada-acuse .temporada-acuse-part:nth-child(2n+1){ clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius:0; } /* Institucional: SOLO el anillo. La sobriedad también celebra, a su modo. */ html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) .temporada-acuse .temporada-acuse-part{ display:none; } html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) .temporada-acuse .temporada-acuse-halo{ border-color:rgba(var(--temporada-1-rgb),.45); } @media (prefers-reduced-motion: reduce){ .temporada-acuse{ display:none } } /* ===================================================================== 16 · LAS MASCOTAS · escenas, coreografía y voz (marca-mascotas.md) La mascota es la marca; la temporada es su vestuario. El personaje de banda vive en su ENVOLTORIO (#temporadaPersonaje, lo monta temporada.js): el envoltorio carga posición y respiración, y adentro van la pieza y su capa de parpadeo, perfectamente en fase. ===================================================================== */ html[data-temporada] #temporadaPersonaje #temporadaPieza{ /* Dentro del envoltorio la pieza es TELA, no caja: la regla base de esquina (position:fixed, vaivén, sombra, z) se neutraliza entera — posición, bucle y sombra los carga el envoltorio. Sin esto, el transform del envoltorio secuestra al fixed y el alto queda en 0. */ position:static; display:block; width:100%; height:auto; top:auto; right:auto; bottom:auto; left:auto; animation:none; filter:none; clip-path:none; z-index:auto; pointer-events:none; } /* ── La coreografía de entrada (1.2s, todo iteración 1) ── banda(0) → trama(120) → personaje(140, con rebote: ya lo trae) → texto(260, se desliza desde el lado del personaje) → flecos(300) → guirnalda(350, cae) → sello(900, festivo). Aparecer todo a la vez era lo que se sentía plano. */ @keyframes temporada-tela{ from{ opacity:0 } } html[data-temporada] #temporadaBanda .temporada-banda-trama{ animation:temporada-tela 600ms ease-out 120ms both; animation-iteration-count:1; } html[data-temporada] #temporadaBanda .temporada-banda-remate{ animation:temporada-tela 480ms ease-out 300ms both; animation-iteration-count:1; } @keyframes temporada-texto-entra{ from{ opacity:0; transform:translateX(14px) } to{ opacity:1; transform:none } } @keyframes temporada-texto-entra-izq{ from{ opacity:0; transform:translateX(-14px) } to{ opacity:1; transform:none } } html[data-temporada] #temporadaBanda .temporada-banda-texto{ animation:temporada-texto-entra 520ms cubic-bezier(.22,.9,.36,1) 260ms both; animation-iteration-count:1; } html[data-temporada] #temporadaBanda[data-lado="izq"] .temporada-banda-texto{ animation-name:temporada-texto-entra-izq; } @keyframes temporada-guirnalda-cae{ from{ transform:translateY(-100%) } to{ transform:none } } /* ── El parpadeo: la señal de vida más barata que existe. Opacidad binaria, 150ms cada 6.4s: imposible de marear. Permiso P2. ── */ html[data-temporada] #temporadaParpadeo{ position:absolute; inset:0; width:100%; display:block; height:auto; pointer-events:none; opacity:0; animation:temporada-parpadea 6400ms linear 2200ms infinite; } @keyframes temporada-parpadea{ 0%, 95.5%{ opacity:0 } 95.6%, 97.9%{ opacity:1 } /* 150ms de ojos cerrados */ 98%, 100%{ opacity:0 } } /* ── Hover: el personaje se endereza. La banda sigue sin clics; el hover se lee del panel ancla, hermano anterior de la banda — selector universal, sin conocer la clase del panel. translate compone con la respiración (transform) sin pelearse. Alba no hace gracias. ── */ html[data-temporada] #temporadaPersonaje{ transition:translate .28s cubic-bezier(.22,.9,.36,1); } html[data-temporada]:not([data-paleta-tipo]) :hover + #temporadaBanda #temporadaPersonaje, html[data-temporada][data-app="actas"] :hover + #temporadaBanda #temporadaPersonaje{ translate:0 -6px; } /* ── BALAM PESA (gesto sienta): el listón se hunde bajo él — él 4px más abajo, el asiento más hondo, y dos pliegues de tela convergen. ── */ html[data-temporada] #temporadaBanda[data-gesto="sienta"] #temporadaPersonaje{ /* -34: el render del personaje trae margen transparente abajo y con -22 parecía FLOTAR sobre el listón (lo señaló el cliente con captura). */ clip-path:none; bottom:calc(var(--temporada-banda-alto) - 34px); } html[data-temporada] #temporadaBanda[data-gesto="sienta"]::after{ top:-4px; height:12px; background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.24), rgba(0,0,0,0) 72%); } html[data-temporada] #temporadaBanda[data-gesto="sienta"] .temporada-banda-trama::before{ content:''; position:absolute; top:0; bottom:0; width:calc(var(--temporada-banda-pieza)*1.1); right:calc(clamp(10px, 4%, 28px) - var(--temporada-banda-pieza)*.05); background: linear-gradient(105deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.10) 49% 51%, rgba(0,0,0,0) 56%), linear-gradient(75deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.10) 49% 51%, rgba(0,0,0,0) 56%); } html[data-temporada] #temporadaBanda[data-gesto="sienta"][data-lado="izq"] .temporada-banda-trama::before{ right:auto; left:calc(clamp(10px, 4%, 28px) - var(--temporada-banda-pieza)*.05); } /* ── IXCHEL TEJE (gesto tapa): la trama de la banda NACE de sus manos — el patrón se desvanece hacia el personaje, como saliendo del telar. ── */ html[data-temporada] #temporadaBanda[data-gesto="tapa"][data-lado="izq"] .temporada-banda-trama{ -webkit-mask:linear-gradient(90deg, rgba(0,0,0,0) 24px, #000 170px); mask:linear-gradient(90deg, rgba(0,0,0,0) 24px, #000 170px); } html[data-temporada] #temporadaBanda[data-gesto="tapa"]:not([data-lado="izq"]) .temporada-banda-trama{ -webkit-mask:linear-gradient(270deg, rgba(0,0,0,0) 24px, #000 170px); mask:linear-gradient(270deg, rgba(0,0,0,0) 24px, #000 170px); } /* ── KUKUL SE PERCHA (data-temporada-percha="si" + arte vertical): en el cordel de la guirnalda, cola colgando por delante de la cabecera. El vaivén es temporada-mece: EL bucle del personaje, gastado en el gesto de rama (permiso P4). Lejos de los controles del extremo derecho. ── */ html[data-temporada] #temporadaPieza[data-modo="percha"]{ position:absolute; top:-12px; right:clamp(120px, 18%, 260px); width:58px; height:auto; pointer-events:none; user-select:none; filter:var(--temporada-sombra); transform-origin:50% 6%; animation:temporada-llega 700ms ease-out both, temporada-mece 6000ms ease-in-out 1200ms infinite alternate; } @media (max-width:640px){ html[data-temporada] #temporadaPieza[data-modo="percha"]{ display:none } } /* ── BALAM ESPÍA (data-temporada-espia="si" + arte A3): espera fuera del borde derecho y se asoma una sola vez a media página revisada. Es transición dirigida por scroll, no bucle; pura mirada. ── */ html[data-temporada] #temporadaPieza[data-modo="espia"]{ position:fixed; top:36vh; left:auto; bottom:auto; right:calc(var(--temporada-pieza-ancho) * -1); width:var(--temporada-pieza-ancho); z-index:12; pointer-events:none; user-select:none; filter:var(--temporada-sombra); transition:right .6s cubic-bezier(.22,.9,.36,1); } html[data-temporada][data-temporada-espia-visto] #temporadaPieza[data-modo="espia"]{ right:calc(var(--temporada-pieza-ancho) * -.55); } @media (max-width:900px){ html[data-temporada] #temporadaPieza[data-modo="espia"]{ display:none } } /* ── El huevo de pascua: clic en la mascota → brinco. La ÚNICA excepción de pointer-events de toda la capa, y por qué es segura: la caja del personaje solo pisa la banda (decoración) y el aire que la propia banda reservó — jamás un control. Institucional fuera: Alba no brinca. ── */ html[data-temporada]:not([data-paleta-tipo]) #temporadaPersonaje, html[data-temporada][data-app="actas"] #temporadaPersonaje{ pointer-events:auto; cursor:pointer; } @keyframes temporada-brinco{ 0%{ transform:none } 28%{ transform:scale(1.10,.86) } 55%{ transform:translateY(-14px) scale(.94,1.08) } 78%{ transform:none } 90%{ transform:scale(1.04,.97) } 100%{ transform:none } } html[data-temporada] #temporadaPersonaje.temporada-brinca{ animation:temporada-brinco 640ms cubic-bezier(.34,1.56,.64,1) both; animation-iteration-count:1; } /* ── La voz firmada del acuse: el chip de la mascota, 1.5s y se va ── */ html[data-temporada] .temporada-acuse .temporada-acuse-frase{ position:absolute; bottom:16px; left:50%; translate:-50% 0; white-space:nowrap; padding:5px 12px; border-radius:999px; background:rgba(20,24,28,.88); color:#F7EFDF; /* 9.4:1 sobre sí mismo */ font-size:12.5px; font-weight:700; letter-spacing:.04em; animation:temporada-frase 1500ms cubic-bezier(.22,.9,.36,1) both; animation-iteration-count:1; } @keyframes temporada-frase{ 0%{ opacity:0; transform:translateY(6px) scale(.92) } 12%, 78%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-8px) } } html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) .temporada-acuse .temporada-acuse-frase{ background:rgba(11,36,44,.92); font-weight:600; letter-spacing:.08em; border:1px solid rgba(var(--temporada-1-rgb),.35); } /* ── El sello de la época (solo festivo): rosetón troquelado que se ESTAMPA 900ms después de la entrada, como sello de goma sobre papel. En un sistema que vive de actas selladas, el guiño es de la casa. ── */ html[data-temporada] #temporadaBanda .temporada-banda-sello{ position:absolute; top:50%; left:48px; width:34px; height:34px; margin-top:-17px; border-radius:50%; border:2px solid rgba(var(--temporada-1-rgb),.55); background: radial-gradient(circle, rgba(var(--temporada-2-rgb),.85) 0 4px, rgba(var(--temporada-2-rgb),0) 5px), repeating-conic-gradient(rgba(var(--temporada-1-rgb),.5) 0 12deg, rgba(var(--temporada-1-rgb),0) 12deg 24deg); transform:rotate(-8deg); animation:temporada-estampa 320ms ease-out 900ms both; animation-iteration-count:1; } html[data-temporada] #temporadaBanda[data-lado="izq"] .temporada-banda-sello{ left:auto; right:48px; } @keyframes temporada-estampa{ 0%{ opacity:0; transform:scale(1.6) rotate(-14deg) } 60%{ opacity:1; transform:scale(.94) rotate(-8deg) } 100%{ opacity:1; transform:scale(1) rotate(-8deg) } } html[data-temporada][data-paleta-tipo]:not([data-app="actas"]) #temporadaBanda .temporada-banda-sello{ display:none; } @media (max-width:640px){ html[data-temporada] #temporadaBanda .temporada-banda-sello{ display:none } } /* ── El viento del scroll compone por translate; su vuelta es suave ── */ html[data-temporada] #temporadaGuirnalda{ transition:translate .5s ease-out } /* ── Menos movimiento: TODO lo de esta sección calla. El parpadeo apagado queda en opacity:0 (jamás un fotograma atascado de ojos cerrados); el espía queda visible y quieto, ya asomado — que nadie pierda a Balam por pedir calma; el huevo deja de ser clicable. ── */ @media (prefers-reduced-motion: reduce){ html[data-temporada] #temporadaPersonaje, html[data-temporada] #temporadaBanda .temporada-banda-trama, html[data-temporada] #temporadaBanda .temporada-banda-remate, html[data-temporada] #temporadaBanda .temporada-banda-texto, html[data-temporada] #temporadaBanda .temporada-banda-sello, html[data-temporada] #temporadaPieza[data-modo="percha"]{ animation:none } html[data-temporada] #temporadaParpadeo{ animation:none; opacity:0 } html[data-temporada] #temporadaPersonaje, html[data-temporada] #temporadaGuirnalda, html[data-temporada] #temporadaPieza[data-modo="espia"]{ transition:none } html[data-temporada] #temporadaPieza[data-modo="espia"]{ right:calc(var(--temporada-pieza-ancho) * -.55); } html[data-temporada] #temporadaPersonaje{ pointer-events:none; cursor:default } html[data-temporada] #temporadaPersonaje.temporada-brinca{ animation:none } } /* ===================================================================== 17 · LA COMPAÑERA · te sigue mientras escribes Pedido textual del cliente: la mascota salta del panel al primer campo que tocas y sigue la escritura por toda la página — escribiendo mientras tecleas, pensando cuando paras. Los saltos de campo en campo son TRANSICIONES dirigidas por la persona (el rebote del bezier es el «saltito»); sus dos bucles de estado son mutuamente excluyentes: nunca hay más de uno vivo, y solo mientras la compañera existe. ===================================================================== */ html[data-temporada] #temporadaCompanera{ position:fixed; width:92px; height:auto; z-index:39; /* bajo modales y avisos, sobre el contenido */ pointer-events:none; user-select:none; filter:var(--temporada-sombra); transition:left .45s cubic-bezier(.34,1.56,.64,1), top .45s cubic-bezier(.34,1.56,.64,1); animation:temporada-llega 420ms cubic-bezier(.34,1.56,.64,1) both; animation-iteration-count:1; } html[data-temporada] #temporadaCompanera .temporada-companera-cuerpo{ display:block; width:100%; height:auto; pointer-events:none; transform-origin:50% 88%; } /* TECLEANDO (la escena Claude Code, pedida con nombre): el cuerpo lleva el vaivén corto del tecleo. Solo vive mientras la persona teclea. */ @keyframes temporada-teclea{ from{ transform:rotate(-1.6deg) translateY(0) } to{ transform:rotate(1.2deg) translateY(1px) } } html[data-temporada] #temporadaCompanera[data-estado="escribe"] .temporada-companera-cuerpo{ animation:temporada-teclea 300ms ease-in-out infinite alternate; } /* pensando: ladea la cabeza y respira despacio, la laptop sigue abierta (el llenado no ha terminado) con la pantalla atenuada */ @keyframes temporada-piensa{ from{ transform:rotate(4deg) translateY(0) } to{ transform:rotate(4deg) translateY(-4px) } } html[data-temporada] #temporadaCompanera[data-estado="piensa"] .temporada-companera-cuerpo{ animation:temporada-piensa 3200ms ease-in-out 200ms infinite alternate; } /* ── LA LAPTOP tejida de la casa: CSS puro, teñida por la época. Cerrada (scale 0) hasta que la mascota la SACA al primer tecleo, con rebote. ── */ html[data-temporada] #temporadaCompanera .temporada-companera-laptop{ position:absolute; left:50%; bottom:2%; width:62%; height:36%; translate:-50% 0; transform:scale(0); transform-origin:50% 100%; transition:transform .38s cubic-bezier(.34,1.56,.64,1); pointer-events:none; } html[data-temporada] #temporadaCompanera[data-estado] .temporada-companera-laptop{ /* abierta e INCLINADA hacia su mirada baja: la escena deja de leerse como una tapa plana de frente (lo señaló el cliente con captura) */ transform:perspective(130px) rotateX(-12deg) scale(1); } /* la pantalla: bisel oscuro con el resplandor de la época */ html[data-temporada] #temporadaCompanera .temporada-companera-laptop::before{ content:''; position:absolute; left:7%; right:7%; top:0; bottom:28%; border-radius:12% 12% 4% 4%; border:2px solid #0B1A20; background: linear-gradient(180deg, rgba(var(--temporada-1-rgb),.42), rgba(var(--temporada-1-rgb),.10)), #10262D; box-shadow:0 0 8px rgba(var(--temporada-1-rgb),.30); } /* la base con sus teclas */ html[data-temporada] #temporadaCompanera .temporada-companera-laptop::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:30%; border-radius:10% 10% 40% 40%; border:2px solid #0B1A20; background: repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 7%, rgba(0,0,0,0) 7% 14%), linear-gradient(#2C3F47, #19282F); } /* tecleando, la pantalla LATE con la luz de la época */ @keyframes temporada-pantalla{ from{ box-shadow:0 0 5px rgba(var(--temporada-1-rgb),.22) } to{ box-shadow:0 0 14px rgba(var(--temporada-1-rgb),.60) } } html[data-temporada] #temporadaCompanera[data-estado="escribe"] .temporada-companera-laptop::before{ animation:temporada-pantalla 700ms ease-in-out infinite alternate; } html[data-temporada] #temporadaCompanera[data-estado="piensa"] .temporada-companera-laptop{ opacity:.72; } /* ── SEPTIEMBRE EN LA ESCENA: en patria la pantalla muestra la BANDERA (celeste-blanco-celeste) y las líneas se teclean encima; y a su lado, un banderín patrio plantado. Cada época pondrá el suyo. ── */ html[data-temporada="patria"] #temporadaCompanera .temporada-companera-laptop::before{ background: linear-gradient(180deg, rgba(var(--temporada-1-rgb),.20), rgba(var(--temporada-1-rgb),.05)), linear-gradient(90deg, rgba(var(--temporada-1-rgb),.55) 0 33%, rgba(var(--temporada-asta-rgb),.50) 33% 67%, rgba(var(--temporada-1-rgb),.55) 67%), #10262D; } html[data-temporada] #temporadaCompanera .temporada-companera-banderin{ position:absolute; right:-4%; bottom:6%; width:26%; height:52%; pointer-events:none; display:none; transform:rotate(8deg); transform-origin:50% 100%; } html[data-temporada="patria"] #temporadaCompanera .temporada-companera-banderin{ display:block } /* el palito */ html[data-temporada] #temporadaCompanera .temporada-companera-banderin::before{ content:''; position:absolute; left:46%; top:8%; bottom:0; width:8%; border-radius:40%; background:linear-gradient(#B98A4F, #8F6435); } /* el gallardete: triángulo celeste con corazón blanco */ html[data-temporada] #temporadaCompanera .temporada-companera-banderin::after{ content:''; position:absolute; left:50%; top:4%; width:52%; height:34%; clip-path:polygon(0 0, 100% 50%, 0 100%); background:linear-gradient(90deg, rgba(var(--temporada-1-rgb),.95) 0 30%, rgba(var(--temporada-asta-rgb),.95) 30% 62%, rgba(var(--temporada-1-rgb),.95) 62%); } /* ── El TECLEO tipo GIF (pedido con captura): líneas de texto que avanzan en la pantalla con steps(), cursor que parpadea, y las patitas tamborileando sobre el teclado. Solo en «escribe». ── */ html[data-temporada] #temporadaCompanera .temporada-companera-lineas{ position:absolute; left:14%; right:14%; top:8%; bottom:38%; overflow:hidden; pointer-events:none; background-image: linear-gradient(rgba(var(--temporada-1-rgb),.85), rgba(var(--temporada-1-rgb),.85)), linear-gradient(rgba(var(--temporada-1-rgb),.55), rgba(var(--temporada-1-rgb),.55)); background-size:0% 18%, 0% 18%; background-position:0 22%, 0 66%; background-repeat:no-repeat, no-repeat; } @keyframes temporada-lineas{ 0%{ background-size:8% 18%, 0% 18% } 46%{ background-size:82% 18%, 0% 18% } 54%{ background-size:82% 18%, 10% 18% } 100%{ background-size:82% 18%, 68% 18% } } html[data-temporada] #temporadaCompanera[data-estado="escribe"] .temporada-companera-lineas{ animation:temporada-lineas 1900ms steps(9) infinite; } /* el cursor: una barrita que parpadea al final de la pantalla */ html[data-temporada] #temporadaCompanera .temporada-companera-lineas::after{ content:''; position:absolute; right:6%; bottom:14%; width:7%; height:20%; background:rgba(var(--temporada-1-rgb),.9); opacity:0; } @keyframes temporada-cursor{ 0%, 49%{ opacity:1 } 50%, 100%{ opacity:0 } } html[data-temporada] #temporadaCompanera[data-estado="escribe"] .temporada-companera-lineas::after{ animation:temporada-cursor 640ms steps(1) infinite; } /* las patitas: dos muñoncitos de pelaje tamborileando en fases alternas */ html[data-temporada] #temporadaCompanera .temporada-companera-patas{ position:absolute; left:50%; bottom:9%; width:44%; height:9%; translate:-50% 0; pointer-events:none; opacity:0; } html[data-temporada] #temporadaCompanera[data-estado] .temporada-companera-patas{ opacity:1 } html[data-temporada] #temporadaCompanera .temporada-companera-patas::before, html[data-temporada] #temporadaCompanera .temporada-companera-patas::after{ content:''; position:absolute; top:0; width:34%; height:100%; border-radius:45% 45% 55% 55%; background:linear-gradient(#8a5c3e, #6f4630); box-shadow:0 1px 1px rgba(0,0,0,.35); } html[data-temporada] #temporadaCompanera .temporada-companera-patas::before{ left:6% } html[data-temporada] #temporadaCompanera .temporada-companera-patas::after{ right:6% } @keyframes temporada-tamborilea{ from{ transform:translateY(-38%) } to{ transform:translateY(14%) } } html[data-temporada] #temporadaCompanera[data-estado="escribe"] .temporada-companera-patas::before{ animation:temporada-tamborilea 190ms ease-in-out infinite alternate; } html[data-temporada] #temporadaCompanera[data-estado="escribe"] .temporada-companera-patas::after{ animation:temporada-tamborilea 190ms ease-in-out 95ms infinite alternate; } /* Con la compañera en el campo, el personaje de la banda se retira: es la MISMA mascota — no puede estar en dos lugares. La banda queda sola. */ html[data-temporada][data-temporada-companera-activa] #temporadaBanda #temporadaPersonaje{ opacity:0; transition:opacity .35s ease-out .25s; } /* En el teléfono no cabe junto al campo: cambia de puesto — su MUELLE, abajo a la izquierda, encima del teclado (el campo activo llega solo hasta ahí al abrir el teclado). Cada app levanta el suelo sobre su barra inferior con --temporada-companera-suelo. Con teclado de iOS, el guion la sube en línea (visualViewport). */ @media (max-width:699px){ html[data-temporada] #temporadaCompanera{ width:64px; left:10px; top:auto; bottom:calc(14px + var(--temporada-companera-suelo, 0px)); } } @media print{ #temporadaCompanera{ display:none } } @media (prefers-contrast: more){ #temporadaCompanera{ display:none } } @media (prefers-reduced-motion: reduce){ html[data-temporada] #temporadaCompanera{ display:none } html[data-temporada] #temporadaCompanera .temporada-companera-cuerpo, html[data-temporada] #temporadaCompanera .temporada-companera-laptop::before, html[data-temporada] #temporadaCompanera .temporada-companera-lineas, html[data-temporada] #temporadaCompanera .temporada-companera-lineas::after, html[data-temporada] #temporadaCompanera .temporada-companera-patas::before, html[data-temporada] #temporadaCompanera .temporada-companera-patas::after{ animation:none } html[data-temporada][data-temporada-companera-activa] #temporadaBanda #temporadaPersonaje{ opacity:1 } }