/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Author:       Steta Malo
 Version:      1.0.0
*/

/* HERO MAIN CONTAINER */
.hero-features-fullwidth {
    display: flex;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-feature-col {
    flex: 1;
    padding: 80px 5%; /* Padding base */
    display: flex;
    flex-direction: row;
    justify-content: center;
    // min-height: 450px;
    gap: 2rem;
}

/* Alineación especial: 
   La columna izquierda empuja el contenido a la derecha (hacia el centro)
   La columna derecha lo empuja a la izquierda. */
.hero-feature-col:first-child {
    padding-left: calc((100vw - 1200px) / 2 + 20px); /* Alinea con el título de arriba */
}

.hero-feature-col:last-child {
    padding-right: calc((100vw - 1200px) / 2 + 20px);
}

.feature-svg-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
}

.feature-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.feature-desc {
    font-weight: 300;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    max-width: 400px;
}
/* RESPONSIVE ADJUSTMENTS - HERO FEATURES */

/* Tablets y Laptops pequeñas */
@media (max-width: 1199px) {
    .hero-feature-col:first-child, 
    .hero-feature-col:last-child {
        /* Eliminamos el cálculo de 1200px y usamos un padding estándar */
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .hero-feature-col {
        padding: 60px 5%;
        gap: 1.5rem;
    }

    .feature-title {
        font-size: 1.5rem;
    }
}

/* Móviles (Vertical y Horizontal) */
@media (max-width: 767px) {
    .hero-features-fullwidth {
        /* Cambiamos a columna para que no se amontonen */
        flex-direction: column;
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .hero-feature-col {
        width: 100%;
        padding: 40px 25px; /* Padding cómodo para lectura en móvil */
        flex-direction: column; /* Icono arriba, texto abajo */
        text-align: center;
        gap: 1rem;
    }

    .hero-feature-col:first-child, 
    .hero-feature-col:last-child {
        padding-left: 25px;
        padding-right: 25px;
    }

    .feature-icon-wrapper {
        margin: 0 auto;
    }

    .feature-svg-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .feature-desc {
        max-width: 100%; /* Aprovechamos todo el ancho del móvil */
        margin: 0 auto;
    }
}
/* END HERO MAIN CONTAINER */

/* MAIN Container PILARES*/
/* Estructura Base */
.pilar-row {
    position: relative;
    display: flex;
    padding: 100px 0 100px 120px; /* Ajustado para el nuevo ancho del badge */
    min-height: 450px;
    align-items: center;
}

/* Lógica de Alternancia */
.pilar-row.pilar-reverse {
    flex-direction: row-reverse;
    padding-left: 0;
    padding-right: 100px;
}

/* El Badge Lateral */
.pilar-badge {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px; /* Más ancho como solicitaste */
    background-color: var(--pilar-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pilar-reverse .pilar-badge {
    left: auto;
    right: 0;
}

/* El Triángulo: Ajuste Fino */
.container-pilares-expertos {
    width: 100%;
    margin: 0 auto;
    /* IMPORTANTE: Esto asegura que el primer pilar esté por encima del segundo, 
       permitiendo que la flecha se vea sobre el siguiente bloque */
    display: flex;
    flex-direction: column;
}

.badge-triangle-down {
    position: absolute;
    left: 0;
    bottom: -15px; /* Sobresale por debajo de la cinta */
    width: 0;
    height: 0;
    border-left: 22.5px solid transparent; /* Mitad del width del badge */
    border-right: 22.5px solid transparent;
    border-top: 15px solid var(--pilar-color); /* Color de la cinta */
}

/* Triángulo para la versión invertida */
.pilar-reverse .badge-triangle {
    right: auto;
    left: -14px;
    border-left: none;
    border-right: 14px solid var(--pilar-color);
}

/* Tipografía */
.pilar-main-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 52px;
    line-height: 1.1;
    margin: 10px 0;
}

.pilar-description {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

/* Rotación de tipografía vertical hacia la izquierda */
.badge-text {
    transform: rotate(-90deg);
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    font-size: 16px; /* Un poco más grande para el nuevo ancho */
}

/* El Triángulo: Flecha hacia ABAJO */
.badge-triangle-down {
    position: absolute;
    left: 0;
    bottom: -20px; /* Aumentado proporcionalmente al ancho */
    width: 0;
    height: 0;
    /* Ajustado para el ancho de 60px: 30px + 30px */
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent;
    border-top: 20px solid var(--pilar-color);
    z-index: 20; /* Por encima de todo */
}

.pilar-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #FF7919;
    border-bottom: 2px solid #064F55;
    display: inline-block;
    padding: 4px 0;
    margin: 12px 0;
}

.pilar-number-description {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #064F55;
    border: 2px solid #064F55;
    display: inline-block;
    padding: 8px 16px;
    Border-radius: 40px;
}

.card-composite {
    background-color: var(--pilar-color);
    padding: 50px;
    border-radius: 24px;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    Font-size: 18px;
}

.card-tag-pill {
    background: white;
    color: var(--pilar-title-color);
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 24px;
    display: inline-block;
    margin-bottom: 20px;
}

.card-separator {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 30px 0;
}

.pilar-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    width: 100%;
    padding-left: 80px; /* Margen para respetar el badge fijo */
    align-items: center;
}
/* Solo invertimos el orden de las columnas de texto/cards */
.pilar-content-grid.content-reverse {
    direction: rtl;
}

.pilar-content-grid.content-reverse > * {
    direction: ltr; /* Reset de dirección para el texto interno */
}

.pilar-row:nth-child(1) { z-index: 4; }
.pilar-row:nth-child(2) { z-index: 3; }
.pilar-row:nth-child(3) { z-index: 2; }
.pilar-row:nth-child(4) { z-index: 1; }

/* ==========================================================================
   SECCION PILARES - RESPONSIVE DESIGN
   ========================================================================== */

/* Tablets y Laptops pequeñas */
@media (max-width: 1199px) {
    .pilar-row {
        padding: 80px 40px 80px 100px; /* Reducimos el padding lateral */
    }
    
    .pilar-content-grid {
        gap: 40px; /* Estrechamos el espacio entre texto y card */
        padding-left: 0;
    }

    .pilar-main-title {
        font-size: 42px;
    }
}

/* Móviles (Ajuste Crítico) */
@media (max-width: 767px) {
    .pilar-row {
        flex-direction: column;
        padding: 60px 20px 80px 20px; /* Eliminamos espacio para badge lateral */
        min-height: auto;
    }

    /* Reposicionamos el Badge como una barra superior */
    .pilar-badge {
        width: 100%;
        height: 50px;
        bottom: auto;
        top: 0;
    }

    .badge-text {
        transform: rotate(0deg); /* Texto horizontal para lectura fácil */
        font-size: 14px;
        letter-spacing: 1px;
    }

    /* El Triángulo ahora conecta centralmente al final de la sección */
    .badge-triangle-down {
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 20px solid var(--pilar-color);
    }

    /* Rompemos el Zig-Zag para flujo vertical estándar */
    .pilar-content-grid, 
    .pilar-content-grid.content-reverse {
        grid-template-columns: 1fr;
        direction: ltr; /* Todo a la izquierda */
        gap: 30px;
        padding-left: 0;
    }

    .pilar-content-grid.content-reverse > * {
        direction: ltr;
    }

    .pilar-main-title {
        font-size: 32px;
        text-align: center;
    }

    .pilar-subtitle, .pilar-description, .pilar-header {
        text-align: center;
        display: block;
    }

    .card-composite {
        padding: 30px 20px;
    }

    .card-tag-pill {
        font-size: 18px;
        width: 100%;
        text-align: center;
    }
}

/* END MAIN CONTAINER PILARES*/

/* TIME LINE WHY EXIST CONTAINER */
.timeline-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra las tarjetas a la derecha */
    width: 100%;
}

.timeline-item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-card {
    width: 100%;
    max-width: 500px; /* Ajusta según tu Figma */
    padding: 24px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-left: auto; /* Esto las empuja a la derecha de la sección */
}

.card-title-bold {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 36px;
    line-height: 1.3;
}

.card-desc-normal {
    font-weight: 300;
    font-size: 18px;
    font-family: 'Outfit', sans-serif;
}

.timeline-arrow {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

.timeline-arrow svg {
    /* Puedes animar la flecha aquí */
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-3px);}
}
/* END TIME LINE WHY EXIST CONTAINER */

/* MAIN CAROUSEL DIFF CONTAINER */
.differences-carousel-wrapper {
    position: relative;
    padding: 40px 0;
    width: 100%;
    overflow: hidden;
}

.diff-card {
    background: #EBE0D3; /* El color crema de tu captura */
    padding: 24px;
    border-radius: 20px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    font-family: 'Outfit', sans-serif;
}

.diff-num {
    font-size: 2.5rem;
    font-weight: 600;
    color: #1A3D37; /* Verde oscuro */
    margin-bottom: 12px;
}

.diff-card-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1A3D37;
    margin-bottom: 12px;
}

.diff-card-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    font-weight: 300;
}

/* Controles */
.swiper-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.swiper-prev, .swiper-next {
    width: 45px;
    height: 45px;
    background-color: #F18B56; /* El naranja de Figma */
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s;
}

.swiper-prev:hover, .swiper-next:hover {
    opacity: 0.8;
}

.swiper-prev svg, .swiper-next svg {
    width: 24px;
    height: 24px;
}

/* Hover effect */
.swiper-prev:hover, .swiper-next:hover {
    background: #FF6B00;
    color: #ffffff;
}
/* END CAROUSEL DIFF CONTAINER */

/* CTA LIQUID PULSE CONTAINER */
/* Sección General */
.clean-pulse-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 120px 0; /* Espaciado vertical de sección */
    overflow: hidden; /* Evita scrolls raros si el pulso crece mucho */
}

/* El Círculo Principal - ESTE ES ESTÁTICO Y LIMPIO */
.clean-pulse-circle {
    width: 420px;
    height: 420px;
    background-color: #F18B56; /* El naranja de Figma */
    border-radius: 50%; /* Borde perfecto */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px;
    position: relative; /* Necesario para pseudo-elementos */
    box-sizing: border-box;
    z-index: 10; /* Asegura que esté sobre los pulsos */
    
    /* Pequeña sombra base para profundidad, opcional */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.clean-pulse-circle:hover {
	cursor: pointer
}

/* El Aislador de Texto - Mantiene el texto nítido */
.clean-pulse-text-isolator {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transform: translateZ(0); /* Forzamos renderizado por GPU para máxima nitidez */
}

.clean-pulse-text {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: #2B2825;
    margin: 0;
    font-family: 'Outfit', sans-serif; /* O tu tipografía de Figma */
}

/* LOS PULSOS TRAS EL CÍRCULO - Usando pseudo-elementos */
.clean-pulse-circle::before,
.clean-pulse-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F18B56; /* Mismo color naranja */
    border-radius: 50%;
    opacity: 0.6;
    z-index: -1; /* Van DETRÁS del círculo principal */
    
    /* ANIMACIÓN */
    animation: clean-pulse-wave 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* Desfasamos la segunda onda para efecto concéntrico */
.clean-pulse-circle::after {
    animation-delay: 1.5s;
}

/* LA ANIMACIÓN DE ONDA LIMPIA Y CONCÉNTRICA */
@keyframes clean-pulse-wave {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        /* La onda crece uniformemente y desaparece */
        transform: scale(1.6); /* Ajusta este valor para que tan lejos llega la onda */
        opacity: 0;
    }
}

@media (max-width: 767px) {
	.clean-pulse-circle {
    	width: 340px;
		height: 330px;
	}
}

/* END CTA LIQUID PULSE CONTAINER */

/* START MAIN REQUIRES COLLAB */
/* Sección General: Aquí usamos Flexbox para alinear el título y la lista */
.collab-seccion-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 80px 0; /* Espaciado vertical base */
}

/* El Shortcode de la Lista */
.collab-list-container {
    font-family: 'Outfit', sans-serif;
    width: 100%;
    max-width: 600px; /* Ajusta según tu Figma */
}

.collab-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.collab-req-item {
    padding: 25px 0; /* Espaciado entre puntos */
    position: relative;
}

.collab-req-text {
    font-size: 1.5rem;
    color: white; /* El texto en la captura es blanco */
    font-weight: 300;
    margin: 0;
}

.collab-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4); /* Línea blanca semitransparente */
    margin-top: 15px;
    width: 100%;
}
/* END REQUIRES COLLAB */

/* VANTAGE CONTAINER */
.vantage-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 12px;
}

.vantage-card {
    padding: 24px;
    border-radius: 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    /* Evitamos que se vea el borde antes de la animación */
    // visibility: hidden; 
}

.vantage-card-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.vantage-num {
    font-family: 'Outfit', sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
}

.vantage-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.vantage-card-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    opacity: 1; /* Quitamos el 0.95 para máxima nitidez del color elegido */
}
/* ==========================================================================
   VANTAGE POINTS - RESPONSIVE DESIGN
   ========================================================================== */

/* Tablets (iPad, Laptops pequeñas) */
@media (max-width: 1024px) {
    .vantage-grid-container {
        /* Pasamos de 3 a 2 columnas para que el texto no se apriete */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .vantage-num {
        font-size: 48px; /* Reducimos ligeramente el número */
    }

    .vantage-card-title {
        font-size: 20px;
    }
}

/* Móviles (Pantallas de menos de 768px) */
@media (max-width: 767px) {
    .vantage-grid-container {
        /* Una sola columna para máxima legibilidad */
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .vantage-card {
        padding: 30px 24px; /* Un poco más de aire vertical */
    }

    .vantage-card-header {
        align-items: center; /* Centramos el número con el título en móvil */
    }

    .vantage-num {
        font-size: 42px;
        margin-bottom: 0;
    }

    .vantage-card-title {
        font-size: 18px;
    }

    .vantage-card-desc {
        font-size: 15px; /* Ajuste sutil para pantallas pequeñas */
    }
}
/* END VANTAGE CONTAINER */