@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

    /* Reset exprés */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Lato", sans-serif;
    }

    html{
      scroll-behavior: smooth;
    }

/* ===== Variables ===== */
:root {
    --bs-gutter-x: 1.5rem; /* espacio horizontal entre columnas */
  }
  
  /* ===== CONTENEDORES ===== */
  /* Fluido al 100% */
  .container-fluid {
    display: block;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left:  calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left:  auto;
  }
  
  /* Fijo según breakpoints */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    display: block;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left:  calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left:  auto;
  }
  /* Desde sm (≥576px) */
  @media (min-width: 576px)  { .container, .container-sm  { max-width: 540px; } }
  
  /* Desde md (≥768px) */
  @media (min-width: 768px)  { .container, .container-md  { max-width: 720px; } }
  
  /* Desde lg (≥992px) */
  @media (min-width: 992px)  { .container, .container-lg  { max-width: 960px; } }
  
  /* Desde xl (≥1200px) */
  @media (min-width: 1440px) { .container, .container-xl  { max-width:1248px; } }
  
  
  /* ===== FILAS ===== */
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left:  calc(var(--bs-gutter-x) / -2);
  }
  .row > * {
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left:  calc(var(--bs-gutter-x) / 2);
  }
  
  
  /* ===== COLUMNAS BASE ===== */
  /* Ocupa todo el ancho disponible */
  .col {
    display: block;
    flex: 1 0 0%;
    max-width: 100%;
  }
  /* Auto-ajuste al contenido */
  .col-auto {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  
  /* 12 columnas: 1 = 8.3333%, …, 12 = 100% */
  .col-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
  .col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-3  { flex: 0 0 25.000000%; max-width: 25.000000%; }
  .col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-6  { flex: 0 0 50.000000%; max-width: 50.000000%; }
  .col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-9  { flex: 0 0 75.000000%; max-width: 75.000000%; }
  .col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-12 { flex: 0 0 100.000000%; max-width:100.000000%; }
  
  
  /* ===== RESPONSIVO: SM — MD — LG — XL ===== */
  
  /* SM ≥576px (igual que .col) */
  @media (min-width: 576px) {
    .col-sm    { flex: 1 0 0%; max-width: 100%; }
    .col-sm-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
    .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3  { flex: 0 0 25.000000%; max-width: 25.000000%; }
    .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6  { flex: 0 0 50.000000%; max-width: 50.000000%; }
    .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9  { flex: 0 0 75.000000%; max-width: 75.000000%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100.000000%; max-width:100.000000%; }
  }
  
  /* MD ≥768px */
  @media (min-width: 768px) {
    .col-md    { flex: 1 0 0%; max-width: 100%; }
    .col-md-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
    .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3  { flex: 0 0 25.000000%; max-width: 25.000000%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6  { flex: 0 0 50.000000%; max-width: 50.000000%; }
    .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9  { flex: 0 0 75.000000%; max-width: 75.000000%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100.000000%; max-width:100.000000%; }
  }
  
  /* LG ≥992px */
  @media (min-width: 992px) {
    .col-lg    { flex: 1 0 0%; max-width: 100%; }
    .col-lg-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
    .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3  { flex: 0 0 25.000000%; max-width: 25.000000%; }
    .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6  { flex: 0 0 50.000000%; max-width: 50.000000%; }
    .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9  { flex: 0 0 75.000000%; max-width: 75.000000%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100.000000%; max-width:100.000000%; }
  }
  
  /* XL ≥1200px */
  @media (min-width: 1248px) {
    .col-xl    { flex: 1 0 0%; max-width: 100%; }
    .col-xl-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
    .col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3  { flex: 0 0 25.000000%; max-width: 25.000000%; }
    .col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6  { flex: 0 0 50.000000%; max-width: 50.000000%; }
    .col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9  { flex: 0 0 75.000000%; max-width: 75.000000%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100.000000%; max-width:100.000000%; }
  }
  



  .mb-16{
    margin-bottom: 16px;
  }
/*general*/
.prelative{
  position: relative;
  z-index: -1;
}

.p-0{
  padding: 0!important;
}

/**/



/*todos*/

    .line-uc{
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #707070 0%, #707070 11%, #BFDDF7 11.1%, #BFDDF7 27%, #FFC60C 27.1%, #FFC60C 54%, #2A7DE1 54.1%, #2A7DE1 100%);
    }

    /* =========================================================
   1.  SKELETON GLOBAL
   ---------------------------------------------------------*/
   .hero-skeleton{
    position:absolute; inset:0;
    background:#a9a9a9;                                         /* color UC oscuro */
    background-image:linear-gradient(120deg,                    /* shimmer opcional */
        rgba(255,255,255,.3) 0%,
        rgba(255,255,255,.05) 40%,
        rgba(255,255,255,.3) 100%);
    background-size:200% 100%;
    animation:sheen 1.8s linear infinite;
    z-index:2;                                                  /* debajo de curvas, encima de degradado */
    transition:opacity .35s ease;
  }
  @keyframes sheen{
    0%  {background-position:-200% 0;}
    100%{background-position: 200% 0;}
  }


    /* ===== Media layer (img + video) ===== */
    .hero-media{position:absolute; inset:0; overflow:hidden;}

    .hero-img {                        /* foto → capa inferior */
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      z-index:-1;  
      transition:opacity .3s ease;     /* sin delay por defecto */
    }
    
    .hero video{                       /* video → capa superior */
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      z-index:0;  
      opacity:0;                       /* arranca invisible */
      transition:opacity .4s ease;     /* fade-in */
    }


    .hero.hero-ready  .hero-skeleton{opacity:0; pointer-events:none;} /* foto + PNG OK */
.hero.video-ready video         {opacity:1;}                      /* video OK       */
.hero.hide-img    .hero-img     {opacity:0; pointer-events:none;} /* quitar foto    */

/* Arrancamos con: foto visible, video invisible */
.hero video{opacity:0;}

/* Cuando el video esté listo… */
.hero.video-ready video{opacity:1;}
.hero.hide-img .hero-img{opacity:0;}

    .hero {
      position: relative;
      width: 100%;
      height: 80vh;
      /* ocupa el 80 % del alto de la ventana */
      min-height: 700px;
      /* pero nunca menos de 600 px */
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .hero .curva {
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 1200px;
      width: 100vw;
      height: auto;
      z-index: 3;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
    }

    .hero .line {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 1200px;
      width: 100vw;
      height: auto;
      z-index: 3;
      opacity: .4;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
    }



    .personaje {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 420px;
      height: auto;
      object-fit: cover;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
      z-index:-1;

    }


    .hero .degradado {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      background: linear-gradient(270deg, rgba(3, 18, 46, 0.00) 0%, rgba(3, 18, 46, 0.64) 100%);
      z-index: 1;

    }

    .hero video {
      width: 100%;
      height: 80vh;
      min-height: 700px;
      object-fit: cover;
      position: relative;
      z-index: -1;
    }

    .hero::before{
      content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://ingenieriaindustrial.ing.uc.cl/wp-content/uploads/2025/05/pattern-banner.png) repeat top left;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: .5;

    }


    .hero .content-hero {
      position: absolute;
      top: 132px;
      text-align: center;
      z-index: 1;
      width: 100%;
      height: 540px;
    }

    .hero .content-hero .content-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 4;

    }

    .hero .content-hero h1 {
      color: #FFF;
      font-size: 40px;
      font-style: normal;
      font-weight: 400;
      line-height: 42px;
    }

    .hero .content-hero h1::after {
      content: "";
      display: block;
      width: 132px;
      height: 4px;
      background-color: #FFC60C;
      margin: 16px auto 0px;
    }

    .hero .content-hero h3 {
      color: #FFF;
      text-align: center;
      font-size: 20px;
      font-weight: 300;
      margin: 16px;
      margin-bottom: 20px;
    }


.content-cta{
  position: absolute;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
    .hero .content-hero h2 {
      color: #FFF;
      font-size: 20px;
      font-weight: 300;
      display: inline-block;
      border-radius: 8px;
      border: 1px solid #FFF;
      background: rgba(42, 125, 225, 0.70);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      padding: 16px 24px;
      margin-bottom: 16px;
    }

    .hero .content-hero h2 strong {
      font-weight: 400;
    }

    .hero .content-hero .cta-principal {
      border-radius: 8px;
      background: #FFC60C;
      padding: 18px 30px;
      text-decoration: none;
      color: #08275C;
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 8px;
      transition: .2s ease;
    }

    .cta-principal {
      border-radius: 8px;
      background: #FFC60C;
      padding: 18px 30px;
      text-decoration: none;
      color: #08275C;
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 8px;
      transition: .2s ease;
      border: none;
    }


    .btn-form {
      border-radius: 8px!important;
      background: #FFC60C!important;
      padding: 18px 30px!important;
      text-decoration: none!important;
      color: #08275C!important;
      text-align: center!important;
      font-size: 16px!important;
      font-weight: 400!important;
      margin-bottom: 8px!important;
      transition: .2s ease!important;
      border: none!important;
    }

    .btn-form:hover {
      background-color: #e3ae00!important;
      box-shadow:inherit!important;

    }

    .hero .content-hero p {
      color: #FFF;

      text-align: center;
      font-size: 14px;
      font-weight: 300;

    }

    :root{--gap:1.25rem;--anim:.35s}
    .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- Barra ---------- */
.logo-uc-nav{
  width: 110px;

}
.contact-nav{z-index:1000;position: absolute;margin-top: 24px; width: 100%; padding: 0 16px;}
.content-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);}
.brand-logo{height:40px;width:auto}
.more-desktop{display: none;}

/* ---------- Wrapper para reservar alto ---------- */
.toggle-wrapper{display:flex;flex-direction:column;align-items:center;min-height:40px;gap: 8px;}

/* Texto mobile sobre el botón */
.more-mobile{color: #FFF;

  text-align: center;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;}
@media (min-width:48rem){.more-mobile{display:none}}     /* ocúltalo en desktop */

/* ---------- Botón toggle ---------- */
.nav-toggle{
    background:transparent;border:1px solid rgba(255,255,255,.9);
  border-radius:100%;width:40px;height:40px;
  display:inline-flex;justify-content:center;align-items:center;
  font-size:16px;color:#fff;cursor:pointer;
  transition:transform .3s ease;
  z-index: 1000;
}
.contact-nav.is-open .nav-toggle{transform:rotate(90deg)}

/* ---------- Overlay (móvil) ---------- */
.content-info{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  background:rgba(3,18,46,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:900;
  opacity:0;pointer-events:none;transition:opacity var(--anim) ease;
}
.contact-nav.is-open .content-info{opacity:1;pointer-events:auto}

#nav-links{list-style:none;display:flex;flex-direction:column;gap:2rem; }
#nav-links li{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  opacity:0;transform:translateX(20px)}
#nav-links a{color: #FFF;

  font-family: Lato;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;display:flex;gap:16px;align-items:flex-start;text-decoration:none}
#nav-links img{width:24px;height:24px;object-fit:contain}

/* Animación escalonada */
@keyframes fadeSlide{to{opacity:1;transform:translateX(0)}}
.contact-nav.is-open #nav-links li{animation:fadeSlide .45s cubic-bezier(.4,0,.2,1) forwards}
.contact-nav.is-open #nav-links li:nth-child(1){animation-delay:.05s}
.contact-nav.is-open #nav-links li:nth-child(2){animation-delay:.10s}
.contact-nav.is-open #nav-links li:nth-child(3){animation-delay:.15s}
.contact-nav.is-open #nav-links li:nth-child(4){animation-delay:.20s}
.contact-nav.is-open #nav-links li:nth-child(5){animation-delay:.25s}

/* ---------- Desktop ≥48 rem ---------- */
@media (min-width:48rem){
  .nav-toggle{display:none}                             /* botón sólo móvil */
  .content-info{position:static;opacity:1;pointer-events:auto;
                background:inherit;backdrop-filter:inherit;-webkit-backdrop-filter:inherit; display:flex;align-items:center;gap: 8px;}
  .more-desktop{color: #FFF;

    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    ;display: block;}
  #nav-links{flex-direction:row;gap:.75rem}
  #nav-links li{flex-direction:row;gap:.5rem;opacity:1;transform:none;animation:none}
  #nav-links span{display:none}
  #nav-links img{width:20px;height:20px}
}

    #description-gerneral{
      margin: 80px auto;

    }

    #description-gerneral h2{
      color: #08275C;
      text-align: center;

font-size: 24px;
font-weight: 400;
    }

    #description-gerneral p{
      color: #000;
font-size: 16px;
font-weight: 300;
margin-bottom: 24px;
		line-height: 22px;
      
    }

    .line-separator::after {
      content: "";
      display: block;
      width: 100px;
      height: 4px;
      background-color: #FFC60C;
      margin: 16px auto 32px auto;
    }

    .content-bullet{
      margin: 32px auto;
    }

    .title-section{
      text-align: center;
    }

    .card-bullet{
      border-radius: 8px;
border: 1px solid rgba(42, 125, 225, 0.24);
background: #FFF;
box-shadow: 0px 4px 24px 0px rgba(42, 125, 225, 0.08);
padding: 8px 16px 8px 8px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100% !important;
gap:16px;

    }

    .card-bullet .content-text{
      padding:16px 0 ;
      text-align: left;
    }

    .content-img{
      background-color: #F2F7FD;
      border-radius: 4px 0 0 4px;
      padding: 16px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .card-bullet img{
      width: 60px;
      height: 60px;
    }

    .card-bullet h3{
      color: #2A7DE1;
font-size: 16px;
font-weight: 400;
margin-bottom: 8px;

    }

    .card-bullet p{
      color: #000;
font-size: 16px;
font-weight: 300;
margin-bottom: 0!important;
      
    }


    /*section addressed*/

    #addressed{
      margin: 80px auto;
    }

    

    .container-big-card{
      border-radius: 8px;
      overflow: hidden;
      border-radius: 8px;
background: #FFF;
box-shadow: 0px 4px 16px 0px rgba(42, 125, 225, 0.16);

    }

    #addressed ul li{
      margin-bottom: 16px;
      text-align: left;
      color: #000;
font-size: 16px;
font-weight: 300;
    }

    #addressed .container-photo{
      overflow: hidden;
      position: relative;
      width: 100%;
    height: 200px;
    }

    #addressed .container-photo .img-adaptive{
      position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    }

    #addressed .container-photo .curve-card{
      position: absolute;
      right: inherit;
      left: 50%;
      bottom: -224px;
      top: inherit;
      z-index: 1;
      user-select: none;
      -webkit-user-select: none;
    pointer-events: none;
      transform: translateY(0)translateX(-50%) rotate(90deg);
      -webkit-transform: translateY(0)translateX(-50%) rotate(90deg);
    }

    #addressed .title-section{
      padding: 40px 32px;
    }

    #addressed .title-section h2{
      color: #08275C;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    }

    #addressed .container-big-card ul{
      margin: 0;
    padding-left: 1.25rem;
    }

    .text-emphasis{
      transition: 0.4s all;
    }
    .text-emphasis.is-blue { color:#2A7DE1!important; } /* azul UC */




    /**/

        /* Contenedor del disparador */
        .has-tooltip{
          position: relative;          /* para posicionar el tooltip dentro */
          cursor: pointer;
        }
    
        /* El tooltip en sí */
        .tooltip{
          --bg: #333;
          --clr: #fff;
          position: absolute;
          left: 50%;
          bottom: 125%;               /* aparece arriba del elemento */
          transform: translateX(-50%) scale(1) translateY(10px);
          -webkit-transform: translateX(-50%) scale(1) translateY(10px);
          transform-origin: bottom center;
          opacity: 0;
    background-color: #DDEAFA;
          color: #08275C;
    font-size: 12px;
    font-weight: 300;
          border-radius: 8px;
          white-space: nowrap;
          pointer-events: none;       /* que no estorbe el mouse */
          transition: .6s ease;       /* animación suave */
          z-index: 10;
          box-shadow: 0px 8px 16px 0px rgba(42, 125, 225, 0.05);
          padding: 10px 15px;
          border: 2px #fff solid;
        }
    
        /* Flecha */
        .tooltip::after{
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          -webkit-transform: translateX(-50%);
          border: 8px solid transparent;
          border-top-color: #fff; /* triángulo apuntando abajo */
        }
    
        /* Estado visible */
        .has-tooltip:hover .tooltip,
        .has-tooltip:focus .tooltip{
          transform: translateX(-50%) scale(1);
          -webkit-transform: translateX(-50%) scale(1);
          opacity: 1;
        }




        @media (min-width: 576px) {

          .contact-nav {
            z-index: 1000;
            margin-top: 40px;
        }

        .logo-uc-nav{
          width: 136px;
        
        }

        }

    @media (min-width: 768px) {

      .hero .content-hero h1 {
      font-size: 42px;
      line-height: 48px;
    }
    .hero .content-hero {
      top: inherit;
      height: auto;
  

    }
    .hero .content-hero h3 {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 32px;
}

.hero .content-hero h2 {
      font-size: 24px;
      padding: 20px 32px;
    }

    .personaje {
      top: -24px;
      width: 480px;
    }
    .content-cta{
  position: relative;
}

.hero .content-hero .cta-principal:hover {
  background-color: #e3ae00;
    }

    .cta-principal:hover {
      background-color: #e3ae00;
        }

    .card-bullet{
padding: 40px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

    }

    .card-bullet div{
      padding:0;
    }


    .content-img{
      background-color:inherit;
      border-radius: 4px 0 0 4px;
      padding: 8px;
      height: 100%;

    }

    .card-bullet img{
      width: 80px;
      height: 80px;
    }


    .card-bullet .content-text{
      padding:0 ;
      text-align: center;
    }

    .card-bullet h3{
margin-bottom: 14px;

    }

      /**/

      #addressed .container-photo{
      overflow: hidden;
      position: relative;
      width: 100%;
    height: 100%;
    }

  #addressed .container-photo .curve-card{
      position: absolute;
      right: -1px;
      left: inherit;
      bottom: inherit;
      top: 50%;
      transform: translateY(-50%) translateX(0) rotate(0);
      -webkit-transform: translateY(-50%) translateX(0) rotate(0);
    }



  /**/

    
  }


  @media (min-width: 992px) {

    .hero .content-hero h1 {
      font-size: 58px;
      line-height: 58px;
    }

    .personaje {
      top: -60px;
      width: 540px;
      left: 240px;
    }

    .hero .content-hero h3 {
      font-size: 24px;
      margin-bottom: 32px;
  }


  }












  /* ===== Variables ===== */
  :root{
    --clr-primary: #2A7DE1;   /* azul UC */
    --clr-bg:      #F1F7FF;   /* fondo suave */
    --radius:      8px;
    --duration:    .3s;
  }

  /* ===== Contenedor principal ===== */
  .accordion{ max-width:900px; margin:40px auto; }

  .accordion-item + .accordion-item{ margin-top:24px; }

  #programas-diplomado{
    margin: 100px auto;
    background-color: #EEF5FD;
    padding: 80px 0;
  }

  #programas-diplomado h2{
    color: #08275C;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
  }

  #programas-diplomado .content-info-program{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;  
  }

  #programas-diplomado .programa-badge{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 4px;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(42, 125, 225, 0.04);
gap: 4px;
    
  }


  #programas-diplomado .programa-badge img{
    width: 16px;
    height: 16px;
  }
  #programas-diplomado .programa-badge h4{
   display: inline-block;
   color: #2A7DE1;
font-size: 14px;
font-weight: 300;
padding: 0 8px;
  }

  #programas-diplomado .programa-badge .icon-declrative{
    border-radius: 4px 4px 0px 0px;
    padding: 12px;
    width: 100%;
    height: auto;
    background: #EEF5FD;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #programas-diplomado .text-emphasis{
    color: #08275C;
text-align: center;
font-size: 14px;
font-weight: 300;
margin-top: 16px;

  }

  #programas-diplomado hr{
    border: #3b82f63d .3px solid;
box-shadow: 0px 1px 0px 0px #FFF;
margin: 32px auto;
max-width: 1000px;
    
  }

  .content-btn-brochure{
    display: flex;
    justify-content: center;
    margin: 40px auto;
  }

  /* ===== Cabecera ===== */
  .accordion-header{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:24px 24px 24px 32px;
    background:#fff;
    border:0;
    border-radius:var(--radius);
    cursor:pointer;
    text-align:left;
    position: relative;
    transition:background var(--duration);
    font-family:"Lato",sans-serif;
    box-shadow: 0px 0px 8px 0px rgba(42, 125, 225, 0.10);
  }
  .accordion-header::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width:4px;
    height: 100%;
    background-color: #2A7DE1;
    border-radius: 8px 0 0 8px;
  }

  
  .accordion-header:hover .btn-arrow,
.accordion-header:focus-visible .btn-arrow {
  background: #FFC60C;
  color: #2A7DE1;
}

.accordion-header[aria-expanded="true"] .btn-arrow {
  background: #FFC60C;
  color: #2A7DE1;
}



  .accordion-title{
    flex:1 1 auto;
    font-size:16px;
    font-weight:400;
    display:flex;
    flex-direction:column;
  }
  .accordion-title small{
    margin-top:2px;
    font-size:16px;
    font-weight:300;
    color:#4f4f4f;
  }

  /* Icono flecha */
  .accordion-icon{
    flex:0 0 24px;
    transition:transform var(--duration);
    -webkit-transition:transform var(--duration);
  }

  /* ===== Panel colapsable ===== */
  .accordion-panel{
    overflow:hidden;
    max-height:0;
    transition:max-height var(--duration) ease,
               margin-top  var(--duration) ease;
    background:#fff;
    border-radius:8px;
    margin-top:0;                 /* cerrado = 0 */
  }
  .accordion-panel.open{ margin-top:8px; }   /* abierto = 8 px */

  /* Wrapper interno con padding fijo */
  .accordion-inner{ padding:32px; }

  /* Espaciado entre elementos dentro del wrapper */
  .accordion-inner > * + *{ margin-top:16px; }

  .btn-arrow{
    flex-shrink: 0;     
  min-width: 32px;    
  min-height: 32px;
    width: 32px;
    height: 32px;
    background-color: #2A7DE1;
    border-radius: 100%;
    transition: .4s all;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  /* Badge */
  .badge-profesor{
    display:inline-block;
    padding:6px 16px;
    background:#FFD52E;
    border-radius:4px;
    font-weight:300;
    margin-bottom: 16px;
    margin-top: 0!important;
    font-size: 14px;
  }

  /* Listas */
  .accordion-panel ul{
    margin:0;
    padding-left:1.25rem;        /* sangría para la viñeta */
  }

  .accordion-panel li{
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 12px;
  }
  .accordion-panel li + li{ margin-top:4px; }

  /* Estado flecha rotada */
  .accordion-header[aria-expanded="true"] .accordion-icon{
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
  }

  /* ===== Responsive ===== */
  @media (max-width:600px){
    .accordion-header{ padding:24px; }
    .accordion-inner { padding:24px; }
  }




/* ===== section aprendisaje ===== */

.section-aprendisaje{
    border-radius: 8px;
background: #FFF;
box-shadow: 0px 4px 16px 0px rgba(42, 125, 225, 0.16);
padding: 40px 16px;
margin-top: 80px;
}

.section-aprendisaje ul{
display: flex;
justify-content: center;
flex-direction: column;
gap: 16px;
    
}

.section-aprendisaje li{
    border-radius: 4px;
background: #EEF5FD;
display: flex;
padding: 8px 16px 8px 8px;
justify-content: center;
align-items: center;
gap: 16px;
    
}

.section-aprendisaje li span{
    border-radius: 4px;
background: #fff;
display: flex;
padding: 16px;
justify-content: center;
align-items: center;
gap: 16px;
height: 100%;
    
}

.section-aprendisaje li h4{
color: #000;

font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
    
}

.content-insignia{
    background: linear-gradient(180deg, #FFE581 0%, #FFC60C 115.69%);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    padding: 32px;
    gap: 16px;
    overflow: hidden;
    margin-top: 16px;
}

.content-insignia .banckground-uc-sede{
    position: absolute;
    bottom: 0;
    left: 30%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 100%;
    min-width: 700px;
    height: auto;

mix-blend-mode: soft-light;
opacity: .28;
}

.content-insignia::after{
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    left: 8px;
    bottom: 8px;
    border: 1px #fff solid;
    border-radius: 4px;
    opacity: .6;

}

.content-insignia::before{
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(
              270deg,
              transparent 0%,
              rgba(255,255,255,.3) 30%,
              transparent 100%);
  transform: translate(-150%, 150%) rotate(-45deg);
  -webkit-transform: translate(-150%, 150%) rotate(-45deg);
  pointer-events: none;
  z-index: 2;

  /* ⏰ 6 s de ciclo total */
  animation: shineSweep 14s ease-in-out infinite;
}

/* -- KEYFRAMES --
   0–33%  ➜ cruza
   33–100% ➜ espera */
@keyframes shineSweep{
  0%   { transform: translate(-150%, 150%) rotate(-45deg); }
  33%  { transform: translate(  50%, -50%) rotate(-45deg); }
  34%,
  100% { transform: translate(  50%, -50%) rotate(-45deg); }
}

.content-insignia  .ingignia-photo{
    width: 120px;
    height: 120px;
    filter: drop-shadow(0px 6px 21px rgba(202, 156, 8, 0.70));
    -webkit-filter: drop-shadow(0px 6px 21px rgba(202, 156, 8, 0.70));
}

.content-insignia h2{
    display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
border-radius: 4px;
background: #FFF;
color: #2A7DE1 !important;
text-align: center;
font-size: 16px!important;
font-weight: 400;
z-index: 1;
    
}

.content-insignia h4{
    color: #000;
text-align: center;
font-size: 14px;
font-weight: 300;
line-height: normal;
z-index: 1;
}


/* =====  ===== */





  @media (min-width: 768px) {
      /**/

  #programas-diplomado .programa-badge{
    flex-direction: row;
    padding: 4px 16px 4px 4px;
    gap: 8px;
    
  }

  #programas-diplomado .programa-badge h4{
 font-size: 16px;
   }

   #programas-diplomado .programa-badge .icon-declrative {
    width: inherit;
    height: auto;
   }

    #programas-diplomado .programa-badge h4{
   display: inline-block;
   color: #2A7DE1;
font-size: 14px;
font-weight: 300;
padding: inherit;
  }

  .content-insignia{

    margin-top: 0;
}
  
}
   /**/







   #section-price{
    border-radius: 8px;
border: 1px dashed #2A7DE1;
background: #FFF;
box-shadow: 0px 24px 24px 0px rgba(42, 125, 225, 0.08);
position: relative;
padding: 80px 32px 32px 32px;
margin: 80px auto;
max-width: 960px;

}

#section-price::after {
content: "";
position: absolute;
border-radius: 8px 8px 0 0;
top: -1px;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #707070 0%, #707070 11%, #BFDDF7 11.1%, #BFDDF7 27%, #FFC60C 27.1%, #FFC60C 54%, #2A7DE1 54.1%, #2A7DE1 100%);
}

#section-price h2{
    color: #08275C;
text-align: center;
font-family: Lato;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: normal;

}

#section-price h2::after {
content: "";
display: block;
width: 100px;
height: 4px;
background-color: #FFC60C;
margin: 8px auto 24px auto;
}
#section-price .price-normal{
color: #8E8E8E;

text-align: center;
font-family: Lato;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: normal;
}

#section-price .content-prince-dcto{
border-radius: 4px;
border: 1px dashed rgba(42, 125, 225, 0.60);
background: rgba(234, 242, 252, 0.60);
padding: 8px 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 8px;

}

.content-detail-price{
display: flex;
align-items: center;
justify-content: center;

}

#section-price .content-prince-dcto p{
color: #2A7DE1;

text-align: center;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: inline-block;

}

#section-price .content-prince-dcto h3{
color: #2A7DE1;

text-align: center;
font-family: Lato;
font-size: 34px;
font-style: normal;
font-weight: 300;
line-height: normal;
display: inline-block;

}

#section-price  .text-small{
color: #2A7DE1;

text-align: center;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin-top: 8px;

}

#section-price  .titulo-fechas{
  color: #08275C;
text-align: center;
font-family: Lato;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin-top: 24px;
}

.fecha-clase ul{
display: flex;
flex-direction: column;
justify-content:space-between;
align-items: center;
gap: 16px;
padding-top: 24px;
padding-bottom: 24px;

}

.mt-40{
  margin-top: 40px!important;
}


.fecha-clase ul li{
border-radius: 8px;
border: 1px solid rgba(42, 125, 225, 0.40);
display: flex;
flex-direction: column;
justify-content:space-between;
align-items: center;
padding: 8px;
width: 100%;
gap: 12px;

}

.fecha-clase ul li span{
border-radius: 4px 0px 0px 4px;
background: rgba(42, 125, 225, 0.10);
padding: 16px 24px;

} 

.fecha-clase ul li h5{
color: #000;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
text-align: center;
background: rgba(234, 242, 252, 0.60);
width: 100%;
padding: 16px 0;
}

.fecha-clase ul li .cta-principal{
margin-bottom: 0;
width: 100%;

}

.linea-separadora{
border: 1px dashed rgba(42, 125, 225, 0.4);
margin: 16px auto;

}



#section-price .logo-blue{
    position: absolute;
    left: 16px;
    top: 24px;
    width: 100px;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.content-text-security{
    border-radius: 4px;
background: rgba(241, 241, 241, 0.70);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    gap: 8px;
    padding: 16px;

font-family: Lato;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 16px;

}

@media (min-width: 768px) {
    #section-price{
    border-radius: 8px;
border: 1px dashed #2A7DE1;
background: #FFF;
box-shadow: 0px 24px 24px 0px rgba(42, 125, 225, 0.08);
position: relative;
padding: 16px 32px;
margin: 80px auto;
max-width: 960px;

}
}





/*carrusel*/

:root{
  --gap:1rem;                 /* espacio entre tarjetas */
  --arrow:2.4rem;             /* tamaño flechas */
  --br:12px;                  /* border-radius tarjetas */
  --shadow:0 18px 18px rgba(42,125,225,.16);
}

.profesores{
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(42, 125, 225, 0.00) 0%, rgba(42, 125, 225, 0.08) 100%);
}

.profesores .title-section h2{
  color: #08275C;
    text-align: center;
    font-size: 24px;
    font-weight: 400;

}
/* ===== contenedor principal ===== */
.carousel{max-width:100%;margin:auto;position:relative}

/* viewport = ventana de scroll horizontal */
.viewport{
  overflow-x:auto;overflow-y:visible;          /* deja pasar sombra */
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding-bottom:36px;margin-bottom:-36px;     /* colchón para sombra */
  scrollbar-width:none;cursor:auto;            /* 🖱️ */
  touch-action:pan-y; 
}
.viewport::-webkit-scrollbar{display:none}
.viewport.is-dragging{cursor:grabbing} 

@media (hover: none) and (pointer: coarse) {  /* solo pantallas touch */
  .viewport         { cursor: grab; }
  .viewport.is-dragging { cursor: grabbing; }
}

/* fila de tarjetas */
.track{
  display:flex;gap:var(--gap);
  scroll-snap-type:x mandatory;overflow:visible;
}

/* ===== tarjetas ===== */
.card{flex:0 0 calc((100% - 3*var(--gap))/4);scroll-snap-align:start;position: relative;}
.card::after{content: ""; position: absolute;top: 8px; bottom: 8px;left: 8px;right: 8px;border-radius: 4px;border: 1px #fff solid;opacity: .4;}
.card__clip{
  position:relative;height:400px;border-radius:var(--br);overflow:hidden;
  background:#fff;box-shadow:var(--shadow);
}
@media(max-width:1199.98px){.card{flex:0 0 calc((100% - 2*var(--gap))/3)}}
@media(max-width:991.98px){ .card{flex:0 0 calc((100% - 1*var(--gap))/2)}}
@media(max-width:767.98px){ .card{flex:0 0 100%}}

/* skeleton */
.img-wrap{position:absolute;inset:0}
.img-wrap img{width:100%;height:100%;object-fit:cover;opacity:0;user-select: none;-webkit-user-select: none;pointer-events: none;}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.7)50%,transparent 100%);
  animation:shimmer 1.2s infinite;
}
.img-wrap.skeleton{            /* fondo gris visible mientras carga      */
  background:#e5e5e5;
}
/* Ocultos mientras la imagen está cargando */
.badge,
.link{
  opacity:0;                 /* invisible al inicio  */
  transition:opacity .3s;    /* desvanecido suave    */
}

/* overlay encima de la foto */
.badge{position:absolute;top:24px;left:24px;display:flex;gap:8px;align-items:center;z-index:2;user-select: none;-webkit-user-select: none;pointer-events: none;}
.badge span{width:4px;height:24px;background:#FFC60C}
.badge h6{color:#fff;font:400 16px/1 Lato,sans-serif}
.link{position:absolute;top:24px;right:24px;width:24px;height:24px;z-index:2;user-select: none;-webkit-user-select: none;}
.link img{width:100%;height:100%}

/* cuerpo */
.body{position:absolute;left:8px;right:8px;bottom:8px;padding:1rem;background:#fff;border-radius:0 0 4px 4px;z-index:1;}
.body h3,.body p{visibility:hidden;opacity:0;transition:opacity .3s}
.body h3{color:#08275C;font:400 18px/1 Lato,sans-serif}
.body h3::after{content:"";display:block;width:40px;height:4px;background:#2A7DE1;margin:8px 0}
.body p{color:#5A5A5A;font:300 14px/1 Lato,sans-serif; line-height: normal;}

/* controles */
.container-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.75rem;
  margin-top:.75rem;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
}
.nav{
  height:var(--arrow);
  display:grid;place-content:center;
 font-size:1.5rem;border:none;cursor:pointer;background-color: #fff; transition: all .2s;
}
.nav[disabled]{opacity:.3;pointer-events:none}
.pagination{color:#2A7DE1;padding:.15rem .75rem;color: #2A7DE1;

text-align: center;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;}




/**/
#reconocimientos {
  padding: 100px 0;
  background-color: #2A7DE1;
  position: relative;
  overflow: hidden;
}

#reconocimientos::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%);
  user-select: none;
  -webkit-user-select: none;
pointer-events: none;

}

#reconocimientos::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, rgba(8, 39, 92, 0.00) 0%, rgba(8, 39, 92, 0.20) 100%);
  user-select: none;
  -webkit-user-select: none;
pointer-events: none;

}

.bg-uc-cc {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: soft-light;
  opacity: .2;
  user-select: none;
  -webkit-user-select: none;

pointer-events: none;
}

.bg-uc-cc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.distinciones {
  width: 148px;
  height: 148px;
  flex-shrink: 0;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(217, 217, 217, 0.20);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index: 1;
}

.distinciones img{
  width: 60%;
}
.distinciones h5::before{
  content: "";
display: block;
width: 80px;
height: 4px;
background-color: #FFC60C;
margin: 10px auto 8px auto;
}

.distinciones h5 {
  color: #FFF;

  text-align: center;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}

.distinciones h6 {
  color: #FFF;

  text-align: center;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-top: 4px;
  width: 80%;

}

.distinciones::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-shrink: 0;
  border-radius: 100%;
  width: 110%;
  height: 110%;
  border: 1px solid #fff;
  opacity: .4;
}

.content-reconocimientos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.content-reconocimientos .responsive-box {
  display: flex;
  gap: 8px;
}

@media (min-width: 576px) {
  .distinciones {
  width: 180px;
  height: 180px;
}
.distinciones h5 {
  font-size: 16px;


}

.fecha-clase ul li{
  display: flex;
  flex-direction: row;

  
  }

  .fecha-clase ul li{
    padding: 8px 8px 8px 16px;
  }


  .fecha-clase ul li h5{
    text-align: left;
    background: inherit;
    width: 100%;
    padding: 0;
    }

  .fecha-clase ul li .cta-principal{
    width: auto;
}

.section-aprendisaje{
padding: 40px 40px;
}



}

@media (min-width: 768px) {
  .content-reconocimientos {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }

  .content-reconocimientos .responsive-box {
      display: flex;
  }
  .distinciones {
  width: 180px;
  height: 180px;
}




}

@media (min-width: 992px) {
  .content-reconocimientos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }

  .content-reconocimientos .responsive-box {
      display: flex;
  }
  .distinciones {
  width: 200px;
  height: 200px;
}

.fecha-clase ul li{
  padding: 8px;
}

}

/* ───────────────────────────
   Display helpers: base (xs)
   ─────────────────────────── */
   .d-none  { display: none  !important; }
   .d-block { display: block !important; }
   
   /* ≥ SM (≥ 576 px) */
   @media (min-width:576px) {
     .d-sm-none  { display: none  !important; }
     .d-sm-block { display: block !important; }
   }
   
   /* ≥ MD (≥ 768 px) */
   @media (min-width:768px) {
     .d-md-none  { display: none  !important; }
     .d-md-block { display: block !important; }
   }
   
   /* ≥ LG (≥ 992 px) */
   @media (min-width:992px) {
     .d-lg-none  { display: none  !important; }
     .d-lg-block { display: block !important; }
   }
   
   /* ≥ XL (≥ 1200 px) */
   @media (min-width:1200px) {
     .d-xl-none  { display: none  !important; }
     .d-xl-block { display: block !important; }
   }
   
   /* ≥ XXL (≥ 1400 px) */
   @media (min-width:1400px) {
     .d-xxl-none  { display: none  !important; }
     .d-xxl-block { display: block !important; }
   }



  footer{
    background: #03122E;
    padding: 80px 0;
  }

  footer .content-footer{
    display: flex;
    flex-direction: column;
    color: #fff;
    gap: 16px;
    align-items: center;
  }

  footer .logo-uc-footer{
    width: 180px;

  }

  footer .content-footer .name-site-uc h4{
    color: #FFF;
font-family: Lato;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 24px;
margin-bottom: 4px;
text-align: center;

  }

  footer .content-footer .name-site-uc h6{
    color: #FFF;

font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 24px;
margin-bottom: 4px;

  }

  footer .content-footer .name-site-uc p{
    color: #FFF;

font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 24px;

padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.09);
display: inline-block;
margin-bottom: 16px;

  }

  footer .content-footer .content-rrss{
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
  }


  footer .content-footer .canales-link ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
   }

   

  footer .content-footer .canales-link li {
   display: flex;
  }

  footer .content-footer .canales-link li a{
    text-decoration: none;
    display: flex;
   gap: 8px;
   color: #FFF;

text-align: center;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 24px;
  }

  footer .content-footer .name-site-uc::after{
    content: "";
    display: block;
    width: 100%;
    height: .5px;
    background-color: #ffffff;
    margin: 32px auto ;
    opacity: .5;

  }

  footer .content-footer .name-site-uc::before{
    content: "";
    display: block;
    width: 100%;
    height: .5px;
    background-color: #ffffff;
    margin: 32px auto ;
    opacity: .5;

  }

  footer .content-footer .name-site-uc{
    text-align: center;
  }
 



  @media (min-width: 768px) {
    footer .content-footer{
      flex-direction: row;
    }

    footer .content-footer .name-site-uc{
      text-align: left!important;
    }

  footer .content-footer .content-rrss{
    justify-content:flex-start;
  }

  footer .content-footer .name-site-uc::after{
    content: "";
    display: none;
    width: 100%;
    height: .5px;
    background-color: #ffffff;
    margin: 32px auto ;
    opacity: .5;

  }

  footer .content-footer .name-site-uc::before{
    content: "";
    display: none;
    width: 100%;
    height: .5px;
    background-color: #ffffff;
    margin: 32px auto ;
    opacity: .5;

  }
  footer .content-footer{
    gap: 56px;
  }



  }



  @media (min-width: 992px) {

    footer .content-footer .name-site-uc h4{
      font-size: 32px;
      margin-bottom: 8px;
    }

    footer .content-footer{
      gap: 74px;

    }

    footer .content-footer .name-site-uc h6{
      font-size: 16px;
      margin-bottom: 8px;

    }


  }


  #preguntas-frecuentes{
    padding: 80px 0;
    background-color: #fff;

  }

#preguntas-frecuentes h2 {
    color: #08275C;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
}

#preguntas-frecuentes .text-details {
  color: #08275C;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  margin-top: 16px;
}

#preguntas-frecuentes .content-btn-cta{
  display: flex;
    justify-content: center;
    margin: 40px auto 8px auto;
}

.accordion-inner ul ul{
  list-style-type: disc;
  color: black;

}

#form{
  padding: 80px 0;
    background: linear-gradient(180deg, rgba(42, 125, 225, 0.00) 0%, rgba(42, 125, 225, 0.08) 100%);
}


#form .title-section h2{
  color: #08275C;
    text-align: center;
    font-size: 24px;
    font-weight: 400;

}

#form .formulario-consulta{
  border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 16px 0px rgba(42, 125, 225, 0.16);
    padding: 24px;

}


 @media (min-width: 768px) {
    .mt-lg-64 { margin-top: 64px; }
  }

/*
 * Estilos formularios 
 * */
.form-uc{
	border-radius: 8px;
        background: #FFF;
        padding: 32px 24px;
        max-width: 800px;
        margin: auto;
}

.shadow-form{
	box-shadow: 0px 4px 16px 0px rgba(42, 125, 225, 0.16);
	
}

.form-uc .forminator-error-message {
    background-color: #ffffff !important;
    color: #ce9e00 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    padding: 2px 0px !important;
}

.form-uc .forminator-ui.forminator-custom-form .forminator-has_error
input, 
.forminator-ui.forminator-custom-form .forminator-has_error
textarea,
.forminator-ui.forminator-custom-form .forminator-has_error
select{
  border-color: #e3ae00 !important;
  box-shadow: none !important;
}


.form-uc .box-chekbox .forminator-field {
    border-radius: 4px;
    padding: 24px !important;
    border: 1px solid rgb(234, 234, 234) !important;
}

.form-uc #consent-1 .forminator-field .forminator-label {
    color: #707070 !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 300 !important;
}

.form-uc .text-box-form::before {
    content: "";
    display: block;
    border: 0;
    height: 1px;
    margin-bottom: 32px;
    width: 100%;
    overflow: hidden;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEiIHZpZXdCb3g9IjAgMCA4IDEiPiAgPHBvbHlnb24gZmlsbD0iZ3JheSIgZmlsbC1ydWxlPSJldmVub2RkIiBwb2ludHM9IjAgMSAwIDAgMyAwIDMgMSIvPjwvc3ZnPg==) center center repeat;
}


/* ===== CHECKBOXES Forminator (solo dentro de .form-uc) ===== */

/* Caja base */
.form-uc .forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-box{
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  border: 1px solid #c6c6c6 !important;

  position: relative !important;
  overflow: hidden !important;
}

/* El check (SVG blanco) apagado por defecto */
.form-uc .forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-box::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;

  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;

  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  transition: 0.2s ease !important;
}

/* Estado marcado (fuente de verdad): input:checked */
.form-uc .forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box{
  background-color: #0176DE !important;
  border-color: #0176DE !important;
  box-shadow: 0px 0px 6px 0px #0176DE !important;
  transition: 0.2s ease !important;
}
.form-uc .forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box::before{
  opacity: 1 !important;
}

/* Backup SOLO si el label tiene .forminator-is_checked PERO el input realmente está checked */
.form-uc .forminator-ui.forminator-custom-form
label.forminator-checkbox.forminator-is_checked:has(input:checked) .forminator-checkbox-box{
  background-color: #0176DE !important;
  border-color: #0176DE !important;
  box-shadow: 0px 0px 6px 0px #0176DE !important;
}
.form-uc .forminator-ui.forminator-custom-form
label.forminator-checkbox.forminator-is_checked:has(input:checked) .forminator-checkbox-box::before{
  opacity: 1 !important;
}

/* Anti-bug: si quedó pegada la clase, pero el input NO está checked => fuerza OFF */
.form-uc .forminator-ui.forminator-custom-form
label.forminator-checkbox.forminator-is_checked:has(input:not(:checked)) .forminator-checkbox-box{
  background-color: #ffffff !important;
  border-color: #c6c6c6 !important;
  box-shadow: none !important;
}
.form-uc .forminator-ui.forminator-custom-form
label.forminator-checkbox.forminator-is_checked:has(input:not(:checked)) .forminator-checkbox-box::before{
  opacity: 0 !important;
}

/* (Opcional) foco teclado bonito */
.form-uc .forminator-ui.forminator-custom-form .forminator-checkbox input:focus-visible + .forminator-checkbox-box{
  box-shadow: 0 0 0 10px rgba(1,118,222,.18), 0 0 0 3px rgba(1,118,222,.35) !important;
}



/* ===== CHECKBOX ERROR (obligatorio no marcado) ===== */
.form-uc .forminator-ui.forminator-custom-form .forminator-field.forminator-has_error
.forminator-consent .forminator-checkbox-box,
.form-uc .forminator-ui.forminator-custom-form .forminator-field.forminator-has_error
.forminator-checkbox-box{
  border: 1px solid #e3ae00  !important;
  box-shadow: none !important;
}

/* Si está en error, fuerza que NO quede azul aunque esté "marcado visualmente" */
.form-uc .forminator-ui.forminator-custom-form .forminator-field.forminator-has_error
.forminator-consent input:checked + .forminator-checkbox-box,
.form-uc .forminator-ui.forminator-custom-form .forminator-field.forminator-has_error
label.forminator-checkbox.forminator-is_checked .forminator-checkbox-box{
  border: 1px solid #e3ae00  !important;
}

.form-uc .forminator-ui.forminator-custom-form .forminator-label{
  margin-bottom: 4px !important;
  display: block !important; /* asegura que el margen se note */
}


/*btn form*/

.form-uc .form-uc-btn{
	border-radius:4px !important;
}

.form-uc .form-uc-btn:hover{
	box-shadow:none !important;
}