/* ============================================================================
   Módulos flexibles nuevos: infographic, why, ecosystem
   Usa las variables y el sistema fluido min(vw,px) del theme.
   Breakpoint móvil: max-width: 900px.
   ========================================================================== */

/* ============================== INFOGRAPHIC ============================== */
.component--infographic .box {
    background: linear-gradient(150deg, #18414a 0%, var(--black) 62%);
    border-radius: min(1.7vw, 30px);
    padding: min(4.7vw, 70px);
    color: var(--light);
}
.component--infographic .box > .title.--heading {
    color: var(--light);
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.12;
    letter-spacing: .01em;
    font-size: min(3.4vw, 52px);
    margin-bottom: min(3.2vw, 56px);
    max-width: 50%;
}
.component--infographic .columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(1.4vw, 24px);
}
.component--infographic .col {
    background: rgba(255, 255, 255, .04);
    border: 1px solid #2A5560;
    border-radius: min(1.2vw, 20px);
    padding: min(2.2vw, 34px);
}
.component--infographic .col .head {
    display: flex;
    align-items: center;
    gap: min(.85vw, 14px);
    padding-bottom: min(1.3vw, 22px);
    border-bottom: 1px solid #2A5560;
    margin-bottom: min(1.7vw, 28px);
}
.component--infographic .col .head .icon {
    flex: 0 0 auto;
    width: min(2.2vw, 32px);
    line-height: 0;
}
.component--infographic .col .head .icon img { width: 100%; height: auto; display: block; }
.component--infographic .col .head .title.--col {
    color: #9BD3DD;
    font-weight: 400;
    line-height: 1.2;
    font-size: min(1.55vw, 25px);
    margin: 0;
}
.component--infographic .col .list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: min(1.05vw, 17px);
}
.component--infographic .col .list li {
    position: relative;
    padding-left: 1.5em;
    color: var(--light);
    line-height: 1.45;
    font-size: min(1.05vw, 16px);
}
.component--infographic .col .list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--light);
}

@media (max-width: 900px) {
    .component--infographic .box { padding: min(7vw, 40px); border-radius: 20px; }
    .component--infographic .box > .title.--heading {
        font-size: min(7.5vw, 34px);
        margin-bottom: 28px;
        max-width: none;
    }
    .component--infographic .columns { grid-template-columns: 1fr; gap: 16px; }
    .component--infographic .col { padding: 24px; border-radius: 14px; }
    .component--infographic .col .head { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
    .component--infographic .col .head .icon { width: 28px; }
    .component--infographic .col .head .title.--col { font-size: min(5.5vw, 22px); }
    .component--infographic .col .list { gap: 12px; }
    .component--infographic .col .list li { font-size: min(4vw, 16px); }
}

/* ================================== WHY ================================== */
/* Cuando se activa la columna "Our investor", reutilizamos .composition/.aside
   del theme (mismos estilos que el bloque Intro). Solo anulamos su margin
   inferior por defecto, igual que hace .component--intro. */
.component--why .composition { margin-bottom: 0; }
.component--why .composition .info .columns { width: 100%; }
.component--why .columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(6vw, 110px);
    align-items: start;
}
.component--why .item--intro .title.--heading {
    color: var(--black);
    font-weight: 500;
    line-height: 1.05;
    font-size: min(3.6vw, 58px);
    margin-bottom: min(1.6vw, 26px);
}
.component--why .item--intro .wysiwyg {
    color: var(--black);
    max-width: 24em;
    font-size: min(1.1vw, 17px);
}
.component--why .item--list .subtitle {
    color: var(--black);
    font-weight: 700;
    line-height: 1.2;
    font-size: min(1.7vw, 27px);
    margin-bottom: min(2.2vw, 38px);
}
.component--why .item--list .list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: min(2.3vw, 40px);
}
.component--why .item--list .list .title {
    color: var(--black);
    font-weight: 400;
    line-height: 1.2;
    font-size: min(1.6vw, 26px);
    margin-bottom: .25em;
}
.component--why .item--list .list .desc {
    color: var(--medium);
    line-height: 1.4;
    font-size: min(1.05vw, 16px);
}

/* Columna "Our investor" apilada: el theme fija width:min(14.55vw,244px) al
   logo/wysiwyg del aside, que en móvil quedan ~57px (texto a 1 palabra/línea).
   La composición del theme ya apila en columna a partir de 1100px. */
@media (max-width: 1100px) {
    .component--why .composition .aside { width: 100%; }
    .component--why .composition .aside .logo { width: min(38vw, 200px); }
    .component--why .composition .aside .wysiwyg { width: 100%; max-width: 32em; }
}

@media (max-width: 900px) {
    .component--why .columns { grid-template-columns: 1fr; gap: min(9vw, 44px); }
    .component--why .item--intro .title.--heading { font-size: min(9vw, 44px); margin-bottom: 18px; }
    .component--why .item--intro .wysiwyg { max-width: none; font-size: min(4vw, 16px); }
    .component--why .item--list .subtitle { font-size: min(5.5vw, 24px); margin-bottom: 24px; }
    .component--why .item--list .list { gap: min(6vw, 30px); }
    .component--why .item--list .list .title { font-size: min(5.5vw, 24px); }
    .component--why .item--list .list .desc { font-size: min(4vw, 16px); }
    .component--why .composition .aside .wysiwyg { font-size: min(4vw, 16px); }
}

/* =============================== ECOSYSTEM =============================== */
.component--ecosystem { background: var(--bg); }
.component--ecosystem .info { margin-bottom: min(3vw, 52px); }
.component--ecosystem .info .title.--heading {
    color: var(--black);
    font-weight: 300;
    line-height: 1.08;
    font-size: min(3.6vw, 58px);
    margin-bottom: min(1.4vw, 24px);
    max-width: 50%;
}
.component--ecosystem .info .wysiwyg {
    color: var(--black);
    max-width: 48em;
    font-size: min(1.1vw, 17px);
}
.component--ecosystem .pills {
    display: flex;
    flex-wrap: wrap;
    gap: min(1vw, 16px);
    max-width: 75%;
}
.component--ecosystem .pill {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    max-width: 100%;
    background: var(--white);
    border-radius: 999px;
    padding: min(1.1vw, 16px) min(4vw, 60px) min(1.1vw, 16px) min(1.8vw, 30px);
    font-size: min(1.05vw, 16px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.component--ecosystem .pill .num { flex: 0 0 auto; color: var(--medium); }
.component--ecosystem .pill .name { color: var(--black); font-weight: 600; }

@media (max-width: 900px) {
    .component--ecosystem .info .title.--heading { font-size: min(8vw, 40px); margin-bottom: 16px; max-width: none; }
    .component--ecosystem .info .wysiwyg { max-width: none; font-size: min(4vw, 16px); }
    .component--ecosystem .pills { gap: 10px; max-width: none; }
    .component--ecosystem .pill { padding: 12px 24px 12px 20px; font-size: min(3.7vw, 15px); }
}