.caja.et_pb_row  {
    border-radius: var(--radius);
    border: 1px solid var(--gris-acordeon);
    padding: var(--margin-section);
    margin-bottom: var(--margin-section);
}

/* Estilos para el estado del acordeón */

.caja .subtitle-gris {
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-bottom: 0 !important;
}

.caja.is-open .subtitle-gris { 
    margin-bottom: var(--margin-section) !important;
}

/* Rotación de la flecha cuando está abierto */
.caja.is-open .subtitle-gris::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Asegurar que el contenido oculto no rompa el layout de Divi */
.caja .et_pb_module:not(.subtitle-gris) {
    transition: opacity 0.3s ease;
}

.fila-titulo {
    margin-bottom: var(--margin-section);
}

.caja .subtitle-gris::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* El truco definitivo para el centrado vertical */
    width: 27px;
    height: 27px;
    background-image: url(../images/demographic_challege.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.caja .subtitle-gris.descargable::before {
    background-image: url(../images/download_icon.svg);
}


.caja .subtitle-gris.esg::before {
    background-image: url(../images/esg.svg);
}

.caja .subtitle-gris.business::before {
    background-image: url(../images/business.svg);
}

.caja .subtitle-gris.business::before {
    background-image: url(../images/business.svg);
}

.caja .subtitle-gris::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* El truco definitivo para el centrado vertical */
    width: 27px;
    height: 27px;
    background-image: url(../images/flecha_acordeon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.caja .subtitle-gris { 
    position: relative;
    padding-left: 50px;
    display: flex;
    align-items: center; /* Asegura que el contenido base también esté centrado */
}

.caja .listado ul {
    list-style: none;
    display: flex;
    padding: 0;
    gap: var(--margin-section);
    align-items: stretch;
    width: 57.8%;
    margin-top: var(--margin-section);
    margin-bottom: var(--margin-section);
}

.caja .listado li:first-of-type {
    padding-right: var(--margin-section);
    border-right: 1px solid var(--primary);
}

.caja .tabla {
    margin-top: var(--padding-int);
    margin-bottom: var(--margin-section);
    padding: var(--margin-section);
    border: 2px solid var(--gris);

}

.caja .kpi-table-container {
    margin: 0;
}

.caja .kpi-table thead th {
    background-color: var(--blanco);
    border: none;
    padding-bottom: 0;
}

.caja .kpi-table thead th > div {
    font-size: var(--size-22);
    border:none;
    padding-top: 0;
}

.caja .kpi-table tbody td > div{
    font-size: var(--size-18);
}

.caja .kpi-table tbody td > div{
    justify-content: center;
    text-align: center;
}

.caja .kpi-spt div {
    border-radius: 0;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius) ;
}

.caja .kpi-desc div {
    padding-right: 10%;
}

.caja .kpi-table tbody td.kpi-table__cell.kpi-spt > div {
    font-size: var(--size-22);
 
}

.caja .kpi-table.infrastructure tbody td.kpi-table__cell.kpi-spt > div {
    flex-direction: column;
}

.caja .kpi-table.infrastructure .kpi-desc div {
    padding-right: 15%;
    padding-left: 15%;
}

.caja .kpi-table tbody td.kpi-table__cell.kpi-spt > div span {
    font-size: var(--size-18);
    color: var(--text-color);
}

.caja .kpi-table tbody td:first-child {
    width: 25%;
}

.caja .kpi-table tbody td:last-of-type {
    width: 25%;
}

.caja table.kpi-table.asset-types, .caja table.kpi-table.infrastructure {
    margin-bottom: var(--padding-int);
}

.caja table.infrastructure.kpi-table {
    margin-top: var(--padding-int);
}

.caja .asset-types td, .caja .asset-types th {
    width: 25%;
}

.caja.caja-listados >div  {
    display: flex;
    flex-wrap: wrap;
}

.caja_listados .et_pb_module {
    width: 100%;
}

.caja .caja_listado {
    border:1px solid var(--gris);
    border-radius: var(--radius);
    padding: var(--padding-int);
    width: calc(50% - (var(--padding-int) / 2));
}

.caja .listado_numerico {
    width: calc(50% - (var(--margin-section) / 2));
}

.caja .caja_listado h3 {
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-20);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.334px;
    position: relative;
    
}

.aaaq-row {
    margin-top: var(--margin-section) ;
    margin-bottom: var(--padding-int);;
}


/* IMPARES → izquierda */
.caja .caja_listado:nth-of-type(odd){
    margin-right: calc(var(--padding-int) / 2) !important;
}

/* PARES → derecha */
.caja .caja_listado:nth-of-type(even) {
    margin-left: calc(var(--padding-int) / 2);
}

.caja .listado_numerico:nth-of-type(odd) { 
    margin-left: calc(var(--margin-section) / 2);
    margin-bottom: var(--margin-section) !important;
}

.caja .listado_numerico:nth-of-type(even) {
     margin-right: calc(var(--margin-section) / 2);
     margin-bottom: var(--margin-section) !important;
}

/* ÚLTIMA */
.caja .caja_listado:not(:has(+ .caja_listado)),
.caja .caja_listado:has(+ .caja_listado):not(:has(+ .caja_listado + .caja_listado)) {
  
  margin-bottom: var(--margin-section) !important;
}

.caja .col_3_4 {
    margin-bottom: var(--margin-section) !important;
}

.caja .caja_listado h3::before{
    content:"";
    display:block;

    width:51px;
    height:51px;

    margin-bottom: 14px; /* separación icono -> título */

    border-radius: var(--radius);
    background-color: var(--gris); /* o el color suave que uses */

    background-repeat:no-repeat;
    background-position:center;
    background-size: 29px 29px; /* tamaño del icono dentro del cuadrado */
}

.caja .caja_social h3::before{
    background-image: url("../images/icon_social.svg");
}

.caja .caja_public h3::before{
    background-image: url("../images/icon_pp.svg");
}

.caja .caja_driving h3::before{
    background-image: url("../images/icon_driving.svg");
}

.caja .caja_sustainable h3::before{
    background-image: url("../images/icon_social.svg");
}


.caja .listado_numerico h3 {
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-18);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -0.312px;
}

.caja-listados {
  counter-reset: listado;
}

.caja-listados .listado_numerico{
  counter-increment: listado;
  position: relative;   
  padding-left: calc(var(--padding-int) + 103px);
}

.caja.caja-listados .listado_numerico::before {
  content: counter(listado, decimal-leading-zero);
  
  position: absolute;
  left: 0;
  top: 0;

  width: 103px;
  height: 103px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--primary-07);          
  color: var(--blanco);
    text-align: center;
    font-family: var(--font-title);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.668px;

  border-radius: var(--radius);
}

.caja .subcaja {
    margin-top: var(--padding-int);
    margin-bottom: var(--margin-section);
    padding: var(--margin-section);
    border: 2px solid var(--gris);
}

.caja .subcaja, .caja .subcaja p {
    color: var(--gris-oscuro);
    font-family: var(--font-body);
    font-size: var(--size-16);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.15px;
}

.caja .subcaja a, .caja .subcaja img {
    padding-bottom: calc(var(--padding-int) * 1.5);
    max-height: 70px;
}

.caja .subcaja h3 { 
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-14);
    font-style: normal;
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: -0.15px;
    padding-bottom: calc(var(--padding-int) * 2);
}

/* Impact 4 */

.section-esg h3 {
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-30);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.334px;
}

.section-esg h3::after {
    display:block;
    margin-top: 10px;
    content: "";
    width: 50px;
    height: 2px;
    background-color: var(--primary);
    content: '';
    margin: 10px 0;
}

.section-esg h4 {
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-20);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.334px;
}


.section-esg .milestones-commitments {
    display: flex;
}

.section-esg .milestones-commitments > .et_pb_column {
    margin: 0 !important;
    width: 50%;
}

/* Primera columna (izquierda): espacio a la derecha */
.section-esg .milestones-commitments > .et_pb_column:first-child .et_pb_module{
  padding-right: calc(var(--margin-section) / 2);
}

/* Última columna (derecha): espacio a la izquierda */
.section-esg .milestones-commitments > .et_pb_column:last-child .et_pb_module{
  padding-left: calc(var(--margin-section) / 2);
}

.section-esg .milestones-commitments .et_pb_module.titulo::after{
  content: "";
  display: block;
  height: 3px;
  background: var(--primary);
  margin: 10px 0;
}

/* Columna izquierda: padding-right -> estira hacia la derecha */
.section-esg .milestones-commitments > .et_pb_column:first-child .et_pb_module.titulo::after{
  width: calc(100% + (var(--margin-section) / 2));
}

/* Columna derecha: padding-left -> estira y desplaza a la izquierda */
.section-esg .milestones-commitments > .et_pb_column:last-child .et_pb_module.titulo::after{
  width: calc(100% + (var(--margin-section) / 2));
  margin-left: calc(-1 * (var(--margin-section) / 2));
}

.section-esg .milestones-commitments .titulo {
    padding-bottom:var(--padding-int)
}


.section-esg .milestones-commitments .et_pb_module.titulo::after{
  content: "";
  display: block;
  margin: 10px 0;
  height: 25px;

  background:
    radial-gradient(
      circle at 12.5px 50%,
      var(--primary) 0 12.5px,
      transparent 13px
    ),
    linear-gradient(var(--primary), var(--primary));

  background-size:
    25px 25px,
    100% 3px;

  background-position:
    0 50%,
    0 50%;

  background-repeat: no-repeat;
}

.section-esg .milestones-commitments > .et_pb_column:first-child 
.et_pb_module.titulo::after{
  width: calc(100% + (var(--margin-section) / 2));
}

.section-esg .milestones-commitments > .et_pb_column:last-child 
.et_pb_module.titulo::after{
  width: calc(100% + (var(--margin-section) / 2));
  margin-left: calc(-1 * (var(--margin-section) / 2));

  /* 👇 bola alineada con el texto */
  background-position:
    calc((var(--margin-section) / 2)) 50%,
    0 50%;
}

.section-esg .milestones-commitments li {
    padding-bottom: var(--padding-int);
}

.section-esg .kpis-row {
    padding-top: var(--margin-section) !important;
    padding-bottom: var(--margin-section) !important;
}

.section-esg .fila-titulo {
    margin-bottom: var(--padding-int);
}

.section-esg .col_3_4 {
    padding-bottom: var(--padding-int);
    padding-top: var(--padding-int);
}

.section-esg .milestones-commitments.barra_arriba .et_pb_module.titulo::after {
    width: 0;
    height: 0;
    display: none;
}

.section-esg .milestones-commitments.barra_arriba {
    padding-bottom: var(--margin-section);
}

/* 1. Contenedor de la barra en la columna */
.section-esg .milestones-commitments.barra_arriba .et_pb_column::before {
    content: "";
    display: block;
    /* Espaciado inferior usando la variable del proyecto */
    margin: 10px 0 var(--padding-int) 0; 
    height: 25px;
    /* El ancho debe ser 100% para que la línea cubra toda la columna */
    width: 100%; 

    /* Gradiente: Círculo (bolita) y Línea horizontal */
    background-image: 
        radial-gradient(
            circle at 12.5px 50%, 
            var(--primary) 0 12.5px, 
            transparent 13px
        ),
        linear-gradient(var(--primary), var(--primary));

    /* La línea tiene un grosor de 3px */
    background-size: 25px 25px, 100% 3px; 
    background-repeat: no-repeat;

    /* POSICIÓN CLAVE: 
       La bola se fija en el 0 izquierdo de la columna.
       La línea empieza también en el 0.
    */
    background-position: 0 50%, 0 50%;
}

/* 2. Ajuste de la primera columna para asegurar left 0 */
.section-esg .milestones-commitments.barra_arriba .et_pb_column:first-child {
    margin-left: 0 !important;
}

.section-esg .milestones-commitments.barra_arriba .et_pb_column::before{
  width: calc(100% + (var(--margin-section) / 2));
  margin-left:0;

  /* 👇 bola alineada con el texto */
  background-position:
    0 50%,
    0 50%;
}

.section-esg .milestones-commitments.barra_arriba .et_pb_module,
.section-esg .milestones-commitments.barra_arriba > .et_pb_column:first-child .et_pb_module  {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-right: var(--margin-section);
}

.section-esg .milestones-commitments.barra_arriba h4 {
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-45);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.334px;
}

.section-esg .milestones-commitments.barra_arriba .text-body,
.section-esg .milestones-commitments.barra_arriba .text-body p {
    font-size: var(--size-18);
}

.section-esg .reporting_tansparency .et_pb_column  {
    display: flex;
    flex-wrap: wrap;
}

.section-esg .reporting_tansparency .logo {
    width: 100%;
}

.section-esg .reporting_tansparency .logo .et_pb_text_inner {
    width: 40%;
}

.section-esg .reporting_tansparency .logo img {
    width: 170px;
    height: auto;
}

.section-esg .reporting_tansparency .logo  h3 {
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-14);
    font-style: normal;
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: -0.15px;
    padding-bottom: var(--padding-int);
}

.section-esg .reporting_tansparency .logo  h3::after {
    content: '';
    width: 0;
    height: 0;
    display: none;
}

.section-esg .reporting_tansparency .logo .et_pb_text_inner {
    display: flex;
    gap: var(--padding-int);
}

.section-esg .reporting_tansparency .grafico {
    width: 50%;
    margin: 0;
    padding-right: calc(var(--padding-int) / 2);
}

.section-esg .reporting_tansparency .grafico img,
.section-esg .reporting_tansparency .grafico .et_pb_image_wrap {
    width: 100%;
}

.section-esg .reporting_tansparency .grafico:last-of-type {
    padding-left: calc(var(--padding-int) / 2) !important;
    padding-right: 0 !important;
    margin-left: 0;
}




@media (max-width: 980px) {
    .caja .listado ul {
        flex-direction: column;
        width: 100%;
    }

    .caja .listado li:first-of-type {
        border: none;
        padding-right: 0;
    }

    .caja .caja_listado, .caja .caja_listado:nth-of-type(odd),
    .caja .caja_listado:nth-of-type(even), .caja .listado_numerico {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .caja .col_3_4, .col_3_4 {
        width: 100%;
        max-width: 100%;
    }

    .caja.caja-listados .listado_numerico::before {
        position: relative;
        margin-bottom: var(--padding-int);
        left: 50%;
        transform: translate(-50%);
    }

    .caja-listados .listado_numerico {
        padding-left: 0;
        text-align: center;
        padding-bottom: var(--padding-int);
    }

    .impact .title-section, .impact.text-body, .section-esg h3, .section-esg h4 {
        text-align: center;
    }

    .section-esg h3::after {
        margin: 10px auto;
    }

    .section-esg .milestones-commitments {
        flex-direction: column;
    }

    .section-esg .milestones-commitments > .et_pb_column:first-child .et_pb_module.titulo::after,
    .section-esg h4 br, 
    .section-esg .milestones-commitments > .et_pb_column:last-child .et_pb_module.titulo::after,
    .section-esg .milestones-commitments.barra_arriba .et_pb_column::before,
    .key-figures-header .splide__arrows  {
        display: none !important;
    }

    .numeros_columnas, .section-esg .milestones-commitments.barra_arriba {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--padding-int);
    }

    .numeros_columnas h3, 
    .section-esg .milestones-commitments.barra_arriba h4,
    .section-esg .reporting_tansparency .logo h3{
        text-align: left;
    }

    .numeros_columnas .et_pb_column_1_5 {
        width: 95% !important;
    }

    .section-esg .numeros_columnas h3::after {
        margin: 10px 0;
    }

    .section-esg .milestones-commitments.barra_arriba > .et_pb_column:last-child .et_pb_module {
        padding-left: 0;
        padding-right: 0;
    }

    .section-esg .milestones-commitments.barra_arriba .et_pb_column {
        padding-bottom: var(--padding-int);
    }

    .section-esg .milestones-commitments.barra_arriba .et_pb_module, .section-esg .milestones-commitments.barra_arriba > .et_pb_column:first-child .et_pb_module {
        padding-right: 0;
    }

    .section-esg .reporting_tansparency .logo .et_pb_text_inner, 
    .section-esg .reporting_tansparency .grafico {
        width: 100%;
    }

    .section-esg .reporting_tansparency .logo .et_pb_text_inner {
        flex-direction: column;
    }

    .section-esg .reporting_tansparency .grafico {
        padding-left: 0;
        padding-right: 0;
    }

    .section-esg .milestones-commitments > .et_pb_column {
        width: 100%;
    }

}