.webinar-header {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    /* El degradado va de negro (0,0,0,0.5) a negro (0,0,0,0.5) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), 
                      url("https://puebla.anahuac.mx/hubfs/APP/Educaci%C3%B3n%20Continua/EC-Site/EC-2025-Sitio%20web/EC-2026%20P%C3%A1gina%20Eventos/ec-anahuac-puebla-cursos-webinars.webp");
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  padding: 2.4rem;
}



.webinar-header img {
    margin-top: 3.2rem;
    width: 250px;
      margin-bottom: 9rem;

}

.webinar-header h1 {
    color: white !important;
    font-family: 'DMSerif';
    font-size: 5rem !important;
    font-weight: 300;
    margin-bottom: 2.5rem;

    animation: slideFadeInLeft 1s ease-out forwards;
}

.webinar-header h2 {
    color: white !important;
    font-family: 'sharpSlab-Thin';
    font-size: 2.5rem !important;
    text-shadow: 0 0 1px rgba(0,0,0,0.4);

    animation: slideFadeInLeft 1.4s ease-out forwards;
}

@keyframes slideFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ======== MOBILE ======== */
@media (max-width: 768px) {

.webinar-header {
    min-height: 550px;
    padding: 1rem 0.5rem;

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

    /* 👇 color base para evitar franjas blancas */
    background-color: #f37021;

    background-image:
        linear-gradient(
            to bottom,
            #f37021 0%,
            #f37021 30%,
            transparent 30%,
            transparent 70%,
            #f37021 70%,
            #f37021 100%
        ),
        url("https://puebla.anahuac.mx/hubfs/APP/Educaci%C3%B3n%20Continua/EC-Site/EC-2025-Sitio%20web/EC-2026%20P%C3%A1gina%20Eventos/ec-anahuac-puebla-cursos-webinars.webp");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}
    .webinar-header h1 {       
        font-size: 3.5rem !important;
        margin-top: 10rem;
        line-height: 0.9 !important;
        width: 80%;
        margin-bottom: 0.1rem;
            text-align: center;


    }

    .webinar-header h2 {
        font-size: 1.6rem !important;
        width: 90%;
      text-align: center;
    }
}

@font-face {
    font-family: DMSerif;
    src: url('https://6397695.fs1.hubspotusercontent-na1.net/hubfs/6397695/webfonts/DMSerifDisplay-Regular.woff');
    font-display: swap;
}

@font-face {
    font-family: SharpSlab;
    src: url('https://6397695.fs1.hubspotusercontent-na1.net/hubfs/6397695/webfonts/SharpSlab-Thin.ttf');
    font-display: swap;
}

@font-face {
    font-family: roboto;
    src: url('https://6397695.fs1.hubspotusercontent-na1.net/hubfs/6397695/webfonts/Roboto-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: sharpSlab-Thin;
    src: url('https://6397695.fs1.hubspotusercontent-na1.net/hubfs/6397695/webfonts/SharpSlab-Thin.ttf');
    font-display: swap;
}

.slider-registro {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 90px;
}

.slider {
  position: relative;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider-content {
  display: flex;
  flex-direction: row;
  /* row como pediste */
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 4.4rem;
}

.slider-image img {
  width: 490px;
  height: auto;
}

.slider-text {
  max-width: 540px;
}

.slider-text h1 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  line-height: 1.2;
  font-family: 'DMSerif' !important;
  color: #ff5900;
  font-weight: 300;
  margin-bottom: 20px;
}

.slider-text p {
  margin-bottom: 6px;
  color: black;
  font-family: 'SharpSlab';
  font-weight: 900;
}

.slider-text .texto {
  margin-bottom: 30px;
    font-family: 'SharpSlab';
    font-weight: 900;


}

.slider-text a {
  background: #ff5900;
  color: white !important;
  padding: 10px 30px;
  text-decoration: none !important;
  border-radius: 90px;
  font-family: 'SharpSlab' !important;
  font-weight: 900;
}

.slider-registro .image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Flechas */
.arrow {
  width: 60px;
  cursor: pointer;
  margin: 10px 0;
}

@media (max-width: 800px) {
  .slider-registro {
    margin-top: 70px;
  }

  .slider-content {
    flex-direction: column;
    width: 100%;
  }

  /* Cambiamos la disposición de las flechas para móvil */
  .slider-registro .image-container {
    flex-direction: column; /* Cambiamos a fila en móvil */
    gap: 10px;
    width: 100%;
    justify-content: center;
  }

  .slider-image img {
    width: 280px; /* Reducimos un poco el tamaño en móvil */
    height: auto;
    border-radius: 10px;
  }

  /* Reordenamos las flechas para que estén a los lados */
  .arrow {
    width: 30px; /* Flechas más pequeñas en móvil */
    margin: 0 10px; /* Margen horizontal en lugar de vertical */
  }

  /* Aseguramos el orden correcto: flecha izquierda, imagen, flecha derecha */
  .arrow-up {
    order: 1;
  }
  
  .slider-image {
    order: 2;
  }
  
  .arrow-down {
    order: 3;
  }

  .slider-text h1 {
    text-align: center;
    font-size: 1.5rem; /* Reducimos tamaño en móvil */
    margin-top: 20px;
  }

  .slider-text p {
    text-align: center;
    font-size: 0.9rem;
  }

  .slider-text .texto {
    margin-bottom: 20px;
  }

  .slider-text a {
    background: #ff5900;
    color: white;
    padding: 12px 40px; /* Reducimos el padding */
    text-decoration: none !important;
    border-radius: 90px;
    font-family: 'SharpSlab' !important;
    font-weight: 900;
    font-size: 16px; /* Tamaño de fuente más razonable */
    display: inline-block; /* Para mejor control del padding */
    margin-bottom: 30px;
  }

  .slider-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 15px; /* Añadimos padding para que no quede pegado a los bordes */
    box-sizing: border-box;
  }
  
  /* Ajustamos el slider para que no se desborde */
  .slider {
    width: 100%;
    overflow: hidden;
  }
}

.beneficios {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.beneficios h1 {
    font-family: 'DMSerif' !important;
    color: black;
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
}

.beneficios-container {
    display: flex;
    background-color: orange;
    width: 100%;
}

.beneficios-container .beneficio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 50px 20px;
    width: 25%;
    background-color: red;
}

.beneficios-container .beneficio-item img {
    width: 80px;
    margin-bottom: 20px;
}

.beneficios-container .beneficio-item h3 {
    font-family: 'SharpSlab' !important;
    text-align: center;
  line-height: 1.4;
    color: white;
    font-size: 18px;
  width: 85%;
}

@media (max-width: 800px) {
    .beneficios h1 {
    font-family: 'DMSerif' !important;
    color: black;
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
    width: 95%;
}
    .beneficios-container {
        flex-direction: column;
    }

    .beneficios-container .beneficio-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 50px 20px;
        width: 100%;
    }
}


.webinars-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* espacio entre items */
  padding: 2rem 5rem;
  align-items: center;
  justify-content:center;
  margin-top: 50px;
}

.webinar-card {
  position: relative;
  width: 310px;
  height: 250px
  overflow: hidden;
  border-radius: 8px;
  display: block;
}

.webinar-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 🔶 overlay */
.webinar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1; /* debajo del botón */
}

/* 🔶 botón */
.webinar-card span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  background: #ff6a00;
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: all .25s ease;
  pointer-events: none;
  z-index: 2; /* arriba del overlay */
}

/* ✨ hover */
.webinar-card:hover::after {
  opacity: 1;
}

.webinar-card:hover span {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .webinars-group {
    flex-direction: column;
  }

  .webinar-card {
    width: 100%; /* ocupa todo el ancho en móvil */
    max-width: 220px; /* opcional para que no quede gigante */
  }
}