/* ========================================================================== EVENTOS.CSS — página de eventos, contra DISENOWEB_EVENTOS.ai (1440, único ancho que trae el documento — no hay mesa de trabajo de tablet/móvil). -------------------------------------------------------------------------- Va LA ÚLTIMA del de eventos.html. Reusa a propósito lo que ya existe (mismo criterio que dona.css): · #cal-eventos / eventos-calendario.js (paginas.css) → el calendario real, sin tocar · .doc (paginas.css) → el enlace a Flickr · .btn-dona / .btn-hueco (estilo.css) → los botones rojos Sólo son nuevos: el hero fotográfico y la banda roja de las 5 líneas de trabajo — piezas que no existían en ninguna otra página con este lenguaje. ========================================================================== */ /* La barra de redes en negro ahora se centraliza en paginas.css (que esta página también carga) — ver el comentario de .social-top ahí. */ /* ========================== 1. HERO ========================== */ .eventos-hero{ position:relative; overflow:hidden; line-height:0; margin-top:calc(-1 * var(--nav-alto)); background:transparent; } /* BUG encontrado: --nav-alto (estilo.css) vale 78px fijo, pero .cabecera real mide 86.5px en escritorio — 8.5px que dejaban una franja blanca entre la tira negra de redes (.social-top) y el hero. Mismo bug/mismo fix que voluntarios.css — ver el comentario largo ahí. */ @media (min-width:901px){ .eventos-hero{ margin-top:calc(-1 * var(--nav-alto) - 8.5px) } } .eventos-hero-img{ display:block; width:100%; height:auto } /* Animación ligera del hero: el banner es UNA sola imagen aplanada (foto + título "Eventos" + mascotas + partículas, todo horneado por igual — ver el comentario de arriba en HERO DE EVENTOS), así que no hay forma de animar sólo el texto o sólo un muñeco por separado sin volver a separar el arte en capas. En su lugar, un "respiro" muy lento y sutil sobre TODA la pieza (zoom apenas perceptible, tipo Ken Burns) le da vida sin romper el encuadre ni tapar nada. object-fit:cover en móvil ya recorta la imagen, así que el zoom no deja bordes vacíos a ningún ancho. */ @media (prefers-reduced-motion: no-preference){ .eventos-hero-img{ animation: eventos-respiro 9s ease-in-out infinite; transform-origin: center 60%; } @keyframes eventos-respiro{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } } } /* En móvil, escalar el banner completo (width:100%;height:auto) deja el título "Eventos" y las mascotas diminutos: a 375px de ancho la pieza entera (2,9:1) da apenas ~130px de alto. En vez de eso, se recorta con object-fit:cover a una franja más alta (más "zoom"), ancladas al centro inferior — que es donde vive el título y las mascotas — perdiendo cerca en vez de texto. Mismo truco que un hero de foto normal (Inicio ya lo hace, sólo que ahí la foto es una capa aparte del titular; aquí van juntos en un solo archivo, así que el recorte tiene que ir en la imagen entera). */ @media (max-width:900px){ /* object-position recalibrado a centro: el banner nuevo (2026-08-19) tiene el título "EVENTOS" y los niños centrados horizontalmente, no abajo- izquierda como la pieza vieja (2,9:1) que este 32%/78% tenía calibrado. */ .eventos-hero{ aspect-ratio:4/3 } .eventos-hero-img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; } } @media (max-width:600px){ /* Composición vertical dedicada (img/hero-eventos-mobile.webp, servida vía — ver eventos.html): ya viene compuesta y encuadrada para este ancho, así que se resetea el recorte object-fit:cover del bloque de arriba (pensado para la imagen ancha de escritorio) y se deja la imagen entera, a su propia proporción. */ .eventos-hero{ aspect-ratio:auto } .eventos-hero-img{ width:100%; height:auto; object-fit:unset; object-position:unset; } } /* Nube de esquina (FINALES/ELEMENTOS RECURRENTE/NUBE.png), entera — no es el cuarto de nube recortado de .nube-esquina. Se apoya detrás del logo para que no quede a secas sobre la foto oscura; el logo (en .cabecera, sticky, z-index:60) ya cae por encima porque .eventos-hero no crea su propio contexto de apilamiento más alto. */ .eventos-hero-nube{ position:absolute; z-index:1; pointer-events:none; /* 🔒 CONGELADO — confirmado por el usuario (nube de esquina de eventos.html, DISENOWEB_EVENTOS.ai). NO reposicionar/redimensionar sin pedir permiso explícito primero, aunque una comparación visual sugiera que "se ve un poco distinto" — ver skill §8. Sigue valiendo tal cual hasta 1440px (el único ancho que trae el .ai); ver abajo el override explícito que Isaías pidió para pantallas más anchas que eso. */ top:-55px; left:-45px; width:280px; height:auto; } @media (max-width:600px){ .eventos-hero-nube{ top:0; left:-18px; width:135px } } /* .eventos-hero no tiene max-width (va de borde a borde): en pantallas muy anchas (>1440px, más allá de la mesa del .ai) la foto de fondo sigue creciendo con el viewport pero la nube se quedaba fija en 280px, así que se veía cada vez más chica/despegada del logo cuanto más ancha la ventana. Isaías pidió agrandarla ahí — crece con el viewport (25vw) con un tope más alto (560px). left (-15px) quedó confirmado como posición final. top se subió 40px más (-65px→-105px, sobre el mismo overflow: hidden de .eventos-hero) porque a pantalla completa la nube (ya agrandada) asomaba demasiado hacia abajo, dentro de la foto — con más negativo se recorta más arriba de la pieza y el borde inferior visible sube. */ @media (min-width:1441px){ .eventos-hero-nube{ width:25vw; max-width:560px; left:-15px; top:-105px } } /* ============== CORTE DE LÍNEAS DIBUJADAS (no el de #banco-nubes) ============== Mismo trazo pincel que ya usa dona.css (img/hero-corte-pincel.webp), recoloreado (corte-lineas-rojo.webp / corte-lineas-negro.webp: mismo alfa, RGB reemplazado — ver README de la tarea). Franja ancha y corta, igual que .nube: se estira a todo el ancho de la sección y se posiciona por fuera del borde para que sólo se vea la silueta, nunca un rectángulo. */ .eventos-corte{ position:absolute; left:-2px; width:calc(100% + 4px); height:auto; display:block; pointer-events:none; z-index:3; } /* Arriba: el trazo trae el color de SU PROPIA sección y "muerde" hacia la de encima — mismo criterio que .nube-arriba (estilo.css): sin voltear, el relleno sólido queda abajo (sellando contra el borde real de la sección) y la línea irregular asoma hacia arriba, sobre la sección anterior. bottom:100% (no un top:-62px fijo) es lo que importa acá: la franja se auto-escala (height:auto según el ancho real) y un desplazamiento en PX fijo sólo calzaba a la escala de escritorio — en móvil la franja renderiza mucho más baja (menos ancho = menos alto) y ese mismo -62px la dejaba flotando con un hueco debajo, separada del borde real de la sección. Con bottom:100% el borde inferior de la franja SIEMPRE queda pegado al borde superior de la sección, sea cual sea su alto real. */ .eventos-corte--arriba{ bottom:100%; margin-bottom:-2px } /* Abajo: el trazo tiene que sellar contra el PROPIO borde de abajo, así que va volteado en vertical (el original trae el relleno sólido abajo, aquí necesita quedar arriba, pegado a la sección) y la línea irregular mira hacia la sección siguiente. top:100% es el mismo ajuste que arriba, para el otro borde. */ .eventos-corte--abajo{ top:100%; margin-top:-2px; transform:scaleY(-1) } /* Dentro de .pie ya había un con su propio z-index (cierre.css); el nuevo hereda la misma posición pero no esa regla (selector distinto), así que el z-index se repite aquí. */ .eventos-corte--pie{ z-index:4 } /* ==================== 2. PRÓXIMOS EVENTOS ==================== */ .cal-eventos{ position:relative; overflow:visible; box-shadow:none !important; } /* ================= 3. LÍNEAS DE TRABAJO — banda roja ================= */ /* #archivo pasa de bloque--gris a esta banda roja: el .ai las separa del enlace a Flickr, que ahora vive en su propia sección de cierre más abajo (ver eventos-cierre). Tarjetas blancas de borde punteado — mismo lenguaje que .marco-punteado, redeclarado aquí porque .marco-punteado depende de --trazo por-instancia (estilo.css) y este fondo es sólido, no admite el grano semitransparente que .marco-punteado superpone. */ .eventos-lineas{ background:var(--rojo-hero); color:#fff; padding:64px 0 70px; position:relative; /* SIN overflow:hidden: el corte de arriba (.eventos-corte--arriba) se posiciona con top negativo a propósito, para asomar POR ENCIMA del borde de la sección — overflow:hidden lo recortaría de raíz. Mismo motivo por el que #archivo (bloque--gris, el contenedor que esta sección reemplaza) tampoco lo llevaba. */ } .eventos-lineas .intro{ color:#fff; max-width:70ch } .eventos-lineas .intro a{ color:#fff; text-decoration:underline } .eventos-lineas .rejilla{ margin-top:28px } .eventos-lineas .rejilla > .ficha{ /* background-clip:padding-box es la parte que importa: sin ella, el fondo blanco de la tarjeta pinta también DEBAJO del borde (comportamiento por defecto, border-box) y un borde punteado blanco sobre un fondo blanco desaparece — los huecos del punteado quedan igual de blancos que los trazos. Con padding-box el fondo se detiene ANTES del borde, así que en los huecos se asoma el rojo de la sección: ahí aparece el punteado. */ background:#fff; background-clip:padding-box; color:var(--negro); border:3px dashed #fff; border-radius:18px; box-shadow:0 3px 0 rgba(0,0,0,.15); } .eventos-lineas .rejilla > .ficha h3{ color:var(--negro) } /* ================= 4. CIERRE — "Ver galería de fotos" ================= Reemplaza, SÓLO en esta página, a la sección .apoyo estándar ("Tu APOYO" con las líneas verdes): el .ai no la trae — pasa directo de la banda roja a este cierre chico (icono + título + bajada + Dona/Voluntario) y de ahí al pie. Reusa el mismo que ya existía (mismo enlace de Flickr), sólo cambia el contenedor: aquí va centrado y suelto, no como ficha de lista. */ .eventos-cierre{ padding:70px 0 76px; text-align:center; background:#fff; position:relative } .eventos-cierre .doc{ display:block; max-width:640px; margin:0 auto 8px; background:none; border:0; box-shadow:none; padding:0; } /* Ícono real del .ai (fotos apiladas), no el flecha-en-cuadrado azul que usa el resto de fichas .doc del sitio: ese badge es para un link EN LISTA (ej. legal.html), y acá el .ai muestra un ícono de trazo negro grande y suelto, sin badge de color detrás. Por eso se anula el fondo/tamaño por defecto de .marca-doc en vez de heredarlo. */ .eventos-cierre .doc .marca-doc{ margin:0 auto 18px; width:120px; height:auto; background:none; border-radius:0; display:block; } .eventos-cierre .doc .marca-doc img{ display:block; width:100%; height:auto } .eventos-cierre .doc h3{ font-size:clamp(24px,2.6vw,32px); font-weight:900; padding-bottom:14px; border-bottom:2px solid var(--negro); display:inline-block; } .eventos-cierre .doc p{ margin-top:14px; font-size:16px } .eventos-cierre .botones{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px; } @media (max-width:600px){ .eventos-lineas{ padding:44px 0 50px } .eventos-cierre{ padding:48px 0 54px } }