/* ===================================================================== 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 es de pantalla y solo de pantalla. */ @media print{ #temporadaCapa{ 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{ animation:none } } /* MÁS CONTRASTE · quien lo pide necesita la pantalla limpia. La capa entera desaparece: no hay decoración que valga una lectura peor. */ @media (prefers-contrast: more){ #temporadaCapa{ display:none } }