/*
Theme Name: Colombia Conexión (Travel Agency Child)
Template: travel-agency
Version: 1.9.0
*/

/* ============================================================
   PALETA DE COLORES  (cambiar SOLO estos valores para probar)
   ============================================================ */
:root {
  --cc-accent:        #C9A84C;  /* dorado: acento principal (reemplaza el naranja) */
  --cc-accent-dark:   #B8943E;  /* dorado oscuro: hover */
  --cc-deep:          #1E3D2F;  /* verde selva: elementos fuertes */
  --cc-deep-dark:     #152C22;  /* verde más oscuro */
}

/* ===== Botones de reservar / disponibilidad / cargar más ===== */
.trip-content-area .widget-area .trip-price .price-holder form .check-availability,
.trip-content-area .widget-area .trip-price .price-holder form .book-submit,
.archive .trip-content-area .grid .btn-loadmore span,
.trip-search-result #primary .advanced-search-wrapper .wte-advanced-search-wrap .load-more-search,
.trip-search-result #primary .wte-advanced-search-wrap .load-more-search,
.trip-search-result #primary .wte-category-outer-wrap .load-more-search {
  background: var(--cc-accent) !important;
  border-color: var(--cc-accent) !important;
}
.trip-content-area .widget-area .trip-price .price-holder form .check-availability:hover,
.trip-content-area .widget-area .trip-price .price-holder form .book-submit:hover,
.archive .trip-content-area .grid .btn-loadmore span:hover,
.trip-search-result #primary .advanced-search-wrapper .wte-advanced-search-wrap .load-more-search:hover,
.trip-search-result #primary .wte-advanced-search-wrap .load-more-search:hover,
.trip-search-result #primary .wte-category-outer-wrap .load-more-search:hover {
  background: var(--cc-accent-dark) !important;
  border-color: var(--cc-accent-dark) !important;
}
.trip-content-area .widget-area .trip-price .price-holder form .check-availability,
.trip-content-area .widget-area .trip-price .price-holder form .book-submit:focus,
.trip-content-area .widget-area .trip-price .price-holder form .book-submit,
.archive .trip-content-area .grid .btn-loadmore span,
.trip-search-result #primary .advanced-search-wrapper .wte-advanced-search-wrap .load-more-search,
.trip-search-result #primary .wte-advanced-search-wrap .load-more-search,
.trip-search-result #primary .wte-category-outer-wrap .load-more-search {
  border-color: var(--cc-accent) !important;
}
.archive .trip-content-area .grid .btn-loadmore:focus,
.trip-search-result #primary .advanced-search-wrapper .wte-advanced-search-wrap .load-more-search:focus,
.trip-search-result #primary .wte-advanced-search-wrap .load-more-search:focus,
.trip-search-result #primary .wte-category-outer-wrap .load-more-search:hover {
  color: var(--cc-accent) !important;
}

/* ===== Acentos generales comunes del tema + plugin de viajes ===== */
a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.entry-title a:hover,
.wte-trip-title a:hover {
  color: var(--cc-accent) !important;
}

.btn,
.wp-block-button__link,
.wte-btn,
input[type="submit"],
button[type="submit"],
.read-more-btn,
.more-link {
  background: var(--cc-accent) !important;
  border-color: var(--cc-accent) !important;
  color: #1a1a1a !important;
}
.btn:hover,
.wp-block-button__link:hover,
.wte-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.read-more-btn:hover,
.more-link:hover {
  background: var(--cc-accent-dark) !important;
  border-color: var(--cc-accent-dark) !important;
}

/* ============================================================
   HERO / BANNER PREMIUM  (Colombia Conexión)
   Foto a pantalla completa · degradado · zoom lento · fade-up
   ============================================================ */
.cc-hero {
  position: relative;
  width: 100%;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Foto de fondo con zoom lento (Ken Burns) */
.cc-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 60%;
  transform: scale(1.08);
  animation: ccKenBurns 18s ease-out forwards;
  z-index: 1;
}
@keyframes ccKenBurns {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Degradado elegante para que el texto resalte */
.cc-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(8,18,14,0.85) 0%, rgba(8,18,14,0.25) 45%, rgba(8,18,14,0.10) 100%);
}

/* Contenido del hero */
.cc-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5% 7vh;
  color: #fff;
}

/* Título y subtítulo con entrada suave */
.cc-hero-text {
  max-width: 760px;
  animation: ccFadeUp 1s ease both;
  animation-delay: 0.15s;
}
.cc-hero-text h2 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.08;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.cc-hero-text .banner-content {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  opacity: 0.92;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
@keyframes ccFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Buscador integrado, con entrada un poco más tardía */
.cc-hero .banner-form {
  margin-top: 1.8rem;
  animation: ccFadeUp 1s ease both;
  animation-delay: 0.4s;
}

/* Responsive */
@media (max-width: 768px) {
  .cc-hero { min-height: 70vh; }
  .cc-hero-inner { padding-bottom: 5vh; }
}

/* ============================================================
   HEADER v2 — delgado global + "cristal" sobre el hero (home)
   ============================================================ */

/* Más delgado y logo más pequeño en todas las páginas */
.site-header .custom-logo {
  max-height: 52px;
  width: auto !important;
  height: auto !important;
}
.header-t { padding-top: 4px !important; padding-bottom: 4px !important; }
.header-b { padding-top: 8px !important; padding-bottom: 8px !important; }

/* --- Header de vidrio oscuro en TODO el sitio --- */
.site-header {
  background: rgba(10, 18, 15, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
/* En el home flota sobre la foto del hero, más transparente */
body.home .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(10, 18, 15, 0.30);
}
body.admin-bar.home .site-header { top: 32px; }

/* Sin fondos ni bordes internos (mata la línea blanca) */
.header-holder,
.header-t,
.header-b,
.nav-holder,
.site-header .main-navigation,
.mobile-menu-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Textos e íconos legibles en blanco */
.site-header a,
.text-logo,
.phone-label,
.phone,
.phone a,
.social-networks a,
.header-t .fa-search,
.main-navigation ul > li > a {
  color: #fff !important;
}
/* Hover del menú con el acento */
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a {
  color: var(--cc-accent) !important;
}
/* Submenús desplegables con fondo oscuro legible */
.main-navigation ul ul {
  background: rgba(10, 18, 15, 0.95) !important;
}

/* Logo blanco transparente sobre el vidrio — SOLO el del header:
   el bloque site-logo dentro de contenido (p. ej. página de contacto)
   conserva su imagen normal. */
.site-header .custom-logo-link {
  display: inline-block;
  width: 132px;
  height: 50px;
  background: url('/wp-content/uploads/2022/08/logo-white-color-1.png') no-repeat left center;
  background-size: contain;
}
.site-header .custom-logo-link img { display: none; }

/* ============================================================
   HERO v2 — anular el centrado absoluto del tema padre
   y anclar el contenido abajo
   ============================================================ */
.cc-hero { min-height: 96vh; }
.cc-hero .form-holder.cc-hero-inner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  -webkit-transform: none !important;
  transform: none !important;
  margin: 0 auto;
  max-width: 860px;
  padding: 160px 5% 9vh;
}
@media (max-width: 768px) {
  .cc-hero { min-height: 78vh; }
  .cc-hero .form-holder.cc-hero-inner { padding-top: 120px; padding-bottom: 6vh; }
}

/* ============================================================
   AJUSTES HEADER v2.1 — teléfono centrado + lupa integrada
   ============================================================ */

/* Teléfono: pegado a la derecha y centrado verticalmente */
.header-b .container {
  display: flex;
  align-items: center;
}
.header-b .right {
  margin: 0 0 0 auto !important;
  text-align: right;
}
body.home .header-b .right .phone-label {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 1px;
}
body.home .header-b .right .tel-link { font-size: 22px; }

/* Lupa: botón limpio sin estilos heredados */
.header-t .search-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* En la home: lupa limpia, solo el ícono blanco */
body.home .header-t .search-btn .fa-search {
  color: #fff !important;
  font-size: 19px;
  background: transparent;
  border: 0;
  transition: color 0.25s ease, transform 0.25s ease;
}
body.home .header-t .search-btn:hover .fa-search {
  color: var(--cc-accent) !important;
  transform: scale(1.12);
}

/* ============================================================
   BUSCADOR DESPLEGABLE — baja una barrita elegante al pasar
   el mouse (o al hacer clic) y se puede escribir
   ============================================================ */
.header-t .form-section { position: relative; }

.header-t .form-section .header-search-modal {
  display: block !important;
  position: absolute !important;
  inset: auto !important;
  top: calc(100% + 14px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(380px, 86vw);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s;
  z-index: 120;
}
/* Se abre con hover, mientras escribes (focus) o con el clic del tema */
.header-t .form-section:hover .header-search-modal,
.header-t .form-section:focus-within .header-search-modal,
body.showing-search-modal .header-t .header-search-modal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Formulario interno: campo + botón dorado */
.header-search-modal .search-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  background: transparent;
}
.header-search-modal .search-form label { flex: 1; margin: 0; }
.header-search-modal .search-field {
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.95rem;
  background: #fafafa;
}
.header-search-modal .search-field:focus {
  outline: none;
  border-color: var(--cc-accent);
  background: #fff;
}
.header-search-modal .search-submit {
  border: 0;
  border-radius: 8px;
  padding: 11px 18px;
  background: var(--cc-accent);
  color: #1a1a1a;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease;
}
.header-search-modal .search-submit:hover { background: var(--cc-accent-dark); }
/* Ocultar la X de cerrar del modal original */
.header-search-modal .btn-form-close { display: none !important; }

/* Menú más compacto (el padre usa 19/21px y engorda la barra) */
.main-navigation ul li a { padding: 12px 0 14px; }
/* Header superior más apretado */
.header-t { padding-top: 2px !important; padding-bottom: 2px !important; }

/* ============================================================
   PAQUETES MÁS VENDIDOS — tarjetas premium (sección 1)
   ============================================================ */

/* Re-entonar el acento del plugin companion (verde plantilla → dorado) */
body { --tac-primary-color: var(--cc-accent); }

/* Vidrio denso: la sección de paquetes es el panel de mayor peso del home.
   El fondo real vive en el body (mundo líquido, al final de esta hoja). */
.popular-destination {
  padding: 96px 0 88px !important;
  background: rgba(16, 33, 25, 0.52) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
.popular-destination .section-header .section-title {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.popular-destination .section-header .section-content p { color: rgba(223, 232, 223, 0.78); }

/* Tarjeta: esquinas suaves, sombra en capas, listo para tilt */
.popular-destination .owl-carousel .item .img-holder {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15,30,22,0.10);
  transition: transform 0.18s ease-out, box-shadow 0.4s ease;
  transform-style: preserve-3d;
}
.popular-destination .owl-carousel .item .img-holder:hover {
  box-shadow: 0 26px 60px rgba(15,30,22,0.22);
}
.popular-destination .img-holder img {
  border-radius: 0 !important;
  transition: transform 5s ease;
}
.popular-destination .img-holder:hover img { transform: scale(1.08); }

/* El tema pide un recorte cuadrado de 630x630. Cuando la foto original no da
   esa altura, WordPress sirve un recorte más bajo y la tarjeta quedaba con un
   hueco blanco debajo. Con esto el marco manda: la foto lo llena siempre. */
.popular-destination .owl-carousel .item .img-holder,
.popular-destination .grid .col .img-holder {
  aspect-ratio: 1 / 1;
}
.popular-destination .owl-carousel .item .img-holder > a,
.popular-destination .grid .col .img-holder > a {
  display: block;
  width: 100%;
  height: 100%;
}
.popular-destination .owl-carousel .item .img-holder img,
.popular-destination .grid .col .img-holder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay del texto: degradado más alto y elegante */
.popular-destination .grid .col .text-holder {
  padding: 96px 22px 20px !important;
  background: linear-gradient(to top,
    rgba(8,16,12,0.85) 0%,
    rgba(8,16,12,0.35) 55%,
    rgba(8,16,12,0) 100%) !important;
}
.popular-destination .grid .col .text-holder .title { font-size: 21px; }
.popular-destination .grid .col .text-holder .title a { color: #fff; }

/* Duración como pill de vidrio (firma visual del header) */
.popular-destination .meta-info { margin-top: 10px; }
.popular-destination .meta-info .destination-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  padding: 5px 13px;
  border-radius: 999px;
}

/* Precio (si existe): pill de vidrio arriba-izquierda, sin banderín */
.popular-destination .grid .col .price-holder {
  top: 14px !important;
  left: 14px !important;
  background: rgba(8,16,12,0.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px !important;
  font-size: 15px !important;
}
.popular-destination .grid .col .price-holder > span { padding: 4px 14px !important; }
.popular-destination .grid .col .price-holder > span:before,
.popular-destination .grid .col .price-holder > span:after,
.popular-destination .grid .col .price-holder:after { display: none !important; }

/* Puntos del carrusel: dorado activo alargado */
.popular-destination .owl-dots { margin-top: 26px; }
.popular-destination .owl-dots .owl-dot span { background: #ddd6c6; transition: all 0.3s ease; }
.popular-destination .owl-dots .owl-dot.active span {
  background: var(--cc-accent);
  width: 24px;
  border-radius: 99px;
}

/* ============================================================
   PAQUETES v2 — carrusel único (override hijo sections/popular.php)
   Una sola columna a lo ancho; el carrusel reparte 3 tarjetas iguales.
   ============================================================ */
.popular-destination .grid .cc-col-carrusel,
.popular-destination .grid .cc-col-carrusel:first-child {
  float: none;
  width: 100%;
}
.popular-destination .grid { margin-bottom: 30px; }

/* Flechas de vidrio, mismas que el portafolio */
.popular-destination .owl-nav {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.popular-destination .owl-nav:before,
.popular-destination .owl-nav:after,
.popular-destination .owl-nav button:before,
.popular-destination .owl-nav button:after {
  display: none !important;
  content: none !important;
}
.popular-destination .owl-nav button.owl-prev,
.popular-destination .owl-nav button.owl-next {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  border-radius: 50%;
  background: rgba(8,16,12,0.45) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.30) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease;
  z-index: 5;
}
.popular-destination .owl-nav button.owl-prev { left: -10px !important; right: auto !important; }
.popular-destination .owl-nav button.owl-next { right: -10px !important; left: auto !important; }
.popular-destination .owl-nav button.owl-prev:hover,
.popular-destination .owl-nav button.owl-next:hover {
  background: var(--cc-accent) !important;
  color: #1a1a1a !important;
}

/* Ajustes sobre fondo oscuro: sombras reales, puntos y botón legibles */
.popular-destination .owl-carousel .item .img-holder {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.popular-destination .owl-carousel .item .img-holder:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}
.popular-destination .owl-dots .owl-dot span { background: rgba(255, 255, 255, 0.28); }
.popular-destination .btn-holder .btn-more {
  color: #fff !important;
  border-color: rgba(201, 168, 76, 0.65) !important;
  background: transparent !important;
}
.popular-destination .btn-holder .btn-more:hover,
.popular-destination .btn-holder .btn-more:focus {
  color: #1a1a1a !important;
  background: var(--cc-accent) !important;
  border-color: var(--cc-accent) !important;
}

/* ============================================================
   PORTAFOLIO (activities) — carrusel limpio con flechas vidrio
   ============================================================ */

/* Tarjetas coherentes con las de paquetes */
.activities .owl-carousel .item {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transition: box-shadow 0.4s ease;
}
.activities .owl-carousel .item:hover { box-shadow: 0 24px 54px rgba(0,0,0,0.28); }
.activities .owl-carousel .item img { transition: transform 5s ease; }
.activities .owl-carousel .item:hover img { transform: scale(1.07); }

/* Flechas: círculos de vidrio a los lados, centrados verticalmente */
.activities .owl-nav { margin: 0 !important; }
.activities .owl-nav button.owl-prev,
.activities .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  margin: 0 !important;
  border-radius: 50%;
  background: rgba(8,16,12,0.45) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.30) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  z-index: 5;
}
.activities .owl-nav button.owl-prev { left: -10px; }
.activities .owl-nav button.owl-next { right: -10px; }
.activities .owl-nav button.owl-prev:hover,
.activities .owl-nav button.owl-next:hover {
  background: var(--cc-accent) !important;
  color: #1a1a1a !important;
  transform: translateY(-50%) scale(1.08);
}
/* Limpiar restos del estilo original de flechas (círculos svg) */
.activities .owl-nav button svg circle { display: none; }

/* ============================================================
   FIX flechas portafolio v2: liberar los botones del contenedor
   del plugin (estaba posicionado abajo-centro y los apilaba)
   ============================================================ */
.activities .owl-nav {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}
/* Sin divisor ni decoraciones del estilo original */
.activities .owl-nav:before,
.activities .owl-nav:after,
.activities .owl-nav button:before,
.activities .owl-nav button:after {
  display: none !important;
  content: none !important;
}
.activities .owl-nav button.owl-prev,
.activities .owl-nav button.owl-next {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 52px !important;
  height: 52px !important;
}
.activities .owl-nav button.owl-prev {
  left: -10px !important;
  right: auto !important;
}
.activities .owl-nav button.owl-next {
  right: -10px !important;
  left: auto !important;
}
.activities .owl-nav button.owl-prev:hover,
.activities .owl-nav button.owl-next:hover {
  transform: translateY(-50%) scale(1.08) !important;
}
/* La flecha SVG hereda el color del botón (blanco / dorado al hover) */
.activities .owl-nav button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* ============================================================
   FONDO PARALLAX DEL PORTAFOLIO — foto colombiana
   Para cambiar la foto de temporada: reemplaza SOLO la url
   de --cc-portafolio-bg (ruta relativa, sin dominio).
   ============================================================ */
:root {
  --cc-portafolio-bg: url('/wp-content/uploads/2023/09/lugares_para_visitar_en_cartagena_b8e31cc70e-scaled.jpg');
}
.activities:after {
  background-image: var(--cc-portafolio-bg) !important;
  background-position: center 30% !important;
}
/* Tinte verde profundo de marca (antes negro plano) con degradado */
.activities:before {
  background: linear-gradient(180deg,
    rgba(8,18,14,0.86) 0%,
    rgba(8,18,14,0.62) 45%,
    rgba(8,18,14,0.72) 100%) !important;
}
/* El fondo del tema padre tenía una altura fija que solo cubría la primera
   parte de la sección. Al añadir el segundo movimiento, Medellín quedaba
   sobre blanco y su título (blanco) se volvía ilegible. Lo estiramos a
   TODA la sección para que las dos ramas vivan en el mismo mundo. */
.activities:before,
.activities:after {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

/* ============================================================
   PORTAFOLIO UNIFICADO — "Dos escalas"
   ------------------------------------------------------------
   Movimiento 1 (país): mosaico asimétrico. El tamaño de cada
   región refleja cuántos paquetes tiene → la composición es el dato.
   Movimiento 2 (ciudad): fila más densa y cercana. Se siente
   como bajar del mapa a la calle.
   ============================================================ */
.cc-pf-mov {
  position: relative;
  z-index: 3;
}
.cc-pf-mov--ciudad {
  margin-top: clamp(56px, 7vw, 100px);
}

/* ---------- Encabezado de cada movimiento ---------- */
.cc-pf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.cc-pf-head-main { min-width: 0; }
.cc-pf-title {
  margin: 0;
  color: #fff;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.40);
}
.cc-pf-meta {
  margin: 8px 0 0;
  color: #D6E0D9;
  font-size: 0.95rem;
  line-height: 1.5;
}
.cc-pf-meta strong {
  color: var(--cc-accent);
  font-weight: 700;
}
.cc-pf-more {
  flex: none;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(201,168,76,0.55);
  transition: color .25s ease, border-color .25s ease;
}
.cc-pf-more:hover,
.cc-pf-more:focus-visible {
  color: var(--cc-accent);
  border-bottom-color: var(--cc-accent);
}

/* ---------- Mosaico del país (5 regiones, asimétrico) ---------- */
.cc-pf-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 16px;
  height: clamp(470px, 47vw, 640px);
}
.cc-pf-mosaic .cc-tile:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; }
.cc-pf-mosaic .cc-tile:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.cc-pf-mosaic .cc-tile:nth-child(3) { grid-column: 1 / 5;  grid-row: 2; }
.cc-pf-mosaic .cc-tile:nth-child(4) { grid-column: 5 / 9;  grid-row: 2; }
.cc-pf-mosaic .cc-tile:nth-child(5) { grid-column: 9 / 13; grid-row: 2; }

/* Las DOS ramas usan el mismo mosaico: ninguna pesa más que la otra. */

/* ---------- Tarjeta base ---------- */
.cc-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none;
  isolation: isolate;
  background: var(--cc-deep-dark);
  box-shadow: 0 10px 28px rgba(8,18,14,0.28), 0 2px 6px rgba(8,18,14,0.20);
  transition: transform .45s cubic-bezier(0.16,1,0.3,1),
              box-shadow .45s cubic-bezier(0.16,1,0.3,1);
}
.cc-tile:hover,
.cc-tile:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(8,18,14,0.42), 0 4px 10px rgba(8,18,14,0.26);
}
.cc-tile:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 3px;
}
.cc-tile-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.cc-tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(6,14,11,0.88) 0%,
    rgba(6,14,11,0.52) 38%,
    rgba(6,14,11,0.10) 72%,
    rgba(6,14,11,0.02) 100%);
  transition: background .45s ease;
}
.cc-tile:hover .cc-tile-scrim,
.cc-tile:focus-visible .cc-tile-scrim {
  background: linear-gradient(to top,
    rgba(6,14,11,0.92) 0%,
    rgba(6,14,11,0.60) 46%,
    rgba(6,14,11,0.18) 78%,
    rgba(6,14,11,0.06) 100%);
}
.cc-tile-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 20px;
}
.cc-tile-name {
  display: block;
  color: #fff;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.50);
}
.cc-tile-rule {
  display: block;
  width: 44px;
  height: 2px;
  margin: 12px 0 10px;
  background: var(--cc-accent);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(0.16,1,0.3,1);
}
.cc-tile:hover .cc-tile-rule,
.cc-tile:focus-visible .cc-tile-rule { transform: scaleX(1); }
.cc-tile-count {
  display: block;
  color: #E8DCB4;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}

/* Escala tipográfica: dentro de CADA mosaico, la pieza líder manda.
   Se aplica igual a las dos ramas. */
.cc-pf-mosaic .cc-tile-name { font-size: clamp(1.25rem, 1.7vw, 1.65rem); }
.cc-pf-mosaic .cc-tile:nth-child(1) .cc-tile-name { font-size: clamp(1.7rem, 2.9vw, 2.6rem); }
.cc-pf-mosaic .cc-tile:nth-child(1) .cc-tile-body { padding: 30px 28px; }

/* ============================================================
   MOVIMIENTO
   Momento protagonista: el mosaico se DESCUBRE de abajo hacia
   arriba, como si se fueran colocando las piezas de un mapa.
   La ciudad entra después desde una escala menor: se siente
   como acercarse. El contenido es visible por defecto: si el
   script falla, no se esconde nada.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .cc-tile-img { transition: transform .9s cubic-bezier(0.16,1,0.3,1); }
  .cc-tile:hover .cc-tile-img,
  .cc-tile:focus-visible .cc-tile-img { transform: scale(1.07); }

  /* Estado inicial: solo cuando el script confirma que puede animar. */
  .cc-reveal-ready .cc-tile {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(12px);
    will-change: clip-path, transform, opacity;
  }
  .cc-reveal-ready .cc-tile-name,
  .cc-reveal-ready .cc-tile-count {
    opacity: 0;
    transform: translateY(14px);
  }
  .cc-reveal-ready .cc-tile-rule { transform: scaleX(0); }

  /* Llegada: escalonada como lista, tope 4 × 72 ms = 288 ms. */
  .cc-reveal-ready.is-in .cc-tile {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
    transition:
      clip-path .64s cubic-bezier(0.16,1,0.3,1) calc(var(--cc-i, 0) * 72ms),
      transform .64s cubic-bezier(0.16,1,0.3,1) calc(var(--cc-i, 0) * 72ms),
      opacity .34s linear calc(var(--cc-i, 0) * 72ms);
  }
  .cc-reveal-ready.is-in .cc-tile-name,
  .cc-reveal-ready.is-in .cc-tile-count {
    opacity: 1;
    transform: none;
    transition:
      transform .58s cubic-bezier(0.16,1,0.3,1) calc(var(--cc-i, 0) * 72ms + 170ms),
      opacity .46s linear calc(var(--cc-i, 0) * 72ms + 170ms);
  }
  .cc-reveal-ready.is-in .cc-tile-rule {
    transform: scaleX(0.28);
    transition: transform .5s cubic-bezier(0.16,1,0.3,1) calc(var(--cc-i, 0) * 72ms + 260ms);
  }
  .cc-reveal-ready.is-in .cc-tile { will-change: auto; }

  /* El encabezado abre el movimiento, justo antes de las piezas. */
  .cc-reveal-ready .cc-pf-head { opacity: 0; transform: translateY(14px); }
  .cc-reveal-ready.is-in .cc-pf-head {
    opacity: 1;
    transform: none;
    transition: transform .6s cubic-bezier(0.16,1,0.3,1), opacity .45s linear;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cc-pf-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: none;
    height: auto;
    gap: 14px;
  }
  /* Hay que repetir cada :nth-child porque las reglas de escritorio los
     colocan así y pesan más que el selector genérico .cc-tile: si no se
     nombran uno por uno, conservan su posición de escritorio y la rejilla
     se queda en 12 columnas diminutas. */
  .cc-pf-mosaic .cc-tile,
  .cc-pf-mosaic .cc-tile:nth-child(2),
  .cc-pf-mosaic .cc-tile:nth-child(3),
  .cc-pf-mosaic .cc-tile:nth-child(4) { grid-column: span 3; grid-row: auto; aspect-ratio: 4 / 3; }
  .cc-pf-mosaic .cc-tile:nth-child(1) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .cc-pf-mosaic .cc-tile:nth-child(5) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 7; }
}
@media (max-width: 680px) {
  .cc-pf-head { gap: 14px; }
  .cc-pf-mosaic { grid-template-columns: 1fr; }
  .cc-pf-mosaic .cc-tile,
  .cc-pf-mosaic .cc-tile:nth-child(1),
  .cc-pf-mosaic .cc-tile:nth-child(2),
  .cc-pf-mosaic .cc-tile:nth-child(3),
  .cc-pf-mosaic .cc-tile:nth-child(4),
  .cc-pf-mosaic .cc-tile:nth-child(5) { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; }
  .cc-pf-mosaic .cc-tile:nth-child(1) .cc-tile-name { font-size: 1.85rem; }
  .cc-pf-mosaic .cc-tile:nth-child(1) .cc-tile-body { padding: 22px 20px; }
}

/* ============================================================
   PÁGINA DE EXPERIENCIAS  (template-experiencias.php)
   ============================================================ */
html { scroll-behavior: smooth; }

.cc-exp { background: #faf8f4; color: #24302a; }
.cc-exp .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* --- Hero / encabezado de la página --- */
.cc-exp-hero {
  background: linear-gradient(150deg, var(--cc-deep) 0%, var(--cc-deep-dark) 60%, #0b1812 100%);
  color: #fff;
  padding: 96px 0 60px;
  text-align: center;
}
.cc-exp-kicker {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12px;
  color: var(--cc-accent);
  margin: 0 0 14px;
  font-weight: 600;
}
.cc-exp-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  margin: 0 0 18px;
  color: #fff;
}
.cc-exp-intro {
  max-width: 680px;
  margin: 0 auto 30px;
  font-size: 1.06rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}
.cc-exp-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cc-exp-chip {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid rgba(201,168,76,0.55);
  border-radius: 999px;
  color: #fff;
  font-size: .9rem;
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.cc-exp-chip:hover {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #1a1a1a;
}

/* --- Sección por categoría --- */
.cc-exp-cat { scroll-margin-top: 84px; padding-bottom: 46px; }

.cc-exp-banda {
  position: relative;
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 55%;
  margin-bottom: 34px;
}
.cc-exp-banda::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,24,18,0.86) 0%, rgba(11,24,18,0.32) 55%, rgba(11,24,18,0.15) 100%);
}
.cc-exp-banda--marca {
  background: linear-gradient(150deg, var(--cc-deep) 0%, var(--cc-deep-dark) 58%, #0b1812 100%);
}
.cc-exp-banda--marca::after {
  background: radial-gradient(120% 100% at 50% 120%, rgba(201,168,76,0.22) 0%, rgba(8,18,14,0) 62%);
}
.cc-exp-banda-inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 26px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.cc-exp-cat-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.3vw, 2.4rem);
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.cc-exp-count {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cc-accent);
  font-weight: 600;
}

/* --- Rejilla de tarjetas --- */
.cc-exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* --- Tarjeta (acordeón <details>) --- */
.cc-exp-card {
  background: #fff;
  border: 1px solid #ece6da;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(30,61,47,0.06);
  overflow: hidden;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.cc-exp-card:hover {
  box-shadow: 0 18px 40px rgba(30,61,47,0.12);
  transform: translateY(-3px);
  border-color: #e0d6c2;
}
.cc-exp-card[open] { border-color: var(--cc-accent); }

.cc-exp-card-head {
  list-style: none;
  cursor: pointer;
  padding: 22px 22px 18px;
  display: block;
}
.cc-exp-card-head::-webkit-details-marker { display: none; }

.cc-exp-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.cc-exp-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.24rem;
  line-height: 1.2;
  margin: 0;
  color: var(--cc-deep);
}
.cc-exp-star { color: var(--cc-accent); }
.cc-exp-dur {
  flex: none;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cc-accent-dark);
  background: rgba(201,168,76,0.12);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.cc-exp-card-desc {
  margin: 0;
  color: #4c5a52;
  font-size: .95rem;
  line-height: 1.6;
}
.cc-exp-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cc-accent-dark);
}
.cc-exp-more-i {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1px solid var(--cc-accent);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  transition: transform .3s, background .3s, color .3s;
}
.cc-exp-card[open] .cc-exp-more-i { transform: rotate(45deg); background: var(--cc-accent); color: #fff; }
.cc-exp-card[open] .cc-exp-more { color: var(--cc-deep); }

.cc-exp-card-body {
  padding: 2px 22px 22px;
  border-top: 1px solid #f0ece3;
  margin-top: 2px;
}
.cc-exp-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #efe9dd; }
.cc-exp-row:last-of-type { border-bottom: none; }
.cc-exp-lbl {
  flex: 0 0 92px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  padding-top: 2px;
}
.cc-exp-row--inc  .cc-exp-lbl { color: #2e7d5b; }
.cc-exp-row--no   .cc-exp-lbl { color: #b04a3f; }
.cc-exp-row--disp .cc-exp-lbl { color: #7a6a3e; }
.cc-exp-val { font-size: .92rem; line-height: 1.55; color: #3c4842; }

.cc-exp-card-cta {
  display: inline-block;
  margin-top: 18px;
  color: var(--cc-accent-dark);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}
.cc-exp-card-cta:hover { color: var(--cc-deep); }

/* --- Tarjeta de SEGMENTO (Romance / Salud / Corporativo) --- */
.cc-exp-card--seg {
  padding: 26px 24px;
  border-top: 3px solid var(--cc-accent);
  cursor: default;
}
.cc-exp-card--seg:hover { transform: none; }
.cc-exp-card--seg .cc-exp-card-title { font-size: 1.4rem; margin-bottom: 12px; }
.cc-exp-tags {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cc-exp-tags li {
  font-size: .82rem;
  color: var(--cc-deep);
  background: #f3efe4;
  border: 1px solid #e7dfcc;
  border-radius: 999px;
  padding: 6px 13px;
}

/* --- CTA final --- */
.cc-exp-final {
  background: linear-gradient(150deg, var(--cc-deep) 0%, var(--cc-deep-dark) 70%, #0b1812 100%);
  color: #fff;
  text-align: center;
  padding: 66px 0;
  margin-top: 20px;
}
.cc-exp-final h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: #fff;
  margin: 0 0 12px;
}
.cc-exp-final p { max-width: 560px; margin: 0 auto 26px; color: rgba(255,255,255,0.82); line-height: 1.7; }
.cc-exp-final-btn {
  display: inline-block;
  background: var(--cc-accent);
  color: #17130a;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s, transform .2s;
}
.cc-exp-final-btn:hover { background: #d8b95a; transform: translateY(-2px); }

@media (max-width: 640px) {
  .cc-exp-hero { padding: 74px 0 48px; }
  .cc-exp-grid { grid-template-columns: 1fr; }
  .cc-exp-banda { min-height: 160px; }
}

/* ============================================================
   UNIFICACIÓN GLOBAL — todas las páginas interiores con el ADN
   (paleta dorado + verde selva, Playfair, sin barra lateral)
   ============================================================ */

/* --- Barra superior (redes + buscador): verde selva en vez de verde brillante --- */
#masthead .header-t { background: var(--cc-deep) !important; }
#masthead .header-t a,
#masthead .header-t .social-networks a,
#masthead .header-t .search-btn,
#masthead .header-t .fa,
#masthead .header-t .fab { color: #fff !important; }
#masthead .header-t .social-networks a:hover,
#masthead .header-t .search-btn:hover,
#masthead .header-t .search-btn:hover .fa { color: var(--cc-accent) !important; }

/* --- Teléfono del header: blanco sobre el header cristal, rótulo dorado --- */
#masthead .phone,
#masthead .phone a { color: #fff !important; }
#masthead .phone-label { color: var(--cc-accent) !important; }

/* --- Breadcrumb (#crumbs): discreto y con acentos de marca --- */
#crumbs { font-size: .82rem; letter-spacing: .02em; color: #8a8578; }
#crumbs a { color: var(--cc-accent-dark); text-decoration: none; transition: color .2s; }
#crumbs a:hover { color: var(--cc-deep); }
#crumbs span[itemprop="name"] { color: inherit; }

/* --- Quitar la barra lateral de blog en TODO el sitio (no toca el footer ni la reserva WTE) --- */
.site-content aside#secondary,
.site-content .widget-area { display: none !important; }
.site-content .content-area,
.site-content .trip-content-area,
.site-content #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.site-content .row { display: block !important; }

/* --- Título de página (.page-header / .page-title) al estilo premium --- */
.page-header {
  border: 0 !important;
  text-align: left;
  padding: 0 !important;
  margin: 0 0 34px !important;
  background: none !important;
}
.page-title,
.site-main .entry-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--cc-deep) !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 4.2vw, 2.9rem) !important;
  line-height: 1.1 !important;
  position: relative;
  padding-bottom: 18px;
}
.page-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 64px; height: 3px;
  background: var(--cc-accent);
}

/* --- Aire y tipografía del contenido interior --- */
.page:not(.home) #content.site-content,
.single #content.site-content,
.archive #content.site-content,
.search #content.site-content,
.blog #content.site-content,
.error404 #content.site-content { padding-top: 52px; padding-bottom: 72px; }

.entry-content { color: #3c4842; line-height: 1.75; font-size: 1.02rem; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cc-deep);
}
.entry-content a { color: var(--cc-accent-dark); text-decoration: underline; transition: color .2s; }
.entry-content a:hover { color: var(--cc-deep); }
.entry-content strong { color: var(--cc-deep); }
.entry-content blockquote {
  border-left: 4px solid var(--cc-accent);
  background: #f7f3ea;
  margin: 24px 0; padding: 16px 22px;
  border-radius: 0 10px 10px 0;
}

/* --- Formularios (contacto / comentarios): paleta de marca --- */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content input[type="search"],
.entry-content textarea,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
#comments input[type="text"], #comments input[type="email"], #comments textarea {
  width: 100%;
  border: 1px solid #e0d9c9 !important;
  border-radius: 10px !important;
  padding: 12px 15px !important;
  background: #fff !important;
  font-size: .98rem;
  transition: border-color .2s, box-shadow .2s;
}
.entry-content input:focus, .entry-content textarea:focus,
.wpcf7 input:focus, .wpcf7 textarea:focus,
#comments input:focus, #comments textarea:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.16) !important;
  outline: none !important;
}
.entry-content input[type="submit"],
.entry-content button[type="submit"],
.entry-content .wp-block-button__link,
.wpcf7-submit,
#comments input[type="submit"] {
  background: var(--cc-accent) !important;
  color: #17130a !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 34px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s, transform .2s;
  width: auto;
}
.entry-content input[type="submit"]:hover,
.entry-content button[type="submit"]:hover,
.entry-content .wp-block-button__link:hover,
.wpcf7-submit:hover,
#comments input[type="submit"]:hover {
  background: var(--cc-accent-dark) !important;
  transform: translateY(-2px);
}

/* --- Botones y paginación genéricos --- */
.site-main .button, .site-main .btn,
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--cc-accent) !important;
  color: #17130a !important;
  border-color: var(--cc-accent) !important;
}
.pagination a.page-numbers, .nav-links a.page-numbers { color: var(--cc-deep); }
.pagination a.page-numbers:hover, .nav-links a.page-numbers:hover {
  background: var(--cc-accent) !important; color: #17130a !important;
}

/* ============================================================
   FICHA DE TOUR  (single-trip)  —  ADN Colombia Conexión
   La página se arma con "hooks"; nosotros solo la vestimos y
   reordenamos con CSS. La mecánica de reserva (JS) NO se toca.
   Estructura:
     .wpte-gallery-wrapper            galería (arriba, ancho completo)
     article.trip-post
        ├ header.entry-header         título
        ├ div.entry-content           descripción + pestañas
        └ div.wte-process-layout      reserva / cotización
     .wte-related-trips-wrapper       tours relacionados
   ============================================================ */

/* --- 1. GALERÍA como hero de revista --- */
.single-trip .wpte-gallery-wrapper,
.wpte-gallery-container {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px -22px rgba(21, 44, 34, 0.5);
  margin-bottom: 40px;
}
.single-trip .wpte-gallery-wrapper img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- 2. TÍTULO de la ficha --- */
.trip-post .entry-header { margin-bottom: 8px; }
.trip-post .entry-header .entry-title,
.trip-post .entry-header h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--cc-deep) !important;
  font-weight: 600 !important;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem) !important;
  line-height: 1.08 !important;
  margin: 0 0 10px !important;
}

/* --- 3. SIN MOTOR DE RESERVAS ---
   Por decisión del cliente, la ficha NO usa carrito/fechas/paquetes: se vende
   por cotización. Escondemos todo el widget de reserva y dejamos la ficha a
   una sola columna (vitrina). Reversible: borra esta regla y vuelve a salir. */
.trip-post .wte-process-layout,
.trip-post .wte-popup-booking-wrapper { display: none !important; }
/* Contenido a una sola columna, centrado y legible. */
article.trip-post { max-width: 900px; margin-left: auto; margin-right: auto; }

/* --- 4. PESTAÑAS (Descripción general | Costo) como píldoras --- */
.trip-post .nav-tab-wrapper { border: 0 !important; margin-bottom: 26px; }
.trip-post .tab-inner-wrapper {
  display: inline-flex;
  gap: 6px;
  background: #f2ede1;
  padding: 6px;
  border-radius: 999px;
}
.trip-post .tab-anchor-wrapper { margin: 0 !important; border: 0 !important; }
.trip-post .tab-anchor-wrapper a,
.trip-post .nav-tab-wrapper a {
  border: 0 !important;
  background: transparent !important;
  color: var(--cc-deep) !important;
  font-weight: 600;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  transition: background .2s, color .2s;
}
.trip-post .tab-anchor-wrapper.active a,
.trip-post .nav-tab-wrapper a.active,
.trip-post .nav-tab-wrapper .active > a {
  background: var(--cc-deep) !important;
  color: #fff !important;
}

/* --- 5. CONTENIDO: encabezados y listas Incluye / No incluye --- */
.trip-post .entry-content h2,
.trip-post .entry-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cc-deep);
  font-size: 1.5rem;
  margin: 30px 0 14px;
}
.trip-post .entry-content ul { list-style: none; margin: 0 0 20px; padding: 0; }
.trip-post .entry-content ul li {
  position: relative;
  padding: 6px 0 6px 30px;
  line-height: 1.6;
  border-bottom: 1px solid #efeadd;
}
.trip-post .entry-content ul li::before {
  content: "✓";
  position: absolute; left: 0; top: 6px;
  color: #2e7d52; font-weight: 700;
}

/* --- 6. BLOQUE DE COTIZACIÓN (reemplaza al motor de reservas) --- */
.cc-cotiza {
  background: linear-gradient(150deg, var(--cc-deep) 0%, var(--cc-deep-dark) 100%);
  color: #f3efe4;
  border-radius: 16px;
  padding: 34px 32px;
  margin: 40px 0;
  text-align: center;
  box-shadow: 0 18px 46px -24px rgba(21, 44, 34, 0.6);
}
.cc-cotiza h3 {
  font-family: 'Playfair Display', Georgia, serif;
  /* !important porque el bloque queda dentro de .entry-content, cuya regla
     .entry-content h3 (verde) es más específica y si no, tapa este blanco. */
  color: #fff !important;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 8px;
}
.cc-cotiza p { color: #d9e4dc; margin: 0 0 22px; font-size: 1.02rem; }
.cc-cotiza-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cc-cotiza-btn {
  display: inline-block;
  background: var(--cc-accent);
  color: #17130a !important;
  text-decoration: none !important;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: 999px;
  transition: background .2s, transform .2s;
}
.cc-cotiza-btn:hover { background: var(--cc-accent-dark); transform: translateY(-2px); }
.cc-cotiza-btn--wa {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.5);
}
.cc-cotiza-btn--wa:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* --- 7. TOURS RELACIONADOS con el ADN del portafolio --- */
.wte-related-trips-wrapper { margin-top: 60px; }
.wte-related-trips__heading,
.wte-related-trips-wrapper h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cc-deep);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 28px;
}
.wte-related-trips .category-trips-single-inner-wrap {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px -20px rgba(21, 44, 34, 0.5);
  transition: transform .25s, box-shadow .25s;
}
.wte-related-trips .category-trips-single-inner-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -20px rgba(21, 44, 34, 0.6);
}
.wte-related-trips .category-trip-content-wrap a { color: var(--cc-deep); }
.wte-related-trips .category-trip-content-wrap a:hover { color: var(--cc-accent-dark); }

/* --- 8. Responsive: en móvil, la reserva va debajo y a lo ancho --- */
@media (max-width: 999px) {
  .wte-process-layout.wte-popup-booking-wrapper { margin-top: 30px; }
}

/* ============================================================
   HUB UNIFICADO  (página Experiencias = Destinos + Medellín)
   ============================================================ */

/* --- Selector de ramas: dos tarjetas grandes --- */
.cc-hub-branches { margin: 8px 0 20px; }
.cc-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.cc-hub-branch {
  position: relative;
  display: block;
  min-height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none !important;
  box-shadow: 0 16px 44px -22px rgba(21, 44, 34, 0.55);
  transition: transform .25s, box-shadow .25s;
}
.cc-hub-branch:hover { transform: translateY(-5px); box-shadow: 0 26px 54px -22px rgba(21, 44, 34, 0.65); }
.cc-hub-branch-ov {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,44,34,0.15) 0%, rgba(21,44,34,0.82) 100%);
}
.cc-hub-branch-txt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 4px;
}
.cc-hub-branch-k { color: var(--cc-accent); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cc-hub-branch-t { color: #fff; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.05; }
.cc-hub-branch-d { color: #e7efe8; font-size: .98rem; }

/* --- Sección Nacionales: sub-encabezado de región --- */
.cc-dest-region { margin: 40px 0 0; }
.cc-dest-region-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cc-deep);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 18px;
  padding-bottom: 12px;
  position: relative;
}
.cc-dest-region-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 3px; background: var(--cc-accent);
}

/* --- Grid de paquetes por región --- */
.cc-dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 10px;
}
.cc-dest-card {
  position: relative;
  display: block;
  min-height: 200px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  background: linear-gradient(150deg, var(--cc-deep) 0%, var(--cc-deep-dark) 100%);
  box-shadow: 0 12px 30px -18px rgba(21, 44, 34, 0.55);
  transition: transform .22s, box-shadow .22s;
}
.cc-dest-card:hover { transform: translateY(-5px); box-shadow: 0 22px 42px -18px rgba(21, 44, 34, 0.65); }
.cc-dest-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .5s;
}
.cc-dest-card:hover .cc-dest-img { transform: scale(1.06); }
.cc-dest-ov {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,44,34,0.05) 30%, rgba(21,44,34,0.85) 100%);
}
.cc-dest-name {
  position: absolute; left: 0; right: 0; bottom: 34px;
  padding: 0 18px;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.15;
  text-transform: capitalize;
}
.cc-dest-go {
  position: absolute; left: 18px; bottom: 14px;
  color: var(--cc-accent);
  font-size: .86rem; font-weight: 700;
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s, transform .22s;
}

/* ============================================================
   TARJETA DE DESTINO SIN FOTO — versión de marca
   Estas tarjetas no llevan imagen a propósito: el nombre manda,
   como en las categorías de Medellín. Sin foto que rellene el
   espacio, la tarjeta se compone como una pieza tipográfica.
   ============================================================ */
.cc-dest-card--marca {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 128px;
  padding: 20px 20px 16px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 168, 76, 0.13), transparent 62%),
    linear-gradient(150deg, var(--cc-deep) 0%, var(--cc-deep-dark) 100%);
}
.cc-dest-card--marca:hover,
.cc-dest-card--marca:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(201, 168, 76, 0.65);
  box-shadow: 0 20px 38px -20px rgba(8, 18, 14, 0.75);
}

/* El nombre deja de flotar sobre la foto y pasa a mandar en la tarjeta */
.cc-dest-card--marca .cc-dest-name {
  position: static;
  padding: 0;
  font-size: 1.24rem;
  line-height: 1.22;
  text-wrap: balance;
}
/* Filete dorado: separa el nombre del pie sin cargar la pieza */
.cc-dest-card--marca .cc-dest-name::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 12px;
  background: var(--cc-accent);
  opacity: .75;
  transition: width .25s ease;
}
.cc-dest-card--marca:hover .cc-dest-name::after { width: 52px; }

/* "Ver detalles" siempre visible: sin foto, la tarjeta necesita su llamada */
.cc-dest-card--marca .cc-dest-go {
  position: static;
  opacity: .85;
  transform: none;
  margin-top: 14px;
  font-size: .8rem;
  letter-spacing: .02em;
}
.cc-dest-card--marca:hover .cc-dest-go { opacity: 1; }
.cc-dest-card--marca .cc-dest-go span {
  display: inline-block;
  transition: transform .25s ease;
}
.cc-dest-card--marca:hover .cc-dest-go span { transform: translateX(4px); }

/* Rejilla más compacta: sin fotos caben más por fila sin verse vacías */
.cc-dest-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cc-dest-card:hover .cc-dest-go { opacity: 1; transform: translateY(0); }

@media (max-width: 700px) {
  .cc-hub-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SELECTOR DE IDIOMA (Polylang)
   El ítem padre muestra la palabra "Idioma" en vez de la bandera
   del idioma actual; al desplegarlo aparecen Español e English
   (con bandera + nombre). La flechita ▾ la pone el tema en el <li>.
   ============================================================ */
.pll-parent-menu-item > a > img,
.pll-parent-menu-item > a > span { display: none !important; }
/* Respaldo + etiqueta bilingüe (la clase de idioma del <body> manda por ser más específica) */
.pll-parent-menu-item > a::before { content: "Idioma"; }
.cc-lang-en .pll-parent-menu-item > a::before { content: "Language"; }
/* resaltar el idioma activo dentro del desplegable */
.pll-parent-menu-item .sub-menu .current-lang > a { font-weight: 700; }
.pll-parent-menu-item .sub-menu img { vertical-align: middle; }

/* ============================================================
   FORMULARIO DE COTIZACIÓN POR TOUR (WTE enquiry) — ADN
   Lo dejamos (captura qué tour pregunta el cliente + envía correo);
   el bloque .cc-cotiza baja hasta aquí con su botón.
   ============================================================ */
#wte_enquiry_contact_form {
  max-width: 900px;
  margin: 8px auto 0;
  scroll-margin-top: 96px;   /* al bajar con el ancla, no queda bajo el header */
}
#wte_enquiry_contact_form .row-repeater { margin-bottom: 16px; }
#wte_enquiry_contact_form label {
  display: block;
  font-weight: 600;
  color: var(--cc-deep);
  margin-bottom: 6px;
}
#wte_enquiry_contact_form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
#wte_enquiry_contact_form select,
#wte_enquiry_contact_form textarea {
  width: 100%;
  border: 1px solid #e0d9c9 !important;
  border-radius: 10px !important;
  padding: 12px 15px !important;
  background: #fff !important;
  font-size: .98rem;
  transition: border-color .2s, box-shadow .2s;
}
#wte_enquiry_contact_form input:focus,
#wte_enquiry_contact_form select:focus,
#wte_enquiry_contact_form textarea:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.16) !important;
  outline: none !important;
}
#wte_enquiry_contact_form button[type="submit"],
#wte_enquiry_contact_form input[type="submit"],
#wte_enquiry_contact_form .send-email {
  background: var(--cc-accent) !important;
  color: #17130a !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
#wte_enquiry_contact_form button[type="submit"]:hover,
#wte_enquiry_contact_form input[type="submit"]:hover,
#wte_enquiry_contact_form .send-email:hover {
  background: var(--cc-accent-dark) !important;
  transform: translateY(-2px);
}

/* ============================================================
   CONTADOR DE EXPERIENCIAS — velo verde de marca sobre la foto
   (el plugin trae negro 50%; este gradiente da más cohesión y
   mejor contraste en la parte baja, donde van las cifras)
   ============================================================ */
.stats:after {
  background: linear-gradient(rgba(21, 44, 34, 0.55), rgba(21, 44, 34, 0.74));
}

/* ============================================================
   FORMULARIO DE CONTACTO DEL HOME  (sections/cc-contacto.php)
   ============================================================ */
.cc-contacto {
  padding: 90px 0;
  background: #faf8f4;
}
.cc-contacto .section-header {
  text-align: center;
  margin-bottom: 40px;
}
.cc-contacto-caja {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ece7dc;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 12px 40px rgba(30, 61, 47, 0.08);
}
.cc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}
.cc-campo {
  margin: 0 0 14px;
}
.cc-campo-ancho {
  grid-column: 1 / -1;
}
.cc-campo label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-deep);
  margin-bottom: 6px;
}
.cc-campo input,
.cc-campo textarea {
  width: 100%;
  border: 1px solid #d8d2c4;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #333;
  transition: border-color .2s, box-shadow .2s;
}
.cc-campo input:focus,
.cc-campo textarea:focus {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}
.cc-campo textarea {
  resize: vertical;
  min-height: 120px;
}
.cc-envio {
  margin: 8px 0 0;
  text-align: center;
}
.cc-boton {
  background: var(--cc-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 42px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.cc-boton:hover,
.cc-boton:focus {
  background: var(--cc-accent-dark);
  transform: translateY(-2px);
}
.cc-aviso {
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-weight: 600;
}
.cc-aviso-ok {
  background: #eef6ef;
  border: 1px solid #bfd9c4;
  color: var(--cc-deep);
}
.cc-aviso-error {
  background: #fbeeee;
  border: 1px solid #e3b8b8;
  color: #8a2f2f;
}
/* Honeypot: fuera de pantalla para humanos, visible para bots. */
.cc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .cc-contacto {
    padding: 60px 0;
  }
  .cc-contacto-caja {
    padding: 24px 18px;
  }
  .cc-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WHATSAPP (Click to Chat) — botón mínimo de marca
   El plugin pinta un squircle verde degradado de 50px; aquí lo
   convertimos en un círculo verde profundo con solo el glifo
   blanco y un pulso dorado que respira cada pocos segundos.
   ============================================================ */
#ht-ctc-chat .ctc_s_2 {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1E3D2F, #152C22);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 26px rgba(11, 22, 16, 0.38);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#ht-ctc-chat:hover .ctc_s_2 {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11, 22, 16, 0.5);
}
/* Solo el glifo: se apaga el squircle degradado del plugin */
#ht-ctc-chat svg {
  height: 30px !important;
  width: 30px !important;
}
#ht-ctc-chat svg use { fill: transparent !important; }
/* Pulso dorado: un anillo que respira, pausado si el usuario pide calma */
#ht-ctc-chat .ctc_s_2::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.7);
  opacity: 0;
  animation: cc-pulso-wa 3.4s ease-out infinite;
  pointer-events: none;
}
@keyframes cc-pulso-wa {
  0%   { transform: scale(1);    opacity: 0.7; }
  55%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #ht-ctc-chat .ctc_s_2::after { animation: none; }
}
/* La burbuja "Escríbenos ya": vidrio oscuro, flotando a la IZQUIERDA del
   botón para no taparlo (el círculo de 56px la dejaba desbordar) */
#ht-ctc-chat .ht-ctc-cta {
  position: absolute !important;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  white-space: nowrap;
  background: rgba(8, 16, 12, 0.82) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  border-radius: 999px !important;
  padding: 6px 16px !important;
}

/* ============================================================
   CTA DE COTIZACIÓN — reemplaza las tablas de tarifas en los trips
   ============================================================ */
.cc-cotiza {
  margin: 30px 0;
  padding: 26px 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(30, 61, 47, 0.06), rgba(201, 168, 76, 0.10));
  border: 1px solid rgba(201, 168, 76, 0.4);
  text-align: center;
}
.cc-cotiza p {
  margin: 0 0 14px;
  color: var(--cc-deep);
  font-weight: 500;
}
.cc-cotiza-btn {
  display: inline-block;
  padding: 12px 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #D4B45C, var(--cc-accent) 45%, var(--cc-accent-dark));
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 24px rgba(201, 168, 76, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  text-decoration: none !important;
}
.cc-cotiza-btn:hover,
.cc-cotiza-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(201, 168, 76, 0.48);
}

/* ============================================================
   MUNDO LÍQUIDO — fondo profundo único y secciones de vidrio
   El verde del topbar pasa a ser el suelo de toda la página;
   las secciones que eran blancas flotan como paneles translúcidos
   (liquid glass) sobre él. El contador (.stats) conserva su foto
   y el hero su carrusel: son las ventanas entre paneles.
   ============================================================ */
body {
  background:
    linear-gradient(172deg, rgba(20, 39, 29, 0.86) 0%, rgba(13, 26, 19, 0.90) 100%),
    url('../../uploads/2026/08/guayacanes-panoramica.jpg') center / cover,
    #152C22 !important;
  background-attachment: fixed !important;
}
/* El lienzo del tema se vuelve transparente en TODO el sitio:
   el mundo verde es el suelo de cada página. */
#page {
  background: transparent !important;
}

/* Marca en vez del azul de WP Travel Engine (#147DFE) y del rojo del tema.
   html:root gana en especificidad a los :root de los plugins. */
html:root {
  --primary-color: #C9A84C;
  --primary-color-rgb: 201, 168, 76;
  --secondary-color: #B8943E;
  --secondary-color-rgb: 184, 148, 62;
}

/* Páginas interiores: el contenido flota como panel esmerilado sobre el
   mundo verde (mismo material que la caja del formulario del home). */
body:not(.home) #primary {
  background: rgba(252, 251, 246, 0.95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 30px 70px rgba(0, 0, 0, 0.35);
  padding: 42px 46px;
  margin-top: 12px;
  margin-bottom: 70px;
}
body:not(.home) #secondary .widget {
  background: rgba(252, 251, 246, 0.95);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  body:not(.home) #primary { padding: 24px 18px; border-radius: 18px; }
}

/* Título de página y migas de pan sobre el verde */
body:not(.home) .page-header .page-title,
body:not(.home) .page-header h1 { color: #fff !important; }
body:not(.home) .page-header,
body:not(.home) .page-header span { color: rgba(232, 238, 232, 0.7); }
body:not(.home) .page-header a { color: rgba(232, 238, 232, 0.9); }
body:not(.home) .page-header a:hover { color: var(--cc-accent); }

/* Paneles de vidrio verde (portafolio y blog) */
.activities,
.blog-section {
  background: rgba(30, 61, 47, 0.40) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

/* El formulario es el único panel de otro color: vidrio dorado cálido */
.cc-contacto {
  background: rgba(201, 168, 76, 0.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

/* Geometría del vidrio: los paneles flotan con esquinas redondas sobre
   la foto fija del fondo, con borde fino y brillo superior de vidrio real */
.activities,
.popular-destination,
.blog-section,
.cc-contacto {
  position: relative;
  overflow: hidden; /* recorta fondos internos cuadrados en las esquinas redondas */
  width: min(1280px, calc(100% - 48px));
  margin: 30px auto;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -40px 80px rgba(0, 0, 0, 0.14),
    0 30px 70px rgba(0, 0, 0, 0.38);
}

/* Reflejo del vidrio: un barrido de luz diagonal + halo superior, como
   la luz resbalando por una ventana. Va debajo del contenido. */
.activities::before,
.popular-destination::before,
.blog-section::before,
.cc-contacto::before,
.cc-about-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.06) 20%,
      transparent 42%),
    radial-gradient(130% 70% at 50% -20%, rgba(255, 255, 255, 0.14), transparent 55%);
}
.activities > .container,
.popular-destination > .container,
.blog-section > .container,
.cc-contacto > .container {
  position: relative;
  z-index: 1;
}
.cc-about-panel { position: relative; }
.cc-about-panel > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .activities,
  .popular-destination,
  .blog-section,
  .cc-contacto {
    width: calc(100% - 20px);
    margin: 14px auto;
    border-radius: 20px;
  }
}

/* Tipografía sobre vidrio oscuro */
.activities .section-header .section-title,
.blog-section .section-header .section-title,
.cc-contacto .section-header .section-title {
  color: #fff;
}
.activities .section-header .section-content p,
.blog-section .section-header .section-content p {
  color: rgba(223, 232, 223, 0.78);
}
.cc-contacto .section-header .section-content p {
  color: rgba(240, 236, 220, 0.88);
}
/* Quiénes somos: la foto es la sección, el texto flota en vidrio */
.about.cc-about-vivo {
  position: relative;
  padding: 120px 0 !important;
  background-color: #152C22;
  background-size: cover;
  background-position: center 28%;
}
.about.cc-about-vivo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 26, 19, 0.45) 0%,
    rgba(13, 26, 19, 0.08) 42%,
    rgba(13, 26, 19, 0.48) 100%);
}
.about.cc-about-vivo .container { position: relative; }
.cc-about-panel {
  max-width: 660px;
  margin: 0 auto;
  padding: 46px 48px 42px;
  border-radius: 26px;
  background: rgba(16, 33, 25, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 30px 70px rgba(0, 0, 0, 0.45);
}
.cc-about-panel .title {
  color: #fff;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.cc-about-panel .title:after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--cc-accent);
  margin-top: 16px;
}
.cc-about-panel .content,
.cc-about-panel .content p {
  color: rgba(232, 238, 232, 0.92);
  line-height: 1.75;
}
.cc-about-panel .btn-more {
  display: inline-block;
  margin-top: 24px;
  padding: 9px 30px;
  border: 2px solid rgba(201, 168, 76, 0.8);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cc-about-panel .btn-more:hover,
.cc-about-panel .btn-more:focus {
  color: #1a1a1a;
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  text-decoration: none;
}
@media (max-width: 768px) {
  .about.cc-about-vivo { padding: 76px 0 !important; }
  .cc-about-panel { padding: 30px 24px 28px; }
}

/* Tarjetas del blog: vidrio blanco fino con texto claro */
.blog-section .grid .post .holder {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.blog-section .grid .post:hover .holder {
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.38);
}
/* La pastilla de categoría hereda el dorado de --primary-color:
   texto oscuro para que contraste sobre el oro */
.blog-section .grid .post .img-holder .cat-links a {
  color: #171308 !important;
  font-weight: 600;
}
.blog-section .grid .post .text-holder .posted-on a { color: rgba(223, 232, 223, 0.62); }
.blog-section .grid .post .text-holder .entry-title a { color: #fff; }
.blog-section .grid .post .text-holder .entry-title a:hover,
.blog-section .grid .post .text-holder .entry-title a:focus { color: var(--cc-accent); }
.blog-section .grid .post .text-holder .entry-content { color: rgba(223, 232, 223, 0.78); }
.blog-section .grid .post .entry-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.blog-section .grid .post .entry-footer,
.blog-section .grid .post .entry-footer a { color: rgba(223, 232, 223, 0.7); }

/* La caja del formulario: papel esmerilado con vida — barra dorada
   superior, campos cálidos y botón con brillo propio */
.cc-contacto-caja {
  position: relative;
  overflow: hidden;
  background: rgba(253, 252, 248, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 46px 48px 42px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 30px 70px rgba(0, 0, 0, 0.35);
}
.cc-contacto-caja::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 15%;
  right: 15%;
  height: 200px;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(201, 168, 76, 0.30), transparent 72%);
}
.cc-campo label {
  font-size: 12.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.cc-campo input,
.cc-campo textarea {
  background: #f6f3ec;
  border-color: #e3ddcd;
  border-radius: 12px;
  padding: 13px 16px;
}
.cc-campo input:hover,
.cc-campo textarea:hover {
  border-color: rgba(201, 168, 76, 0.55);
}
.cc-campo input:focus,
.cc-campo textarea:focus {
  background: #fff;
}
.cc-campo textarea { min-height: 140px; }
.cc-boton {
  background: linear-gradient(135deg, #D4B45C, var(--cc-accent) 45%, var(--cc-accent-dark));
  padding: 15px 48px;
  letter-spacing: 0.4px;
  box-shadow: 0 12px 28px rgba(201, 168, 76, 0.38);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.cc-boton:hover,
.cc-boton:focus {
  background: linear-gradient(135deg, #D4B45C, var(--cc-accent) 45%, var(--cc-accent-dark));
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(201, 168, 76, 0.5);
}
.cc-boton:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(201, 168, 76, 0.35);
}

/* ============================================================
   MÓVIL — cabecera y ritmo vertical
   El tema pinta la barra de navegación con el color primario, que
   ahora es dorado: en el celular quedaba un bloque mostaza gigante
   sobre el vidrio. Aquí la devolvemos al material de la marca.
   ============================================================ */
@media (max-width: 1024px) {

  /* La barra del menú deja de ser un bloque de color y pasa a vidrio */
  .nav-holder .container {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px !important;
    padding: 8px 12px !important;
  }
  .nav-holder { padding-top: 8px !important; margin-bottom: 10px !important; }

  /* Botones de inicio y menú: contorno fino, sin bloques macizos */
  .nav-holder .container .home-btn,
  .nav-holder .container .menu-toggle,
  .nav-holder .container a,
  .nav-holder .container button {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: none !important;
  }

  /* Cabecera: logo y teléfono en una fila legible */
  .header-b .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .site-header .custom-logo-link { width: 108px; height: 40px; }

  /* El teléfono se partía en dos líneas: más pequeño y sin cortes */
  #masthead .phone,
  #masthead .phone a {
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }
  #masthead .phone-label { font-size: 10.5px !important; line-height: 1.2 !important; }

  /* "Operador Turistico" estorbaba bajo el logo en pantallas chicas */
  .text-logo { display: none !important; }

  /* Hero más corto: en celular 96vh empujaba todo fuera de vista */
  .cc-hero { min-height: 72vh; }
  .cc-hero-text h2 { font-size: clamp(1.8rem, 8.5vw, 2.4rem); }

  /* Respiro vertical de las secciones */
  .activities,
  .popular-destination,
  .blog-section,
  .cc-contacto {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* La caja del formulario tenía 48px de margen interno a cada lado:
     sobre 285px de ancho ahogaba los campos. */
  .cc-contacto-caja { padding: 26px 20px 24px !important; border-radius: 18px; }
  .popular-destination { padding-top: 56px !important; padding-bottom: 52px !important; }
  .about.cc-about-vivo { padding: 64px 0 !important; }
}

@media (max-width: 640px) {
  /* Flechas del carrusel dentro del panel, no montadas en el borde */
  .popular-destination .owl-nav button.owl-prev { left: 2px !important; }
  .popular-destination .owl-nav button.owl-next { right: 2px !important; }
  .popular-destination .owl-nav button.owl-prev,
  .popular-destination .owl-nav button.owl-next {
    width: 42px !important;
    height: 42px !important;
  }

  /* Tarjetas del blog a una columna */
  .blog-section .grid .post { width: 100% !important; }

  /* El botón de WhatsApp tapaba contenido en pantallas chicas */
  #ht-ctc-chat { bottom: 18px !important; }
}