/*
Theme Name: AGI Light Theme
Description: Un tema ligero y personalizado para el sitio AGI Business, basado en Underscores. Utiliza Tailwind CSS para un diseño moderno y optimizado.
Author: GitHub Copilot
Version: 1.0.0
Text Domain: agi-light-theme
*/

/* Aquí irá el CSS compilado de Tailwind si usamos build, o clases inline en templates */

/* Estilos básicos */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* Custom styles */
.w-3\/10 {
    width: 30%;
}

.w-7\/10 {
    width: 70%;
}

/* Custom container width */
/* .container {
    max-width: 1366px;
} */

/* Header hover for links without class */
.site-header a:hover {
    color: #93c5fd; /* Tailwind blue-300 */
}

/* CTA hover animation */
.cta a:hover {
    transform: scale(1.05);
}

/* Reusable button styles */
.btn-primary {
    max-width: 320px;
    display: inline-block;
    background-color: #2563eb;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    transition: all 0.3s;
    text-align: center;
}

.btn-primary:hover {
    background-color: #1d4ed8; /* blue-700 */
    transform: scale(1.05);
}

/* Outline button variant */
.btn-outline {
    max-width: 320px;
    display: inline-block;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    transition: all 0.3s;
    text-align: center;
}

@media (max-width: 768px) {
    .btn-outline {
        margin: 0 auto;
    }
}

.btn-outline:hover {
    background-color: white;
    color: #1f2937;
;
    transform: scale(1.05);
}

.hero {
    height: 700px;
}

@media (max-width: 768px) {
    .hero {
        height: 500px;
        padding-top: 2rem;
    }
    #acerca {
        padding-bottom: 2rem;
    }
}

.hero iframe {
    margin: 0;
}

.hero-content {
    max-width: 90%;
}

/* ABOUT */
@media screen and (max-width: 1023px) {
    .adriana-gallardo img {
        mask-image: linear-gradient(
            black 80%,
            transparent
        );
    }
}

/* Estilos para las imágenes en la sección marcas */
.marcas img {
    width: 220px;
    height: auto;
}

/* Estilos personalizados para el slider de testimonios */
.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev {
    color: #2563eb;
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.swiper-button-next:after, .swiper-button-prev:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    font-size: 20px;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    background-color: #2563eb;
}

/* Adjust swiper arrows position */
.testimonials-swiper .swiper-button-next {
    right: 10px;
}

.testimonials-swiper .swiper-button-prev {
    left: 10px;
}

@media (max-width: 768px) {
    .testimonials-swiper .swiper-button-next {
        right: 0;
    }
    .testimonials-swiper .swiper-button-prev {
        left: 0;
    }
}

/* Estilos para menús del footer */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.5rem;
}

.footer-menu a {
    color: #d1d5db; /* gray-300 */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: #93c5fd; /* blue-300 */
}

/* Estilos para el logo en el footer */
.site-footer .custom-logo {
    width: 120px;
    height: auto;
    max-width: 100%;
}
#contacto iframe {
    width: 100%;
    height: 500px;
    border: none;
    overflow: auto;
}
@media screen and (max-width: 768px) {
    #contacto iframe {
        height: 800px;
    }
}

/* Mobile menu styles */
.mobile-navigation .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-navigation .menu li {
    margin-bottom: 1rem;
}

.mobile-navigation .menu a {
    color: #d1d5db;
    text-decoration: none;
    font-size: 1.125rem;
    transition: color 0.3s;
}

.mobile-navigation .menu a:hover {
    color: #93c5fd;
}

/* Asegurar que el swiper no tape el header */
.testimonials-swiper {
    z-index: 1;
}

/* ============================================
   Cookie Banner & Modal Styles
   ============================================ */

/* Cookie Banner */
#agi-cookie-banner {
    display: flex;
    align-items: center;
    animation: slideUp 0.4s ease-out;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Cookie Banner hidden state */
#agi-cookie-banner.hidden {
    display: none;
}

/* Buttons in banner */
#agi-cookie-banner button {
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 600;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

#agi-cookie-accept {
    background-color: #2563eb !important;
    color: white !important;
}

#agi-cookie-accept:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

#agi-cookie-reject,
#agi-cookie-essential {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

#agi-cookie-reject:hover,
#agi-cookie-essential:hover {
    background-color: #d1d5db !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Cookie Details Button */
#agi-cookie-details-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

#agi-cookie-details-btn:hover {
    text-decoration: underline;
}

/* ============================================
   Cookie Modal
   ============================================ */

#agi-cookie-modal {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#agi-cookie-modal.hidden {
    display: none;
}

/* Modal container - flex layout */
#agi-cookie-modal .bg-white {
    display: flex;
    flex-direction: column;
}

/* Modal header - sticky y no shrink */
#agi-cookie-modal .sticky {
    flex-shrink: 0;
}

/* Modal content - grow to fill space */
#agi-cookie-modal > .bg-white > .p-6 {
    flex: 1;
    overflow-y: auto;
}

/* Modal footer - no shrink */
#agi-cookie-modal .border-t {
    flex-shrink: 0;
}

#agi-cookie-modal .bg-white {
    animation: slideInScale 0.3s ease;
}

@keyframes slideInScale {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Modal Close Button */
#agi-cookie-modal-close {
    cursor: pointer;
    transition: all 0.2s ease;
}

#agi-cookie-modal-close:hover {
    background-color: rgba(30, 41, 59, 0.1) !important;
}

/* Modal Content */
#agi-cookie-modal .bg-gradient-to-r {
    background: linear-gradient(to right, #2563eb, #1d4ed8);
}

/* Cookie Category Checkboxes */
#agi-cookie-essential-check,
#agi-cookie-analytics-check,
#agi-cookie-marketing-check {
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
}

#agi-cookie-essential-check {
    cursor: not-allowed;
    opacity: 0.7;
}

#agi-cookie-essential-check:disabled {
    cursor: not-allowed;
}

/* Category borders */
.border {
    transition: all 0.2s ease;
}

.border:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #bfdbfe;
}

/* Info box */
.bg-blue-50 {
    background-color: #f0f7ff;
    border-color: #bfdbfe;
}

/* Scrollable modal content */
#agi-cookie-modal .max-h-\[90vh\] {
    overflow-y: auto;
    /* Custom scrollbar */
}

#agi-cookie-modal .max-h-\[90vh\]::-webkit-scrollbar {
    width: 8px;
}

#agi-cookie-modal .max-h-\[90vh\]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#agi-cookie-modal .max-h-\[90vh\]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#agi-cookie-modal .max-h-\[90vh\]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Scrollable cookie categories */
#agi-cookie-categories {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#agi-cookie-categories::-webkit-scrollbar {
    width: 8px;
}

#agi-cookie-categories::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#agi-cookie-categories::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#agi-cookie-categories::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #agi-cookie-banner {
        flex-direction: column;
        gap: 1rem;
    }
    
    #agi-cookie-banner .flex-1 {
        width: 100%;
    }
    
    #agi-cookie-banner .flex.flex-col {
        width: 100%;
    }
    
    #agi-cookie-banner button {
        width: 100%;
    }
    
    #agi-cookie-modal .bg-white {
        width: 95% !important;
        max-width: 95vw !important;
    }
}

/* Accessibility */
#agi-cookie-banner button:focus,
#agi-cookie-modal button:focus,
#agi-cookie-banner input:focus,
#agi-cookie-modal input:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Light mode - Essential Cookies Box */
#agi-cookie-modal #agi-cookie-essential-check + .flex-1 label {
    color: #374151 !important;
}

#agi-cookie-modal #agi-cookie-essential-check + .flex-1 p {
    color: #374151 !important;
}

#agi-cookie-modal #agi-cookie-essential-check + .flex-1 .text-gray-500 {
    color: #6b7280 !important;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    #agi-cookie-banner {
        background-color: #0f172a;
        color: #f3f4f6;
        border-top: 2px solid #2563eb;
    }
    
    #agi-cookie-banner p,
    #agi-cookie-banner span {
        color: #e5e7eb;
    }
    
    #agi-cookie-modal {
        background-color: rgba(0, 0, 0, 0.85);
    }
    
    #agi-cookie-modal .bg-white {
        background-color: #1f2937;
        color: #f3f4f6;
    }
    
    /* Mejorar contraste de texto en modal */
    #agi-cookie-modal h3,
    #agi-cookie-modal h4 {
        color: #f3f4f6;
    }
    
    #agi-cookie-modal p,
    #agi-cookie-modal .text-gray-600 {
        color: #d1d5db;
    }
    
    #agi-cookie-modal label {
        color: #e5e7eb;
    }
    
    /* Essential Cookies Box en dark mode - ser específico */
    #agi-cookie-modal #agi-cookie-essential-check + .flex-1 label {
        color: #374151 !important;
    }
    
    #agi-cookie-modal #agi-cookie-essential-check + .flex-1 p {
        color: #374151 !important;
    }
    
    #agi-cookie-modal #agi-cookie-essential-check + .flex-1 .text-gray-500 {
        color: #6b7280 !important;
    }
    
    /* Info box en dark mode */
    #agi-cookie-modal .bg-blue-50 {
        background-color: #1e3a8a;
        border-color: #1e40af;
        color: #dbeafe;
    }
    
    #agi-cookie-modal .bg-blue-50 p {
        color: #dbeafe;
    }
    
    /* Links en dark mode */
    #agi-cookie-modal a {
        color: #60a5fa;
    }
    
    #agi-cookie-modal a:hover {
        color: #93c5fd;
    }
    
    /* Scrollable categories en dark mode */
    #agi-cookie-categories {
        scrollbar-color: #4b5563 #1f2937;
    }
    
    #agi-cookie-categories::-webkit-scrollbar-track {
        background: #1f2937;
    }
    
    #agi-cookie-categories::-webkit-scrollbar-thumb {
        background: #4b5563;
    }
    
    #agi-cookie-categories::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
    }
}

/* Ensure banner doesn't cover footer links */
#agi-cookie-banner {
    pointer-events: auto;
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}