/* =========================================
   ESTILOS GENERALES Y DE NAVEGACIÓN
   Copiado de index.html + Override Móvil
   ========================================= */

/* Optimización: las secciones below-fold no se renderizan hasta que estén cerca del viewport */
#nosotros,
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Fondo con gradiente de la paleta de colores */
.gradient-bg {
    background: linear-gradient(135deg, #3B58A6 0%, #83469B 50%, #BC3090 100%);
}

/* Efecto glassmorphism (vidrio esmerilado) - Por defecto (Desktop inicial) */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Animación de flotación suave */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Definición de la animación float */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Clase para el enlace activo en la navegación */
.nav-active {
    color: #BC3090 !important;
    /* Magenta */
    font-weight: 700;
    position: relative;
}

.nav-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #BC3090;
    border-radius: 2px;
}

/* Animación de entrada suave */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    /* opacity: 0; Comentado para debugging de visibilidad */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecto glow en tarjetas glass al hover */
.glass-glow:hover {
    box-shadow: 0 0 30px rgba(188, 48, 144, 0.4), 0 0 60px rgba(131, 70, 155, 0.2);
    border-color: rgba(188, 48, 144, 0.5);
}

/* Navegación con fondo al hacer scroll */
nav.scrolled {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(20px);
}

/* Focus visible para accesibilidad de teclado */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #BC3090;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Clase para ocultar visualmente pero mantener accesible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mejora de contraste en textos secundarios */
.text-high-contrast {
    opacity: 0.9 !important;
}

/* =========================================
   RESPONSIVE GLOBAL - MÓVIL (max-width: 768px)
   Ajustes de tipografía, espaciado y layout
   ========================================= */
@media (max-width: 768px) {

    /* --- NAVEGACIÓN OSCURA --- */
    nav.glass,
    nav.scrolled {
        background: #111827 !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* --- HERO SECTION --- */
    /* Emoji/icono del hero */
    section.gradient-bg .text-8xl {
        font-size: 4rem;
        /* de 8xl (6rem) a ~5xl */
    }

    /* Título principal del hero (h1) */
    section.gradient-bg h1,
    section h1.text-6xl,
    h1.text-6xl {
        font-size: 1.875rem !important;
        /* ~text-3xl */
        line-height: 2.25rem !important;
    }

    /* Subtítulo del hero */
    section.gradient-bg .text-2xl,
    section.gradient-bg p.text-2xl {
        font-size: 1rem !important;
        /* text-base */
        line-height: 1.5rem !important;
    }

    /* Reducir padding vertical del hero */
    section.gradient-bg .py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Hero no necesita min-h-screen en móvil */
    section.min-h-screen.gradient-bg {
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    /* --- TÍTULOS DE SECCIÓN (h2) --- */
    h2.text-5xl,
    .text-5xl {
        font-size: 1.5rem !important;
        /* ~text-2xl */
        line-height: 2rem !important;
    }

    h2.text-4xl {
        font-size: 1.5rem !important;
        /* ~text-2xl */
        line-height: 2rem !important;
    }

    h3.text-3xl {
        font-size: 1.25rem !important;
        /* text-xl */
        line-height: 1.75rem !important;
    }

    /* --- TEXTO DE CONTENIDO --- */
    /* Párrafos y texto descriptivo grande */
    .text-xl:not(h3):not(h4):not(span):not(button):not(a) {
        font-size: 0.9375rem !important;
        /* entre text-base y text-sm */
        line-height: 1.5rem !important;
    }

    /* Texto de subtítulos en el contenido */
    p.text-2xl {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }

    /* --- GRID Y ESPACIADO --- */
    /* Reducir gaps en grids de contenido */
    .gap-12 {
        gap: 1.5rem !important;
        /* de 3rem a 1.5rem */
    }

    /* Reducir margen inferior de secciones */
    .mb-12 {
        margin-bottom: 2rem !important;
    }

    .mb-16 {
        margin-bottom: 2.5rem !important;
    }

    /* Reducir margin-top de secciones internas */
    .mt-12 {
        margin-top: 2rem !important;
    }

    /* --- SECCIONES Y PADDING --- */
    /* Reducir padding vertical de secciones */
    .py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .py-24 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    /* --- GLASS WRAPPER --- */
    /* Reducir padding del glass container en móvil */
    .glass.rounded-3xl {
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    /* --- TARJETAS / CARDS --- */
    /* Tarjetas de características */
    .bg-white\/5.rounded-xl,
    .bg-white\/5.rounded-2xl {
        padding: 1rem !important;
    }

    /* Emojis en tarjetas */
    .bg-white\/5 .text-4xl {
        font-size: 2rem;
    }

    /* Títulos de tarjetas */
    .bg-white\/5 h4.text-xl {
        font-size: 1rem !important;
    }

    /* --- VENTAJAS / CENTRADAS --- */
    /* Emojis grandes en ventajas */
    .text-center .text-5xl {
        font-size: 2.5rem;
    }

    /* --- CTA FINAL --- */
    /* Botones CTA */
    .gradient-bg .px-8 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .gradient-bg .py-4 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* --- GALERIA DE TRABAJOS --- */
    /* Gap más compacto en la grilla de trabajos */
    .grid.grid-cols-2 {
        gap: 0.5rem !important;
    }

    /* Overlay text en trabajos */
    .group .p-6 {
        padding: 0.75rem;
    }

    .group h4.text-lg {
        font-size: 0.875rem;
    }

    .group .text-sm {
        font-size: 0.75rem;
    }

    /* --- FORMULARIO DE CONTACTO --- */
    /* Glass del formulario */
    form.glass {
        padding: 1.5rem !important;
    }

    /* Labels del formulario */
    form .text-lg {
        font-size: 1rem;
    }

    /* --- FAQ SECTION --- */
    /* Botones FAQ */
    .faq-content {
        max-height: none !important;
    }

    /* --- PROCESO / PASOS --- */
    /* Pasos con icono + texto */
    .flex.items-start.gap-4 {
        gap: 0.75rem;
    }

    .flex.items-start .text-3xl {
        font-size: 1.5rem;
    }

    .flex.items-start h4.text-xl {
        font-size: 1rem !important;
    }

    /* --- LLAMADO A LA ACCIÓN INLINE --- */
    .border-l-4 .text-lg {
        font-size: 0.9375rem;
    }

    /* --- VIDEO VERTICAL EN MÓVIL --- */
    /* Hacer el video menos alto en móvil */
    .aspect-\[9\/16\] {
        aspect-ratio: 3/4 !important;
    }
}

/* =========================================
   RESPONSIVE - TABLET / iPad (768px - 1199px)
   Covers iPad Mini, iPad, iPad Air, iPad Pro
   Portrait: ~768-834px  |  Landscape: ~1024-1194px
   ========================================= */

/* --- iPad Portrait (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {

    /* HERO: No full screen on iPad portrait */
    section.gradient-bg[class*="min-h"] {
        min-height: 55vh !important;
        padding-top: 7rem;
        padding-bottom: 2rem;
    }

    /* Títulos más compactos */
    h1.text-6xl,
    section h1.text-6xl,
    section.gradient-bg h1 {
        font-size: 2.5rem !important;
        line-height: 3rem !important;
    }

    h2.text-5xl {
        font-size: 2rem !important;
    }

    h2.text-4xl {
        font-size: 1.75rem !important;
        line-height: 2.25rem !important;
    }

    h3.text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    /* MAIN LAYOUT FIX: Force the video+info 3-col grid to stack.
       Target: grid inside .glass that has items-start (only the main layout)
       The md:grid-cols-3 makes video column too narrow at 768px. */
    .glass .grid.items-start {
        grid-template-columns: 1fr !important;
    }

    /* Video column: full width, not sticky, centered */
    .glass .grid.items-start>div[class*="md:sticky"] {
        position: relative !important;
        top: auto !important;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Content column span: full width */
    .glass .grid.items-start>div[class*="md:col-span-2"] {
        grid-column: span 1 !important;
    }

    /* Video aspect ratio: 4/5 for iPad portrait (not as tall as 9/16) */
    [class*="aspect-"][class*="9/16"] {
        aspect-ratio: 4/5 !important;
    }

    /* Feature/card grids: 2 columns is fine */
    .grid[class*="md:grid-cols-2"] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Advantages/ventajas grid: 2 cols instead of 3 on tablet portrait
       These are grids with md:grid-cols-3 but NOT inside .glass (like benefits) */
    section>div>div>.grid[class*="md:grid-cols-3"]:not(.items-start) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Gallery/trabajos grid: 3 cols instead of 4 */
    .grid[class*="md:grid-cols-4"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Glass wrapper: moderate padding */
    .glass[class*="rounded-2xl"],
    .glass[class*="rounded-3xl"] {
        padding: 1.5rem !important;
    }

    /* Section padding */
    section.py-20,
    section[class*="py-20"] {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* CTA section adjustments */
    section.gradient-bg h2.text-4xl {
        font-size: 1.75rem !important;
    }

    section.gradient-bg p.text-xl {
        font-size: 1rem !important;
    }

    /* CTA buttons: slightly smaller */
    section.gradient-bg .px-8 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    /* Brands grid: 3 cols */
    .grid[class*="grid-cols-2"][class*="md:grid-cols-4"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Margin/spacing reductions */
    .mb-12 {
        margin-bottom: 2.5rem !important;
    }

    .mt-12 {
        margin-top: 2.5rem !important;
    }

    /* FAQ max-width */
    .max-w-3xl {
        max-width: 100%;
    }

    /* === INDEX.HTML SPECIFIC === */

    /* Hero 100dvh: reduce on iPad portrait */
    section[class*="min-h-[100dvh]"] {
        min-height: 70vh !important;
    }

    /* Index hero stats: keep 4 cols but reduce text */
    .grid[class*="grid-cols-2"][class*="md:grid-cols-4"] .text-4xl,
    .grid[class*="grid-cols-2"][class*="md:grid-cols-4"] [class*="md:text-5xl"] {
        font-size: 2rem !important;
    }

    /* Index hero stats labels */
    .grid[class*="grid-cols-2"][class*="md:grid-cols-4"] .text-xs {
        font-size: 0.65rem !important;
    }

    /* Footer grid: 2x2 on iPad portrait instead of 4 cols */
    footer .grid[class*="md:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contact section: reduce vertical padding */
    #contacto {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Contact form max-width: let it use more space */
    #contacto .max-w-3xl {
        max-width: 100%;
    }

    /* Services grid: 2 cols on iPad portrait is better */
    #servicesGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Events grid: 2 cols on iPad portrait */
    #eventsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Nosotros CTA team photo: adjust height */
    #nosotros .h-64,
    #nosotros [class*="md:h-80"] {
        height: 16rem !important;
    }

    /* === NOSOTROS.HTML SPECIFIC === */

    /* Historia section: reduce gap */
    .grid[class*="md:grid-cols-2"].gap-12.items-center {
        gap: 2rem !important;
    }

    /* Benefits grid: 2 cols instead of 4 */
    .glass .grid[class*="grid-cols-2"][class*="md:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Actividades grid: keep 3 cols on tablet */
    #actividadesGrid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* CTA postula box: full width */
    .glass[class*="border-magenta"] {
        max-width: 100% !important;
    }
}

/* --- iPad Landscape & small desktops (1024px - 1199px) --- */
@media (min-width: 1024px) and (max-width: 1199px) {

    /* HERO: Reduced height for landscape iPad */
    section.gradient-bg[class*="min-h"] {
        min-height: 65vh !important;
    }

    /* Títulos un poco más pequeños */
    h1.text-6xl,
    section h1.text-6xl {
        font-size: 3rem !important;
        line-height: 3.5rem !important;
    }

    h2.text-5xl {
        font-size: 2.25rem !important;
    }

    h2.text-4xl {
        font-size: 1.875rem !important;
    }

    /* MAIN LAYOUT: 2 columns (video narrower, content wider) */
    .glass .grid.items-start {
        grid-template-columns: 1fr 2fr !important;
    }

    /* Keep sticky but adjust top */
    .glass .grid.items-start>div[class*="md:sticky"] {
        top: 6rem !important;
    }

    /* Content column span correction for 2-col layout */
    .glass .grid.items-start>div[class*="md:col-span-2"] {
        grid-column: span 1 !important;
    }

    /* Video aspect: taller than landscape, shorter than portrait */
    [class*="aspect-"][class*="9/16"] {
        aspect-ratio: 3/4 !important;
    }

    /* Glass wrapper: moderate padding */
    .glass[class*="rounded-2xl"],
    .glass[class*="rounded-3xl"] {
        padding: 2rem !important;
    }

    /* Gallery grid: 4 cols is OK */
    .grid[class*="md:grid-cols-4"] {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Gap adjustments */
    .gap-12,
    [class*="md:gap-12"] {
        gap: 2rem !important;
    }

    /* === INDEX.HTML SPECIFIC === */

    /* Hero 100dvh: reduce on iPad landscape */
    section[class*="min-h-[100dvh]"] {
        min-height: 80vh !important;
    }

    /* Footer grid: keep 4 cols on landscape */
    footer .grid[class*="md:grid-cols-4"] {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Events grid: 3 cols OK on landscape */
    #eventsGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* === NOSOTROS.HTML SPECIFIC === */

    /* Historia section: slightly reduced gap */
    .grid[class*="md:grid-cols-2"].gap-12.items-center {
        gap: 2.5rem !important;
    }

    /* Benefits grid: 4 cols OK on landscape */
    .glass .grid[class*="grid-cols-2"][class*="md:grid-cols-4"] {
        grid-template-columns: repeat(4, 1fr);
    }
}