:root {
    --primary-rgb: 18, 119, 202;
    --secondary-rgb: 124, 97, 255;
    --accent-rgb: 94, 234, 212;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.95), rgba(var(--secondary-rgb), 0.9));
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.35);
    z-index: 70;
    transition: width 120ms ease;
}

/* Mejora progresiva:
    - Sin JS: el contenido NO debe quedar oculto.
    - Con JS (html.js): se habilitan las animaciones y revelado.
*/
.fade-in-up {
    opacity: 1;
    transform: none;
}

html.js .fade-in-up {
    opacity: 0;
    transform: translateY(14px);
    animation: fadeInUp 0.9s ease-out forwards;
    animation-play-state: paused;
}

html.js .fade-in-up.is-visible {
    animation-play-state: running;
}

.gradient-text {
    background: linear-gradient(120deg, rgb(var(--primary-rgb)) 0%, rgb(var(--secondary-rgb)) 50%, #7ef0ff 100%);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradientMove 8s ease infinite;
}

.cursor-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--x, -999px) var(--y, -999px), rgba(var(--primary-rgb), 0.18), transparent 55%);
    mix-blend-mode: screen;
    opacity: 0.9;
}

.typewriter {
    position: relative;
    min-height: 1.5em;
}



.typewriter.typewriter-done::after {
    animation-duration: 1.2s;
}

.nav-scrolled {
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
}

.animated-grid {
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px;
    animation: gridMove 18s linear infinite;
}

.scanlines {
    background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055) 1px, transparent 1px, transparent 6px), radial-gradient(circle at 20% 20%, rgba(var(--primary-rgb), 0.16), transparent 40%), radial-gradient(circle at 80% 30%, rgba(var(--primary-rgb), 0.12), transparent 45%), radial-gradient(circle at 60% 85%, rgba(255, 255, 255, 0.06), transparent 40%);
    opacity: 0.28;
    mix-blend-mode: overlay;
    animation: scanFlicker 7s ease-in-out infinite;
}

.orb {
    filter: blur(70px);
    opacity: 0.6;
    transform: translate3d(0, 0, 0);
}

.orb-1 {
    animation: orbMove1 14s ease-in-out infinite;
}

.orb-2 {
    animation: orbMove2 18s ease-in-out infinite;
}

.orb-3 {
    animation: orbMove3 22s ease-in-out infinite;
}

.float-slow {
    animation: float 10s ease-in-out infinite;
}

.glow-pulse {
    box-shadow: 0 0 30px rgba(18, 119, 202, 0.18), 0 0 80px rgba(18, 119, 202, 0.12);
    animation: glow 6s ease-in-out infinite;
}

.gradient-border {
    border: 1px solid transparent;
    background: linear-gradient(rgba(28, 43, 54, 0.88), rgba(28, 43, 54, 0.88)) padding-box, linear-gradient(135deg, rgba(var(--primary-rgb), 0.65), rgba(255, 255, 255, 0.12), rgba(var(--primary-rgb), 0.15)) border-box;
}

.glass {
    backdrop-filter: blur(14px);
}

.cta-sparkle {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cta-sparkle::before {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background-image: radial-gradient(5px 5px at 20% 30%, rgba(var(--primary-rgb), 0.6), transparent 55%), radial-gradient(5px 5px at 80% 40%, rgba(var(--secondary-rgb), 0.55), transparent 55%), radial-gradient(6px 6px at 60% 70%, rgba(var(--accent-rgb), 0.45), transparent 60%);
    opacity: 0.95;
    animation: sparkles 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.cta-sparkle::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.25) 46%, rgba(255, 255, 255, 0.12) 54%, transparent 65%);
    transform: translateX(-45%) skewX(-20deg);
    animation: shimmer 3.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.cta-sparkle > * {
    position: relative;
    z-index: 1;
}

.hover-tilt {
    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    transition: transform 650ms ease;
}

.hover-tilt:hover {
    transform: perspective(900px) rotateX(3deg) rotateY(-4deg);
}

.micro-card {
    transition: transform 220ms ease, opacity 220ms ease;
}

.micro-card:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.halo {
    transition: opacity 260ms ease;
}

.card-hover:hover .halo {
    opacity: 0.95;
}

.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 320ms ease, opacity 220ms ease;
}

/* Evita que los elementos del grid se estiren a la altura de la fila cuando un vecino se expande.
   Mantiene cada card independiente para que al abrir una no cambie la altura de las demás. */
.accordion-item {
    align-self: start;
}

/* Alinear el contenido expandido con la columna de texto (icono + espacio entre elementos).
   Ajusta el padding para que el texto desplegado quede bajo el título dentro de la misma card. */
.accordion-item .accordion-content {
    padding-left: 2.5rem;
    padding-right: 1.5rem;
}

.accordion-item.open .accordion-content {
    max-height: 420px;
    opacity: 1;
    margin-top: 10px;
}

.timeline {
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.4), rgba(var(--secondary-rgb), 0.5));
    opacity: 0.6;
}

.timeline-step {
    position: relative;
    padding-left: 32px;
}

.timeline-step::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.9), rgba(var(--secondary-rgb), 0.9));
    box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.35);
}

@keyframes gridMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 120px 120px, 120px 120px; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 30px rgba(18, 119, 202, 0.18), 0 0 80px rgba(18, 119, 202, 0.12); }
    50% { box-shadow: 0 0 40px rgba(18, 119, 202, 0.28), 0 0 110px rgba(18, 119, 202, 0.16); }
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes scanFlicker {
    0%, 100% { opacity: 0.22; }
    50% { opacity: 0.32; }
}

@keyframes shimmer {
    0% { transform: translateX(-55%) skewX(-20deg); opacity: 0; }
    15% { opacity: 1; }
    45% { opacity: 1; }
    100% { transform: translateX(55%) skewX(-20deg); opacity: 0; }
}

@keyframes sparkles {
    0% { transform: translate3d(-6%, -6%, 0) rotate(0deg); }
    50% { transform: translate3d(6%, 6%, 0) rotate(180deg); }
    100% { transform: translate3d(-6%, -6%, 0) rotate(360deg); }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCaret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes orbMove1 {
    0%, 100% { transform: translate(-10px, 0px) scale(1); }
    50% { transform: translate(50px, 25px) scale(1.08); }
}

@keyframes orbMove2 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(-40px, 35px) scale(1.06); }
}

@keyframes orbMove3 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .animated-grid,
    .scanlines,
    .float-slow,
    .glow-pulse,
    .fade-in-up,
    .orb-1,
    .orb-2,
    .orb-3,
    .cta-sparkle::before,
    .cta-sparkle::after,
    .gradient-text,
    .hover-tilt,
    .cursor-glow,
    .scroll-progress {
        animation: none !important;
        transition: none !important;
    }

    .fade-in-up {
        opacity: 1;
        transform: none;
    }

    .accordion-content {
        max-height: none;
        opacity: 1;
    }
}

h1, h2, h3, h4 {
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
    overflow: visible !important;
}

/* Estilos para la columna de políticas: columna vertical, centrada en móvil, alineada a la derecha en md+ */
@media (min-width: 768px) {
    footer .policies {
        text-align: right;
        align-items: flex-end;
    }
    footer .policies a,
    footer .policies h5 {
        text-align: right;
    }
}

/* Footer grid responsive: en md+ mostrar 4 columnas y hacer la primera más ancha */
footer {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    footer {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
    footer .about {
        /* mantener columna inicial ligeramente más ancha */
        min-width: 280px;
    }
    footer .resources,
    footer .contact {
        min-width: 160px;
    }
    footer .contact .material-symbols-outlined,
    footer .contact a {
        vertical-align: middle;
    }
}