/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-txt) !important;
  line-height: 1.3em !important;
  color: var(--c-texto);
  /* background */
}

body strong {
  font-family: var(--font-bold);
}

p {
  margin-bottom: 5px;
}

a {
  text-decoration: none !important;
}

p, h1, h2, h3, h4, h5 {
  margin-bottom: 10px !important;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-titles);
  color: var(--c-texto);
}

.tit-logo h1 {
  font-family: var(--font-logo) !important;
  color: var(--c-secundario) !important;
  font-size: 10em !important;
}

h1 {
  font-size: 5em !important;
}

  .subtit-h1 h1 {
    font-size: 2.5em !important;
  }

h2 {
  font-size: 2.5em;
}

  h1 strong, h2 strong {
    font-family: var(--font-bold) !important;
    color: var(--c-secundario) !important;
  }

h3 {
  font-size: 1.6em;
}

h4 {
  font-size: 1.4em;
}

.tit-main h1 {
  font-family: var(--font-titles) !important;
  font-size: 5em !important;
  font-weight: 700;
  color: var(--c-blanco) !important;
}

.tit-h1 {
  font-size: 60px !important;
  line-height:4.6rem !important;
}

.subtit-h2 {
  font-size: var(--font-size-subtit);
  margin-top: 20px;
  margin-bottom: 40px;
}

.subtit-h3 {
  font-size: var(--font-size-subtit-tb);
  line-height: var(--line-height-tit);
}

.subtit-h4 {
  font-size: 30px;
  line-height: 35px;
}

.txt-legal strong {
  margin-top: 20px;
  display: block;
}

/* Modificadores */

.txt-bold {
  font-family: var(--font-bold) !important ;
  color: var(--c-secundario) !important;
}

.txt-blanco {
  color: var(--c-blanco) !important;
}

.txt-prim {
  color: var(--c-primario) !important;
}

.txt-sec {
  color: var(--c-secundario) !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.z-2 {
  z-index: 2;
}

.z-1 {
  z-index: 1;
}

.z-3 {
  z-index: 3;
}

.z-10 {
  z-index: 10;
}

.b-radius,
.b-radius .vce-col-inner,
.b-radius .vce-col-content,
.b-radius .vce-single-image
{
  border-radius: var(--b-radius) !important;
}

.op-80 {
  opacity: 0.8;
}

.op-90 {
  opacity: 0.9;
}

/* HOME */
.slide-home {
  margin-top: -200px;
  padding-top: 180px !important;
  z-index: 1;
  padding-bottom: 100px;
}

.bg-irregular .vce-col-content {
  position: relative;
}

.bg-irregular .vce-col-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28rem;
  height: 72rem;
  backdrop-filter: blur(62px);
  background: rgba(0, 0, 0, .8);
}

.flecha {
  position: absolute;
  right: 13%;
  top: 95%;
  animation: UpDown 2s infinite ease-in-out;
  -webkit-animation: UpDown 2s infinite ease-in-out;
  width: 30px;
  transform: rotate(90deg);
}

.list-inner{
  margin-left: 30px;
}

.list-inner li::marker {
  color: var(--c-secundario);
}

.list-numerada li {
  font-size: 25px;
  line-height: 40px;
}

.list-numerada li::marker {
  color: var(--c-secundario);
}

#clases-home {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  gap: 30px;
  cursor: grab;
  padding-left: 100px;
  padding-right: 100px;
}

#clases-home::-webkit-scrollbar {
  opacity: 0;
}

#clases-home .clases {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  gap: 30px;
  background-color: var(--c-transparente);
  backdrop-filter: blur(8px);
  border-style: solid;
  border-color: var(--c-secundario);
  border-width: 2px;
  /* background-image: url('/wp-content/uploads/2025/01/bg-tarjeta-pale-pink.webp'); */
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--b-radius);
  padding: 30px;
  min-height: 240px;
  min-width: 350px;
}

#clases-home .clases img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 10px;
}

#clases-home .clases h3 {
  width: fit-content;
  /* font-family: var(--font-titles); */
  margin-bottom: 10px;
  /* color: var(--c-fondo); */
}

#clases-home .clases .clases-txt p {
  height: 80px;
}

.btns-clases {
  visibility: hidden;
  text-align: right;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  padding-left: 100px;
  margin-bottom: -60px;
}

.btns-clases #izq,
.btns-clases #dch {
  color: var(--c-primario);
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid var(--c-secundario);
  width: 50px;
  height: 50px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
}

.btns-clases #izq:hover,
.btns-clases #dch:hover {
  background-color: #fe7d7d38;
  color: var(--c-secundario);
}

.link-video-portada {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
}

.link-video-portada .icono-video {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 10;
}

.link-video-portada::after,
.link-video-portada::before{
  content: " ";
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 3px solid var(--c-secundario);
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 2s infinite;
  display: block;
}

.link-video-portada .img-video {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.link-video-portada::before {
  border: 3px solid var(--c-blanco);
    animation-delay: 0.2s;
}

/* INTERNAS */
.cab-inner {
  z-index: 1;
  margin-top: -200px;
  padding-top: 200px !important;
  padding-bottom: 80px !important;
}


.img-logo-quienes {
  width: 350px;
  display: block;
  margin: auto;
}

.list{
  margin-left: 25px !important;
}

.list li {
  margin-bottom: 10px;
}

.icono-formacion {
  width: 80px;
  height: 80px;
}

.icono-formacion.centrar-icono {
  margin: auto;
  margin-bottom: 15px;
  display: block;
}

.txt-formacion * {
  margin-bottom: 5px;
}

.ficha-profe {
  box-shadow: var(--sombra);
  min-height: 460px;
  border-radius: var(--b-radius);
}

.subtit-forma {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 600;
}

.logo-programa {
  max-width: 250px;
  display: block;
  margin: auto;
}

/* CONTACTO */

.link-contacto {
  color: #4F4F4F;
  transition: var(--all-transition);
  font-weight: 700;
  text-decoration: none !important;
  font-size: 18px;
}

.link-contacto:hover {
  opacity: 0.8;
  transition: var(--all-transition);
  text-decoration: none !important;
}

/* responsive */
@media screen and (max-width: 1690px) {
  .btns-clases {
    visibility: visible;
    margin-bottom: 0px;
  }
}

@media screen and (max-width: 1280px) {
  .tit-slide .elementor-heading-title{
    font-size: 3.75em !important;
  }
  .subtit .elementor-heading-title {
    font-size: 2.4em !important;
  }
}

@media screen and (max-width: 1024px) {
  .tit-h1 {
    font-size:  var(--font-size-tit-tb);
  }
  .subtit-h2 {
    font-size:  var(--font-size-tit-mv);
  }
  .subtit-h3 {
    font-size:  var(--font-size-subtit-mv);
  }

  #clases-home {
    padding-left: 50px;
    padding-right: 50px;
    gap: 20px;
  }
}

@media screen and (max-width: 900px) {
}

@media screen and (max-width: 768px) {

  
h1 {
  font-size: 2em !important;
}

.tit-h1 {
  font-size:40px !important;
  line-height:3rem !important;
}

.tit-logo h1 {
 
  font-size: 6em !important;
}

  .subtit-h2, .subtit-h3 {
    font-size:  var(--font-size-subtit-mv);
  }

  .subtit-h4 {
    font-size: 20px;
    line-height: 25px;
  }

  .list-numerada li {
    font-size: 18px;
    line-height: 25px;
  }
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation,
  .one-container .site-content, .inside-page-header {
    padding: 0px;
  }

  .cab-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .img-logo-quienes {
    width: 250px;
  }

  .slide-home {
    margin-top: -200px;
    padding-top: 180px !important;
    z-index: 1;
    padding-bottom: 100px;
  }

  #clases-home {
    padding-left: 30px;
    padding-right: 30px;
    gap: 15px;
  }

  #clases-home .clases {
    min-height: 240px !important;
    min-width: 300px !important;
  }

  #clases-home .clases img {
    width: 75px;
    height: auto;
    object-fit: cover;
  }

  .link-video-portada,   .link-video-portada .img-video {
    width: 300px;
    height: 300px;
  }
}

@media screen and (max-width: 660px) {

  .ocultar-escritorio {
    display: block;
  }
  .mv-hidden {
    display: none !important;
  }

  #clases-home {
    padding-left: 20px;
    padding-right: 20px;
  }
}


	/* Create and position :after pseudo-element */
	
	.vce-col.clickable a:after {
    content: "";
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; 
 }
 /* Remove relatively-positioned parent elements in column */
 
 .clickable .vce-col-content, .clickable .vce-col-inner {
    position: static;
 }

 ul.lista-especial {
  margin-left: 10px;
  margin-top: 30px;
  padding-left: 0;
  list-style: none; /* quitamos los bullets por defecto */
  position: relative;
}

ul.lista-especial li {
  position: relative;
  margin-bottom: 0 !important;
  padding-left: 25px; /* para dejar espacio al circulito */
  margin-top: 20px;
}

ul.lista-especial li::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--c-primario);
  opacity: 0.8;
  position: absolute;
  top: 0.6em; /* ajusta si lo ves muy arriba o abajo */
  left: 0;
  border-radius: 50%; /* opcional: para que se vea como bolita */
  transition: 0.4s;
}