/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Evomeet
 Author URI:     https://evomeet.es
 Template:       Divi
 Version:        1.0.0
*/

 
/* =Theme customization starts here
------------------------------------------------------- */
 

/** 
 * Evomeet 2025
 * JBlanco
 */

/* COLORES

    #4de381   Verde main
    #bfeccf   Verde ultra light
    #1d1d1b   Black



 * TIPOGRAFIA
    Neue Haas Grotesk Display  - 45 Light  - 400
    Neue Haas Grotesk Display  - 55 Roman  - 500
    Neue Haas Grotesk Display  - 65 Medium - 600
    Neue Haas Grotesk Display  - 75 Bold   - 700
    Neue Haas Grotesk Display  - 95 Black  - 900

*/

:root{
  --primary-color:#4de381;
  --secondary-color:#bfeccf;
  --dark-color:#1d1d1b;
  --dark-light-color:#2b2b2b;
}


.primary-color{color:var(--primary-color);}
.secondary-color{color:var(--secondary-color);}
.dark-color{color:var(--dark-color);}
.dark-light-color{color:var(--dark-light-color);}

.bg-primary-color{background-color:var(--primary-color);}
.bg-secondary-color{background-color:var(--secondary-color);}
.bg-dark-color{background-color:var(--dark-color);}
.bg-dark-light-color{background-color:var(--dark-light-color);}
.bg-white-color{background-color:#ffffff;}



html{
    font-size:14px; /* Tamaño para 1rem */
}
body {
    margin: 0;
    padding:0;
    font-size:1rem;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:black; 
}

strong{
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 700;
    font-style: normal;
}

h1,h2,h3,h4,h5,h6{
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;    
}

h1:hover,h2:hover,h3:hover,h4:hover,h5:hover,h6:hover,p:hover{
  cursor:default!important;
}

hr.dark-light-color{
  background-color:var(--dark-light-color);
  height:1px;
  border:none;
}

.f-light{font-weight: 400!important;}
.f-roman{font-weight: 500!important;}
.f-black{font-weight: 900!important;}


/*Icono en Menú*/
.menu-item.con-icono > a::after {
  content: '';
  display: inline-block;
  margin-top:-4px;
  width: 16px;
  height: 16px;
  margin-left: 1px;
  background-size: contain;
  background-repeat: no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0z"/></svg>');
  background-color: currentColor;
}

/* Menú header ----------------------------------
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu .et_pb_menu__menu>nav>ul{
  align-items:center!important;
}

.et_pb_menu .et-menu>li.txt-bg-green a,
.et_mobile_menu li.txt-bg-green a{
	background-color: #00ef9c;
	border-radius: 1.8em;
    padding-left: 1em !important;
    padding-right: 1em !important;
}

.et_mobile_menu li.txt-bg-green a{
	display: inline-block;
    border-radius: 2em;
}
.et_pb_menu .et-menu>li.txt-bg-green a:hover{
	color:white!important;
}
.et_pb_menu .et-menu>li {
    padding-left: 5px;
    padding-right: 5px;
}
.et_pb_menu .et-menu>li a{
	padding: 0.3em 0.5em !important;
}


@media (max-width: 767px) {
    .et_pb_menu .et_mobile_menu {
		top: calc(100% + 20px);
	}
}
@media (min-width: 768px) and (max-width: 980px) {
    .et_pb_menu .et_mobile_menu {
		top: calc(100% + 30px);
	}
}
  */


/* Botón flotante */
#bot-flotante-inscripciones{
  position: fixed;
  top: -60px;
  right: 20px;
  transition: top .22s ease, opacity .22s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  display:none!important; /*anulado al terminar Exporetail*/
}
#bot-flotante-inscripciones.show{
  top: 20px;
  opacity: 1;
  pointer-events: auto;
  display:none!important; /*anulado al terminar Exporetail*/
}


/* Ajuste solo para móviles */
@media (max-width: 768px) {
  #bot-flotante-inscripciones-footer {
    position: fixed !important;
    bottom: 20px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    font-weight:700!important;
    pointer-events: auto !important;
    z-index: 999999 !important;
  }
}


/* MENU ======================================
========================================================*/

/* Eliminar el espacio reservado por el header de Divi */
body.et-tb-has-header #et-boc > header.et-l--header {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

 #er-header .et_pb_menu{
  margin-bottom:0!important;
 }

  /* Header */
  #er-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 99999;

    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;

    background: transparent !important;
    transition: transform .6s ease, opacity .6s ease;
    overflow: visible !important;
  }

  /* Capa de blur "extendida" hacia abajo con degradado */
  #er-header::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: calc(100% + 20px); /* cola un poco mayor */
    pointer-events: none;

    /* color base (ligero, casi invisible) */
    background: rgba(0,0,0,0.1);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* 👇 AQUÍ está la magia */
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.8) 40%, 
      rgba(0,0,0,0.7) 50%, 
      rgba(0,0,0,0.5) 60%,
      rgba(0,0,0,0.4) 70%,
      rgba(0,0,0,0.2) 80%, 
      rgba(0,0,0,0.1) 90%, 
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to bottom, 
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.8) 40%, 
      rgba(0,0,0,0.7) 50%, 
      rgba(0,0,0,0.5) 60%,
      rgba(0,0,0,0.4) 70%,
      rgba(0,0,0,0.2) 80%, 
      rgba(0,0,0,0.1) 90%, 
      rgba(0,0,0,0) 100%
    );
  }


  /* Se muestra 1s después (añadido por JS) */
  /* Visible */
  #er-header.is-visible{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Fondo claro */
  #er-header.on-light::after{
    background: rgba(255,255,255,0.35);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 55%,
      rgba(0,0,0,0.3) 85%,
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 55%,
      rgba(0,0,0,0.3) 85%,
      rgba(0,0,0,0) 100%
    );
  }

  /* Links en blanco cuando el header está sobre el vídeo */
  #er-header a,
  #er-header .et-menu a,
  #er-header .et_pb_menu__menu a{
    color: #fff !important;
  }

  /* Cuando detectamos fondo claro debajo */
  #er-header.on-light,
  #er-header.on-light a,
  #er-header.on-light .et-menu a,
  #er-header.on-light .et_pb_menu__menu a{
    color: #111 !important;
  }

  /* Estado sticky (cuando hay scroll) */
  #er-header.is-sticky{
    padding-top:0;
    padding-bottom:0;
  }

  /* Links en negro al hacer sticky */
  #er-header.is-sticky a,
  #er-header.is-sticky .et-menu a,
  #er-header.is-sticky .et_pb_menu__menu a{
    color: #111 !important;
  }
  #er-header .et_pb_menu .et-menu>li.txt-bg-green{
    margin-top:0;
  }
  #er-header .et_pb_menu .et-menu>li.txt-bg-green a,
  #er-header .et_mobile_menu li.txt-bg-green a{
    background-color: var(--primary-color);
    border-radius: 1.8em;
    padding: 0.6em 1em 0.4em 1em!important;
  }
  #er-header .et_pb_menu .et-menu li.txt-bg-green a:hover,
  #er-header .et_mobile_menu li.txt-bg-green a:hover{
    color:var(--dark-color)!important;
    opacity:1!important;
  }


/** MENÚ MOBILE =========================================
========================================================*/

/* ===== Offcanvas: solo móvil/tablet ===== */
@media (max-width: 980px){

  /* Ocultar menú móvil nativo de Divi (para que no duplique) */
  #er-header .et_mobile_nav_menu,
  #er-header .mobile_nav{
    display: none !important;
  }
   /* En mobile: no queremos el blur del header detrás (sobre todo al abrir el panel) */
  #er-header::after{
    display: none !important;
  }

  body.er-offcanvas-open #er-offcanvas .et-menu{
    display:block!important;
  }

  /* Botón hamburguesa flotante (derecha) */
  .er-burger{
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,1);
    z-index: 100002;
    display: inline-flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    cursor: pointer;
    border:none;
  }

  .er-burger span{
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }

  /* Convertir hamburguesa a X cuando el menú está abierto */
  body.er-offcanvas-open .er-burger span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  body.er-offcanvas-open .er-burger span:nth-child(2){
    opacity: 0;
  }
  body.er-offcanvas-open .er-burger span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Overlay */
  .er-offcanvas-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 100000;
  }

  /* Panel */
  .er-offcanvas{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(88vw, 360px);
    background: var(--dark-color);
    color: #fff;
    transform: translateX(110%);
    transition: transform .3s ease;
    z-index: 100001;
    display: flex;
    flex-direction: column;
  }

  .er-offcanvas__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 12px 18px;
  }

  .er-offcanvas__logo img{
    height: 68px;
    width: auto;
    display: block;
  }

  .er-offcanvas__close{
    background: transparent;
    color: #fff;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border:none;
  }

  /* Links */
  #er-offcanvas .er-offcanvas__nav{
    padding: 10px 0;
    overflow: auto;
  }
  #er-offcanvas .er-offcanvas__nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #er-offcanvas .er-offcanvas__nav li{
    margin: 0;
    padding: 0;
    display:block!important;
  }
  #er-offcanvas .er-offcanvas__nav a{
    display:block!important;    
    color: var(--primary-color)!important;
    font-size:1.6em;
    line-height:1.2em;
    font-weight:700;
    text-decoration: none;
    padding: 1em!important;
    
  }

  #er-offcanvas .er-offcanvas__nav .txt-bg-green{
    padding:1em;
  }
  #er-offcanvas .er-offcanvas__nav .txt-bg-green a{
    display: inline-block !important;
    color: #000000 !important;
    background: var(--primary-color);
    border-radius: 3em;
    padding: 0.5em 1em !important;
  }

  #er-offcanvas .er-offcanvas__nav a:hover{
    background: rgba(255,255,255,.06);
  }

  /* Estado abierto */
  body.er-offcanvas-open .er-offcanvas{
    transform: translateX(0);
  }
  body.er-offcanvas-open .er-offcanvas-overlay{
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(15px);
  }

  /* Bloquear scroll del body cuando está abierto */
  body.er-offcanvas-open{
    overflow: hidden;
  }
}

/* En desktop ocultamos el botón/panel */
@media (min-width: 981px){
  .er-burger, .er-offcanvas, .er-offcanvas-overlay{ display: none !important; }
}



/* EXPOSICIÓN ================================
============================================== */
#expo .et_pb_blurb .et_pb_blurb_content{
	display:flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content:flex-end;
}
#expo .et_pb_blurb .et_pb_blurb_content .et_pb_main_blurb_image{
  margin-bottom:auto;
  margin-top:auto;
  padding:0 20px;
}
#expo .et_pb_blurb .et_pb_blurb_content .et_pb_module_header{
	height: 36px;
  width: 36px;
  line-height: 2em;
  text-align: center;
  cursor:default;
  border-radius: 5px;
	background-color: var(--primary-color);  
    
}
#expo .et_pb_blurb.doble .et_pb_blurb_content .et_pb_module_header{
    height: 42px!important;
    line-height: 1.1em!important;
    padding-top: 0.2em!important;
}
#expo .et_pb_blurb.triple .et_pb_blurb_content .et_pb_module_header{
    height: 66px!important;
    line-height: 1.1em!important;
    padding-top: 0.2em!important;
}

/*POPUP*/
#et_pb_image_0_tb_footer.mfp-content .mfp-close{
  color:white!important;
}

/* PONENTES ====================================
================================================ */
#container-ponentes{
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 5px;  
  padding:5px;
}

#container-ponentes .ponente img{
  width: 100%;
  height: auto;                                    
  display: block;
  transition: transform 0.6s ease-in-out;
}
#container-ponentes .ponente .et_pb_image_wrap {
  overflow:hidden;
}
#container-ponentes .ponente img:hover{
  transform:scale(1.02);  
}

@media (max-width: 767px) {
  #container-ponentes{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 980px) {

}
@media (min-width: 981px) and (max-width: 1440px) {
  #container-ponentes{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/*CAROUSEL PONENTES ============================= 
=================================================*/

#ponentes-container-carrousel .slick-slide{
  margin:0;
}

#ponentes-container-carrousel .ponente{
  height:calc(100% - 8px);
}


/* HOME ===============================================
======================================================*/
  /* Contenedor responsive con ratio del SVG (700/1063.3043 ≈ 65.85%) */
  .er-mask-video {
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  .er-mask-video svg {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Asegura que el vídeo cubra el área */
  .er-mask-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Opcional: suaviza bordes en algunos navegadores */
  .er-mask-video foreignObject {
    overflow: visible;
  }


/** PRENSA =======================================
================================================= */

.dsm_card.dsm_card_layout_inline .dsm_card_image_wrapper{
  width: 100px;
  height: 100px;
  max-width: 100px;
  margin-right: 20px;  
  border-radius: 10px;
  background: white;
}
.dsm_card.dsm_card_layout_inline .dsm_card_image_wrapper .dsm_card_img{
  max-width:90%;
  margin:auto;
}
.dsm_card.dsm_card_layout_inline .dsm_card_wrapper{
  padding:0;
}
.dsm_card.dsm_card_layout_inline .dsm_card_wrapper .dsm_card_title{
  padding-bottom:0;
}