/* --- ESTILOS PARA LA SECCIÓN SEDS (How We Do It) - ACTUALIZADO BRAND GUIDE V2.0 --- */

:root {
    /* Brand Colors  */
    --brand-leaf-core: #8DC63F;         /* Primary Accent */
    --brand-leaf-light: #D4EDAA;        /* Backgrounds */
    --brand-sky-motion: #00AEEF;        /* Secondary Accent */
    --brand-data-graphite: #5E5E5E;     /* Primary Text */
    --brand-graphite-light: #9E9E9E;    /* Secondary Text */
    
    /* UI Backgrounds  */
    --brand-fog-white: #EEF1F2;         /* Cards */
    --brand-clean-canvas: #F8FAF9;      /* Section BG */
    --brand-white: #FFFFFF;

    /* Typography  */
    --font-primary: 'Urbanist', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --font-display: 'Rajdhani', sans-serif;
}

.seds-section-container {
    padding: 60px 0;
    background-color: var(--brand-white); /* O Clean Canvas #F8FAF9 */
    /* El body text debe ser Inter */
    font-family: var(--font-secondary); 
    color: var(--brand-data-graphite);
}

/* Header Styles */
.seds-header h2 {
    /* Headlines usan Rajdhani o Urbanist  */
    font-family: var(--font-display); 
    font-weight: 700;
    font-size: 36px; /* Ajustado a escala desktop  */
    margin-bottom: 10px;
    text-transform: uppercase;
    color: var(--brand-data-graphite);
    letter-spacing: 0.5px;
}

.seds-header .subtitle {
    font-family: var(--font-secondary);
    font-size: 18px; /* Ajustado a body text size  */
    color: var(--brand-graphite-light);
    margin-bottom: 40px;
    line-height: 1.5;
}

/* Barra estilo SEDS */
.seds-bar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 900px;
    margin: 0 auto 48px auto; /* Espaciado space-2xl [cite: 206] */
}

.seds-pill {
    background: var(--brand-white);
    border: 1px solid var(--brand-fog-white);
    /* Mantengo el pill redondeado, aunque la guia dice 8px para cards, los badges suelen ser round */
    border-radius: 50px; 
    padding: 8px 32px;
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--brand-data-graphite);
    z-index: 2;
    /* Sombra oficial  */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
}

.seds-pill strong {
    color: var(--brand-leaf-core);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    margin-right: 5px;
}

/* Flecha de fondo decorativa */
.seds-arrow-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    height: 8px;
    /* Gradiente usando Leaf Core Light y Leaf Core */
    background: linear-gradient(90deg, rgba(212, 237, 170, 0.4) 0%, rgba(141, 198, 63, 0.5) 100%);
    z-index: 1;
    margin-left: 20px;
}

.seds-arrow-bg::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid rgba(141, 198, 63, 0.5);
}

/* Workflow Container */
.seds-workflow-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px; /* space-md [cite: 206] */
    margin-bottom: 48px;
}

/* --- TARJETAS DE PASOS [cite: 194] --- */
.seds-step-card {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
    text-align: center;
    padding: 24px 16px; /* Padding standard  */
    
    /* Fondo Fog White  */
    background: var(--brand-fog-white); 
    
    /* Border Radius 8px [cite: 196] */
    border-radius: 8px; 
    
    /* Sombra oficial  */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Transición suave [cite: 214] */
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent;
}

/* IMAGEN CIRCULAR */
.seds-step-card .img-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--brand-white);
    margin: 0 auto 16px auto;
    overflow: hidden;
    border: 2px solid var(--brand-white);
    /* Sombra suave */
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); 
}

.seds-step-card .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Textos de las tarjetas */
.seds-step-card h3 {
    font-family: var(--font-primary); /* Urbanist para titulos de cards */
    font-size: 16px; /* Body text size  */
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
    color: var(--brand-data-graphite);
    width: 100%;
}

.seds-step-card p {
    font-family: var(--font-secondary); /* Inter */
    font-size: 14px; /* Caption size  */
    color: var(--brand-data-graphite); /* No usar gris claro ilegible */
    line-height: 1.5;
    margin: 0;
}

/* Lista del último paso */
.results-list {
    text-align: left;
    padding-left: 20px;
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 13px;
    color: var(--brand-data-graphite);
    list-style-type: disc;
}
.results-list li {
    margin-bottom: 6px;
    line-height: 1.4;
}
/* Color Leaf Core para los bullets */
.results-list li::marker {
    color: var(--brand-leaf-core); 
}

/* Flechas entre pasos */
.seds-arrow-separator {
    align-self: center;
    font-size: 20px;
    /* Usamos Sky Motion o Leaf Core para indicadores de flujo */
    color: var(--brand-sky-motion); 
    font-weight: bold;
    opacity: 0.8;
}

/* Hover Effects */
.seds-step-card:hover {
    transform: translateY(-8px);
    background-color: var(--brand-white);
    /* Borde Leaf Core al hacer hover */
    border-color: var(--brand-leaf-core);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.seds-step-card:hover .img-wrapper img {
    transform: scale(1.08);
}

/* Footer Section */
.seds-footer {
    position: relative;
    padding-top: 24px;
}

.seds-footer .long-arrow-bottom {
    height: 4px;
    /* Gradiente actualizado a Leaf Core */
    background: linear-gradient(90deg, var(--brand-fog-white) 0%, var(--brand-leaf-core) 100%);
    width: 100%;
    margin-bottom: 32px;
    position: relative;
    border-radius: 2px;
}
.seds-footer .long-arrow-bottom::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--brand-leaf-core);
}

.seds-footer h3 {
    font-family: var(--font-display); /* Rajdhani para citas/display */
    font-size: 24px;
    font-weight: 600;
    color: var(--brand-data-graphite);
    margin-bottom: 16px;
}

.seds-footer .green-text {
    color: var(--brand-leaf-core);
    font-weight: 700;
}

.seds-footer .description {
    font-family: var(--font-secondary);
    font-size: 16px;
    color: var(--brand-data-graphite);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Responsive Breakpoints [cite: 208] */
@media (max-width: 640px) {
    .seds-arrow-separator, .seds-arrow-bg {
        display: none;
    }
    .seds-workflow-row {
        gap: 24px;
        flex-direction: column;
        align-items: center;
    }
    .seds-step-card {
        width: 100%;
        max-width: 320px; /* Ancho tarjeta movil  */
    }
}