/*
===================================================================
                CUSTOM STYLES FOR ALL INCLUSIVE STUDIO
===================================================================
*/

/* --- Fuentes y Colores Base de la Marca --- */
:root {
    --color-principal: #00ffaa;
    --color-azul-marca: #0026c6;
}

body {
    background-color: var(--color-azul-marca);
}

.color-principal {
    color: var(--color-principal) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Gogh Extra', sans-serif;
    font-weight: 700;
}


/* --- Keyframes para las animaciones del Hero --- */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translate(calc(50% + 100px), -50%); /* Comienza 100px más a la derecha */
    }
    to {
        opacity: 1;
        transform: translate(50%, -50%); /* Termina en su posición original */
    }
}

@keyframes slideInFromRightMobile {
    from {
        opacity: 0;
        transform: translate(100px, -50%); /* Comienza 100px más a la derecha en móvil */
    }
    to {
        opacity: 1;
        transform: translate(0, -50%); /* Termina en su posición original móvil */
    }
}

/* --- NUEVO: Keyframes para la animación del texto --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Comienza un poco más abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina en su posición final */
    }
}


/* --- 1. HERO HEADER PERSONALIZADO --- */
.header-custom-promo { 
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-azul-marca);
    overflow: hidden;
}

menu .site-nav .logo .link-logo img {
  height: 50px!important;
}

.header-custom-promo .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.header-custom-promo .promo-content {
    position: relative;
    text-align: center;
}

/* --- Estilo y animación para el texto --- */
.header-custom-promo .text-line {
    font-family: 'Gogh Extra', sans-serif;
    line-height: 1;
    font-size: clamp(3rem, 8vw, 8rem);
    color: #fff;
    position: relative;
    z-index: 1;

    /* --- ANIMACIÓN AÑADIDA PARA EL TEXTO --- */
    opacity: 0; /* Inicia invisible */
    animation-name: fadeInUp;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards; /* Mantiene el estado final */
}

/* --- NUEVO: Retrasos de animación para cada línea de texto --- */
.header-custom-promo .text-behind {
    z-index: 1;
    animation-delay: 5.8s; /* Retraso de 6 segundos para la primera línea */
}
.header-custom-promo .text-in-front {
    z-index: 3;
    animation-delay: 5.2s; /* Un poco más de retraso para la segunda, para un efecto escalonado */
}

/* --- Contenedor del personaje con retardo ajustado --- */
.header-custom-promo .personaje-container {
  position: absolute;
  width: clamp(152px, 20vw, 247px);
  top: 49%;
  right: 21%;
  z-index: 2;

  /* --- ANIMACIÓN AJUSTADA --- */
  opacity: 0;
  animation-name: slideInFromRight;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 5.8s; /* AJUSTADO para que coincida con el texto */
  animation-fill-mode: forwards;
}
.header-custom-promo .personaje-svg {
    width: 100%;
    height: auto;
}

@media (max-width: 992px) {
    .header-custom-promo .personaje-container {
        right: 15%;
    }
}
@media (max-width: 768px) {
    .header-custom-promo .promo-content { padding: 0 1rem; }
    .header-custom-promo .personaje-container { 
        right: 5%; 
        animation-name: slideInFromRightMobile;
    }
}

/* --- 2. SECCIÓN "ABOUT" --- */
#about-intro {
    background-color: var(--color-principal);
}
#about-intro .body-xxl {
    color: var(--color-black);
}

.color-principal {
  color: var(--color-principal);
}

/* --- 3. SECCIÓN DE SERVICIOS --- */
#services {
    background-color: var(--color-light);
}
#services .section-title {
    color: var(--color-black);
}
.services-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}
@media (min-width: 768px) {
    .services-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
.service-item {
    padding: 2rem;
    border-radius: 40px;
    background-color: #f0f0f0;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.service-item:hover {
    transform: translateY(-10px);
    background-color: #e9ecf2;
}
.service-item .service-icon {
    font-size: 3rem;
    font-weight: bold;
    color: var(--color-azul-marca);
    margin-bottom: 1rem;
    font-family: 'Gogh Extra', sans-serif;
}
.service-item .h3 {
    color: var(--color-black);
    margin-bottom: 1rem;
}
.service-item p {
    color: var(--color-3);
    line-height: 1.6;
}

/* --- 4. SECCIÓN DE PROCESO (CORREGIDO PARA ESCRITORIO Y MÓVIL) --- */

#process {
    background-color: var(--color-azul-marca);
}

#process .proceso-header {
    position: relative;
    padding-bottom: 2rem;
}

#process .proceso-header .h1 {
    font-weight: 700;
    line-height: 1.1;
}

#process .familia-logo {
    font-family: 'Gogh Extra', sans-serif;
    color: var(--color-principal);
    font-weight: bold;
}

#process .ilustracion-familia img {
  height: 200px;
}

/* === Posicionamiento de la Ilustración con Perfiles de Resolución Claros === */

/* ESTADO BASE (Móviles y Tablets < 992px) */
#process .ilustracion-familia {
    position: absolute;
    width: clamp(250px, 30vw, 466px); /* El ancho se adapta, ¡genial! */
    display: none; /* Oculta por defecto en pantallas pequeñas */
}

/* PERFIL 1: Laptops y Desktops Pequeños (992px a 1199px) */
@media (min-width: 992px) {
    #process .ilustracion-familia {
        display: block; /* Hacemos que aparezca */
		right: -123px;
		top: 11px;
    }
}

/* PERFIL 2: Desktops Estándar (1200px a 1399px) */
/* He ajustado tu 1281px a 1200px, que es un breakpoint más común. */
@media (min-width: 1200px) {
    #process .ilustracion-familia {
		right: -98px;
		top: 45px;
    }
}

/* PERFIL 3: Desktops Grandes (1400px a 1599px) */
@media (min-width: 1400px) {
    #process .ilustracion-familia {
		right: 190px;
		top: 10px;
    }
}

/* PERFIL 4: Desktops Extra Grandes (1600px en adelante) */
@media (min-width: 1600px) {
    #process .ilustracion-familia {
		right: 240px;
		top: 66px;
    }
}

/* === ESTILOS BASE PARA LAS TARJETAS DE PASOS (COMUNES A AMBAS VISTAS) === */
.proceso-paso-scroll {
    text-align: left;
    border-radius: 40px;
    flex-shrink: 0;
}

.proceso-paso-scroll .numero-circulo {
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    font-family: 'Gogh Extra', sans-serif;
    font-size: 4rem;
    font-weight: bold;
    color: var(--color-principal);
}

.proceso-paso-scroll .h4 { 
    margin-bottom: 1rem; 
}


/* === ESTILOS ESPECÍFICOS PARA LA VERSIÓN DE ESCRITORIO (SCROLL HORIZONTAL) === */
.desktop-scroll-animation .proceso-paso-scroll {
    background-color: #0003!important;
    padding: 2rem;
    width: 400px !important; /* Ancho fijo para el scroll horizontal */
    margin-right: 2rem;
}


/* === ESTILOS ESPECÍFICOS PARA LA VERSIÓN MÓVIL (SLIDER) === */
.mobile-slider {
    overflow: hidden; /* Evita que se vea contenido fuera del carrusel */
}

.mobile-slider .proceso-paso-scroll {
    background-color: #0003 !important;
    padding: 1rem;
    width: 100% !important; 
    margin-right: 0;
    box-sizing: border-box;
}

/* Estilos para la paginación del slider de proceso */
.mobile-slider .swiper-pagination.process-pagination {
    position: relative;
    bottom: 0;
    margin-top: 2rem;
}

.mobile-slider .swiper-pagination.process-pagination .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0.8;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.mobile-slider .swiper-pagination.process-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-principal); /* El color verde de tu marca */
    transform: scale(1.2);
}
/* --- 5. SECCIÓN DE PILARES (REEMPLAZO DEL PORTAFOLIO) --- */
#pillars {
    background-color: #f0f0f2; /* Un color neutro para separar visualmente */
    color: var(--color-black);
}

#pillars .section-header .h1 {
    color: var(--color-black);
}
#pillars .section-header .body-xl {
    color: var(--color-3);
}

.pillar-card {
    padding: 2.5rem;
    border-radius: 40px;
    background-color: #fff;
    text-align: center;
    margin-bottom: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pillar-card .pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin-bottom: 2rem;
    background-color: var(--color-azul-marca);
    border-radius: 50%;
    font-size: 2.5rem;
    color: var(--color-principal);
    font-family: 'Gogh Extra', sans-serif;
}

.pillar-card .h3 {
    color: var(--color-azul-marca);
    font-family: 'Gogh Extra', sans-serif;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.pillar-card p {
    color: var(--color-3);
    line-height: 1.7;
}

/* --- 6. SECCIÓN DE EQUIPO --- */
#team { background-color: var(--color-light); }
.team-member {
    text-align: center;
    margin-bottom: 2rem;
}
.team-member .team-image-wrapper {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem auto;
    background-color: #e9ecf2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-azul-marca);
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M51.8,21.9c-17.7,0-32,14.3-32,32s14.3,32,32,32s32-14.3,32-32S69.4,21.9,51.8,21.9z M51.8,29.9c13.2,0,24,10.8,24,24 s-10.8,24-24,24s-24-10.8-24-24S38.6,29.9,51.8,29.9z" fill="%2300ffaa" fill-opacity="0.1"/></svg>');
    background-size: cover;
}
.team-member .h5 { color: var(--color-black); }
.team-member .text-titulo { color: var(--color-azul-marca); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* --- 7. SECCIÓN DE CLIENTES --- */
#clients { background-color: var(--color-black-2); }
#clients .collaborate { border: 0; }
#clients .collaborate-logo img {
    filter: grayscale(100%) contrast(0) brightness(1.5);
    transition: filter 0.3s ease;
}
#clients .collaborate-logo:hover img {
    filter: grayscale(0%) contrast(1) brightness(1);
}

/* === AJUSTE PARA CENTRAR LOGOS EN MÓVIL === */
@media (max-width: 768px) {
    .collaborate-logos .d-flex {
        /* Centra los logos horizontalmente, lo cual ayuda si solo hay uno en una fila */
        justify-content: center !important; 
    }
    
    .collaborate-logo {
        /* Ajusta el ancho para que quepan dos por fila, con un pequeño espacio */
        flex-basis: 45%; 
        /* Centra el contenido (la imagen) dentro de cada 'caja' de logo */
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* --- 8. CONTACT FORM SECTION --- */
#contact { background-color: var(--color-black); color: white; border-top: 1px solid rgba(255, 255, 255, 0.1); }
#contact .h1, #contact p { text-align: left; }
.contact-form-wrapper .field {
    border-bottom: 1px solid var(--color-3);
    margin-bottom: 2.5rem;
    position: relative;
}
.contact-form-wrapper .field input, .contact-form-wrapper .field textarea {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    padding: 0.5rem 0;
}
.contact-form-wrapper .field input::placeholder, .contact-form-wrapper .field textarea::placeholder {
    color: var(--color-5);
    opacity: 0.6;
}
.contact-form-wrapper textarea { resize: vertical; min-height: 100px; }
.contact-form-wrapper .link-one input.submit { background: transparent; border: none; padding: 0; }

/* --- 9. FINAL FOOTER --- */
.final-footer {
    background-color: var(--color-black-2);
    color: var(--color-5);
    padding-top: 5rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid var(--color-3);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem;
    margin-bottom: 4rem;
}
@media(min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-info-block h6 {
    color: var(--color-principal);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.footer-info-block p, .footer-info-block a {
    color: var(--color-3);
    text-decoration: none;
    line-height: 1.8;
}
.footer-info-block a:hover {
    color: white;
    text-decoration: underline;
}
.copyright-bar {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-3);
    font-size: var(--body-s);
}
.footer-social-final a { margin-left: 1.5rem; transition: color 0.3s; }
.footer-social-final a:hover { color: var(--color-principal); }

/* --- 6. SECCIÓN DE TESTIMONIOS (REEMPLAZO DEL EQUIPO) --- */
#testimonials {
    background-color: var(--color-black);
    color: var(--color-light);
    overflow: hidden; /* Importante para Swiper */
}

.testimonial-card {
    background-color: var(--color-black-2);
    padding: 3rem;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card blockquote {
    font-size: var(--body-l);
    line-height: 1.6;
    margin: 0 0 2rem 0;
    color: var(--color-5);
    border-left: 3px solid var(--color-principal);
    padding-left: 2rem;
}

.testimonial-client {
    display: flex;
    align-items: center;
}

.testimonial-client .client-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 1rem;
    background-color: var(--color-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Gogh Extra', sans-serif;
}

#testimonials .swiper {
    cursor: grab; /* Muestra una mano abierta, indicando que se puede arrastrar */
}

#testimonials .swiper:active {
    cursor: grabbing; /* Muestra una mano cerrada mientras se está arrastrando */
}

.testimonial-client .client-name {
    font-size: var(--h6);
    color: #fff;
    margin: 0;
}

.testimonial-client .client-title {
    font-size: var(--body-m);
    color: var(--color-3);
    margin: 0;
}

/* Estilos para la paginación de Swiper */
.testimonials .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 3rem;
}
.testimonials .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0.8;
    width: 10px;
    height: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.testimonials .swiper-pagination-bullet-active {
    background-color: var(--color-principal);
    transform: scale(1.2);
}
@media(max-width: 380px) {
    #testimonials {margin-bottom: 50px;}
}