/* =========================
   EXCURSIONES.CSS — PÁGINAS INTERNAS
   Limpio y sin duplicados
   ========================= */

:root{
  --accent: #FF4081;      /* color del acordeón */
  --accent-hover:#E91E63; /* hover del acordeón */
  --primario:#2196F3;     /* color corporativo (titulares, etc.) */
  --texto-oscuro:#263238;
  --sombra-suave: 0 4px 15px rgba(0,0,0,.08);
}


/* CORRECCIÓN: Se unificaron las reglas de .excursion-grid aquí y se eliminó la duplicidad del final del archivo */
.excursion-grid {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 40px 0;
}
.col-der {
  position: sticky;
  top: 20px;
}
@media (max-width: 900px) {
  .excursion-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .col-der {
    position: static;
    top: auto;
  }
}


/* ======================
   IZQUIERDA: Acordeones
   ====================== */
.col-izq .accordion{
  width:100%;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  padding:14px 16px;
  border:0;
  border-radius:10px;
  font-weight:700;
  margin:0 0 10px;
  transition:background-color .3s ease, box-shadow .2s ease;
}
.col-izq .accordion.active,
.col-izq .accordion:hover{ background:var(--accent-hover); }
.col-izq .accordion:focus-visible{
  outline:2px solid #003366;
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

.col-izq .panel{
  overflow:hidden;
  max-height:0;               /* mecánica del acordeón */
  transition:max-height .3s ease;
  background:#fff;
  border-radius:10px;
  box-shadow:var(--sombra-suave);
  padding:0 16px;             /* el contenido empuja el alto */
  margin:0 0 14px;
}
.col-izq .panel ol,
.col-izq .panel ul,
.col-izq .panel p{ margin:14px 0; }
.col-izq .panel > :last-child{ margin-bottom:16px; }

/* ==========================================
   DERECHA: Slider arriba + descripción abajo
   ========================================== */
/* La estructura .col-der ya está definida en la sección de la rejilla */

/* ===== Carousel (vanilla) ===== */
.carousel-excursion, /* Nombre de clase genérico para el JS */
.carousel{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  box-shadow:var(--sombra-suave);
  background:#000;
}
.carousel-track{
  display:flex;
  flex-wrap:nowrap;
  will-change:transform;
  transform:translateX(0);
  transition:transform 450ms ease;
}
.carousel-slide{
  flex:0 0 100%;
  max-width:100%;
  min-width:100%;
  aspect-ratio:16/9;          /* altura consistente sin barras */
  background:#000;
}
.carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Flechas */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  border:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:24px;
  line-height:40px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease;
}
.carousel-btn:hover{ background:rgba(0,0,0,.6); }
.carousel-btn.prev{ left:10px; }
.carousel-btn.next{ right:10px; }
.carousel-btn:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}

/* Dots */
.carousel-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.carousel-dots button{
  width:8px; height:8px; border-radius:50%; border:0;
  background:rgba(255,255,255,.55); cursor:pointer;
}
.carousel-dots button[aria-selected="true"]{ background:#fff; }

/* ===========================
   Descripción general (derecha)
   =========================== */
.descripcion-general{
  background:#fff;
  border-radius:12px;
  box-shadow:var(--sombra-suave);
  padding:18px;
  margin-top: 20px; /* Espacio entre el slider y la descripción */
}
.descripcion-general h2{
  margin:0 0 8px;
  color:var(--primario);
  font-size:clamp(20px, 3vw, 24px);
}
.descripcion-general p{ color:#555; line-height:1.6; }
.descripcion-general .precios{ margin:0 0 10px; }
.btn-whatsapp{ background:#25D366 !important; }

/* ===========================================
   Banner interno (iframe YouTube o <video>)
   =========================================== */
.hero-video.hero-video--interno{
  position:relative;
  height:min(70vh, 560px);
  min-height:360px;
  overflow:hidden;
  background:#000;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.hero-video.hero-video--interno iframe{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:120vw; height:120vh;
  min-width:100%; min-height:100%;
  border:0; display:block; pointer-events:none;
}
.hero-video--interno video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Responsive para banner interno */
@media (max-width: 768px) {
  .hero-video.hero-video--interno {
    height: 50vh;
    min-height: 50vh;
    max-height: 60vh;
  }
  
  .hero-video.hero-video--interno iframe,
  .hero-video--interno video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100vw;
    min-height: 50vh;
    width: auto;
    height: auto;
    object-fit: cover;
  }
  
  /* Para móvil horizontal */
  @media (min-aspect-ratio: 16/9) {
    .hero-video.hero-video--interno iframe,
    .hero-video--interno video {
      width: 100vw;
      height: 56.25vw;
      min-height: 50vh;
    }
  }
  
  /* Para móvil vertical */
  @media (max-aspect-ratio: 9/16) {
    .hero-video.hero-video--interno iframe,
    .hero-video--interno video {
      width: 88.89vh;
      height: 50vh;
      min-width: 100vw;
    }
  }
}
.hero-content{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center;
  color:#fff;
  padding:20px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* ===========================
   Tabla de precios (opcional)
   =========================== */
.tabla-precios {
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
}
.tabla-precios tr { border-bottom:1px solid #eee; }
.tabla-precios tr:last-child { border-bottom:none; }
.tabla-precios td { padding:12px 8px; color:#555; line-height:1.6; }
.tabla-precios td:first-child { text-align:left; }
.tabla-precios td:last-child  { text-align:right; font-weight:bold; }
.tabla-precios strong { color:var(--primario); }

/* ===========================
   Overlay Programas (genérico)
   =========================== */
body.overlay-open { overflow:hidden; }

.overlay-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease;
  z-index:1000;
}
.overlay-backdrop.is-open{ opacity:1; visibility:visible; }

.prog-overlay{
  position:fixed;
  left:50%; top:5vh; transform:translateX(-50%) scale(.98);
  width:min(960px, calc(100vw - 32px));
  max-height:85vh; overflow:auto;
  background:#fff; border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease;
  z-index:1001;
}
.prog-overlay.is-open{ opacity:1; visibility:visible; transform:translateX(-50%) scale(1); }

.prog-header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:#fff; border-bottom:1px solid #eee;
}
.prog-title{ font-weight:800; margin:0; }
.ov-close{
  margin-left:auto; padding:8px 12px; border:0; border-radius:10px;
  background:#f3f4f6; cursor:pointer; font-weight:600;
}
.prog-inner{ padding:16px; }

.prog-menu{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.prog-card{
  text-align:left; padding:14px; border-radius:12px; cursor:pointer;
  border:1px solid #eee; background:#F3E5F5; box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.prog-card:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.prog-card h4{ margin:0 0 6px; }

.prog-body{ display:none; padding:4px 0; }
.prog-body.is-active{ display:block; }

.prog-body h3{ margin:0 0 8px; }
.prog-body h4{ margin:10px 0 6px; }

.prog-cta{ display:flex; gap:10px; align-items:center; margin-top:14px; }
.btn-secundario{
  background:#f3f4f6; color:#111; border:0; border-radius:10px; padding:8px 12px; cursor:pointer;
}

/* Responsive full-screen en móvil */
@media (max-width:576px){
  .prog-overlay{ inset:0; width:100vw; height:100vh; max-height:none; border-radius:0; transform:none; }
  .prog-overlay.is-open{ transform:none; }
}

/* ===== Paquetes: 5 en UNA SOLA LÍNEA (compacto, fondo acordeón) ===== */
.paquetes h2{ text-align:center; margin-bottom:.4rem; }

/* Pasamos a FLEX para garantizar 1 sola fila */
.paquetes .cards-paquetes{
  display:flex;
  gap:6px;
  align-items:stretch;
  justify-content:space-between;
}

.paquetes .cards-paquetes .card{
  flex:1 1 0;
  min-width:0;
  background:var(--accent, #FF4081);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  padding:.42rem .5rem;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.paquetes .cards-paquetes .card h3{
  margin:0 0 .12rem;
  font-size:.80rem;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
}

.paquetes .cards-paquetes .card .price{
  margin:.04rem 0 .28rem;
  font-size:.80rem;
  font-weight:800;
  color:#fff;
}

.paquetes .cards-paquetes .card .btn{
  display:inline-block;
  padding:.26rem .44rem;
  font-size:.72rem;
  border-radius:7px;
  background:#fff;
  color:var(--accent, #FF4081);
  border:0;
}

.paquetes .cards-paquetes .card .btn:hover{ filter:brightness(.95); }

.paquetes .cards-paquetes .card .badge{
  display:inline-block;
  margin-left:.28rem;
  padding:.1rem .34rem;
  font-size:.62rem;
  font-weight:800;
  background:rgba(255,255,255,.22);
  color:#fff;
  border-radius:999px;
}

@media (max-width:1200px){
  .paquetes .cards-paquetes .card h3,
  .paquetes .cards-paquetes .card .price{ font-size:.78rem; }
  .paquetes .cards-paquetes .card .btn{ font-size:.70rem; }
}

/* =========================
   BODY.CSS — ESTILOS GENERALES DEL SITIO (LIMPIO)
   ========================= */

:root{
  --color-primario:#2196F3;
  --color-secundario:#ff5733;
  --color-cta-hover:#E91E63;
  --color-fondo:#F3E5F5;
  --color-texto:#333;
}

html,body{
  height:100%;
  background:var(--color-fondo);
  color:var(--color-texto);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
  line-height:1.5;
}

/* Imágenes - sin interferir con PNG transparentes */
.container{ width:min(1200px,92%); margin:0 auto; }

/* ========== Botones (unificados) ========== */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  border:2px solid transparent;
  font-weight:600;
  text-decoration:none;
  transition:.2s ease;
}
.btn-primario{ background:var(--color-secundario); color:#fff; }
.btn-primario:hover{ background:var(--color-cta-hover); }
.btn-primary{ background:#0ea5e9; color:#fff; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(14,165,233,.35); }
.btn-outline{ background:transparent; border-color:#fff; color:#fff; }
.btn-outline:hover{ background:#fff; color:#003366; }




/* =========================
   ¿POR QUÉ ELEGIRNOS? (general)
   ========================= */
.por-que-elegirnos .grid-beneficios{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (max-width:992px){ .por-que-elegirnos .grid-beneficios{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .por-que-elegirnos .grid-beneficios{ grid-template-columns:1fr; } }
.por-que-elegirnos .beneficio{
  padding:12px 12px 14px; border:1px solid #e6ecf4; border-radius:12px; background:#fff;
  box-shadow:0 4px 16px rgba(10,124,255,.06);
}
.por-que-elegirnos .beneficio h3{
  margin:.1rem 0 .35rem; font-size:1rem; line-height:1.2;
  display:flex; align-items:center; gap:.5rem;
}
.por-que-elegirnos .beneficio p{ margin:0; font-size:.92rem; color:#334155; }
.por-que-elegirnos .beneficio h3::before{
  content:"🛡️"; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:#f3f7ff; border:1px solid #e3ecff; font-size:16px;
}
.por-que-elegirnos .beneficio:nth-child(2) h3::before{ content:"💲"; }
.por-que-elegirnos .beneficio:nth-child(3) h3::before{ content:"📞"; }
.por-que-elegirnos .beneficio:nth-child(4) h3::before{ content:"↩️"; }
.por-que-elegirnos .divisor{
  width:80px; height:4px; border-radius:999px;
  background:linear-gradient(90deg,#0a7cff,#00d4ff); margin:8px 0 18px;
}


/* ===== Página A&Q (FAQ) ===== */
.page-faq .container{ max-width:1180px; margin:0 auto; padding:20px; }
.page-faq .card{ background:#fff; border-radius:18px; padding:24px; box-shadow:0 8px 24px rgba(0,0,0,.08); }

.faq-hero{ text-align:center; margin-top:10px; }
.faq-hero h1{ color:#003366; margin:0 0 6px; }
.faq-hero p{ margin:0; opacity:.9; }

.faq-search-row{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
#faqSearch{
  flex:1 1 340px; min-width:260px;
  height:44px; padding:10px 12px; border-radius:12px; border:1px solid #d9e2ec; outline:none;
}
#faqSearch:focus{ border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.15); }
.faq-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.faq-hint{ display:block; margin-top:8px; color:#667085; }

.faq-grid{
  display:grid; gap:18px; margin-top:18px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){ .faq-grid{ grid-template-columns:1fr; } }
.faq-heading{ color:#003366; text-align:center; margin:0 0 8px; }

.faq-item{ border:1px solid #e6ecf4; border-radius:12px; margin:10px 0; overflow:hidden; }
.faq-item[open]{ border-color:#cfe0f5; box-shadow:0 8px 18px rgba(0,0,0,.05); }
.faq-item.is-hidden{ display:none; }

.faq-item > summary{
  list-style:none; cursor:pointer;
  padding:14px 16px; font-weight:700; color:#003366; position:relative;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary span{ display:inline-block; padding-right:28px; }
.faq-item > summary::after{
  content:"+"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-weight:900; font-size:20px; line-height:1;
}
.faq-item[open] > summary::after{ content:"–"; }

.faq-content{ padding:0 16px 14px; color:#333; }
.faq-content p{ margin:8px 0 0; }
.faq-content a{ color:#2196F3; }

body.faq-empty .faq-grid::after{
  content:"No encontramos resultados para tu búsqueda. Prueba con otra palabra clave.";
  grid-column:1 / -1; text-align:center; color:#667085; padding:14px 0;
}

.page-faq .cta-card{ display:flex; justify-content:space-between; align-items:center; gap:18px; }
@media (max-width:760px){ .page-faq .cta-card{ flex-direction:column; text-align:center; } }

/* ============================================= */
/* = Estilos para Paquetes (Coco Bongo)        = */
/* ============================================= */

.packages-full {
  margin: 18px 0 6px;
}
.packages-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 tarjetas en desktop */
  gap: 10px;
}
/* Media queries para hacer responsivas las tarjetas de paquetes */
@media (max-width: 740px) {
  .packages-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .packages-row {
    grid-template-columns: 1fr;
  }
}

.package-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 12px;
  min-height: 120px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  background: #e6f3fb;
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, filter 0.12s ease;
  min-width: 0;
  word-break: break-word;
}
.package-pill .pill-name {
  display: block;
  margin-bottom: 6px;
}
.package-pill .pill-price {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
}
.package-pill:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

/* =========================
   COMPATIBILIDAD BOOTSTRAP GRID SYSTEM
   Para home.php y otras páginas
   ========================= */

/* Grid System */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-12,
.col-md-6, 
.col-lg-4 {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* Cards compatibles con home.php - tamaño original */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-body {
  flex: 1 1 auto;
  padding: 1rem;  /* Reducido de 1.5rem a 1rem */
  display: flex;
  flex-direction: column;
}

.card-title {
  margin-bottom: 0.5rem;  /* Reducido */
  font-size: 1.1rem;      /* Reducido */
  font-weight: 600;       /* Reducido */
  color: #333;
}

.card-text {
  margin-bottom: 0.75rem;  /* Reducido */
  color: #666;
  font-size: 0.9rem;      /* Más pequeño */
  flex-grow: 1;
}

/* Aspect Ratio para videos/iframes */
.ratio {
  position: relative;
  width: 100%;
}

.video-wrapper-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: #000;
}

.hero-slider-wrapper {
  position: relative;
  overflow: hidden;
}

.iframe-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ratio::before {
  display: block;
  padding-top: var(--aspect-ratio);
  content: "";
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arreglar imágenes PNG transparentes - sin fondo parpadeante */
img {
  max-width: 100%;
  height: auto;
  background: transparent !important;
  /* Eliminar efectos que causan parpadeo */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Específico para imágenes en cards - sin interferir con transparencias */
.card img, .card-body img {
  background: transparent !important;
  display: block;
  max-width: 40px;  /* Limitar tamaño de iconos */
  max-height: 40px;
}

/* Iconos específicos más pequeños */
.card img[src*="icon"], 
.card img[src*="ico"],
img[width="44"], 
img[height="44"] {
  max-width: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  height: auto !important;
}

/* Evitar loading states en PNG transparentes */
.card .ratio img,
.card .ratio iframe,
.card .ratio video {
  background: transparent !important;
  border: none;
}

.ratio-16x9 {
  --aspect-ratio: 56.25%; /* 9/16 * 100% */
}

/* Utilities Bootstrap-like */
.g-4 > * {
  padding: 1rem;
}

.py-4 {
  padding-top: 1.5rem !important;  /* Reducido de 2rem */
  padding-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 2rem !important;     /* Reducido de 3rem */
  margin-bottom: 2rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;  /* Reducido */
}

.mb-4 {
  margin-bottom: 1rem !important;     /* Reducido de 1.5rem */
}

.text-center {
  text-align: center !important;
}

.d-flex {
  display: flex !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.h-100 {
  height: 100% !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  width: 50px !important;
  height: 50px !important;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.4em 0.8em;
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
}

.text-bg-success {
  color: #fff !important;
  background-color: #198754 !important;
}

.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}

.text-warning-emphasis {
  color: #ff9800 !important;
}


/* Card media styles */
.card .ratio iframe {
  border: 0;
}

.card .ratio video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Hidden elements */
.hidden-rating {
  display: none;
}


/* ===== LEGAL PAGES (POLITICAS/PRIVACIDAD) STYLES ===== */

.page-legal .container {
  padding-top: 1rem;
}

.page-legal .card {
  max-width: 900px;
  margin: 0 auto;
}

.page-legal .card header {
  background: #fff !important;
  box-shadow: none !important;
  border-bottom: 1px solid #e5e7eb;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.page-legal .card header h1 {
  color: #111827;
}

.page-legal .card header p {
  color: #374151;
  opacity: .9;
}

.page-legal .card .content {
  color: #263238;
  line-height: 1.6;
}

.page-legal .card .content h2 {
  margin: 1rem 0 .5rem;
  color: #0f172a;
  font-size: 1.125rem;
}

.page-legal .card .content ul,
.page-legal .card .content ol {
  margin: .25rem 0 1rem;
  padding-left: 1.25rem;
}

.page-legal .card .content hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.25rem 0;
}

.legal-header {
  padding: 1.25rem 1.25rem 0;
}

.legal-title {
  margin: 0 0 .25rem;
}

.legal-subtitle {
  margin: 0 0 1rem;
}

.legal-content {
  padding: 0 1.25rem 1.25rem;
}

.legal-contact {
  margin: 0;
  opacity: .85;
}

/* ===== QUICK PAYMENT PAGE STYLES ===== */

.error-page {
  font-family: sans-serif;
  padding: 2rem;
  text-align: center;
}

.pago-rapido {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.resumen-pago {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  text-align: center;
}

.monto-destacado {
  font-size: 2rem;
  font-weight: bold;
  color: #16a34a;
  margin: 1rem 0;
}

.form-group {
  margin: 1rem 0;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #374151;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px;
}

.form-group input:focus {
  border-color: #3b82f6;
  outline: none;
}

.btn-pagar {
  width: 100%;
  background: #16a34a;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
}

.btn-pagar:hover {
  background: #15803d;
}

.nota-seguridad {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  margin-top: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 6px;
}

.quick-payment-title {
  text-align: center;
  color: #263238;
}

.whatsapp-link {
  color: #16a34a;
}

/* ===== RETURN/PAYMENT COMPLETION PAGE STYLES ===== */

.success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  text-align: center;
}

.voucher {
  background: #F3E5F5;
  border: 2px solid #4CAF50;
  padding: 2rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.btn {
  display: inline-block;
  background: #2196F3;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  margin: 8px;
}

.btn-print {
  background: #4CAF50;
}

.payment-warning {
  background: #fff3cd;
  color: #856404;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  text-align: center;
}

.complete-data-form {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  margin-top: 1rem;
}

.info-box {
  background: #F3E5F5;
  padding: 1rem;
  margin-top: 2rem;
  border-radius: 4px;
  font-size: 12px;
}

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

.my-20 {
  margin: 20px 0;
}


/* ===== GENERAL BODY STYLES CLEANUP ===== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #F3E5F5;
  color: #333;
  line-height: 1.5;
}

/* ===== COMMON CSS CLASSES FROM INLINE STYLES CLEANUP ===== */

/* Form Elements */
.form-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #374151;
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 15px 0;
}

.form-inline {
  display: inline;
}

.grid-full-width {
  grid-column: 1/-1;
}

/* Layout Grids */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Alert & Container Boxes */
.booking-container-cyan {
  background: #f0fdff;
  border-radius: 8px;
  border: 2px solid #0891b2;
  padding: 20px;
  margin-top: 20px;
}

.booking-container-gray {
  background: #f8fafc;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  padding: 20px;
  margin-top: 20px;
}

.pricing-box-green {
  background: #dcfce7;
  border: 2px solid #16a34a;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  text-align: center;
}

.pricing-box-cyan {
  background: #cffafe;
  border: 2px solid #0891b2;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  text-align: center;
}

.alert-warning {
  background: #fff3cd;
  color: #856404;
  padding: 1rem;
  border-radius: 4px;
  margin: 1rem 0;
  border: 1px solid #ffeaa7;
}

.alert-success {
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.alert-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* Button Styles */
.btn-payment-green {
  background: #16a34a;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-payment-green:hover {
  background: #15803d;
  transform: translateY(-1px);
}

.btn-payment-cyan {
  background: #0891b2;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-payment-cyan:hover {
  background: #0e7490;
  transform: translateY(-1px);
}

/* Typography */
.price-display {
  font-size: 24px;
  font-weight: bold;
  color: #155e75;
}

.price-display.green {
  color: #15803d;
}

.text-disclaimer {
  font-size: 12px;
  color: #666;
  text-align: center;
}

.text-muted {
  color: #6b7280;
  margin-top: 8px;
}

.text-right {
  text-align: right;
}

/* Hero Sections */
.hero-simple {
  padding: 38px 0;
  background: #f8fafc;
}

.hero-simple h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.4vw, 32px);
  color: #0f172a;
}

.hero-simple p {
  margin: 0;
  color: #334155;
}

/* Spacing Utilities */
.mt-12 {
  margin-top: 12px !important;
}

.my-15 {
  margin: 15px 0 !important;
}

.my-20 {
  margin: 20px 0 !important;
}

.w-100 {
  width: 100% !important;
}

.badge-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}

.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.price-list-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.price-list-item:last-child {
  border-bottom: none;
}

.small-muted {
  color: #6b7280;
  font-size: 0.875rem;
}

.main-padding {
  padding: 22px 0 40px !important;
}

/* Email Template Styles */
.email-content {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #0f172a;
}

.email-separator {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: .8rem 0;
}

/* Honeypot anti-spam field */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* Price Display Classes */
.price-label {
  font-size: 14px;
  margin-bottom: 5px;
}

.price-label.green {
  color: #15803d;
}

.price-label.cyan {
  color: #155e75;
}

.price-amount {
  font-size: 24px;
  font-weight: bold;
}

.price-amount.green {
  color: #15803d;
}

.price-amount.cyan {
  color: #155e75;
}

.price-details {
  font-size: 12px;
  margin-top: 5px;
}

.price-details.green {
  color: #15803d;
}

.price-details.cyan {
  color: #155e75;
}

/* Utility Classes */
.flex-gap-10 {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.error-list {
  margin: .4rem 0 0 1rem;
}

.privacy-checkbox {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy-checkbox label {
  margin: 0;
}

.actions-row {
  grid-column: 1/-1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* Responsive Forms */
@media (max-width: 768px) {
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .flex-gap-10 {
    flex-direction: column;
    gap: 8px;
  }
  
  .btn-payment-green,
  .btn-payment-cyan {
    padding: 12px 20px;
    font-size: 16px;
  }
  
  .faq-search-input {
    width: 95%;
  }
}

/* ================================================= */
/* Estilos para tarjetas de excursiones.php - 4 por línea */
/* ================================================= */
.grid-excursiones {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin: 20px 0;
  padding: 0 10px;
}

.exc-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exc-link:hover {
  transform: translateY(-3px);
}

.exc-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.exc-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.exc-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.thumb {
  width: 100%;
  height: 80px;
  overflow: hidden;
  position: relative;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.exc-card:hover .thumb img {
  transform: scale(1.05);
}

.exc-name {
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #333;
  background: white;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Responsive para tablets */
@media (max-width: 1024px) {
  .grid-excursiones {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 0 8px;
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .grid-excursiones {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 0 5px;
  }
  
  .thumb {
    height: 60px;
  }
  
  .exc-name {
    padding: 4px;
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .grid-excursiones {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  
  .thumb {
    height: 50px;
  }
  
  .exc-name {
    padding: 3px;
    font-size: 8px;
  }
}