/* style.css */

/* Variables Corporativas */
:root {
    --brand-blue: #1b2f70;    /* Azul oscuro intenso de textos corporativos y logo */
    --brand-green: #266055;  /* Verde de botones y acentos */
    --brand-green-hover: #339986;
    --bg-light-soft: #EFE9E0; /* Café clarito para fondos alternos */
    --wireframe-bg: #d9d9d9;
    --wireframe-line: #a6a6a6;
}

body {
    font-family: Open Sans, Arial, sans-serif;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

/* Tipografía de Marca */
.text-brand-blue { color: var(--brand-blue) !important; }
.text-green { color: var(--brand-green) !important; }
.bg-brand-blue { background-color: var(--brand-blue) !important; }
.bg-light-soft { background-color: var(--bg-light-soft) !important; }

/* Navbar */
.brand-logo {
    width: 60px;
    height: 60px;
}
.custom-nav-link {
    color: var(--brand-green) !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}
.custom-nav-link:hover { color: var(--brand-green-hover) !important; }

/* Botones */
.btn-green {
    background-color: var(--brand-green) !important;
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}
.btn-green:hover {
    background-color: var(--brand-green-hover) !important;
    color: white;
}
.btn-outline-brand {
    color: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    background: transparent;
}
.btn-outline-brand:hover {
    background-color: var(--brand-blue);
    color: white;
}

/* Hero Section */
.hero-image {
    background-color: var(--bg-light-soft) !important; /* Color fallback */
    background-size: cover;
    background-position: center;
    min-height: 300px; /* Asegura altura en mobile */
}

@media (min-width: 992px) {
    .min-vh-lg-75 { min-height: 75vh; }
}

/* ==========================================================================
   CARRUSEL: Flechas personalizadas (Verde #266055 con fondo blanco)
   ========================================================================== */

/* 1. Forzar opacidad total en los contenedores para que el color no se "lave" */
.carousel-control-prev,
.carousel-control-next {
    opacity: 1 !important;
}

/* 2. Aplicar el fondo blanco circular y tamaño a los iconos */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #ffffff; /* Fondo blanco puro */
    border-radius: 50%;        /* Hace el fondo perfectamente redondo */
    width: 45px;               /* Ajusta el ancho del círculo */
    height: 45px;              /* Ajusta el alto del círculo */
    background-size: 55%;      /* Centra y escala la flecha dentro del círculo */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Sombra suave para dar relieve */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* 3. Flecha Izquierda (SVG con color exacto Verde #266055) */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(38, 96, 85)'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

/* 4. Flecha Derecha (SVG con color exacto Verde #266055) */
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(38, 96, 85)'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* 5. Efecto interactivo al pasar el cursor (Hover) */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    transform: scale(1.1); /* Agranda el botón un 10% de forma fluida */
    background-color: #f4f4f4; /* El fondo blanco se vuelve ligeramente gris */
}

/* Imágenes decorativas */
.square-img {
    aspect-ratio: 1 / 1;
}
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--brand-green) !important;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wireframe-line);
    cursor: pointer;
    z-index: 2;
}
.nav-arrow.left-arrow { left: 1rem; }
.nav-arrow.right-arrow { right: 1rem; }

/* Timeline Proceso */
.timeline-divider {
    width: 30px;
    height: 2px;
    background-color: var(--brand-blue);
}

/* Mockups Wireframes */
.wireframe-mockup {
    background-color: var(--wireframe-bg);
    background-image: 
        linear-gradient(to bottom right, transparent calc(50% - 1px), var(--wireframe-line) calc(50% - 1px), var(--wireframe-line) 50%, transparent 50%),
        linear-gradient(to bottom left, transparent calc(50% - 1px), var(--wireframe-line) calc(50% - 1px), var(--wireframe-line) 50%, transparent 50%);
    width: 100%;
    display: block;
}
.aspect-square { aspect-ratio: 1 / 1; max-width: 450px; margin: 0 auto; }
.aspect-video { aspect-ratio: 16 / 9; }

/* Acordeón FAQs */
.custom-accordion .accordion-button:not(.collapsed) {
    color: var(--brand-blue);
    background-color: transparent;
    box-shadow: none;
}
.custom-accordion .accordion-button:focus { box-shadow: none; }
.custom-accordion .accordion-button::after {
    filter: invert(15%) sepia(18%) saturate(3015%) hue-rotate(188deg) brightness(97%) contrast(98%); /* Intento de colorear flecha a azul oscuro */
}

/* Redes Sociales */
.social-icon {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
}
.border-green { border-color: var(--brand-green) !important; }
.social-icon:hover {
    background-color: var(--brand-green) !important;
    color: white !important;
}

.carousel-why-us {
    height: 400px; /* Ajusta este valor al tamaño que prefieras */
}

/* Opcional: Hacerlo un poco más alto en pantallas grandes */
@media (min-width: 768px) {
    .carousel-why-us {
        height: 500px; 
    }
}

/* ==========================================================================
   CARRUSEL DE LOGOS (Universidades)
   ========================================================================== */

.logo-partner {
    max-height: 100px; /* Altura máxima para uniformar todos los logos */
    object-fit: contain; /* Asegura que no se deformen */
    
    /* Efecto elegante: Gris y semi-transparente por defecto */
    filter: grayscale(100%) opacity(60%);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* Al pasar el mouse recuperan su color y tamaño */
.logo-partner:hover {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.05); /* Ligero efecto de zoom */
}

/* Ajuste específico para el carrusel de logos: 
   Asegura que los botones laterales no tapen los logos de los extremos */
#universitiesCarousel .custom-carousel-control {
    width: 8%;
}