/* Ajustes chicos que las utilidades de Tailwind no cubren directo. Portado del diseño de Stitch AI (proyecto "El Lado Correcto Digital Portal") — animaciones y estados de hover que Tailwind no resuelve con clases solas. */ body { background-color: #f9f9f9; } ::selection { background-color: #c8dfff; color: #4d627e; } /* Header que se achica al hacer scroll */ .header-transition { transition: height 0.3s ease, box-shadow 0.3s ease; } .scrolled-header { height: 50px !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); } /* Fade-in + slide-up escalonado de las tarjetas al cargar. Va detrás de ".js" por el mismo motivo que .revelar: si no hay JavaScript, las tarjetas se muestran directamente en vez de quedar invisibles esperando una animación que nunca va a arrancar. */ .js .animate-fade-up { opacity: 0; transform: translateY(10px); animation: fadeUp .6s ease-out forwards; } .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* Aviso de cookies (2026-08-06): arranca oculto por `display:none`, sin depender de ".js" como .revelar/.animate-fade-up de arriba — ACÁ el comportamiento correcto es el inverso: si no hay JavaScript, tiene que quedarse oculto PARA SIEMPRE (mejor eso que un aviso que tapa contenido y no se puede cerrar nunca). El script en base.html es el único que le saca esta clase, y solo si localStorage dice que todavía no lo aceptaste. */ .oculto-hasta-js { display: none; } /* Tarjetas de nota: elevación + zoom de imagen + título celeste al hover */ .news-card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .news-card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(3,28,53,.1); } .news-card-hover:hover .title-hover { color: #006591; } .news-card-hover:hover .img-zoom { transform: scale(1.05); } .img-zoom { transition: transform 0.5s ease; } /* Cuerpo del artículo (subtítulos "## ", párrafos) */ .articulo-cuerpo p { margin-bottom: 16px; } .articulo-cuerpo img { border-radius: 0.25rem; } /* ── Aparición al hacer scroll ────────────────────────────────────────── El elemento arranca invisible y sube al entrar en pantalla. Lo dispara un IntersectionObserver (ver base.html), no una animación con tiempo fijo: así aparece cuando el lector llega, no antes. Si el navegador no soporta JS, la regla .no-js de abajo lo deja visible igual — nunca se pierde contenido. */ OJO con el ".js" de adelante: el contenido arranca VISIBLE y solo se esconde si el navegador tiene JavaScript andando (base.html le pone la clase "js" al apenas carga). Al revés —esconder por CSS y confiar en que el JS lo muestre— cualquier falla del script dejaba la página entera en blanco, que es mucho peor que perderse la animación. */ .js .revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); } .js .revelar.visible { opacity: 1; transform: translateY(0); } .revelar-d1 { transition-delay: .10s; } .revelar-d2 { transition-delay: .20s; } .revelar-d3 { transition-delay: .30s; } .revelar-d4 { transition-delay: .40s; } /* Respeta a quien pidió menos movimiento en su sistema operativo. */ @media (prefers-reduced-motion: reduce) { .js .revelar { opacity: 1; transform: none; transition: none; } .js .animate-fade-up { opacity: 1; transform: none; animation: none; } .flotar { animation: none; } } /* ── Portada de "Quiénes somos" ───────────────────────────────────────── El fondo es FIJO: celeste arriba a la izquierda, naranja abajo a la derecha. No se mueve ni cambia de opacidad — lo único que reacciona al cursor es el foco de luz de acá abajo, que va por encima. */ .aura-hero { background: radial-gradient(1000px 400px at 15% -10%, #0ea5e9 0%, transparent 60%), radial-gradient(800px 400px at 90% 110%, #b52700 0%, transparent 55%); opacity: .25; } /* Logo que respira, para que el encabezado no se sienta muerto */ .flotar { animation: flotar 6s ease-in-out infinite; } @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Tarjetas de "Quiénes somos": se levantan y marcan el borde al pasar */ .tarjeta-valor { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .tarjeta-valor:hover { transform: translateY(-6px); border-color: #006591; box-shadow: 0 16px 32px -12px rgba(3,28,53,.22); } .tarjeta-valor:hover .icono-valor { transform: scale(1.12) rotate(-6deg); background-color: #006591; color: #ffffff; } .icono-valor { transition: transform .35s ease, background-color .35s ease, color .35s ease; } /* Subrayado que se dibuja solo debajo de los títulos de bloque */ .subrayado-anim { position: relative; } .subrayado-anim::after { content: ''; position: absolute; left: 0; bottom: -10px; height: 3px; width: 0; background: #006591; transition: width .9s cubic-bezier(.2,.6,.2,1); } .revelar.visible .subrayado-anim::after, .subrayado-anim.visible::after { width: 68px; }