@import url('form.css');

:root {
    --size-96: 96px;
    --rosa: #fef6f7;
}

.grandes_conversaciones .destacado {
    font-weight: 500;
    font-size: var(--size-32);
    color: var(--azul);
    font-family: var(--header-family);
}

.rrss_contenedor {
    margin-bottom: var(--margin-bloques);
}

.rrss_contenedor .redes {
   justify-content: flex-end;
}

.grandes_conversaciones .destacado.fino {
    font-weight: 400;
}

.grandes_conversaciones .destacado.grueso {
    font-weight: 700;
}

.grandes_conversaciones p{
    font-size: var(--size-18);
    color: var(--gris-01);
    margin-bottom: var(--margin-bloques);
    line-height: 112%;
}

.grandes_conversaciones .row .col_2_3 p:last-of-type,
.grandes_conversaciones .row .col_1_3 p:last-of-type {
    margin-bottom: 0;
}

.grandes_conversaciones h2 {
    font-weight: 500;
    font-size: var(--size-60);
    margin-bottom: var(--margin-bloques);
     font-family: var(--header-family);
     text-transform: none;
}

.grandes_conversaciones h2.fino {
    font-weight: 400;
}

.grandes_conversaciones h2 strong {
    display: block;
}

.grandes_conversaciones .row > div:first-of-type {
    padding-right: calc(var(--margin-bloques) / 2);
}

.grandes_conversaciones .row > div:last-of-type {
    padding-left: calc(var(--margin-bloques) / 2);
}

.grandes_conversaciones .row {
    margin-bottom: var(--margin-bloques);
}

.grandes_conversaciones .rojo {
    color: var(--rojo);
}

.grandes_conversaciones .fondo_rosa {
    color: var(--rojo);
    background: var(--rosa);
}

.grandes_conversaciones .fondo_rojo {
    background-color: var(--rojo);
    height: 100%;
}

.grandes_conversaciones .imagen_mobile {
        display: none;
}

.grandes_conversaciones .fondo_rojo p, .grandes_conversaciones .fondo_rojo a {
    color: var(--second-color);
}

.grandes_conversaciones .row {
    align-items: center;
}

/* Banner */
.seccion_banner {
    background-image: url(../../images/grandes_conversaciones/banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: var(--margin-bloques);
    padding-bottom: var(--margin-bloques);
    margin-bottom: var(--margin-bloques);
    /*aspect-ratio: 560 / 293;*/
    min-height: 65vh;
    height: fit-content;
    width: 100%;
    display: block;
}

.seccion_banner h1 {
    font-size: var(--size-titulo);
    font-weight: 600;
    margin-bottom: var(--margin-bloques);
    font-family: var(--header-family);
}

.seccion_banner p.subtitulo {
    text-transform: uppercase;
    font-weight: 400;
    font-size: var(--size-36);
    color: var(--azul);
    margin-bottom: var(--margin-bloques);
    font-family: var(--header-family);
}

.seccion_banner_europa {
     background-image: url(../../images/grandes_conversaciones/banner_europa.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: var(--margin-bloques) 0;
    /*aspect-ratio: 267 / 100;*/
    width: 100%;
    display: block;
    margin-bottom: var(--margin-bloques);
}

.grandes_conversaciones .seccion_banner_europa h2 strong {
    display: inline;
}

.seccion_banner_europa p {
    color: var(--azul);
}

.seccion_banner_europa .container {
    height: 100%;
}

.seccion_banner_europa .col_3_4, .seccion_banner_europa .col_2_3 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner_latinoamerica{
     background-image: url(../../images/grandes_conversaciones/banner_latam.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: block;
}

.banner_latinoamerica p, .banner_latinoamerica .destacado, .banner_latinoamerica h2 {
    color: var(--azul);
}

.banner_eeuu{
     background-image: url(../../images/grandes_conversaciones/banner_eeuu.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: block;
}

.banner_experta{
     background-image: url(../../images/grandes_conversaciones/banner_expertos.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: block;
}


/* Descargar informe */

.descargar_informe .row, .descargar_informe.row {
    align-items: stretch;
}

.descargar_informe a, .descargar_informe .fondo_rosa p, .descargar_informe .fondo_rojo p {
    font-family: var(--header-family);
}

.descargar_informe a p:last-child {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0;
}

.descargar_informe .fondo_rojo p:last-child:before {
    content: '';
    background-image: url(../../images/grandes_conversaciones/descarga_blanco.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.descargar_informe a p:last-child:before {
    content: '';
    background-image: url(../../images/grandes_conversaciones/descarga.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.descargar_informe .col_1_3, .descargar_informe .col_2_3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.descargar_informe .fondo_rosa {
    height: 100%;
}

.descargar_informe a.fondo_rosa:hover {
    background-color: var(--rojo);
    cursor: pointer;
}

.descargar_informe a.fondo_rojo:hover {
    background-color: var(--rosa);
    cursor: pointer;
}

.descargar_informe a.fondo_rosa:hover p {
    color: var(--second-color);
}

.descargar_informe a.fondo_rojo:hover p {
    color: var(--rojo);
}

.descargar_informe a.fondo_rosa:hover p:last-child:before {
    background-image: url(../../images/grandes_conversaciones/descarga_blanco.png);
}

.descargar_informe a.fondo_rojo:hover p:last-child:before {
    background-image: url(../../images/grandes_conversaciones/descarga.png);
}

.descargar_informe .fondo_rosa, .descargar_informe .fondo_rojo {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding:var(--margin-elementos);
}


.descargar_informe {
    margin-bottom: var(--margin-bloques);
}

/* Desplegables */

.seccion_desplegables {
    margin-top: var(--margin-bloques);
}

 .grandes_conversaciones .desplegable {
        background-color:var(--rosa);
        padding: var(--margin-elementos);
        margin-bottom: var(--margin-bloques);
        border-bottom: 1px solid var(--rosa);
 }

 .grandes_conversaciones .desplegable .subtitulo {
    margin-bottom: 0;
 }

 .grandes_conversaciones .desplegable.activo .subtitulo {
    margin-bottom: var(--margin-bloques);
 }

@media (min-width: 768px) {
   .grandes_conversaciones .desplegable.activo:hover {
        background-color:var(--rosa);
        /*padding: var(--margin-elementos);*/
        margin-bottom: var(--margin-bloques);
        border-bottom: none;
    }


    .grandes_conversaciones .desplegable:hover {
        background-color: var(--rojo);
    }

    .grandes_conversaciones .desplegable.activo:hover .titulo_desplegable p {
        color: var(--azul);
    }

    .grandes_conversaciones .desplegable:hover .titulo_desplegable p {
        color: var(--second-color);
    }
}
.grandes_conversaciones .desplegable .titulo_desplegable::after {
    content: '';
    display:inline-flex;
    position: absolute;
    bottom: 0;
    background-image: url(../../images/grandes_conversaciones/mas.svg);
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
    right: var(--margin-elementos);
    justify-content:center;
    align-items:center;
    width:32px;
    height:32px;
    color: var(--azul);
    transition:transform .3s ease;  
}

@media (min-width: 768px) {
    .grandes_conversaciones .desplegable:hover .titulo_desplegable::after {
    background-image: url(../../images/grandes_conversaciones/mas_blanco.svg);
        background-position: center;
        background-size: contain;
        background-repeat: repeat;
    }
}

.grandes_conversaciones .desplegable.activo .titulo_desplegable::after {
    content: '';
    display:flex;
    position: absolute;
    bottom: 0;
    right: var(--margin-elementos);
    justify-content:center;
    align-items:center;
    width:32px;
    height:32px;
    background-image: url(../../images/grandes_conversaciones/menos.svg);
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
    transition:transform .3s ease;  
    line-height: 1em;
}

.grandes_conversaciones .desplegable .titulo_desplegable {
    padding-right:50px;
    position: relative;
    color: var(--azul);
}

@media (min-width: 768px) {

    .grandes_conversaciones .desplegable .titulo_desplegable:hover {
        cursor: pointer;
    }

    .grandes_conversaciones .desplegable:hover .titulo_desplegable::after {
        color: var(--second-color); 
    }

    .grandes_conversaciones .desplegable.activo:hover .titulo_desplegable::after {
        color: var(--azul); 
    }
}

.grandes_conversaciones .desplegable .destacado.titulo {
    font-weight: 600;
    margin-bottom: var(--margin-elementos-int);
    font-size: var(--size-28);
}

.grandes_conversaciones .desplegable .destacado.fino {
    font-size: var(--size-28);
    font-weight: 400;
}

.grandes_conversaciones .desplegable .contenido {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /*transition: max-height 0.3s ease, opacity 0.3s ease;*/
    width: 100%;
}

.grandes_conversaciones .desplegable .contenido.visible {
    padding-top: var(--margin-bloques);
    border-top: 1px solid var(--azul);
    max-height: 10000px;
    margin-top: var(--margin-bloques);
    opacity: 1;
    width: 100%;
}

.grandes_conversaciones .ciudades_eeuu {
    display: flex;
    row-gap: 0;
    column-gap: var(--margin-bloques);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
}

.grandes_conversaciones .ciudades_eeuu .destacado.titulo {
    margin-bottom: 0;
}

.grandes_conversaciones .ciudades_eeuu .desplegable {
    width: calc(50% - var(--margin-bloques) / 2);
}

.grandes_conversaciones .ciudades_eeuu .contenido.visible {
    margin-top: var(--margin-elementos);
}

/* EEUU */

.seccion_mapa_eeuu .datos img {
    max-width: 162px;
    margin-top: var(--margin-bloques);
}

/* Expertos */
.expertos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--margin-bloques);
    margin-bottom: var(--margin-bloques);
}

.expertos .experto {
    /*width: calc(50% - var(--margin-elementos) / 2);*/
    flex: 0 0 calc(50% - var(--margin-bloques) / 2);
    background-color: #F8F8F8;
    padding: var(--margin-bloques);
    min-height: 495px;
    max-height: 495px;
    transition: transform 0.3s ease, max-height 0.3s ease, opacity 0.3s ease;
}

@media (min-width: 768px) {
    .expertos .experto:not(.active):hover {
        background-color: var(--rojo);
        cursor: pointer;
    }

    .expertos .experto .cabecera:hover {
        cursor: pointer;
    }
}

.expertos .experto.active {
  flex: 0 0 100%;
  /*width: 100%;*/
  max-height: 5000px;
}

.expertos .experto.active .cabecera {
    display: flex;
    gap: var(--margin-elementos);
    align-items: center;
}

.expertos .experto.active .cabecera .textos {
  flex: 1;
}

.expertos .experto.active .nombre {
   margin-bottom: 0;
}

.expertos .contenido {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    width: 100%;
}

.expertos .experto:not(.active) .contenido {
    max-height: 0; /* Colapsa la altura */
    opacity: 0;   /* Opcional: difumina el contenido */
}

.expertos .experto.active .contenido {
    max-height: 10000px;
    padding-top: var(--margin-bloques);
    border-top: 1px solid var(--azul);
    opacity: 1;
    width: 100%;
}

.expertos .fondo_rojo p {
    color: var(--second-color);
}

.expertos .fondo_rojo {
    padding: var(--margin-elementos);
}

.expertos .contenido .row {
    align-items: stretch;
    margin-bottom: var(--margin-bloques);
}

.expertos .experto .cabecera > img {
    width: 134px;
    height: 134px;
    margin-bottom: var(--margin-elementos);
}

.expertos .experto .titulo, .expertos .experto .nombre {
    color: var(--azul);
    font-size: var(--size-24);
    font-weight: 400;
    font-family: var(--header-family);
}

@media (min-width: 768px) {

    .expertos .experto:not(.active):hover .titulo, .expertos .experto:not(.active):hover .nombre {
        color: var(--second-color);

    }
}

.expertos .experto .titulo {
    margin-bottom: var(--margin-elementos-int);
}

.expertos .experto .nombre {
    font-size: var(--size-18);
    font-weight: 600;
    text-transform: uppercase;
}

.expertos .experto .cabecera .mas {
    width: 32px;
    height: 32px;
    border:none;
    background-color: transparent;
}

.grandes_conversaciones .experto .cabecera::after {
    content: '';
    display:block;
    background-image: url(../../images/grandes_conversaciones/mas.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    justify-content:center;
    align-items:center;
    width:32px;
    height:32px;
    color: var(--azul);
    transition:transform .3s ease;  
}

@media (min-width: 768px) {
    .grandes_conversaciones .experto:not(.active):hover .cabecera::after {
    background-image: url(../../images/grandes_conversaciones/mas_blanco.svg);
        background-position: center;
        background-size: contain;
        background-repeat: repeat;
    }
}

.grandes_conversaciones .experto.active .cabecera::after {
    content: '';
    display:flex;
    justify-content:center;
    align-items:center;
    width:32px;
    height:32px;
    background-image: url(../../images/grandes_conversaciones/menos.svg);
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
    transition:transform .3s ease;  
}

/* Menu Lateral*/

#menu_conversaciones {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: auto;
    right: 0;
    z-index: 999;
    margin-top: var(--margin-bloques);
}

#menu_conversaciones li, #menu_conversaliones ul {
    list-style: none;
}


#menu_conversaciones li {
    transition:
      background-color .35s ease,
      min-height       .35s ease;
    position: relative;
    padding: 0;
    margin-bottom: var(--margin-elementos-int);
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (min-width: 768px) {

    #menu_conversaciones li.activo, #menu_conversaciones li:hover {
        background-color: var(--rosa);
    }

    #menu_conversaciones li.activo::after, 
    #menu_conversaciones li:hover::after {
        background-color: var(--rojo);
    }
}

#menu_conversaciones li::after{
    content: '';
    background-color:#fbb6c1;;
    width: 10px;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
}

#menu_conversaciones li a {
  opacity:0;
  transform:translateX(12px);
  pointer-events:none;
  transition:
      opacity   .35s ease,
      transform .35s ease;
    color: var(--rojo);
    text-transform: uppercase;
    text-align: end;
    padding: calc(var(--margin-elementos-int) / 2) calc(var(--margin-elementos) / 2);
    padding-right: calc(var(--margin-elementos) + 20px);
    display: block;
    font-size: var(--size-12);
    font-weight: 400;
    line-height: 112%;
}

#menu_conversaciones li:last-of-type {
    margin-bottom: 0;
}

#menu_conversaciones li.activo a, #menu_conversaciones li:hover a {
    opacity:1;                    
    transform:translateX(0);      
    pointer-events:auto;
}

#menu_conversaciones li span {
    font-weight: 700;
    display: block;
}

.barra_progresion {
    display: none;
}

@media (max-width: 1350px) {
    :root {
    --size-96: 64px;
    }
}

@media (max-width: 1200px) {
    :root {
    --size-96: 54px;
    }

    .grandes_conversaciones .fila_completa {
        width: 100% !important;
    }

    .grandes_conversaciones .row > .fila_completa:first-of-type {
        margin-bottom: var(--margin-bloques);
    }
    
    .grandes_conversaciones .row > .fila_completa:last-of-type,
    .grandes_conversaciones .row > .fila_completa:first-of-type {
        padding-right:0 !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 1024px) {

    .grandes_conversaciones .ciudades_eeuu {
        flex-direction: column;
    }

    .grandes_conversaciones .ciudades_eeuu .desplegable {
        width: 100%;
    }

    .expertos .experto {
        flex: 0 0 100%;
        min-height: fit-content;
    }

    .expertos .experto .cabecera > img {
        width: 80px;
        height: 80px;
    }

    .expertos .experto .cabecera {
        display: flex;
        gap: var(--margin-elementos);
        align-items: center;
    }

    .expertos .experto .cabecera .textos {
        flex: 1;
    }

    .expertos .experto.active .cabecera .textos {
        padding-bottom: var(--margin-bloques);
    }

    .expertos .experto .nombre{
        margin-bottom: 0;
    }

    .grandes_conversaciones .col_1_3, .grandes_conversaciones .col_2_3, 
    .grandes_conversaciones .seccion_banner_dual .col_1_2,   .grandes_conversaciones .seccion_banner_invisibilidad .col_1_2 {
         width: 100% !important;
         margin-bottom: var(--margin-bloques);
         padding-right: 0 !important;
         padding-left: 0 !important;
    }

    .grandes_conversaciones .row {
        margin-bottom: 0 !important;
    }

    .grandes_conversaciones .fondo_rojo, .grandes_conversaciones .fondo_rosa {
        padding: var(--margin-bloques) !important;
    }

    .seccion_mapa_eeuu .datos img {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
    --size-96: 36px;
    }

    .grandes_conversaciones {
        position: relative;
        }

    .barra_progresion {
        display: block;
        position: fixed;
        left: 0;
        margin-top: 3px;
        height: 2px;               
        background: var(--gris-04);       
        width: 100%;                 
        z-index: 9999;          
        --scroll-fill: 0%;    
        transition: width 0.1s ease;
    }

    .barra_progresion::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--scroll-fill);
        background: var(--rojo);
        transition: width 0.1s ease;
        }

    .seccion_banner {
        background-image: url(../../images/grandes_conversaciones/banner_titulo_mobile.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: var(--margin-bloques);
        padding-bottom: var(--margin-bloques);
        margin-bottom: var(--margin-bloques) 20px;
        min-height: 50vh;
        height: fit-content;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        margin-bottom: var(--margin-bloques);
    } 
    
    .seccion_banner .col_2_4 h1, .seccion_banner .col_2_4 p  {
        width: 60% !important;
    }

    .seccion_banner .cta {
        width: 100%;
    }

    .seccion_banner .cta a {
        text-transform: uppercase;
    }

    .grandes_conversaciones .imagen_mobile {
        display: block;
        width: 100%;
        margin-bottom: var(--margin-bloques);
    }

    .grandes_conversaciones .row > div:last-of-type {
        padding-left:0;
    }

    

    .grandes_conversaciones .col_2_3 p:last-of-type, 
    .grandes_conversaciones .col_1_3 p:last-of-type {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .grandes_conversaciones .row > div:first-of-type {
        padding-right: 0; 
    }

    .expertos .experto .cabecera > img {
        width: 40px;
        height: 40px;
    }

    section.descargar_informe .row {
        flex-direction: column-reverse;
    }

    .seccion_banner_europa, .seccion_banner_imagen {
        background-image: none;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }

    .grandes_conversaciones .ciudades_eeuu .desplegable {
        padding:var(--margin-elementos);
        padding-left: var(--margin-elementos) !important;
    }

    .grandes_conversaciones h2 strong {
        display: inline;
    }

    .banner_latinoamerica p, .banner_latinoamerica .destacado, .banner_latinoamerica h2 {
        color: var(--azul);
    }

    .grandes_conversaciones .desplegable .titulo_desplegable {
        padding-right:0;
        padding-left: 50px;
    }

    .banner_latinoamerica p {
        color: var(--gris-01);
    }


    .grandes_conversaciones .desplegable .titulo_desplegable::after {
        right: auto;
        left: 0;
        top: 0;
        bottom: auto;
    }


    

    /* Menu móvil */

    #menu_conversaciones {
        background-color: var(--second-color);
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        padding: var(--margin-elementos);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        margin-top: var(--margin-bloques);
    }

    #menu_conversaciones li {
        height: 3px;
        min-height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: var(--gris-03);
    }

    #menu_conversaciones li.activo {
        background-color: var(--rojo);
    }

     #menu_conversaciones.abierto li {
        min-width: 40vw;
        height: fit-content;
        background-color: var(--second-color);
     }

     #menu_conversaciones.abierto li a {
       display: block;
       opacity: 1;
       color: var(--gris-01);
       padding: 0;
    }

     #menu_conversaciones.abierto li.activo a {
       color: var(--rojo);
    }

    #menu_conversaciones li span {
        display: inline;
    }

     #menu_conversaciones li a {
       display: none;
       transform: translateX(0);
    }

    #menu_conversaciones li::after {
        content: '';
        width: 0;
        height: 0;
    }

    .grandes_conversaciones h2 {
     text-transform: uppercase;
    }

}