/* Home backgrounds */

/* Base decorative layer */
.section-bg-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.section-3d-bg .gradient-orb {
    z-index: 1;
}

.section-3d-bg .blueprint-corner {
    z-index: 2;
}

/* Hero */
#inicio.hero .hero-mesh-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 12% 88%, rgba(217, 119, 6, 0.35) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 88% 18%, rgba(251, 191, 36, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse 40% 35% at 55% 45%, rgba(51, 65, 85, 0.12) 0%, transparent 60%);
    mix-blend-mode: soft-light;
}

#inicio.hero .hero-overlay.glass-overlay {
    background:
        linear-gradient(125deg,
            rgba(15, 23, 42, 0.45) 0%,
            rgba(30, 41, 59, 0.35) 42%,
            rgba(120, 53, 15, 0.18) 100%);
}

#inicio.hero::before {
    width: min(520px, 55vw);
    height: min(520px, 55vw);
    background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, transparent 68%);
}

#inicio.hero::after {
    content: '';
    position: absolute;
    bottom: -8%;
    right: -5%;
    width: min(420px, 45vw);
    height: min(420px, 45vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.2) 0%, transparent 70%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 2;
    animation: orbFloat 14s ease-in-out infinite reverse;
}

/* Nosotros */
#nosotros.about .section-bg-mesh {
    background:
        linear-gradient(165deg, #f8fafc 0%, #fffbeb 38%, #f1f5f9 100%),
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(217, 119, 6, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 65% 50% at 100% 100%, rgba(51, 65, 85, 0.08) 0%, transparent 50%);
}

#nosotros.about .section-bg-mesh::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(217, 119, 6, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 65, 85, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 75%);
}

/* Proportions: image and text aligned */
#nosotros.about {
    padding: clamp(56px, 7vw, 88px) 0;
    overflow: visible;
}

#nosotros.about .about-grid {
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}

#nosotros.about .about-image {
    overflow: visible;
}

#nosotros.about .about-image img {
    aspect-ratio: 4 / 3;
    max-height: min(440px, 58vh);
    object-fit: cover;
    object-position: center;
}

#nosotros.about .about-content {
    padding: clamp(22px, 3.5vw, 34px);
}

#nosotros.about .about-content h2 {
    font-size: clamp(1.85rem, 4vw, 2.65rem);
    margin-bottom: 14px;
    line-height: 1.12;
}

#nosotros.about .about-subtitle {
    font-family: 'Rajdhani', sans-serif;
    color: var(--primary);
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.12rem);
    margin-bottom: 14px;
}

#nosotros.about .about-content p {
    font-size: clamp(0.92rem, 1.6vw, 1rem);
    margin-bottom: 14px;
    line-height: 1.65;
}

#nosotros.about .about-features {
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 0;
}

#nosotros.about .about-feature {
    padding: 11px 14px;
}

#nosotros.about .about-feature span {
    font-size: 0.86rem;
    line-height: 1.35;
}

#nosotros.about .about-feature i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

#nosotros.about .about-tech-box {
    bottom: 16px;
    left: 12px;
    padding: 12px 18px;
}

#nosotros.about .about-cta {
    margin-top: 20px;
}

@media (max-width: 968px) {
    #nosotros.about .about-image img {
        max-height: 320px;
        aspect-ratio: 16 / 10;
    }

    #nosotros.about .about-features {
        grid-template-columns: 1fr;
    }
}

/* Equipo */
#equipo.team-section .section-bg-mesh {
    background:
        linear-gradient(180deg, #eef2f7 0%, #ffffff 45%, #f8fafc 100%),
        radial-gradient(ellipse 70% 55% at 92% 8%, rgba(217, 119, 6, 0.12) 0%, transparent 58%),
        radial-gradient(ellipse 60% 45% at 4% 92%, rgba(51, 65, 85, 0.07) 0%, transparent 52%);
}

#equipo.team-section .section-bg-mesh::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.25), transparent);
    transform: translateY(-50%);
}

/* Misión / Visión / Valores */
.section.mv .section-bg-mesh {
    /* Overrides the default mesh from senior-backgrounds.css */
    background-image: repeating-linear-gradient(
        -12deg,
        transparent,
        transparent 80px,
        var(--eds-orange-dim) 80px, /* Usar variable para consistencia */
        var(--eds-orange-dim) 81px
    );
    background-size: 100% 100%; /* Asegurar que cubra el área */
    opacity: 0.15; /* Ajustar opacidad para sutileza */
    /* Añadir una máscara para desvanecer el patrón hacia los bordes */
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}

/* Servicios */
#servicios.services .section-bg-mesh {
    background:
        linear-gradient(180deg, #f1f5f9 0%, #f8fafc 35%, #fffbeb 100%),
        radial-gradient(ellipse 90% 70% at 50% 0%, rgba(217, 119, 6, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 80%, rgba(51, 65, 85, 0.06) 0%, transparent 50%);
}

#servicios.services .section-bg-mesh::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(217, 119, 6, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.45;
    mask-image: linear-gradient(180deg, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, black 15%, black 85%, transparent);
}

/* Estadísticas */
.section.stats .section-bg-mesh {
    background:
        linear-gradient(160deg, #0f172a 0%, #1e293b 42%, #292524 100%),
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(217, 119, 6, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 70%, rgba(251, 191, 36, 0.12) 0%, transparent 50%);
}

.section.stats .section-bg-mesh::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(251, 191, 36, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251, 191, 36, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.5;
}

.section.stats .section-title,
.section.stats .section-subtitle {
    color: #f8fafc;
}

.section.stats .stat-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(251, 191, 36, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.section.stats .stat-item:hover {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 32px rgba(217, 119, 6, 0.15);
}

.section.stats .stat-label {
    color: #cbd5e1;
}

.section.stats::before {
    background:
        linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.35) 20%, rgba(251, 191, 36, 0.35) 80%, transparent) left / 2px 100% no-repeat,
        radial-gradient(ellipse at 20% 30%, rgba(217, 119, 6, 0.12), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(251, 191, 36, 0.08), transparent 50%);
    opacity: 0.6;
}

.section.stats::after {
    background:
        linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.3) 20%, rgba(251, 191, 36, 0.3) 80%, transparent) right / 2px 100% no-repeat,
        repeating-linear-gradient(0deg, rgba(251, 191, 36, 0.04) 0px, rgba(251, 191, 36, 0.04) 1px, transparent 1px, transparent 50px),
        repeating-linear-gradient(90deg, rgba(251, 191, 36, 0.04) 0px, rgba(251, 191, 36, 0.04) 1px, transparent 1px, transparent 50px);
}

/* Cobertura */
#cobertura.coverage .section-bg-mesh {
    background:
        linear-gradient(200deg, #ffffff 0%, #f0f9ff 35%, #fffbeb 100%),
        radial-gradient(ellipse 60% 50% at 10% 90%, rgba(2, 132, 199, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 55% 45% at 90% 15%, rgba(217, 119, 6, 0.11) 0%, transparent 48%);
}

#cobertura.coverage .section-bg-mesh::before {
    content: '';
    position: absolute;
    inset: 12% 8%;
    border: 1px dashed rgba(217, 119, 6, 0.12);
    border-radius: 24px;
    opacity: 0.7;
}

/* Smooth legacy blue pseudo-elements in cobertura */
#cobertura.coverage::before,
#cobertura.coverage::after {
    opacity: 0.35;
}

#cobertura.coverage::before {
    background:
        linear-gradient(180deg, transparent, rgba(217, 119, 6, 0.35) 20%, rgba(217, 119, 6, 0.35) 80%, transparent) left / 2px 100% no-repeat,
        radial-gradient(circle at 10% 80%, rgba(217, 119, 6, 0.08), transparent 24%),
        radial-gradient(circle at 88% 20%, rgba(251, 191, 36, 0.1), transparent 24%);
}

/* CTA */
.section.cta .section-bg-mesh {
    background:
        linear-gradient(165deg, #f8fafc 0%, #fafaf9 45%, #f5f5f4 100%),
        radial-gradient(ellipse 75% 65% at 12% 55%, rgba(217, 119, 6, 0.07) 0%, transparent 58%),
        radial-gradient(ellipse 65% 55% at 90% 35%, rgba(148, 163, 184, 0.08) 0%, transparent 52%);
}

.section.cta .section-bg-mesh::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 119, 6, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.65;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 82%);
}

.section.cta::before {
    background:
        radial-gradient(circle at 22% 48%, rgba(217, 119, 6, 0.05) 0%, transparent 48%),
        radial-gradient(circle at 78% 52%, rgba(148, 163, 184, 0.06) 0%, transparent 48%);
    animation: pulse 6s ease-in-out infinite;
    opacity: 0.85;
}

.section.cta::after {
    background:
        linear-gradient(180deg, transparent, rgba(217, 119, 6, 0.12) 20%, rgba(217, 119, 6, 0.12) 80%, transparent) left / 2px 100% no-repeat,
        linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.1) 20%, rgba(148, 163, 184, 0.1) 80%, transparent) right / 2px 100% no-repeat;
    opacity: 0.5;
}

.section.cta .cta-content {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(217, 119, 6, 0.12);
    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.06),
        0 2px 8px rgba(217, 119, 6, 0.04);
}

.section.cta .cta-content h2 {
    background: linear-gradient(135deg, var(--text-primary) 0%, #57534e 55%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
}

.section.cta .cta-content p {
    color: var(--text-secondary);
}

/* Overrides: remove flat backgrounds that overlapped meshes */
#nosotros.about,
#equipo.team-section,
#servicios.services,
.section.stats,
#cobertura.coverage,
.section.cta {
    background: transparent !important;
}

/* EDS gold/slate side borders */
.section-3d-bg::before {
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--primary, #d97706) 15%,
        var(--primary, #d97706) 85%,
        transparent 100%
    );
    box-shadow: 2px 0 18px rgba(217, 119, 6, 0.12);
    opacity: 0.55;
}

.section-3d-bg::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--accent, #334155) 15%,
        var(--accent, #334155) 85%,
        transparent 100%
    );
    box-shadow: -2px 0 18px rgba(51, 65, 85, 0.1);
    opacity: 0.45;
}

.section-3d-bg .gradient-orb.orb-1 {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.22), transparent 70%);
    opacity: 0.55;
}

.section-3d-bg .gradient-orb.orb-2 {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.18), transparent 70%);
    opacity: 0.5;
}

.section-3d-bg .gradient-orb.orb-3 {
    background: radial-gradient(circle, rgba(51, 65, 85, 0.14), transparent 70%);
    opacity: 0.45;
}

.section-3d-bg .container::before {
    background-image:
        linear-gradient(rgba(217, 119, 6, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 65, 85, 0.04) 1px, transparent 1px);
}

@media (max-width: 768px) {
    .section-3d-bg .gradient-orb {
        opacity: 0.3;
        filter: blur(60px);
    }

    #inicio.hero::after {
        display: none;
    }
}

/* ── Pilares floating shapes ── */
.pilar-shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
}

.pilar-shape-circle {
    width: 80px;
    height: 80px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    top: 10%;
    left: 5%;
    animation: pilarFloatCircle 12s ease-in-out infinite;
}

.pilar-shape-triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid var(--primary);
    top: 60%;
    right: 8%;
    animation: pilarFloatTriangle 15s ease-in-out infinite;
}

.pilar-shape-square {
    width: 60px;
    height: 60px;
    border: 2px solid var(--primary-light);
    border-radius: 6px;
    top: 30%;
    right: 15%;
    animation: pilarFloatSquare 10s ease-in-out infinite, pilarSpin 20s linear infinite;
}

.pilar-shape-dots {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle, var(--primary) 2px, transparent 2px);
    background-size: 14px 14px;
    bottom: 15%;
    left: 10%;
    opacity: 0.1;
    animation: pilarFloatDots 18s ease-in-out infinite;
}

@keyframes pilarFloatCircle {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.1); }
    50% { transform: translate(-10px, -40px) scale(0.95); }
    75% { transform: translate(20px, 10px) scale(1.05); }
}

@keyframes pilarFloatTriangle {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-25px, -30px) rotate(5deg); }
    66% { transform: translate(15px, 20px) rotate(-3deg); }
}

@keyframes pilarFloatSquare {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-20px, -30px) rotate(10deg); }
}

@keyframes pilarFloatDots {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, -25px); }
}

@keyframes pilarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Pilares animated lines ── */
.pilar-line {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
}

.pilar-line-1 {
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    top: 20%;
    left: -200px;
    animation: pilarLineSlide 8s ease-in-out infinite;
}

.pilar-line-2 {
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    bottom: 30%;
    right: -150px;
    animation: pilarLineSlide 10s ease-in-out infinite 2s;
}

.pilar-line-3 {
    width: 1px;
    height: 150px;
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    top: -150px;
    left: 30%;
    animation: pilarLineSlideVertical 9s ease-in-out infinite 1s;
}

@keyframes pilarLineSlide {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 0.12; }
    50% { transform: translateX(calc(100vw + 400px)); opacity: 0.12; }
    80% { opacity: 0; }
    100% { transform: translateX(calc(100vw + 400px)); opacity: 0; }
}

@keyframes pilarLineSlideVertical {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 0.12; }
    50% { transform: translateY(calc(100vh + 300px)); opacity: 0.12; }
    80% { opacity: 0; }
    100% { transform: translateY(calc(100vh + 300px)); opacity: 0; }
}

@media (max-width: 768px) {
    .pilar-shape,
    .pilar-line {
        display: none;
    }
}

/* ── Generic construction shapes (for index sections) ── */
.constr-shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.25;
}

.constr-hex {
    width: 60px; height: 60px;
    background: var(--primary);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    top: 12%; left: 4%;
    animation: gConstrFloat 14s ease-in-out infinite;
}

.constr-cross {
    width: 50px; height: 50px;
    top: 55%; right: 6%;
    animation: gConstrFloat 12s ease-in-out infinite;
}
.constr-cross::before, .constr-cross::after {
    content: ''; position: absolute; background: var(--primary); border-radius: 2px;
}
.constr-cross::before {
    width: 100%; height: 4px; top: 50%; transform: translateY(-50%);
}
.constr-cross::after {
    width: 4px; height: 100%; left: 50%; transform: translateX(-50%);
}

.constr-bracket {
    width: 40px; height: 40px;
    border: 3px solid var(--primary); border-radius: 4px;
    top: 70%; left: 8%;
    animation: gConstrFloat 10s ease-in-out infinite, gConstrSpin 25s linear infinite;
}

.constr-ruler {
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--primary) 0px, var(--primary) 6px, transparent 6px, transparent 12px);
    top: 25%; right: 10%; width: 120px;
    animation: gConstrSlide 6s ease-in-out infinite;
}

.constr-ruler-v {
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--primary) 0px, var(--primary) 6px, transparent 6px, transparent 12px);
    bottom: 18%; left: 15%; height: 100px;
    animation: gConstrSlideV 7s ease-in-out infinite 1s;
}

.constr-triangle {
    width: 0; height: 0;
    border-left: 30px solid transparent; border-right: 30px solid transparent;
    border-bottom: 52px solid var(--primary-light);
    top: 40%; left: 2%;
    animation: gConstrFloat 16s ease-in-out infinite;
}

.constr-dot-grid {
    width: 120px; height: 120px;
    background-image: radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    bottom: 10%; right: 4%; opacity: 0.08;
    animation: gConstrFloat 20s ease-in-out infinite;
}

.constr-circle {
    width: 70px; height: 70px;
    border: 2px solid var(--primary); border-radius: 50%;
    top: 80%; right: 20%;
    animation: gConstrFloat 13s ease-in-out infinite;
}

.constr-gear {
    width: 50px; height: 50px;
    background: var(--primary); border-radius: 50%;
    top: 20%; left: 50%;
    animation: gConstrSpin 12s linear infinite, gConstrFloat 8s ease-in-out infinite;
}
.constr-gear::before {
    content: ''; position: absolute; inset: 8px;
    background: transparent; border-radius: 50%;
    border: 4px solid var(--bg-primary);
}
.constr-gear::after {
    content: ''; position: absolute; inset: -6px;
    background: transparent; border-radius: 50%;
    border: 4px dashed var(--primary); opacity: 0.4;
}

.constr-diamond {
    width: 44px; height: 44px;
    background: rgba(217, 119, 6, 0.2);
    border: 2px solid var(--primary); transform: rotate(45deg);
    top: 8%; right: 25%;
    animation: gConstrDiamond 11s ease-in-out infinite;
}

.constr-plus {
    width: 40px; height: 40px;
    top: 45%; left: 12%;
    animation: gConstrFloat 9s ease-in-out infinite;
}
.constr-plus::before, .constr-plus::after {
    content: ''; position: absolute; background: var(--primary); border-radius: 2px;
}
.constr-plus::before { width: 100%; height: 3px; top: 50%; transform: translateY(-50%); }
.constr-plus::after { width: 3px; height: 100%; left: 50%; transform: translateX(-50%); }

.constr-dimension {
    height: 30px; width: 80px;
    top: 50%; right: 3%;
    animation: gConstrSlide 10s ease-in-out infinite;
}
.constr-dimension::before, .constr-dimension::after {
    content: ''; position: absolute; width: 8px; height: 8px;
    border: 2px solid var(--primary); top: 50%; transform: translateY(-50%) rotate(45deg);
}
.constr-dimension::before { left: 0; border-right: none; border-top: none; }
.constr-dimension::after { right: 0; border-left: none; border-bottom: none; }
.constr-dimension span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 1px; background: var(--primary);
}

.constr-arc {
    width: 80px; height: 40px;
    border: 2px solid var(--primary); border-bottom: none; border-radius: 80px 80px 0 0;
    top: 65%; left: 3%;
    animation: gConstrFloat 13s ease-in-out infinite;
}

.constr-angle {
    width: 0; height: 0;
    border-top: 50px solid transparent; border-bottom: 50px solid transparent;
    border-right: 50px solid rgba(217, 119, 6, 0.15);
    top: 30%; right: 2%;
    animation: gConstrFloat 12s ease-in-out infinite;
}

.constr-level {
    width: 60px; height: 6px;
    background: linear-gradient(90deg, var(--primary), transparent); border-radius: 3px;
    top: 85%; left: 5%;
    animation: gConstrFloat 7s ease-in-out infinite, gConstrTilt 3s ease-in-out infinite;
}
.constr-level::before {
    content: ''; position: absolute; top: -4px; left: 30%;
    width: 14px; height: 14px; background: var(--primary-light); border-radius: 50%;
    border: 2px solid var(--primary);
}

@keyframes gConstrFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -20px); }
    50% { transform: translate(-10px, -10px); }
    75% { transform: translate(15px, 15px); }
}

@keyframes gConstrSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gConstrSlide {
    0%, 100% { transform: translateX(0); opacity: 0.1; }
    50% { transform: translateX(-15px); opacity: 0.18; }
}

@keyframes gConstrSlideV {
    0%, 100% { transform: translateY(0); opacity: 0.1; }
    50% { transform: translateY(-12px); opacity: 0.18; }
}

@keyframes gConstrDiamond {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    25% { transform: rotate(55deg) translate(15px, -15px); }
    50% { transform: rotate(35deg) translate(-10px, -20px); }
    75% { transform: rotate(50deg) translate(10px, 10px); }
}

@keyframes gConstrTilt {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

@media (max-width: 768px) {
    .constr-shape { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .section-3d-bg .gradient-orb,
    #inicio.hero::after {
        animation: none;
    }
}