:root {
      --color-primario: #102d33;
      --color-acento: #164551;
      --gris-suave: #f4f4f4;
      --texto: #2c2c2c;
    }
  

h1,h2,h3{
  font-family: 'Raleway', sans-serif;
  font-weight:600;
}


    body {
      margin: 0;
      color: var(--texto);
      background: #fff;
       font-family: 'Poppins', sans-serif;
    }
.intro-content p,


.section-header{
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 20px !important;
  color: #5a6b75;
  margin: 0 auto;
}


.icon-white{
  color: #ffffff !important;
}


/* ================= INTRO ================= */
/* FORZAR tamaño correcto: pega esto al final de tu CSS (o en un <style> después de main.css) */
.intro-content h2 {
  font-size: 2.5rem !important; 
     /* cambia a 1.8rem/1.6rem si aún quieres más pequeño */
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.1 !important;
  text-transform: none !important; /* por si hay mayúsculas forzadas */
  
}

.intro-content p {
  font-size: 1.15rem;
  color: #555;
  margin-top: 10px;
}

/* SEPARACIÓN EXTRA ENTRE HERO Y CONTENIDO */
section.travel-about.section:first-of-type {
  margin-top: 60px; /* 🧡 suaviza el inicio */
}

/* ================= TITULOS DE SECCIÓN ================= */
.story-content h3 {
    font-size: 1.9rem !important;    /* cambia a 1.8rem/1.6rem si aún quieres más pequeño */
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  line-height: 1.1 !important;
  text-transform: none !important; /* por si hay mayúsculas forzadas */
}

/* MENOS JUNTOS LA INTRO Y “LO QUE ENCONTRARÁS” */
.story-content p {
  margin-bottom: 20px; /* 🧡 más espacio */
  line-height: 1.65;
}

.icon-text h5 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 1.25rem;
}

/* Fuerza que las imágenes con esta clase tengan la misma altura y borde redondeado */
.img-fluid.uniform-img {
  display: block;               /* evita espacios extra */
  width: 100% !important;
  height: 440px !important;     /* <- ajusta esta altura */
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
}

/* Fuerza que las imágenes con esta clase tengan la misma altura y borde redondeado */
.img-fluid.uniform-img1 {
  display: block;               /* evita espacios extra */
  width: 100% !important;
  height: 640px !important;     /* <- ajusta esta altura */
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
}



    /* BLOQUE DE CONTENIDO */
    .bloque {
      background: var(--gris-suave);
      padding: 30px;
      border-radius: 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      width: 100%;
      margin: 0 auto 70px;
      box-shadow: 0 5px 12px rgba(0,0,0,0.15);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .bloque:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    }

    .bloque img {
      width: 100%;
      height: 500px;
      object-fit: cover;
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      transition: transform .3s ease;
    }

    .bloque img:hover {
      transform: scale(1.03);
    }
    

/* Centrar verticalmente el contenido dentro de cada contenedor gris */
.section-gray {
  padding: 60px 40px !important;      /* Más espacio arriba y abajo */
  display: flex;
  align-items: center;                /* Centrado vertical perfecto */
  justify-content: center;
  border-radius: 12px;
}

/* Ajuste interno para que el contenido respire */
.section-gray .row {
  align-items: center !important;     /* Asegura que columnas imagen/texto estén centradas */
}

section.travel-about.section:first-of-type {
  margin-top: 0px !important;
}



/* Contenedor principal */
.hero-box {
  position: relative;
  width: 100%;
  height: 400px; /* ajuste de alto */
  background-image: url("assets/img/coroneo/tradicion1.jpg");
  background-size: cover;      /* La imagen cubre todo */
  background-position: center; /* Centrada */
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fondo semitransparente para que el texto se lea */
.hero-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* oscurito opcional */
}

/* Contenido encima de la imagen */
.hero-content {
  position: relative; /* MUY importante para que esté sobre la imagen */
  color: white;
  text-align: center;
  z-index: 10;
  padding: 20px;
}

/* ==================== TARJETAS ==================== */

.feature-card {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  perspective: 1200px;
}

/* Contenedor interno */
.feature-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .9s ease;
}

.feature-card:hover .feature-card-inner {
  transform: rotateY(180deg);
}

/* ======= FORZAR TEXTO ABAJO (SOLUCIÓN ROBUSTA) ======= */

/* Asegurar que el frente sea contenedor posicionado */
.feature-front {
  position: relative !important;
  display: block !important; /* evitar conflictos con flex heredado */
  padding: 0 !important;
  overflow: hidden;
}

/* Forzar la franja oscura */
.feature-front::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 36% !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)) !important;
  z-index: 1 !important;
}

/* Contenedor del texto anclado abajo — esto evita que quede centrado */
.feature-front .front-text {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 14px !important;     /* ajusta para subir/bajar el texto */
  z-index: 3 !important;
  text-align: center !important;
  pointer-events: none; /* para que el icono siga siendo clickeable */
}

/* Asegurar que títulos y párrafos no rompan la línea ni tengan márgenes raros */
.feature-front .front-text h4,
.feature-front .front-text p {
  margin: 0 !important;
  padding: 2px 6px !important;
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9) !important;
  pointer-events: auto;
}

/* ==================== REVERSO ==================== */

.feature-back {
  position: absolute;
  inset: 0;
  background: rgb(16, 45, 51) !important; /* NEGRO REAL */
  backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: inherit;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px;
  text-align: center;
}

.feature-back::after {
  display: none !important;
}

/* Texto reverso */
.feature-back p {
  color: #fff !important;
  font-size: 16px;
  text-align:left!important;
  line-height: 1.5;
  z-index: 3;
}


.feature-card {
  width: 100%;
  height: 260px; /* AJUSTA LA ALTURA COMO QUIERAS */
  margin-bottom: 30px;
  border-radius: 18px !important;
  overflow: hidden;
}

.feature-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: inherit;
}

.feature-front,
.feature-back {
  width: 100%;
  height: 100%;
  border-radius: inherit !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: #fff;
}

.feature-back {
  justify-content: flex-start !important;
  padding-top: 30px; /* controla qué tan arriba */
}


.feature-back {
  display: flex;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 28px;
}
.feature-back p {
  width: 100%;
  text-align: left !important;
}



/* ==================== RESPONSIVE MOBILE ==================== */
@media (max-width: 768px) {

  /* INTRO TITULO */
  .intro-content h2 {
    font-size: 1.7rem !important;
  }

  .intro-content p {
    font-size: 1rem;
  }

  /* CONTENIDO HISTORIA */
  .story-content h3 {
    font-size: 1.4rem !important;
  }

  .story-content h4 {
    font-size: 1.1rem;
  }

  .story-content p {
    font-size: 0.95rem;
    text-align: justify;
  }

  /* IMÁGENES */
  .hero-image img {
    border-radius: 16px;
    margin-bottom: 15px;
  }

  /* CAJAS MISION */
  .mission-box {
    flex-direction: row;
    gap: 12px;
    padding: 12px;
  }

  .mission-text h4 {
    font-size: 14px;
  }

  .mission-text p {
    font-size: 13px;
  }

  /* TARJETAS */
  .feature-card {
    height: 220px;
  }

  .feature-front .front-text h4 {
    font-size: 15px;
  }

  .feature-front .front-text p {
    font-size: 13px;
  }

  .feature-back ul {
    padding-left: 16px;
  }

  .feature-back li {
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* SECCIONES GRIS */
  .section-gray {
    padding: 40px 15px !important;
  }

  /* CTA FINAL */
  .cta-content h3 {
    font-size: 1.4rem;
  }

  .cta-content p {
    font-size: 0.95rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 12px;
  }

  /* FOOTER */
  .footer h4 {
    font-size: 1.1rem;
  }

  .footer p {
    font-size: 0.9rem;
  }
  .footer-links ul li a {
    font-size: 0.9rem;
  }
}

/* ================= CTA BANNER ================= */

.cta-banner {
  max-width: 420px;              /* ancho tipo tarjeta */
  margin: 80px auto;             /* 👈 espacio arriba y abajo */
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #5f6666,
    #3f4f52
  );
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.cta-overlay {
  padding: 45px 35px 70px; /* menos arriba, más abajo */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}


/* Contenido */
.cta-content {
  text-align: center;
  color: white;
}

/* Título */
.cta-content h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Texto */
.cta-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 35px;
  color: #e6e6e6;
}

/* Botones */
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

/* Botón principal */
.cta-buttons .btn-primary {
  background: white;
  color: #555;
  border-radius: 40px;
  padding: 14px 36px;
  font-weight: 600;
  border: none;
}

/* Botón secundario */
.cta-buttons .btn-outline {
  border: 2px solid white;
  color: white;
  border-radius: 40px;
  padding: 14px 36px;
  font-weight: 600;
  background: transparent;
}

/* Hover elegante */
.cta-buttons .btn:hover {
  transform: translateY(-2px);
  transition: all .3s ease;
}


.cta-content h3 {
  margin-top: 0;
  margin-bottom: 18px;
  line-height: 1.15;
}
/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .cta-banner {
    margin: 60px 20px;   /* 👈 separación lateral en celular */
  }

  .cta-content h3 {
    font-size: 1.8rem;
  }
}

.cta-content {
  margin-top: -8px;
}


.destination-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glightbox-container {
  z-index: 100000 !important;
}


/* FORZAR BOTÓN CERRAR DE GLIGHTBOX */
.glightbox-clean .gclose,
.glightbox-modern .gclose {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 99999 !important;
  color: #fff !important;
  top: 20px !important;
  right: 20px !important;
}



* {
  box-sizing: border-box;
 
}

body {
  margin: 0;
  background: #fff;
}
/* FORZAR TEXTO BLANCO EN CTA */
.cta-box h2,
.cta-box p {
  color: #ffffff !important;
}

/* Contenedor general */
.cta-wrapper {
  padding: 60px 20px;
}

/* Recuadro principal */
.cta-box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 50px;
  border-radius: 32px;

  background: linear-gradient(
    135deg,
    #6b6b6b 0%,
    #3f5458 100%
  );

  color: #fff;
  text-align: center;
}

/* Título */
.cta-box h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

/* Texto */
.cta-box p {
  font-size: 1.05rem;
  max-width: 800px;
  margin: 0 auto 35px;
  opacity: 0.95;
}

/* Botones */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn {
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Botón blanco */
.btn-primary {
  background: #fff;
  color: #555;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

/* Botón contorno */
.btn-outline {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}

.btn-outline:hover {
  background: #fff;
  color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .cta-box {
    padding: 45px 25px;
  }

  .cta-box h2 {
    font-size: 1.6rem;
  }
}

.cta-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 576px) {
  .cta-buttons {
    flex-direction: column;
  }
}
/* FORZAR BOTONES EN FILA (BOOTSTRAP FIX) */
.cta-buttons {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-direction: row !important;
}

.cta-buttons .btn {
  width: auto !important;
  display: inline-flex !important;
}


/* ===== BOTÓN HAMBURGUESA ===== */
.menu-btn {
  position: fixed;
  top: 22px;
  right: 20px;
  z-index: 1200;
  background: none;
  border: none;
  font-size: 2.2rem;
  color: #000;
  display: none;
}

@media (max-width: 992px) {

  .menu-btn {
    display: block;
  }

  
}




/* ===============================
   ESCALA GLOBAL (COMO 90% ZOOM)
   =============================== */

body{
  zoom: 0.9;
}

/* En celulares mejor no reducir tanto */
@media (max-width: 768px){
  body{
    zoom: 1;
  }
}


/* 📱 HACER MÁS PEQUEÑOS LOS TÍTULOS EN RESPONSIVE */

/* TABLET */
@media (max-width: 992px){

  .section-header h2{
    font-size: 2rem !important;
    line-height: 1.3;
  }

  .section-header p{
    font-size: 18px !important;
  }

}

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

  .section-header h2{
    font-size: 2rem !important;
    line-height: 1.3;
  }

  .section-header p{
    font-size: 13px !important;
    padding: 0 13px;
  }

}

/* CELULAR PEQUEÑO */
@media (max-width: 480px){

  .section-header h2{
    font-size: 1.6rem !important;
  }

  .section-header p{
    font-size: 15px !important;
  }

}


/*====================================
        EXPERIENCIAS EN VIDEO
=====================================*/

.video-section{

    padding:100px 0;

    background:#f8f9fa;

}


.videos-header{

    text-align:center;

    margin-bottom:60px;

}

.videos-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    border-radius:50px;

    background:#eef6ef;

    color:#23506b;

    font-weight:600;

}

.videos-header h2{

    margin-top:25px;

    font-size:48px;

    color:#21465d;

}

.videos-header p{

    margin-top:18px;
     font-size:20px;

    color:#666;

    max-width:700px;

    margin-left:auto;

    margin-right:auto;

}
.video-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.10);

    transition:.35s;

}

.video-card:hover{

    transform:translateY(-8px);

}

.video-card video{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

}

.video-info{

    padding:20px;

    text-align:center;

}

.video-info h4{

    margin-bottom:8px;

    font-weight:700;

    color:#21465d;

}

.video-info p{

    margin:0;

    color:#777;

    font-size:15px;

}


/*=============================
      AGRADECIMIENTOS
==============================*/

.cta-creditos{
    margin-top:35px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.18);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    max-width:850px;
    margin-inline:auto;
    color:rgba(255,255,255,.85);
    font-size:.92rem;
    line-height:1.6;
}



.cta-creditos strong{
    color:#fff;
    font-weight:600;
}

@media (max-width:768px){
    .cta-creditos{
        flex-direction:column;
        text-align:center;
        font-size:.85rem;
        gap:8px;
    }
}


.video-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.video-card iframe{
    width:100%;
    height:260px;
    display:block;
    border:none;
}

.video-info{
    padding:22px;
    text-align:center;
}