.m-top-124 {
     margin-top: 80px;
}
.title-premio {
  font-size: 4.5rem;
  line-height: 1.2;
}

#virtual__tour{
  display: block;
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 1rem;
}
.text-rihgt-to-left{
  text-align:center;
}
.gallery__slider{
  margin-top: 80px;
  margin-bottom: 160px;
}
.participante_1,
.participante_3,
.participante_5,
.participante_7,
.participante_10,
.participante_14,
.participante_16{
    margin: 0 auto;
}
@media (max-width: 767px) {
    #virtual__tour{
      height: 436px;
      border-radius: 0.5rem;
    }
.text-rihgt-to-left{
    text-align: left;
  }
}

/*MARK: Estilos del slider de reconocimientos */
.reconocimientos-slider {
     padding: 80px 0;
     color: white;
}

@media (max-width: 576px) {
  
  .p-d-l-20 {
    padding-left: 20px !important; /* elimina padding extra en mobile */
    padding-right: 20px;
  }
  
}

.slider-header{
     position: relative;
     z-index: 2;
}

.slider-title {
     font-size: 2.5rem;
     font-weight: bold;
     margin-bottom: 20px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slider-description {
     font-size: 1.1rem;
     line-height: 1.6;
     max-width: 800px;
     margin: 0 auto 30px;
     opacity: 0.95;
}

.slider-controls {
     display: flex;
     gap: 10px;
     justify-content: center;
     margin-top: 0px;
}

.slider-btn {
     width: 36px;
     height: 36px;
     border-radius: 18px;
     background: #D8DADA;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     color: #666;
}

.slider-btn:hover {
     transform: scale(1.05);
}

.slider-btn.active {
     background: #CE0058;
     color: white;
}

.slider-content {
     position: relative;
     z-index: 2;
     overflow: hidden;
}

.cards-wrapper {
     display: flex;
     transition: transform 0.5s ease;
     gap: 30px;
}

/* --- CARD --- */
.card-item {
     flex: 0 0 340px;
     height: 476px;
     /* un poco más alta para aire */
     border-radius: 16px;
     overflow: hidden;
     position: relative;
     background: #fff;
     box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
     transition: transform .3s ease;
}

.card-item:hover {
     transform: translateY(0px);
}

/* Imagen de fondo */
.card-image {
     position: absolute;
     inset: 0 0 0 0;
     /* ocupa todo el card */
     z-index: 1;
}

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

/* Botón de Play centrado */
.play-button {
     position: absolute;
     z-index: 3;
     /* sobre la imagen y la curva */
     top: 42%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 66px;
     height: 66px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     transition: transform .25s ease, background .25s ease;
     cursor: pointer;
}

.play-button:hover {
     transform: translate(-50%, -50%) scale(1.06);
}

.play-button svg {
     width: 28px;
     height: 28px;
     color: #333;
}

@media (max-width: 760px) {
    .video {
        height: 59vh !important;
        padding: 0 20px !important;
    }
    .slider-header{
      text-align: left;
    }
}

/* Contenido con curva de color */
.card-content {
     position: absolute;
     z-index: 2;
     /* encima de la imagen, debajo del play */
     left: 0;
     right: 0;
     bottom: 0;
     height: 52%;
     /* cuánto “sube” el bloque */
     pointer-events: none;
     /* para que el hover del play no falle */
}

.card-curve {
     position: absolute;
     inset: 0;
     /* llena la zona de contenido */
     width: 100%;
     height: 100%;
}

.card-curve path {
     fill: var(--card-color, #960048);
}

/* Cuerpo de texto sobre la curva */
.card-body {
     position: relative;
     z-index: 1;
     /* sobre el SVG */
     color: #fff;
     padding: 28px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     height: 100%;
     pointer-events: auto;
     /* habilita selección/clicks en texto/links si los hay */
}

.card-name {
     margin: 0 0 6px 0;
     font-size: 1.35rem;
     font-weight: 800;
     letter-spacing: .2px;
}

.card-category {
     margin: 0 0 10px 0;
     font-size: .92rem;
     font-weight: 700;
     opacity: .95;
}

.card-text {
     margin: 0;
     font-size: .9rem;
     line-height: 1.35;
     opacity: .98;
}

/* Colores dinámicos (ya los tenías) */
.card-item[data-color="#960048"] {
     --card-color: #960048;
}

.card-item[data-color="#847770"] {
     --card-color: #847770;
}

.card-item[data-color="#FFA400"] {
     --card-color: #FFA400;
}

/* Contenedor del carrusel */
.slider-content {
     position: relative;
     z-index: 2;
     overflow: hidden;
}

.cards-wrapper {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     transition: transform .5s ease;
}

/* Responsive */
@media (max-width: 768px) {
     .card-item {
          flex: 0 0 280px;
          height: 400px;
     }

     .cards-wrapper {
          gap: 20px;
     }

     .play-button {
          width: 60px;
          height: 60px;
     }
    .card-body{
      padding: 1rem;
    }
}


.card-content svg.card-curve {
     position: absolute;
     top: 15px;
     /* desplaza todo el bloque hacia abajo */
}


.card-name {
     color: #fff;
     font-size: 24px;
     font-style: normal;
     font-weight: 500;
     line-height: 40px;
}

.card-category {
     color: #fff;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-transform: uppercase;
}

.card-text {
     color: #fff;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
}
.slider-title {
     color: #ffffff;
     font-size: 48px;
     font-style: normal;
     font-weight: 500;
     line-height: 56px;
     text-align: left
}

.slider-description-02 {
     color: #ffffff;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
     text-align: left
}

.slider-description-03 {
     color: #ffffff;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
     line-height: 1.6;
     opacity: 0.95;
     margin-bottom: 80px;
}


.slider-subheader {
  display: flex;
  align-items: center;          /* centra verticalmente texto y flechas */
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 80px;                    /* espacio entre texto y flechas */
}

.slider-description-02 {
  flex: 1;                      /* ocupa todo el espacio disponible */
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.95;
  margin: 0;                /* elimina margen extra del p */
}



.slider-controls {
  flex-shrink: 0;               /* evita que los botones se encojan */
  display: flex;
  gap: 10px;
}


/* Dots base (desktop: puedes dejarlos centrados si quieres) */
.reconocimientos-slider #sliderDots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}
.reconocimientos-slider #sliderDots li { display: inline-flex; }
.reconocimientos-slider #sliderDots .dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #9EA1A4;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.reconocimientos-slider #sliderDots .dot.active {
  width: 18px;              /* pastilla activa como en el mock */
  height: 8px;
  background: #CE0058;
  transition: width .2s ease;
}

/* ===== MOBILE: dots izq + flechas der (sobre las cards) ===== */
@media (max-width: 576px) {
  .reconocimientos-slider { position: relative; }

  /* oculta flechas del header en mobile */
  .reconocimientos-slider .slider-header .slider-controls { display: none !important; }

  /* deja espacio para la barra inferior */
  .reconocimientos-slider .slider-content {
    position: relative;
    padding-bottom: 64px;
  }

  /* Dots abajo-izquierda dentro del slider */
  .reconocimientos-slider #sliderDots {
    position: absolute;
    left: 24px;
    bottom: 8px;
    z-index: 5;
    margin: 0;
    padding: 6px 10px;
    background: #fff;
    border-radius: 9999px;       /* pastilla blanca */
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
  }

  /* Flechas abajo-derecha */
  .reconocimientos-slider .slider-controls-mobile {
    position: absolute;
    right: 24px;
    bottom: 0px;
    z-index: 6;
    display: flex;
    gap: 10px;
  }
  .reconocimientos-slider .slider-controls-mobile .prev-btn {
    background: #E0E2E4; color: #333;
  }
  .reconocimientos-slider .slider-controls-mobile .next-btn {
    background: #CE0058; color: #fff;
  }

  /* evita recorte de la barra */
  .reconocimientos-slider .cards-wrapper { overflow: visible; }
}

/* Mejora de rendimiento y evita “cortes” al animar */
.reconocimientos-slider .cards-wrapper {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* acelera en GPU */
}

/* En mobile, deja visible para que la card centrada no se recorte */
@media (max-width: 576px){
  .reconocimientos-slider .cards-wrapper { overflow: visible; }
}



.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: #000000;
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-modal-zindex);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

/* MARK:  Grid galerry */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* Card base */
.gallery-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:14px;
  aspect-ratio:4/3;               /* proporción uniforme */
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.gallery-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.06);          /* un poco “in” por defecto */
  transition:transform .35s ease; /* hover → zoom-out */
}

.gallery-card:hover img,
.gallery-card:focus-visible img{
  transform:scale(1.0);           /* zoom-out al hover */
}

/* Ver más */
.gallery-card.more::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 11;
  background: rgba(0, 0, 0, 0.55);
  pointer-events:none;
}

.gallery-card.more .more-label{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  z-index: 12;
  padding:10px 14px;
  border-radius:12px;
}

/* Responsive */
@media (max-width: 48rem){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  
}


.m-top-120 {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .m-top-120 {
    margin-top: 0px !important;
  }
  .reconocimientos-slider{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gallery__slider{
    margin-top: 40px;
    margin-bottom: 80px;
  }
  .slider-description-02{
    text-align: left;
   }
}


/* MARK: Form mail */


/* Centrado específico para este bloque, respetando tus clases */
.cta-subscribe .facil-title,
.cta-subscribe .slider-description-03 {
  text-align: center !important;
}

/* Contenedor del pill */
.pill-form {
  position: relative;
  width: 100%;
  max-width: 560px; /* ajusta al gusto */
}

/* Input estilo píldora */
.pill-form .form-control {
  height: 68px;
  border-radius: 9999px;
  padding: 0 140px 0 22px; /* espacio para el botón a la derecha */
  border: 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  background: #fff;
  font-size: 16px;
}

/* Botón dentro del input */
.pill-form .btn-pill {
  position: absolute;
  top: 13px;
  right: 14px;
  height: 44px;                /* 56px - (6px*2) */
  padding: 0 22px;
  border-radius: 9999px;
  border: 0;
  font-weight: 600;
  line-height: 44px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  background: #CE0058;
  color: #fff;
}

/* Hover/Focus */
.pill-form .btn-pill:hover { background: #910048; }
.pill-form .form-control:focus {
  outline: none;
  box-shadow: 0 12px 34px rgba(228,14,118,.35);
}

/* Opcional: fondo suave del bloque (radial, no linear) */
.cta-subscribe {
  background: radial-gradient(circle at 60% 20%, rgba(229,107,107,.18) 0%, rgba(0,0,0,.55) 70%);
  padding-top: 80px;
  padding-bottom: 80px;
  color: #fff;
}
.cta-subscribe .slider-description-03 { opacity: .9; }

.m-t-b-60 {
     margin-top: 100px;
     margin-bottom: 100px;
}

@media (max-width: 576px) {
  .m-t-b-60 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}



/* Por defecto: oculto */
.only-mobile {
  display: none;
}

@media (max-width: 576px) {
  .only-mobile {
    display: block;   
  }

  .p-24 {
    padding-left: 24px !important; 
    padding-right: 24px !important;
  }
}




.text-48 {
  font-size: 3rem !important;
}

@media (max-width: 768px) {
  .title-premio {
    font-size: 36px !important;
  }
  .text-48 {
    font-size: 30px !important;
  }
  .slider-description-03{
    text-align: left;
  }
}