/* Reset  */
* ,*::before ,*::after {margin: 0;padding: 0;box-sizing: border-box;}html,body {height: 100%;font-family: sans-serif,Arial,Helvetica,sans-serif;line-height: 1.6;}body {background-color: #fff;color: #333;}ul,ol {list-style: none;}a {text-decoration: none;color: inherit;}img {max-width: 100%;height: auto;display: block;}table {border-collapse: collapse;width: 100%;}th,td {text-align: left;padding: 8px;}button {background: none;border: none;padding: 0;cursor: pointer;}input,textarea,select,button {font: inherit;color: inherit;}a:focus,button:focus,input:focus,textarea:focus {outline: none;}


body {
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  color: #004359;
  background-color: #fff;
  font-size: 18px;
}

a { text-decoration: none; color: #EA6133;}

.maranja-oscuro {color: #EA6133;}
.maranja-claro {color: #FCA437;}
.azul {color: #2D355B;}
.fondo-naranja {background-color: #FFEBD3;}

h2.sub-tit {font-size: 30px; font-weight: 700; color: #2D355B; }
h2 {font-size: 30px;}
h3 {font-size: 22px;}
.botones {text-align: center; padding: 20px;}
.boton {display: inline-block; padding:15px 40px; min-width: 200px; border-radius: 300px; border:1px solid #EA6133; color:#2D355B; }
.boton:hover {background-color:#EA6133; color:#fff;}
.Playfair {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;}

/**/
.main-header,
.container { width: 90%; max-width: 1280px; margin: 0 auto;}

.container.reducido {max-width: 1000px;}

/* Header */
.menu-movil {display: none;}
.main-header { display: flex; padding: 2rem 0 1rem; justify-content: flex-end; position: relative;}
.main-header h1 {max-width:180px; position: absolute; left: 0; top: 10px;}
.main-header h1 img {width: 100%; height: auto;}
.navbar { display: flex; justify-content: center; align-items: center;}

.nav-menu {list-style: none;display: flex; gap: 2rem;}
.nav-menu a { color: #004359;}
.nav-menu a:hover {color: #EA6133;}
.nav-menu .active a { font-weight: bold; position: relative; display: inline-block;}
.nav-menu .active a:before {background-color: #EA6133 ; content: ""; width: 100%; height: 1px; position: absolute; left: 0;; bottom: -10px;}

.nav-redes { list-style: none; display: flex; gap: 0.5rem;margin-left: 40px;}

.nav-redes img {width: 35px;}

.nav-ancla {list-style: none;display: flex; gap: 10px; margin-top: 20px;}
.nav-ancla a { color: #004359; text-decoration: underline; padding:10px; margin-left: -10px; border-radius: 5px;}
.nav-ancla a:hover {background-color: #fff; text-decoration: none; color: #EA6133;}

/* Hero */
.hero { margin: 50px 0px; position: relative; overflow:hidden;  }
.hero:before {position: absolute;  content:""; background-color: #FFEBD3; left: 0px; top: 0px; 
  height: 100%; width: 50vw;  }
.item-hero { position: relative; max-width: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; }

.item-hero .img-video {max-width: 22vw; min-width: 350px; position: relative;}
.item-hero .img-video img.circular {width: 100%; display: block;}
.item-hero .play {width: 80px; position: absolute; right: -10px; bottom: 20%; cursor: pointer;}
.item-hero .play:hover  {transform: scale(1.1);}
.item-hero img.right {max-width: 22vw; min-width: 350px; position: absolute; right: -11vw;}

.hero-text { padding: 40px; }
.hero-img-text { width: 60vw; background-color: #FFEBD3; border-radius:1000px; display: flex; align-items: center;}
.hero h2 {font-size: 2.5rem; margin-bottom: 1rem; line-height: 1.2; max-width: 80%;}
.hero h3 {font-size: 2rem; margin-bottom: 1rem; line-height: 1.2; color: #EA6133;}
.hero p {font-size: 1.2rem; color: #555;}



/*interior*/
.hero.interior .container,
.base_texto .container {max-width: 1000px; padding-right: 10%;}
.hero.interior img.right { height: 100%; min-width: 10px;  margin-left: 30%; }
.hero.interior:before { display: none;  }
.hero.interior .container {position: relative; min-height: 320px; background-color: #FFEBD3; border-radius:1000px; display: flex; align-items: center;}
.hero.interior .container:before {position: absolute;  content:""; background-color: #FFEBD3; left: -18vh; top: 0px; 
  height: 100%; width: 30vw; border-radius: 3000px;}
.hero.interior .hero-text {padding: 30px 0px; position: relative;}
.hero.interior .hero-text .destacado {font-size: 22px;}

.hero.interior.cab_multimedia .container {background-color: transparent!important; min-height: 10px;}
.hero.interior.cab_multimedia .container:before {display: none; }
.hero.interior.cab_multimedia .hero-text {padding-bottom: 0px;}

.hero.interior.limpia .container {background-color: transparent!important; min-height: 10px;}
.hero.interior.limpia .container:before {display: none;}
.hero.interior.limpia .hero-text {padding-bottom: 0px; width: 100%;}

.bl_video {padding: 40px; border-radius: 50px; background-color: #FFEBD3; }
.bl_video video {width: 100%;}

.multimedia {margin-top: 2em;}

.base_texto {margin-bottom: 40px;}
.base_texto blockquote {background-color: #f2f2f2; padding: 40px 80px; border-radius: 3000px; margin: 30px -80px;}
.base_texto blockquote h3 {margin-top: 0px;}
.base_texto h2 {margin: 30px 0px 20px; color: #EA6133;}
.base_texto h3 {margin: 30px 0px 20px;}
.base_texto h4 {margin: 30px 0px 20px;}
.base_texto ul {margin: 10px 0px;}
.base_texto ul li {list-style: square; margin-left: 30px; padding-bottom: 10px;}
.base_texto ul li::marker { color: #EA6133; }
.base_texto a {}

.ul-destacado {padding: 20px; border-radius: 20px; background-color: #FFEBD3;}

.junta {display: flex; flex-wrap: no-wrap; justify-content: center; gap: 1rem; padding-bottom: 20px;}
.junta div {background-color: #f1f1f1; padding: 20px; width: 33%; text-align: center; border-radius: 20px;}

/* Introducción */
.intro { padding: 2rem 0; }
.intro .container { max-width: 900px;}
.intro p { font-size: 1.1rem;text-align: center; max-width: 800px; margin: 0 auto;}

/* Introducción */
.banner { padding: 2rem 0; }
.banner .container { max-width: 900px; padding: 120px 80px; background-color: #f9f9f9; border-radius: 1000px; background:transparent url("img/central.jpg") no-repeat center center; background-size: cover;}
.banner h3 { font-size: 1.5rem; font-weight:700; text-align: center; max-width: 800px; margin: 0 auto; color:#fff;}

/* Datos migraña */
.datos-migrana { background-color: #fff; padding: 2rem 0;}
.datos-migrana .bl-starts {background-color: #FFEBD3; padding: 0 180px; border-radius: 3000px;}
.datos-migrana h2 { text-align: center; margin-bottom: 2rem;}
.stats {position: relative;}
.stats div.dato  {display: flex; align-items: center; width: 100%; min-height: 300px; border-radius: 1000px; line-height: 1.2;}
.stats div.dato  span {display: block; width: 100%; text-align: center; padding:0 20px;}
.stats strong {font-size: 4rem;color: #fff; display: block; line-height: 1;}

.stats .maranja-oscuro  {background-color: #EA6133; color: #fff;}
.stats .maranja-claro  {background-color: #FCA437; color: #fff;}
.stats .azul  {background-color: #2D355B; color: #fff;}
.owl-carousel .owl-nav button {text-indent:-4000px; width: 30px; height: 30px;}
.owl-carousel .owl-nav button.owl-prev { background:transparent url("img/prev.svg") no-repeat center center; background-size: 100%; position: absolute; left: -50px; top: 140px; font-size: 50PX;}
.owl-carousel .owl-nav button.owl-next { background:transparent url("img/next.svg") no-repeat center center; background-size: 100%; position: absolute; right: -50px; top: 140px; font-size: 50PX;}



/* Recursos */
.recursos { padding: 2rem 0;}
.recursos h2 { text-align: center; margin-bottom: 1.5rem;}
.resource-list { display: flex;flex-wrap: wrap;justify-content: center; gap: 1rem;}
.resource-item { padding: 0 0 20px;border-radius: 800px;width: 30%; text-align: center; background-color: #FBFBFC;}
.resource-text {padding: 20px 20px 40px}
.resource-text p {font-size: 20px; font-weight: 700;}
.resource-text a {color: #2D355B; text-decoration: underline; display: inline-block; margin-top: 10px;}
.resource-text a:hover {text-decoration: none; color: #EA6133;}

.resource-text .download {padding:5px 40px; background:transparent url("img/descarga.svg") no-repeat center left; background-size: 25px;}
.resource-text .enlace {padding:5px 40px; background:transparent url("img/enlace.svg") no-repeat center left; background-size: 25px;}

.resource-item img {width: 100%;}

/*patrocinadores*/
.patrocinadores {padding: 2rem 0;}
.patrocinadores .container div {display: flex; gap: 1rem; flex-wrap: nowrap;}
.patrocinadores .container div img {border: 1px solid #cdcdcd; height: 75px; display: block;}

/* Footer */
.main-footer { padding: 1rem 0;text-align: center; font-size: 1rem; text-align: center;}
.main-footer .logo {width: 190px; margin-bottom: 20px;}
.main-footer a {display: inline-block;}
.footer-links {list-style: none;display: flex;justify-content: center;gap: 1rem;margin-top: 0.5rem;}
.footer-links a { color: #2D355B;}

.main-footer .nav-redes {justify-content: center; margin: 30px 0 40px;}
.main-footer .nav-redes img {width: 40px;}


/**/

.modal {
      display: none; 
      position: fixed; 
      z-index: 1; 
      left: 0; 
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgba(0,0,0,0.7); 
    }

    /* Contenedor del vídeo */
    .modal-content {
      margin: 10% auto;
      padding: 20px;
      width: 80%;
      max-width: 1000px;
      position: relative;
    }

    /* Botón para cerrar */
    .close {
      position: absolute;
      top: 40px;
      right: 40px;
      cursor: pointer;
      width: 30px ;
    }

     .close img  {width: 100%;}


  /*animaciones*/
    .item-hero .img-video img.circular {opacity: 1;  animation: animacion_aparece_izquierda 0.8s  backwards  ease; animation-delay: 0.3s;}
    .item-hero .play {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 0.8s;}
    .item-hero img.right {opacity: 1;  animation: animacion_aparece_derecha 0.8s  backwards  ease; animation-delay: 0.5s;}
    .hero-text h2 {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 0.8s;}
    .hero h3 {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 1s;}
    .hero .destacado {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 1s;}
    .hero .nav-ancla {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 1s;}
    .intro {opacity: 1;  animation: animacion_aparece_sube 0.8s  backwards  ease; animation-delay: 1s;}
    .banner {opacity: 1;  animation: animacion_aparece_sube 0.8s  backwards  ease; animation-delay: 1.2s;}
    .interior .hero-text {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 0.3s;}
    .bl_video video  {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 0.3s;}

    .active video  {opacity: 1;  animation: aparece 0.8s  backwards  ease; animation-delay: 0.3s;}

    .owl-carousel.owl-drag .owl-item {}
    .owl-carousel.owl-drag .owl-item.active {opacity: 1;  animation: animacion_aparece_derecha 0.8s  backwards  ease; animation-delay: 0.2s;}

  @keyframes aparece {
    0%   {opacity:0; }
    80%  {opacity:1; }
    100%  {opacity:1;  }
  }

@keyframes animacion_aparece_sube {
    0%   {opacity:0; transform: translateY(30%); }
    80%  {opacity:1; transform: translateY(0%); }
    100%  {opacity:1; transform: translateY(0%); }
}

@keyframes animacion_aparece_derecha {
    0%   {opacity:0; transform: translateX(30%); }
    80%  {opacity:1; transform: translateX(0%); }
    100%  {opacity:1; transform: translateX(0%); }
  }
@keyframes animacion_aparece_izquierda {
    0%   {opacity:0; transform: translateX(-30%); }
    80%  {opacity:1; transform: translateX(0%); }
    100%  {opacity:1; transform: translateX(0%); }
  }

  @keyframes animacion_top {
    0%   {height:1px; }
    100%  {height:100%;}
  }

@keyframes animacion_top_off {
    0%   {height:100%; }
    100%  {height:1px;}
  }

a, .item-hero .play   {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/**/
 .cc-color-override--1347669674 .cc-highlight .cc-btn:first-child {background-color: rgb(255, 255, 255,0.1);}

/* Responsive */
@media (max-width: 768px) {
  body {font-size: 16px; overflow-x: hidden;}
  .main-header h1 {max-width: 140px; left: 20px;}
  .navbar.active {display: block;}
  .navbar {display: none; box-shadow:0px 3px 30px rgba(44, 44, 44, 0.1); background-color: #fff; padding: 20px; position: absolute; right: 20px; top: 80px; z-index: 10;}
  .navbar .nav-menu {display: block; padding: 20px;}
  .navbar .nav-menu li {margin-bottom: 15px;}
  .nav-menu .active a:before {bottom: -5px;}
  .nav-redes {margin: 0;}
  .menu-movil {display: block; position: absolute; right: 20px; top:35px; cursor: pointer; width: 30px; }
  .menu-movil img {width: 100%;}
  .main-header {padding: 20px;  width: 100%; max-width: 100%;}
  .container { width: 100%; max-width: 100%; padding:0px 20px;}

  .hero {overflow-y: inherit; margin-bottom: 0px; }
  .hero.interior {margin-bottom: 40px;}
  .item-hero .play {left: -10px; bottom: 20px;}
  .hero:before,
  .item-hero img.right {display: none;}
  .hero-text {padding: 40px 20px 60px 20px; background-color:#FFEBD3}
  .hero-img-text {width: 100%; min-height: 50vh; background-color: transparent; padding-bottom: 90px;}
  .hero-img-text {border-radius: 0px;}

  .hero h2 {font-size: 28px; max-width: 90%;}
  .hero h3 {font-size: 24px;}
  .item-hero .img-video {position: absolute; right: -180px; bottom:0px; }
  .item-hero .img-video img.circular {width: 250px; height: auto; min-height: 10px; min-width: 10px;}

  .banner {padding: 0 20px ;}
  .banner .container {padding: 40px; border-radius: 40px;}
  .banner h3 {font-size: 20px;}
  .intro p {text-align: left; font-size: 1em;}

  h2.sub-tit {font-size: 22px;}

  .junta  {display: block;}
  .junta div {margin-bottom: 10px; width: 100%;}


  /**/
  .resource-list {}
  .resource-item {width: 100%;}

  /**/
  .datos-migrana .bl-starts {padding: 20px; border-radius: 40px;}
  .stats div.dato {width: 250px; height: 250px; min-height: 200px; margin: 0 auto;}
  .owl-carousel .owl-nav button.owl-next {right: -10px; top: 110px; width: 20px;}
  .owl-carousel .owl-nav button.owl-prev {left:  -10px; top: 110px; width: 20px;}

  /**/
  .base_texto blockquote,
  .hero.interior .container {border-radius: 0px;}
  .hero.interior .hero-text .destacado {font-size: 18px;}
  .nav-ancla {display: block;}
  .nav-ancla.horizontal {display: flex;}
  .nav-ancla li {margin-bottom: 10px;}

  .multimedia {margin-top: 50px;}
  .bl_video {padding: 20px; border-radius: 20px; }

  .patrocinadores .container div { flex-wrap: wrap;  justify-content: center;}
  .patrocinadores .container div img {height: auto; width: 45%}

  /**/
  .main-footer {font-size: 14px;}
  .footer-links {display: block;}
  .footer-links li {}

  /**/
  .modal-content { margin: 10% auto; padding: 10px;width: 95%; transform: translateY(60%); }
  .cc-window .cc-message {text-align: center;}


}