body { font-family: system-ui, -apple-system, sans-serif; color: var(--text-main); background-color: var(--verde-100); margin: 0; line-height: 1.5; } header { /* FIX: se usaba un morado inventado a mano (#410e3a). variables.css ya documenta --oro-500 como "orfebrería y barniz de Pasto: uso mínimo y funcional" — es exactamente el acento pensado para un detalle como este. */ --header-hilo: var(--oro-500); position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem clamp(1rem, 5vw, 2rem); /* Vidrio esmerilado sutil: se mantiene legible sobre cualquier contenido al hacer scroll */ background-color: var(--verde-100 ); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: none; /* reemplazado por el borde tejido de header::after */ height: auto; } header .logo { height: var(--logo-size); width: auto; } header .titulo { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; line-height: 1.2; letter-spacing: 0.01em; color: var(--morado-600); } /* FIX: typography.css le da a todo

un tamaño y color genéricos de titular de página. Este h1 es el wordmark del header, no un titular de contenido, así que necesita su propia regla (más específica) para conservar el tamaño compacto y heredar el color morado en vez del de typography.css. La fuente Bitter sí se conserva — se ve bien también aquí. */ header .titulo h1 { margin: 0; font-size: 1rem; color: inherit; } nav { display: flex; align-items: center; justify-content: space-between; align-items: center; gap: 1.5rem; } nav a { position: relative; padding-bottom: 0.35rem; color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color 0.2s ease-in-out; } /* Asegura que el enlace sea el contenedor de referencia para el hilo */ #navPrincipal a { position: relative; text-decoration: none; /* Limpia subrayados por defecto */ } /* El hilo se "teje" de izquierda a derecha al interactuar */ #navPrincipal a::after { content: ''; position: absolute; left: 0; bottom: -4px; /* Ajusta la distancia del hilo respecto al texto */ width: 0; height: 2px; background: var(--header-hilo); transition: width 0.25s ease-in-out; } /* Cambia el color del texto al pasar el mouse, usar teclado o estar activo */ #navPrincipal a:hover, #navPrincipal a:focus-visible, #navPrincipal a.active { color: var(--primary); } /* Mantiene o muestra el hilo al 100% en hover, focus y estado activo */ #navPrincipal a:hover::after, #navPrincipal a:focus-visible::after, #navPrincipal a.active::after { width: 100%; } /* FIX: Accesibilidad para navegación por teclado */ #navPrincipal a:focus-visible { outline: 2px solid var(--header-hilo); outline-offset: 4px; border-radius: 2px; } /* Estado "con scroll": JS agrega/quita esta clase — el cristal se vuelve más opaco y gana sombra para separarse del contenido que pasa debajo */ header.header--scrolled { background-color: var(--morado-100); box-shadow: var(--sombra-md); } @media (prefers-reduced-motion: no-preference) { header { transition: background-color var(--transicion-base), box-shadow var(--transicion-base); } } @media (prefers-reduced-motion: reduce) { nav a, nav a::after { transition: none; } } .header-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: 50% 20% / 10% 40%; background: var(--morado-100); color: var(--morado-600) !important; font-weight: 700; font-size: var(--texto-sm); text-decoration: none !important; transition: background-color var(--transicion-rapida), transform var(--transicion-rapida); } .header-cta::after { display: none; } /* no usa el hilo de subrayado del resto del nav */ .header-cta:hover, .header-cta:focus-visible { background: var(--color-primario-hover); color: var(--blanco) !important; transform: translateY(-1px); } /* Contenedor del Carrusel */ .hero-carousel { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; /* Ocupa toda la altura de la ventana */ background-color: var(--morado-100); overflow: hidden; background-size: cover; background-position: center; } .hero-weave-deco { /* FIX: estaba en position:fixed + z-index:-1, lo que lo sacaba de su sección en el HTML (noticias) y lo convertía en una capa detrás de TODA la página, no solo de donde vive en el marcado. Ahora decora únicamente la sección que lo contiene — ver .section-container abajo, que ahora es su ancla de posicionamiento. */ position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--verde-100); opacity: 0.6; } .hero-weave-deco svg { animation: tejido-deriva 60s linear infinite; transform-origin: center; /* se agranda un poco para que el giro no deje ver bordes vacíos, ya que el contenedor padre (.section-container) recorta con overflow:hidden */ width: 130%; height: 230%; margin: -1%; } @keyframes tejido-deriva { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================================== ICONOGRAFÍA CULTURAL — Sol de los Pastos / estrella geométrica. Interpretación geométrica moderna para identidad visual, con animación sutil y continua para sentirse "viva". Respeta prefers-reduced-motion. ========================================================================== */ .icono-cultural { display: inline-block; color: var(--oro-500); filter: drop-shadow(0 0 6px rgba(176, 138, 52, 0.35)); } .icono-cultural--girar { animation: sol-girar 90s linear infinite; } .icono-cultural--pulso { animation: sol-pulso 4s ease-in-out infinite; } @keyframes sol-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes sol-pulso { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .hero-weave-deco svg, .icono-cultural--girar, .icono-cultural--pulso { animation: none; } } .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; /* Transición suave de 1.5 segundos */ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-image: linear-gradient(rgba(109, 84, 117, 0.6), rgba(0, 0, 0, 0.7)); } .carousel-slide.active { opacity: 1; z-index: 10; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* ---- Animación de entrada: zoom-out de la imagen + texto escalonado ---- Se dispara automáticamente en la primera carga (la slide activa ya trae la clase). El JS re-dispara esta misma animación cada vez que el carrusel cambia de slide (ver script al final del archivo). */ @keyframes hero-img-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes hero-fade-in-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .carousel-slide.active img { animation: hero-img-zoom-out 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } /*.carousel-slide.active .carousel-caption h2, .carousel-slide.active .carousel-caption p { opacity: 0; animation: hero-fade-in-up 0.8s ease both; } .carousel-slide.active .carousel-caption h2 { animation-delay: 0.35s; } .carousel-slide.active .carousel-caption p { animation-delay: 0.55s; } /* FIX: el botón "Más información" compartía esta animación de aparición con el título y el párrafo; ahora queda quieto/estático siempre. */ .carousel-slide.active .carousel-caption .caption-action { opacity: 1; animation: none; } @media (prefers-reduced-motion: reduce) { .carousel-slide.active img, .carousel-slide.active .carousel-caption h2, .carousel-slide.active .carousel-caption p { animation: none; opacity: 1; } } .carousel-caption { position: absolute; bottom: 30%; /* Altura desde el borde inferior */ left: 50%; /* Empuja la caja a la mitad de la pantalla */ transform: translateX(-50%); /* Centra geométricamente el contenedor */ color: var(--white, #ffffff); z-index: 20; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Sombra para resaltar el texto */ width: 85%; /* Ocupa un ancho seguro en celulares */ max-width: 1400px; /* Ancho máximo elegante en pantallas de PC */ text-align: center; /* CENTRA LAS LETRAS en el medio */ } .carousel-caption h2 { font-size: 3.1rem; margin: 0 0 0.5rem 0; } .carousel-caption p { font-size: 1.3rem; margin: 0; opacity: 0.9; text-shadow: 1 1px 5px rgba(0, 0, 0, 0.8); } .caption-text { margin-bottom: 1.5rem; } .caption-action { display: flex; justify-content: center; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem; border-radius: var(--radio-sm, 6px); font-weight: 700; font-size: 1rem; text-decoration: none; text-shadow: none; transition: background-color var(--transicion-rapida, 0.2s), transform var(--transicion-rapida, 0.2s), box-shadow var(--transicion-rapida, 0.2s); } .btn-primary { background: var(--oro-500); color: var(--morado-900); box-shadow: 0 6px 18px rgba(0,0,0,0.25); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--blanco); transform: translateY(-2px); } /* Sección de Contenido / Bloques */ .section-container { position: relative; /* ancla para .hero-weave-deco, que ahora vive dentro de esta sección */ overflow: hidden; max-width: 1200px; margin: 4rem auto; padding: 0 1.5rem; } .section-title { position: relative; z-index: 1; /* por encima del patrón decorativo */ font-size: 1.8rem; text-align: center; margin-bottom: 3rem; color: var(--text-main); } .section-title::after { content: ''; display: block; width: 50px; height: 3px; background-color: var(--primary); margin: 0.5rem auto 0 auto; } /* Grid de Tarjetas de Noticias */ .news-grid { position: relative; z-index: 1; /* por encima del patrón decorativo */ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .news-card { /* FIX: antes usaba var(--morado-100), el mismo tono claro que el fondo del hero — las tarjetas se perdían visualmente contra el resto de la página. Superficie blanca estándar + el mismo morado como acento del título le da más contraste y jerarquía. */ background-color: var(--color-superficie); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; /* Inclinación 3D: --rx/--ry los actualiza el JS según la posición del cursor; en reposo son 0 y no hacen nada. */ --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0); transition: transform 0.15s ease-out, box-shadow 0.3s ease; will-change: transform; } .news-card:hover { box-shadow: 0 20px 30px -10px rgba(42, 21, 71, 0.25); } .news-img-box { width: 100%; height: 200px; background-color: var(--bg-light); overflow: hidden; } .news-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .news-card:hover .news-img-box img { transform: scale(1.08); } /* Revelado escalonado al hacer scroll — .reveal-delay lo fija el PHP/JS (nth) */ .news-card.reveal { opacity: 0; transform: perspective(900px) translateY(28px); transition: opacity 700ms ease, transform 700ms ease; transition-delay: var(--reveal-delay, 0ms); } .news-card.reveal.visible { opacity: 1; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0); } /* Escalonado con CSS puro — cero cambios al foreach de PHP */ .news-grid .news-card:nth-child(1) { --reveal-delay: 0ms; } .news-grid .news-card:nth-child(2) { --reveal-delay: 140ms; } .news-grid .news-card:nth-child(3) { --reveal-delay: 280ms; } .news-grid .news-card:nth-child(4) { --reveal-delay: 420ms; } @media (prefers-reduced-motion: reduce) { .news-card, .news-img-box img, .news-card.reveal { transition: none; } } .news-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .news-date { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; } .news-content h3 { font-size: 1.25rem; margin: 0 0 0.75rem 0; color: var(--text-main); } .news-excerpt { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; /* Recorte visual de respaldo a 3 líneas (el texto ya viene truncado desde PHP) */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-link { margin-top: auto; color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .news-link:hover { color: var(--primary-dark); text-decoration: underline; } /* ========================================================================== SECCIONES "NOSOTROS" ========================================================================== */ .seccion { max-width: var(--ancho-maximo); margin: 0 auto; padding: var(--espacio-7) 1.5rem; } .seccion__titulo { text-align: center; margin-bottom: var(--espacio-6); } .seccion__titulo h2 { margin-bottom: var(--espacio-1); } .seccion__titulo p { color: var(--color-texto-suave); font-size: var(--texto-lg); max-width: 560px; margin: 0 auto; } .hero-nosotros { position: relative; overflow: hidden; padding: var(--espacio-7) 1.5rem; text-align: center; background: linear-gradient(180deg, var(--morado-100) 0%, var(--color-fondo) 100%); } .hero-nosotros__sol { width: clamp(56px, 8vw, 90px); height: auto; margin: 0 auto var(--espacio-3); } .hero-nosotros h2 { font-size: var(--texto-4xl); max-width: 780px; margin: 0 auto var(--espacio-3); } .hero-nosotros p { max-width: 620px; margin: 0 auto; font-size: var(--texto-lg); color: var(--color-texto-suave); line-height: var(--interlineado-normal); } /* --------- HISTORIA LINEA DE TIEMPO---- */ .timeline { position: relative; max-width: 880px; margin: 0 auto; padding-top: var(--espacio-2); } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background-image: repeating-linear-gradient(to bottom, var(--oro-500) 0px, var(--oro-500) 6px, transparent 6px, transparent 13px); } .timeline-item { position: relative; width: 50%; padding-bottom: var(--espacio-6); opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms ease; } .timeline-item.visible { opacity: 1; transform: translateY(0); } .timeline-item:nth-child(odd) { text-align: right; padding-right: var(--espacio-5); } .timeline-item:nth-child(even) { margin-left: 50%; text-align: left; padding-left: var(--espacio-5); } .timeline-nudo { position: absolute; top: 0.35rem; width: 18px; height: 18px; border-radius: 50%; background: var(--oro-500); box-shadow: 0 0 0 5px var(--color-fondo), 0 0 0 6px var(--morado-300); } .timeline-item:nth-child(odd) .timeline-nudo { right: -9px; } .timeline-item:nth-child(even) .timeline-nudo { left: -9px; } .timeline-año { display: inline-block; font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--texto-2xl); color: var(--morado-600); margin-bottom: 0.2rem; } .timeline-item h3 { font-size: var(--texto-lg); margin: 0 0 0.35rem; } .timeline-item p { color: var(--color-texto-suave); font-size: var(--texto-sm); line-height: var(--interlineado-normal); margin: 0; } @media (max-width: 720px) { .timeline::before { left: 9px; transform: none; } .timeline-item, .timeline-item:nth-child(even) { width: 100%; margin-left: 0; text-align: left; padding-left: var(--espacio-5); padding-right: 0; } .timeline-item:nth-child(odd) .timeline-nudo, .timeline-item:nth-child(even) .timeline-nudo { left: 0; right: auto; } } /* ---- MISION Y VISION ---- */ .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-4); max-width: 900px; margin: 0 auto; } @media (max-width: 680px) { .mv-grid { grid-template-columns: 1fr; } } .mv-card { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); padding: var(--espacio-4); box-shadow: var(--sombra-sm); border-top: 4px solid var(--morado-500); } .mv-card--vision { border-top-color: var(--verde-600); } .mv-card h3 { font-family: var(--fuente-titulo); font-size: var(--texto-xl); margin: 0 0 var(--espacio-2); } .mv-card p { color: var(--color-texto-suave); line-height: var(--interlineado-relajado); margin: 0; } /* ---- CTA DE CIERRE ---- */ .cta-final { text-align: center; padding: var(--espacio-6) 1.5rem; } .cta-final h2 { margin-bottom: var(--espacio-2); } .cta-final__botones { display: flex; justify-content: center; gap: var(--espacio-2); flex-wrap: wrap; margin-top: var(--espacio-3); } .cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.5rem; border-radius: var(--radio-sm); font-weight: 700; font-size: var(--texto-base); text-decoration: none; transition: transform var(--transicion-rapida), background-color var(--transicion-rapida); } .cta-btn--primario { background: var(--color-primario); color: var(--blanco); } .cta-btn--primario:hover { background: var(--color-primario-hover); transform: translateY(-2px); } .cta-btn--secundario { background: var(--color-superficie); color: var(--color-texto); border: 1.5px solid var(--color-borde); } .cta-btn--secundario:hover { border-color: var(--morado-400); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .timeline-item, .valor-card__inner, .cta-btn { transition: none !important; } } /* Evita cualquier desbordamiento horizontal residual en móvil */ body { overflow-x: hidden; } /* ========================================================================== FOOTER ENRIQUECIDO — clases nuevas, opt-in. Solo se activan si el