<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">

<style>
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'); 
    
    /* Contenedor padre hiper-específico */
    .drupal-sep-wrapper.sep-page-container {
      font-family: 'Montserrat', sans-serif !important;
      color: #333333 !important;
      line-height: 1.6 !important;
      margin: 0 auto !important;
      padding: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    .drupal-sep-wrapper.sep-page-container *, 
    .drupal-sep-wrapper.sep-page-container *::before, 
    .drupal-sep-wrapper.sep-page-container *::after {
      box-sizing: border-box !important;
    }
    
    /* 1. ARQUITECTURA DEL CARRUSEL (Capas completas sin cortes) */
    .drupal-sep-wrapper .sep-carousel-wrapper {
      position: relative !important;
      width: 100vw !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      height: 550px !important;
      overflow: hidden !important;
      background-color: #000000 !important;
    }
    
    .drupal-sep-wrapper .sep-carousel-slide {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 1 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .drupal-sep-wrapper .sep-carousel-slide.last-active { z-index: 2 !important; }
    .drupal-sep-wrapper .sep-carousel-slide.active { z-index: 3 !important; }
    
    /* CADA CAPA CONTIENE LA IMAGEN COMPLETA */
    .drupal-sep-wrapper .sep-quad-layer {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background-size: cover !important;
      background-position: center !important;
      transition: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      outline: none !important;
    }
    
    /* ESTADO INACTIVO */
    .drupal-sep-wrapper .sep-quad-layer.layer-1 { clip-path: inset(0 74% 0 26%) !important; }
    .drupal-sep-wrapper .sep-quad-layer.layer-2 { clip-path: inset(0 49% 0 51%) !important; }
    .drupal-sep-wrapper .sep-quad-layer.layer-3 { clip-path: inset(0 24% 0 76%) !important; }
    .drupal-sep-wrapper .sep-quad-layer.layer-4 { clip-path: inset(0 0 0 100%) !important; }
    
    /* ESTADO ACTIVO (Expansión fluida) */
    .drupal-sep-wrapper .sep-carousel-slide.active .sep-quad-layer {
      transition: clip-path 0.85s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .drupal-sep-wrapper .sep-carousel-slide.active .layer-1 { 
      clip-path: inset(0 74% 0 0) !important; 
      transition-delay: 420ms !important;
    }
    .drupal-sep-wrapper .sep-carousel-slide.active .layer-2 { 
      clip-path: inset(0 49% 0 24%) !important; 
      transition-delay: 280ms !important;
    }
    .drupal-sep-wrapper .sep-carousel-slide.active .layer-3 { 
      clip-path: inset(0 24% 0 49%) !important; 
      transition-delay: 140ms !important;
    }
    .drupal-sep-wrapper .sep-carousel-slide.active .layer-4 { 
      clip-path: inset(0 0 0 74%) !important; 
      transition-delay: 0ms !important;
    }
    
    /* ESTADO PREVIO */
    .drupal-sep-wrapper .sep-carousel-slide.last-active .sep-quad-layer {
      transition: none !important;
    }
    .drupal-sep-wrapper .sep-carousel-slide.last-active .layer-1 { clip-path: inset(0 74% 0 0) !important; }
    .drupal-sep-wrapper .sep-carousel-slide.last-active .layer-2 { clip-path: inset(0 49% 0 24%) !important; }
    .drupal-sep-wrapper .sep-carousel-slide.last-active .layer-3 { clip-path: inset(0 24% 0 49%) !important; }
    .drupal-sep-wrapper .sep-carousel-slide.last-active .layer-4 { clip-path: inset(0 0 0 74%) !important; }
    
    /* Capa protectora de contraste */
    .drupal-sep-wrapper .sep-carousel-wrapper::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: transparent !important;
      z-index: 4 !important;
      pointer-events: none !important;
    }
    
    /* Textos */
    .drupal-sep-wrapper .sep-carousel-content {
      position: absolute !important;
      top: 0 !important;
      left: 10% !important;
      width: 80% !important;
      height: 100% !important;
      z-index: 5 !important;
      color: #ffffff !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      padding: 90px 0 100px 0 !important;
      opacity: 0 !important;
      transform: translateX(20px) !important;
      transition: opacity 0.6s ease, transform 0.6s ease-out !important;
    }
    
    .drupal-sep-wrapper .sep-carousel-slide.active .sep-carousel-content {
      opacity: 1 !important;
      transform: translateX(0) !important;
      transition-delay: 0.4s !important;
    }
    
    .drupal-sep-wrapper .sep-carousel-content h1 {
      font-family: 'Montserrat', sans-serif !important;
      font-size: 3.8rem !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      margin: 0 !important;
      text-shadow: 2px 2px 10px rgba(0,0,0,0.7) !important;
      border: none !important;
    }
    
    .drupal-sep-wrapper .sep-carousel-indicators {
      position: absolute !important;
      bottom: 30px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      z-index: 6 !important;
      display: flex !important;
      gap: 12px !important;
    }
    .drupal-sep-wrapper .sep-indicator-dash {
      width: 40px !important;
      height: 4px !important;
      background-color: rgba(255, 255, 255, 0.4) !important;
      cursor: pointer !important;
      transition: background-color 0.3s ease !important;
    }
    .drupal-sep-wrapper .sep-indicator-dash.active {
      background-color: #C29324 !important;
    }
    .drupal-sep-wrapper .sep-btn-carousel {
      display: inline-block !important;
      padding: 14px 45px !important;
      color: #ffffff !important;
      background-color: #C29324 !important;
      text-decoration: none !important;
      border-radius: 6px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      font-size: 0.95rem !important;
      letter-spacing: 1px !important;
      align-self: flex-start !important;
      transition: background-color 0.3s ease !important;
      border: none !important;
    }
    .drupal-sep-wrapper .sep-btn-carousel:hover {
      background-color: #A0781B !important;
    }
    
    /* 2. SECCIÓN INFO Y LOGOS */
    .drupal-sep-wrapper .sep-info-logos-section {
      padding: 60px 20px !important;
      max-width: 1050px !important;
      margin: 0 auto !important;
      text-align: center !important;
    }
    .drupal-sep-wrapper .sep-info-logos-section p {
      font-size: 1.6rem !important;
      color: #444444 !important;
      margin-bottom: 40px !important;
    }
    .drupal-sep-wrapper .sep-logos-container-clean {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 300px !important;
    }
    .drupal-sep-wrapper .sep-logos-container-clean img {
      max-height: 90px !important;
      width: auto !important;
      object-fit: contain !important;
      box-shadow: none !important;
      border: none !important;
    }
    
    /* 3. SECCIÓN FECHAS (Ancho completo igual al carrusel) */
.drupal-sep-wrapper .sep-dates-section {
  background-color: #F4F6F9 !important;
  padding: 80px 20px !important;
  
  /* Técnica de ancho completo (igual a tu carrusel) */
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.drupal-sep-wrapper .sep-dates-container {
  /* Alinea el contenido interno con el ancho estándar del sitio */
  max-width: 1200px !important; 
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 40px !important;
}

.drupal-sep-wrapper .sep-date-card {
  background: #ffffff !important;
  padding: 30px 40px !important; /* Tarjetas más amplias */
  border-radius: 12px !important;
  flex: 1 !important;
  min-width: 320px !important; 
  box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important;
  border: none !important;
  border-top: 6px solid #0B2347 !important;
  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Centra el texto verticalmente */
  align-items: center !important
}

.drupal-sep-wrapper .sep-date-card.sep-capacitacion {
  border-top-color: #B22222 !important;
}

.drupal-sep-wrapper .sep-date-card h3 {
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 0 !important;
  color: #444444 !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
}

.drupal-sep-wrapper .sep-date-highlight {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  color: #0B2347 !important;
  margin-top: 25px !important;
}

.drupal-sep-wrapper .sep-date-card.sep-capacitacion .sep-date-highlight {
  color: #B22222 !important;
}



    /* 4. OFERTA DE CURSOS */
    .drupal-sep-wrapper .sep-courses-section {
      padding: 60px 20px !important;
      max-width: 1100px !important;
      margin: 0 auto !important;
      text-align: center !important;
    }
    .drupal-sep-wrapper .sep-courses-section h2,
    .drupal-sep-wrapper .sep-title-style {
      font-family: 'Montserrat', sans-serif !important;
      color: #0B2347 !important;
      font-size: 2.2rem !important;
      font-weight: 700 !important;
      margin-bottom: 40px !important;
      text-align: center !important;
    }
    .drupal-sep-wrapper .sep-courses-grid {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 40px !important;
      justify-content: center !important;
    }
    .drupal-sep-wrapper .sep-course-card {
      background: #ffffff !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
      flex: 1 !important;
      min-width: 300px !important;
      max-width: 850px !important;
      transition: transform 0.3s ease !important;
      padding-bottom: 30px !important;
    }
    .drupal-sep-wrapper .sep-course-card:hover {
      transform: translateY(-5px) !important;
    }
    .drupal-sep-wrapper .sep-course-image {
      height: 540px !important;
      background-size: cover !important;
      background-position: center !important;
      margin-bottom: 25px !important;
    }
    .drupal-sep-wrapper .sep-course-card h3 {
      font-family: 'Montserrat', sans-serif !important;
      color: #0B2347 !important;
      font-size: 1.5rem !important;
      font-weight: 700 !important;
      margin: 0 0 25px 0 !important;
    }
    .drupal-sep-wrapper .sep-btn {
      display: inline-block !important;
      padding: 12px 35px !important;
      color: #ffffff !important;
      background-color: #0B2347 !important;
      text-decoration: none !important;
      border-radius: 25px !important;
      font-weight: 700 !important;
      transition: background-color 0.3s ease !important;
      border: none !important;
    }
    .drupal-sep-wrapper .sep-btn:hover {
      background-color: #12386e !important;
    }
    .drupal-sep-wrapper .sep-btn-accent {
      background-color: #B22222 !important;
    }
    .drupal-sep-wrapper .sep-btn-accent:hover {
      background-color: #911b1b !important;
    }
    
    /* 5. SECCIÓN REGISTRO */
    .drupal-sep-wrapper .sep-register-section {
      background: transparent !important;
      color: #333333 !important;
      padding: 60px 20px 80px 20px !important;
      text-align: center !important;
    }
    .drupal-sep-wrapper .sep-register-container {
      max-width: 1200px !important;
      margin: 0 auto !important;
    }
    .drupal-sep-wrapper .sep-register-section h2 {
      font-family: 'Montserrat', sans-serif !important;
      font-size: 2.2rem !important;
      font-weight: 700 !important;
      color: #0B2347 !important;
      margin-bottom: 25px !important;
    }
    .drupal-sep-wrapper .sep-original-text-block {
      text-align: left !important;
      background: #F4F6F9 !important;
      padding: 60px 40px !important;
      border-radius: 8px !important;
      border-left: 4px solid #B22222 !important;
      margin-bottom: 40px !important;
      font-size: 16px !important;
    }
    .drupal-sep-wrapper .sep-original-text-block p {
      margin: 0 0 12px 0 !important;
      color: #333333 !important;
    }
    .drupal-sep-wrapper .sep-original-text-block p:last-child {
      margin-bottom: 0 !important;
      color: #8b0000 !important;
      font-size: 16px !important;
    }
    .drupal-sep-wrapper .sep-scroll-top-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 45px !important;
      height: 45px !important;
      margin-top: 40px !important;
      background-color: #F4F6F9 !important;
      color: #333333 !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      transition: background-color 0.3s, transform 0.3s !important;
      border: 1px solid #cccccc !important;
    }
    .drupal-sep-wrapper .sep-scroll-top-btn:hover {
      background-color: #B22222 !important;
      color: #ffffff !important;
      transform: translateY(-3px) !important;
    }
    .drupal-sep-wrapper .sep-scroll-top-btn svg {
      width: 22px !important;
      height: 22px !important;
      fill: currentColor !important;
    }
    
    /* 6. CONTACTO / HORARIO / DIRECCIÓN (3 COLUMNAS HORIZONTALES) */
    .drupal-sep-wrapper .info-row {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 30px !important; 
      width: 100% !important;
      max-width: 1200px !important; 
      margin: 60px auto !important;
      padding: 0 15px !important;
      box-sizing: border-box !important;
    }
    
    .drupal-sep-wrapper .info-col {
      background: #ffffff !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
      border-radius: 8px !important;
      padding: 40px 20px !important;
      text-align: center !important;
      transition: transform .3s ease, box-shadow .3s ease !important;
      border: 1px solid #f0f0f0 !important; 
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }
    
    .drupal-sep-wrapper .info-col:hover {
      box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
      transform: translateY(-4px) !important;
    }
    
    .drupal-sep-wrapper .info-col .boxes-icon {
      font-size: 50px !important;
      color: #C29324 !important;
      margin-bottom: 20px !important;
      display: inline-block !important;
    }
    
    .drupal-sep-wrapper .info-col h3 {
      font-family: 'Montserrat', sans-serif !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      color: #222222 !important;
      margin: 0 0 14px 0 !important;
    }
    
    .drupal-sep-wrapper .info-col p {
      margin: 0 !important;
      color: #666666 !important;
      line-height: 1.7em !important;
      font-size: 16px !important;
    }
    
    /* RESPONSIVO */
    @media (max-width: 768px) {
      .drupal-sep-wrapper .sep-carousel-wrapper { 
        height: 400px !important; 
      }
      .drupal-sep-wrapper .sep-carousel-content { 
        padding: 50px 0 60px 0 !important; 
      }
      /* Las 3 columnas se apilan verticalmente en móviles para que no se compriman */
      .drupal-sep-wrapper .info-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
    }
</style>
