@charset "UTF-8";

/*!
Theme Name: Oceanica Child
Theme URI: https://motopress.com/products/oceanica/
Author: MotoPress
Author URI: https://motopress.com/
Description: Clean and responsive WordPress theme for your hospitality business.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oceanica
Tags: one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Template: oceanica
*/

/* ==========================================================================
==========================================================================
==========================================================================
==========================================================================*/
/* ==========================================================================
   Variables y Configuración Base
   ========================================================================== */
:root {
  --color-bg-dark: #100f0e;
  --color-bg-overlay: #161513;
  --color-text-light: #f5f2eb;
  --color-accent: #c2a67e;
  --font-main: "Montserrat", sans-serif;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  margin: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   Contenedor Principal del Header y Barra Superior
   ========================================================================== */
.chamanica-header-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  transition: all 0.3s ease;
}

.chamanica-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #050505;
  padding: 0.5rem 1.5rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #a3a3a3;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease,
    opacity 0.3s ease;
  max-height: 50px;
  overflow: hidden;
}

.topbar-left,
.topbar-right {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* ==========================================================================
   Ocultar SOLO la ubicación en celulares
   ========================================================================== */
@media (max-width: 768px) {
  /* Selecciona el primer elemento (ubicación) dentro de la parte izquierda de la barra */
  .topbar-left .topbar-item:first-child {
    display: none !important;
  }
}

/* ==========================================================================
   Navegación Principal y Logo (Forzando estilos sobre el tema padre)
   ========================================================================== */
.chamanica-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.chamanica-logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chamanica-logo-container img {
  max-height: 45px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-title {
  font-family: var(--font-main) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--color-text-light) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin: 0 !important;

  /* Sombra Triple: Corta, Media y Expansiva (Negro puro casi al 100%) */
  text-shadow:
    0px 1px 2px rgba(0, 0, 0, 1),
    /* Borde negro duro pegado a la letra */ 0px 2px 8px rgba(0, 0, 0, 0.9); /* Sombra de profundidad */
}

/* ==========================================================================
   Menú Desktop
   ========================================================================== */
.chamanica-desktop-nav {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

.chamanica-desktop-nav .nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
}

.chamanica-desktop-nav .nav-links li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.chamanica-desktop-nav .nav-links a {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffffff; /* Usamos blanco puro para máximo rebote de luz */
  font-weight: 600; /* Hacemos la letra un poco más gruesa */
  text-decoration: none;
  transition: all 0.3s ease;

  /* Sombra Triple: Corta, Media y Expansiva (Negro puro casi al 100%) */
  text-shadow:
    0px 1px 2px rgba(0, 0, 0, 1),
    /* Borde negro duro pegado a la letra */ 0px 2px 8px rgba(0, 0, 0, 0.9),
    /* Sombra de profundidad */ 0px 4px 15px rgba(0, 0, 0, 0.8); /* Halo oscuro amplio para separar del fondo */
}

/* Efecto Hover */
.chamanica-desktop-nav .nav-links a:hover {
  color: var(--color-accent);
  text-shadow:
    0px 1px 2px rgba(0, 0, 0, 1),
    0px 2px 10px rgba(0, 0, 0, 1);
}

.chamanica-desktop-nav .nav-links a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Selector de Idiomas Polylang (Topbar)
   ========================================================================== */
.chamanica-polylang {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Espacio entre los idiomas */
}

.chamanica-polylang li {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.chamanica-polylang li a {
  color: #9ca3af; /* Color gris suave */
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Efecto Hover y Resaltado del Idioma Actual */
.chamanica-polylang li a:hover,
.chamanica-polylang li.current-lang a {
  color: var(--color-accent); /* Color dorado/café de tu marca */
}

/* Agrega una barrita separadora "|" entre ES y EN */
.chamanica-polylang li:not(:last-child)::after {
  content: "|";
  color: #4b5563; /* Gris oscuro para la barra */
  margin-left: 0.75rem;
  font-size: 0.75rem;
}

/* ==========================================================================
   Submenús Desktop (Desplegable elegante)
   ========================================================================== */
.chamanica-desktop-nav .nav-links .menu-item-has-children {
  position: relative;
  padding-bottom: 1.5rem;
  margin-bottom: -1.5rem;
}

.chamanica-desktop-nav .nav-links .menu-item-has-children > a::after {
  content: "▾";
  margin-left: 5px;
  font-size: 0.8em;
}

.chamanica-desktop-nav .nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background-color: rgba(22, 21, 19, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 242, 235, 0.05);
  list-style: none;
  padding: 1.25rem;
  margin: 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.chamanica-desktop-nav .nav-links .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.chamanica-desktop-nav .nav-links .sub-menu li {
  display: block;
  width: 100%;
}

.chamanica-desktop-nav .nav-links .sub-menu a {
  font-size: 0.7rem;
  color: #a3a3a3;
  display: block;
  padding: 0.5rem 0;
}

.chamanica-desktop-nav .nav-links .sub-menu a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Efecto al hacer Scroll
   ========================================================================== */
.chamanica-header-wrapper.nav-scrolled {
  background-color: rgba(22, 21, 19, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(245, 242, 235, 0.05);
}

.chamanica-header-wrapper.nav-scrolled .chamanica-topbar {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.chamanica-header-wrapper.nav-scrolled .chamanica-navbar {
  padding: 1rem 1.5rem;
}

/* ==========================================================================
   Menú Móvil Overlay (Con Scroll habilitado)
   ========================================================================== */
.chamanica-mobile-btn {
  background: none;
  border: none;
  color: var(--color-text-light);
  cursor: pointer;
  z-index: 50;
  position: relative;
}

.hamburger-icon {
  width: 2rem;
  height: 2rem;
}

.chamanica-mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg-overlay);
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Evita que el menú se corte arriba */
  align-items: center;
  padding-top: 120px; /* Deja espacio para el botón de cerrar */
  padding-bottom: 40px;
  overflow-y: auto; /* Permite hacer scroll si el menú es muy largo */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.chamanica-mobile-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-links {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0 0 2rem 0;
  width: 100%;
}

.mobile-nav-links li {
  margin-bottom: 2rem;
}

.mobile-nav-links a {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* ==========================================================================
   Submenús en Móvil (Estilo Acordeón)
   ========================================================================== */
.mobile-nav-links .menu-item-has-children {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.mobile-nav-links .menu-item-has-children > a::after {
  content: "▾";
  margin-left: 8px;
  font-size: 0.8em;
  display: inline-block;
  transition: transform 0.3s ease;
}

.mobile-nav-links .menu-item-has-children.is-expanded > a::after {
  transform: rotate(180deg);
}

.mobile-nav-links .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

.mobile-nav-links .menu-item-has-children.is-expanded .sub-menu {
  margin-top: 1.5rem;
  max-height: 500px;
  opacity: 1;
}

.mobile-nav-links .sub-menu a {
  font-size: 0.9rem;
  color: #888;
  letter-spacing: 0.2em;
}

.mobile-nav-links .sub-menu a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Responsive (Pantallas Medianas y Grandes)
   ========================================================================== */
@media (min-width: 768px) {
  .site-title {
    font-size: 1.5rem !important;
  }
  .chamanica-topbar {
    padding: 0.5rem 3rem;
  }
  .chamanica-navbar {
    padding: 1.5rem 3rem;
  }
  .chamanica-header-wrapper.nav-scrolled .chamanica-navbar {
    padding: 1rem 3rem;
  }
  .chamanica-desktop-nav {
    display: flex;
  }
  .chamanica-mobile-btn {
    display: none;
  }
}

/* ==========================================================================
==========================================================================
==========================================================================
==========================================================================
/* ==========================================================================
   Sección Hero (Página de Inicio)
   ========================================================================== */
.chamanica-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Empuja el contenido hacia abajo */
  align-items: flex-start; /* Alinea el contenido a la izquierda */
  text-align: left;
  padding: 0 5% 10% 8%; /* Margen interior (Arriba, Derecha, Abajo, Izquierda) */
  background-color: var(--color-bg-dark);
}

.chamanica-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.chamanica-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  /* Degradado ajustado: más oscuro en la parte inferior para resaltar el texto */
  background: linear-gradient(
    to bottom,
    rgba(16, 15, 14, 0.829),
    rgba(16, 15, 14, 0.4),
    rgba(16, 15, 14, 0.8)
  );
}

.chamanica-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chamanica-hero-content {
  position: relative;
  z-index: 10;
  padding: 0;
  margin-top: 0;
  max-width: 800px; /* Evita que las líneas de texto se estiren demasiado */
}

.chamanica-hero-content .hero-title {
  font-family: var(--font-main) !important;
  font-size: 4rem !important;
  font-weight: 600; /* Letra más fina como en el diseño */
  margin-bottom: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.hero-subtitle {
  font-family: var(--font-main);
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin-bottom: 2.5rem;
  opacity: 0.9;
}

.hero-action {
  margin-top: 0;
}

/* Diseño del botón en caja */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.15em;
  border: 1px solid rgba(245, 242, 235, 0.5); /* Borde sutil */
  padding: 1rem 2rem;
  color: var(--color-text-light);
  text-decoration: none !important;
  transition: all 0.3s ease;
  background-color: transparent;
}

.hero-link:hover {
  border-color: var(--color-text-light);
  background-color: rgba(245, 242, 235, 0.1);
}

/* --- Ajustes Responsive para la Sección Hero --- */
@media (max-width: 768px) {
  .chamanica-hero {
    padding: 0 5% 15% 5%; /* Menos margen lateral en celulares */
  }
  .chamanica-hero-content .hero-title {
    font-size: 2rem !important; /* Título más pequeño en celulares */
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero-decorator {
    bottom: 1rem; /* Acorta la distancia inferior en pantallas pequeñas */
  }
}
/* ==========================================================================
   Animaciones (Ken Burns y Text Reveal)
   ========================================================================== */
.ken-burns {
  animation: kenBurns 20s infinite alternate ease-in-out;
}

@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 100ms;
}
.delay-300 {
  transition-delay: 300ms;
}
.delay-500 {
  transition-delay: 500ms;
}
.delay-700 {
  transition-delay: 700ms;
}

/* Responsive para títulos más grandes en pantallas grandes */
@media (min-width: 768px) {
  .hero-kicker {
    font-size: 0.875rem;
  }
  .chamanica-hero-content .hero-title {
    font-size: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .chamanica-hero-content .hero-title {
    font-size: 5rem;
  }
}

/* ==========================================================================
   Sección de reservas — MotoPress Shortcode
   ========================================================================== */

.chamanica-booking-section {
  width: 100%;
  padding: 3rem 1.5rem;
  display: flex;
  justify-content: center;
  background-color: #161513;
  border-bottom: 1px solid rgba(245, 242, 235, 0.05);
  box-sizing: border-box;
}

.chamanica-booking-section .booking-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.chamanica-booking-section .mphb_sc_search-form > p:first-child {
  display: none !important;
}

/* ==========================================================================
   1. Formulario horizontal en computadora
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    110px
    110px
    auto !important;

  gap: 1.5rem !important;
  align-items: end !important;

  box-sizing: border-box !important;
}

/* ==========================================================================
   2. Ocultar texto de campos obligatorios
   ========================================================================== */

.chamanica-booking-section .mphb-required-fields-tip {
  display: none !important;
}

/* ==========================================================================
   3. Limpiar contenedores de cada campo
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form > p {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;

  float: none !important;
  clear: none !important;

  box-sizing: border-box !important;
}

/* Ocultar los <br> que genera MotoPress */

.chamanica-booking-section .mphb_sc_search-form > p > br {
  display: none !important;
}

/* ==========================================================================
   4. Posición de los campos
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-check-in-date {
  grid-column: 1 !important;
}

.chamanica-booking-section .mphb_sc_search-check-out-date {
  grid-column: 2 !important;
}

.chamanica-booking-section .mphb_sc_search-adults {
  grid-column: 3 !important;
}

.chamanica-booking-section .mphb_sc_search-children {
  grid-column: 4 !important;
}

.chamanica-booking-section .mphb_sc_search-submit-button-wrapper {
  grid-column: 5 !important;
}

/* ==========================================================================
   5. Etiquetas
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form label {
  min-height: 18px !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;

  font-family: var(--font-main) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;

  color: var(--color-accent) !important;
}

/* ==========================================================================
   6. Asteriscos
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form abbr[title] {
  margin-left: 4px !important;

  color: #e63946 !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-decoration: none !important;
  border: none !important;
}

/* ==========================================================================
   7. Inputs de fecha y selects
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form input[type="text"],
.chamanica-booking-section .mphb_sc_search-form select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;

  margin: 0 !important;
  padding: 0 1rem !important;

  display: block !important;
  box-sizing: border-box !important;

  background-color: transparent !important;
  color: var(--color-text-light) !important;

  border: 1px solid rgba(194, 166, 126, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family: var(--font-main) !important;
  font-size: 0.9rem !important;

  transition:
    border-color 0.3s ease,
    background-color 0.3s ease !important;
}

/* ==========================================================================
   8. Evitar fechas duplicadas
   MotoPress genera inputs ocultos internos
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form input[type="hidden"],
.chamanica-booking-section .mphb_sc_search-form input[id$="-hidden"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   9. Placeholder
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form input::placeholder {
  color: rgba(245, 242, 235, 0.4) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   10. Selectores
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form select {
  cursor: pointer !important;
}

.chamanica-booking-section .mphb_sc_search-form select option {
  background-color: #161513 !important;
  color: var(--color-text-light) !important;
}

/* ==========================================================================
   11. Focus
   ========================================================================== */

.chamanica-booking-section .mphb_sc_search-form input[type="text"]:focus,
.chamanica-booking-section .mphb_sc_search-form select:focus {
  border-color: var(--color-accent) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   12. Botón
   ========================================================================== */

.chamanica-booking-section
  .mphb_sc_search-submit-button-wrapper
  input[type="submit"],
.chamanica-booking-section
  .mphb_sc_search-submit-button-wrapper
  button[type="submit"] {
  min-width: 140px !important;
  width: auto !important;
  height: 48px !important;

  margin: 0 !important;
  padding: 0 2.5rem !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;

  background-color: var(--color-accent) !important;
  color: var(--color-bg-dark) !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family: var(--font-main) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  transition:
    background-color 0.3s ease,
    color 0.3s ease !important;
}

.chamanica-booking-section
  .mphb_sc_search-submit-button-wrapper
  input[type="submit"]:hover,
.chamanica-booking-section
  .mphb_sc_search-submit-button-wrapper
  button[type="submit"]:hover {
  background-color: var(--color-text-light) !important;
  color: var(--color-bg-dark) !important;
}

/* ==========================================================================
   13. Tablets
   ========================================================================== */

@media (max-width: 992px) {
  .chamanica-booking-section {
    padding: 2.5rem 1.25rem;
  }

  .chamanica-booking-section .mphb_sc_search-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 1rem !important;
  }

  .chamanica-booking-section .mphb_sc_search-check-in-date {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .chamanica-booking-section .mphb_sc_search-check-out-date {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .chamanica-booking-section .mphb_sc_search-adults {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .chamanica-booking-section .mphb_sc_search-children {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .chamanica-booking-section .mphb_sc_search-submit-button-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  .chamanica-booking-section
    .mphb_sc_search-submit-button-wrapper
    input[type="submit"],
  .chamanica-booking-section
    .mphb_sc_search-submit-button-wrapper
    button[type="submit"] {
    width: 100% !important;
  }
}

/* ==========================================================================
   14. Celulares
   ========================================================================== */

@media (max-width: 576px) {
  .chamanica-booking-section {
    padding: 2rem 1rem;
  }

  .chamanica-booking-section .mphb_sc_search-form {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .chamanica-booking-section .mphb_sc_search-check-in-date,
  .chamanica-booking-section .mphb_sc_search-check-out-date,
  .chamanica-booking-section .mphb_sc_search-adults,
  .chamanica-booking-section .mphb_sc_search-children,
  .chamanica-booking-section .mphb_sc_search-submit-button-wrapper {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .chamanica-booking-section
    .mphb_sc_search-submit-button-wrapper
    input[type="submit"],
  .chamanica-booking-section
    .mphb_sc_search-submit-button-wrapper
    button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   Sección Filosofía
   ========================================================================== */
.chamanica-filosofia {
  background-color: var(--color-bg-dark); /* #100f0e */
  padding: 8rem 1.5rem;
  display: flex;
  justify-content: center;
  text-align: center;
}

.filosofia-texto {
  font-family: var(--font-main);
  color: var(--color-text-light);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  max-width: 800px;
  margin: 0;
}

/* Responsive para Filosofía */
@media (min-width: 768px) {
  .chamanica-filosofia {
    padding: 12rem 3rem;
  }
  .filosofia-texto {
    font-size: 2.25rem;
  }
}

/* ==========================================================================
   Sección Cabañas (Pantalla Dividida) - Altura Estricta e Imágenes Blindadas
   ========================================================================== */
.chamanica-cabanas {
  width: 100%;
  background-color: var(--color-bg-overlay);
}

.chamanica-cabanas .bg-darker {
  background-color: var(--color-bg-dark);
}

.cabana-row {
  display: grid;
  grid-template-columns: 1fr;
  min-height: auto;
}

/* Contenedor del Texto */
.cabana-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 2rem;
}

.cabana-kicker {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.cabana-title {
  font-family: var(--font-main);
  color: var(--color-text-light);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
}

.cabana-desc {
  color: #9ca3af;
  font-weight: 300;
  line-height: 1.8;
  max-width: 450px;
  margin-bottom: 2rem;
}

/* Botones de acción */
.cabana-acciones {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.btn-primario {
  background-color: var(--color-text-light);
  color: var(--color-bg-dark);
  padding: 0.75rem 2rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primario:hover {
  background-color: var(--color-accent);
  color: #fff;
}

.btn-secundario {
  color: var(--color-text-light);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.btn-secundario:hover {
  color: var(--color-accent);
}

/* Contenedor de la Imagen */
.cabana-imagen-container {
  position: relative;
  height: 40vh;
  min-height: 300px;
  width: 100%;
  overflow: hidden;
}

/* FUERZA BRUTA: Blinda la imagen contra reglas ocultas del tema padre */
.cabana-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 100% !important;
  transition: filter 0.7s ease !important;
  filter: brightness(0.85);
}

.cabana-img:hover {
  filter: brightness(1);
}

/* ==========================================================================
   Responsive (Escritorio) - Control Estricto de Altura
   ========================================================================== */
@media (min-width: 1024px) {
  .cabana-row {
    grid-template-columns: 1fr 1fr;
    height: 60vh; /* Altura perfecta: 60% de la pantalla */
    min-height: 450px;
  }

  .cabana-reverse .cabana-imagen-container {
    order: 1;
  }
  .cabana-reverse .cabana-texto {
    order: 2;
  }

  .cabana-texto {
    padding: 4rem 5rem;
    height: 100%;
    box-sizing: border-box;
  }

  .cabana-title {
    font-size: 2.5rem;
  }

  .cabana-imagen-container {
    height: 100%;
    min-height: auto;
  }
}

/* ==========================================================================
   Sección Publicaciones / Blog (Estética Chamánica)
   ========================================================================== */
.chamanica-publicaciones {
  background-color: var(--color-bg-dark); /* Fondo negro base */
  padding: 6rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.publicaciones-container {
  max-width: 1200px;
  margin: 0 auto;
}

.publicaciones-header {
  text-align: center;
  margin-bottom: 4rem;
}

.publicaciones-kicker {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.75rem;
}

.publicaciones-section-title {
  font-family: var(--font-main);
  color: var(--color-text-light);
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Configuración del Grid Responsivo */
.publicaciones-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 columna en celulares */
  gap: 2.5rem;
}

/* Tarjeta individual */
.publicacion-card {
  background-color: var(--color-bg-overlay); /* Gris casi negro muy elegante */
  border: 1px solid rgba(245, 242, 235, 0.02);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.4s ease,
    border-color 0.4s ease;
}

.publicacion-card:hover {
  transform: translateY(-5px); /* Eleva la tarjeta sutilmente */
  border-color: rgba(
    194,
    166,
    126,
    0.2
  ); /* Brillo dorado muy sutil en los bordes */
}

/* Contenedor de la foto de la publicación */
.publicacion-img-container {
  width: 100%;
  height: 230px;
  overflow: hidden;
  position: relative;
}

.publicacion-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s ease !important;
}

.publicacion-card:hover .publicacion-img {
  transform: scale(1.04); /* Zoom suave a la foto */
}

/* Área de información del Post */
.publicacion-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Hace que todas las tarjetas mantengan el mismo alto inferior */
}

.publicacion-meta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  margin-bottom: 0.75rem;
}

.publicacion-title {
  margin: 0 0 1rem 0;
  font-family: var(--font-main);
  font-size: 1.35rem;
  line-height: 1.4;
  font-weight: 700;
}

.publicacion-title a {
  color: var(--color-text-light) !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.publicacion-title a:hover {
  color: var(
    --color-accent
  ) !important; /* El título se ilumina en dorado al pasar el cursor */
}

.publicacion-excerpt {
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Forzar a que el botón "Leer más" siempre se alinee perfectamente abajo */
}

.publicacion-link {
  color: var(--color-accent) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-decoration: none !important;
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: border-color 0.3s ease;
}

.publicacion-link:hover {
  border-color: var(--color-accent); /* Línea inferior dorada al hacer hover */
}

.no-posts {
  color: #888;
  text-align: center;
  grid-column: 1 / -1;
  font-style: italic;
}

/* ==========================================================================
   Responsive (Pantallas medianas y grandes)
   ========================================================================== */
@media (min-width: 768px) {
  .publicaciones-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en Tablets */
  }
}

@media (min-width: 1024px) {
  .chamanica-publicaciones {
    padding: 8rem 3rem;
  }
  .publicaciones-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en Computadoras */
    gap: 2rem;
  }
  .publicaciones-section-title {
    font-size: 2.75rem;
  }
}

/* ==========================================================================
   Footer Chamánica (Minimalismo Absoluto)
   ========================================================================== */
.chamanica-footer {
  background-color: #0a0a0a;
  color: #9ca3af;
  padding: 5rem 1.5rem 2rem;
  border-top: 1px solid rgba(194, 166, 126, 0.1);
  font-family: var(--font-main);
  text-align: center; /* Centramos todo visualmente */
}

.footer-container {
  max-width: 800px; /* Contenedor más estrecho para mantener la lectura compacta */
  margin: 0 auto;
}

/* Marca y Ubicación */
.footer-brand {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Línea divisoria muy sutil */
}

.footer-logo {
  font-family: var(--font-main) !important; /* Fuerza el uso de Montserrat */
  color: var(--color-text-light) !important;
  font-size: 1.75rem !important;
  text-transform: uppercase !important; /* Fuerza mayúsculas */
  letter-spacing: 0.15em !important; /* Mismo espaciado elegante del header */
  font-weight: 700 !important; /* Peso negrita idéntico */
  line-height: 1 !important;
  margin: 0 0 0.5rem 0 !important;
}

.footer-tagline {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.footer-location {
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: 300;
}

/* Copyright */
.footer-bottom {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #6b7280;
}

/* ==========================================================================
   Orden de Cabañas en Celulares (Imagen arriba, Texto abajo)
   ========================================================================== */
@media (max-width: 768px) {
  .cabana-row {
    display: flex;
    flex-direction: column; /* Asegura que se apilen verticalmente */
  }

  .cabana-imagen-container {
    order: 1 !important; /* Fuerza a la imagen a ir primero */
    width: 100%; /* Asegura que ocupe todo el ancho */
  }

  .cabana-texto {
    order: 2 !important; /* Fuerza al texto a ir debajo de la imagen */
    width: 100%;
    margin-top: 1.5rem; /* Da un respiro entre la imagen y el título */
  }
}

/* =========================================================
   OVERLAY PARA PÁGINAS INTERNAS (Vía pseudo-elemento)
   ========================================================= */

/* 1. Preparamos el contenedor principal para que retenga al pseudo-elemento */
.chamanica-internal-hero {
  position: relative !important;
  /* El overflow: hidden asegura que el overlay no se desborde del contenedor */
  overflow: hidden;
}

/* 2. Inyectamos la película oscura usando ::after */
.chamanica-internal-hero::after {
  content: ""; /* Obligatorio para que el pseudo-elemento exista */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Degradado: Más oscuro arriba (menú) y más transparente abajo */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 1; /* Coloca la capa por encima de la imagen de fondo */
  pointer-events: none; /* Evita que la capa oscura bloquee los clics en la imagen */
}

/* 3. Evitamos que la etiqueta img de WP quede por encima del overlay */
.chamanica-internal-hero img {
  position: relative;
  z-index: 0;
}

.entry-wrapper,
.main-wrapper,
.flex-viewport {
  color: #383838;
  background-color: #100f0e !important;
  margin-top: 0px !important;
}

.entry-title {
  font-family: var(--font-main) !important;
  font-size: 2.5rem;
  color: var(--color-text-light);
}

.post-navigation span {
  font-family: var(--font-main) !important;
}

.post-navigation a:hover,
.entry-title a:hover {
  font-family: var(--font-main) !important;
  color: var(--color-accent)

}

.pagination .prev:hover, 
.pagination .next:hover{
  font-family: var(--font-main) !important;
  background: var(--color-accent);
}

.single .site-main .entry-header,
.page .site-main .entry-header,
.post-navigation {
  border-bottom: solid 1px #202020 !important;
}

.content-area.full-width .site-main > .hentry{
  border: solid 1px #202020 !important;
}
 

.entry-header:after {
  display: none !important;
}

.blog .site-main article + article,
.entry-child-pages-list .entry-wrapper,
.mphb_sc_rooms-wrapper .mphb-room-type:not(:first-of-type),
.mphb-details-title,
.mphb-calendar-title,
.mphb-reservation-form-title,
.comments-area,
.post-navigation,
.pagination {
  border-top: 1px solid #202020 !important;
}

.entry-summary,
.entry-content p,
.pagination .page-numbers,
.mphb_sc_rooms-wrapper,
article {
  font-family: var(--font-main) !important;
  color: #9ca3af;
}

.mphb-attribute-value a {
  color: #a7875a;
}

.button,
.mphb_widget_search-submit-button-wrapper .button {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  border: 1px solid var(--color-accent);
  padding: 0.75rem 2rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.widget button {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
}

.button:hover,
.widget button:hover,
.mphb_widget_search-submit-button-wrapper .button:hover {
  background-color: var(--color-text-light);
  color: var(--color-bg-dark);
}

.widget {
  border: 1px solid #202020 !important;
  color: #9ca3af;
  font-family: var(--font-main) !important;
}

.wp-block-heading,
.widget-title {
  font-family: var(--font-main) !important;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.widget a, .more-link {
  color: #a7875a;
}

select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  font-family: var(--font-main) !important;
}

.single .mphb_room_type .entry-content h2 {
    border-top: none !important;    
    margin: 2rem 0 1.5rem 0 !important;
    padding: 0 !important;
    color: var(--color-text-light);
}

.blog .main-wrapper {
  margin-top: 80px !important;
}