/* =========================================================
   QHIA — SISTEMA GLOBAL: Paleta, Tipografía y Base
   ========================================================= */
:root{
  /* Colores base */
  --qh-bg: #EDE6DF;           /* beige suave de fondo */
  --qh-bg-strong:#E6DED6;     /* beige alterno / bloques */
  --qh-text:#111111;          /* negro principal */
  --qh-muted:#6B6B6B;         /* gris texto secundario */
  --qh-accent:#111111;        /* acento (negro) */
  --qh-accent-2:#3A3A3A;      /* acento 2 */
  --qh-white:#ffffff;

  /* UI */
  --qh-radius:18px;           /* radios globales */
  --qh-pad-section:64px;      /* padding secciones desktop */
  --qh-pad-section-sm:40px;   /* padding secciones móvil */
  --qh-shadow:0 8px 30px rgba(0,0,0,.07);

  /* Tipografía */
  --qh-font:'Helvetica Neue', Inter, system-ui, -apple-system,
            Segoe UI, Roboto, Arial, sans-serif;
}

/* Base global */
html, body{
  background:var(--qh-bg);
  color:var(--qh-text);
  font-family:var(--qh-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =====================================
   Tipografía global
   ===================================== */
h1,h2,h3,h4{
  color:var(--qh-text);
  letter-spacing:.2px;
}
h1{ font-weight:800; line-height:1.1; }
h2{ font-weight:700; line-height:1.15; }
h3{ font-weight:700; line-height:1.2; }
p, li{ color:var(--qh-muted); line-height:1.7; }

/* Enlaces */
a{
  color:var(--qh-text);
  text-decoration:none;
  transition:.2s ease;
}
a:hover{
  color:var(--qh-accent-2);
  opacity:.8;
}

/* =====================================
   Secciones Elementor (espaciados)
   ===================================== */
.elementor-section{
  padding-top:var(--qh-pad-section) !important;
  padding-bottom:var(--qh-pad-section) !important;
}
.elementor-section.qh-tight{
  /* usa .qh-tight si quieres una sección compacta */
  padding-top:32px !important;
  padding-bottom:32px !important;
}

/* =====================================
   Contenedores / Cards
   ===================================== */
.qh-card,
.elementor-widget-container .qh-card,
.elementor-post,
.wp-block-post{
  background:var(--qh-white);
  border-radius:var(--qh-radius);
  box-shadow:var(--qh-shadow);
  overflow:hidden;
}
.qh-surface{ background:var(--qh-bg-strong); border-radius:var(--qh-radius); }

/* Imágenes redondeadas */
img, .wp-block-image img, .elementor img{ border-radius:14px; }

/* =====================================
   Botones (Elementor + Gutenberg + nativos)
   ===================================== */
.elementor-button,
.wp-block-button__link,
button,
input[type=submit],
input[type=button]{
  background:var(--qh-text) !important;
  color:var(--qh-white) !important;
  border:1px solid var(--qh-text) !important;
  border-radius:999px !important;
  padding:12px 22px !important;
  font-weight:700 !important;
  letter-spacing:.2px;
  transition:.2s ease;
}
.elementor-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover{
  background:var(--qh-accent-2) !important;
  border-color:var(--qh-accent-2) !important;
  transform:translateY(-1px);
}

/* Botón secundario: añade la clase .is-secondary en Elementor */
.is-secondary .elementor-button,
button.is-secondary,
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important;
  color:var(--qh-text) !important;
  border:1.5px solid var(--qh-text) !important;
}
.is-secondary .elementor-button:hover,
button.is-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--qh-text) !important;
  color:var(--qh-white) !important;
}

/* =====================================
   Listas destacadas / bullets bonitos
   ===================================== */
.qh-list li{
  margin:8px 0;
  padding-left:20px;
  position:relative;
}
.qh-list li:before{
  content:'•';
  position:absolute; left:0; top:0;
  color:var(--qh-text);
  font-weight:700;
}

/* =====================================
   Formularios (WPForms + nativos)
   ===================================== */
.wpforms-form input,
.wpforms-form select,
.wpforms-form textarea,
input[type=text],
input[type=email],
input[type=tel],
textarea, select{
  width:100%;
  background:#fff;
  border:1px solid #D9D4CE;
  border-radius:12px;
  padding:12px 14px;
  color:var(--qh-text);
}
.wpforms-form input:focus,
.wpforms-form textarea:focus,
input[type=text]:focus,
textarea:focus{
  outline:none;
  border-color:#C6BEB6;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
.wpforms-submit{
  background:var(--qh-text) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:12px 22px !important;
  font-weight:700 !important;
}
.wpforms-submit:hover{ background:var(--qh-accent-2) !important; }

/* =====================================
   Header / Footer (tema o Elementor)
   ===================================== */
.site-header, .elementor-location-header{
  background:var(--qh-bg);
  border-bottom:1px solid #e7e0d9;
}
.site-footer, .elementor-location-footer{
  background:var(--qh-bg);
  border-top:1px solid #e7e0d9;
}

/* =====================================
   Blog cards
   ===================================== */
.blog .post,
.archive .post,
.elementor-posts-container .elementor-post{
  background:var(--qh-white);
  border-radius:var(--qh-radius);
  box-shadow:var(--qh-shadow);
  padding:20px;
}
.post .entry-title a{ color:var(--qh-text); }
.post .entry-title a:hover{ opacity:.85; }

/* =====================================
   Joinchat (WhatsApp flotante)
   ===================================== */
.joinchat__button{
  right:20px !important;
  bottom:20px !important;
  box-shadow:var(--qh-shadow) !important;
}
.joinchat__button:hover{ transform:translateY(-2px); }

/* =====================================
   Polylang — selector simple en línea
   (ajusta al markup que uses)
   ===================================== */
.lang-item a, .pll-parent-menu-item > a{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--qh-text);
  color:var(--qh-text);
}
.lang-item.current-lang a{
  background:var(--qh-text);
  color:var(--qh-white);
}

/* =====================================
   Responsivo
   ===================================== */
@media (max-width:1024px){
  .elementor-section{
    padding-top:var(--qh-pad-section-sm) !important;
    padding-bottom:var(--qh-pad-section-sm) !important;
  }
}/* Centrar textos del Hero */
.hero-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* ocupa toda la pantalla */
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-container h1 {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: #fff; /* texto blanco */
}/* ====== HERO STYLES ====== */
.qh-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff; /* Todo texto dentro será blanco por defecto */
  padding: 24px;
}

.qh-hero h1 {
  font-weight: 800;
  letter-spacing: .5px;
  font-size: clamp(28px, 6vw, 65px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: #fff;   /* 👈 CAMBIADO: ahora blanco */
}

.qh-lead {
  font-size: clamp(15px, 2.3vw, 20px);
  opacity: .95;
  max-width: 820px;
  margin: 0 auto 24px;
}

.qh-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.qh-btn {
  background: #000;
  color: #fff;
  border: 1.5px solid #000;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  transition: .2s ease;
}

.qh-btn:hover {
  background: #333;
  border-color: #333;
  transform: translateY(-1px);
}

.qh-btn.is-secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.qh-btn.is-secondary:hover {
  background: rgba(255,255,255,0.1);
}

/* ====== OVERLAY SOBRE EL VIDEO ====== */
.qh-hero_overlay {
 .qh-hero_overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.25); /* sombra más clara */
  z-index: 1;
}

  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.35); /* 👈 CAMBIADO: menos oscuro */
/* === Ajuste fino del triángulo central (invertido) === */
.qh-tri .t4{
  /* tamaño un poco menor que los otros para que encaje perfecto */
  width:  calc(var(--w) * .86);
  height: calc(var(--h) * .86);

  /* re-centrado horizontal */
  left: calc(50% - (var(--w) * .86)/2);

  /* pequeño empuje hacia arriba para que “abrace” a los tres */
  top:  calc(var(--h)/2 - var(--gap)/4);

  /* mantiene la inversión */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
align-content/* === Ajuste fino del triángulo central (invertido) === */
.qh-tri .t4{
  /* tamaño un poco menor que los otros para que encaje perfecto */
  width:  calc(var(--w) * .86);
  height: calc(var(--h) * .86);

  /* re-centrado horizontal */
  left: calc(50% - (var(--w) * .86)/2);

  /* pequeño empuje hacia arriba para que “abrace” a los tres */
  top:  calc(var(--h)/2 - var(--gap)/4);

  /* mantiene la inversión */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* === Ajuste fino del triángulo central (invertido) === */
.qh-tri .t4{
  /* tamaño un poco menor que los otros para que encaje perfecto */
  width:  calc(var(--w) * .86);
  height: calc(var(--h) * .86);

  /* re-centrado horizontal */
  left: calc(50% - (var(--w) * .86)/2);

  /* pequeño empuje hacia arriba para que “abrace” a los tres */
  top:  calc(var(--h)/2 - var(--gap)/4);

  /* mantiene la inversión */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* === Ajuste fino del triángulo central (invertido) === */
.qh-tri .t4{
  /* tamaño un poco menor que los otros para que encaje perfecto */
  width:  calc(var(--w) * .86);
  height: calc(var(--h) * .86);

  /* re-centrado horizontal */
  left: calc(50% - (var(--w) * .86)/2);

  /* pequeño empuje hacia arriba para que “abrace” a los tres */
  top:  calc(var(--h)/2 - var(--gap)/4);

  /* mantiene la inversión */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* HERO contenedor */
.qh-hero{
  position: relative;
  isolation: isolate;
  background: var(--qh-bg);
  overflow: hidden;
  min-height: clamp(520px, 75vh, 820px);

  /* 👇 NUEVO: reserva espacio para el marco inferior */
  padding-bottom: clamp(120px, 18vw, 240px);
}

/* Marco inferior: solo visual, no clicable */
.qh-frame-bottom{
  position:absolute; inset:auto auto 0 0;
  bottom:0; left:0; width:100%;
  height: clamp(120px, 18vw, 240px);
  background: url('https://qhiaworkandstay.com/wp-content/uploads/2025/10/9.png')
              center bottom / contain no-repeat;
  z-index: 3;
  pointer-events: none;        /* 👈 evita “tapar” el siguiente bloque */
}
.section-despues-del-hero{ position:relative; z-index: 5; background: #EFE9E3; }
/* ========== HÉROE: centrado y capas correctas ========== */
.qh-hero{
  position: relative;
  isolation: isolate;            /* bloquea que algo “se salga” */
  display: grid;                 /* centramos con grid */
  place-items: center;           /* centra h1 + lead + CTA en medio */
  min-height: 100svh;            /* alto pantalla (soporta iOS barras) */
  padding: clamp(20px, 4vw, 40px) 0 var(--frame-h);  /* espacio abajo p/ marco */
  overflow: hidden;
  color: var(--text-light);
  background: var(--bg-page);
}

/* Video al fondo (capa 0) */
.video-bg{
  position:absolute;
  inset:0;
  z-index:0;                     /* más bajo que todo */
  overflow:hidden;
}
.video-bg iframe{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  min-width:100%;
  min-height:100%;
  pointer-events:none;
}

/* Marcos decorativos por encima del video pero debajo del contenido */
.qh-frame-top,
.qh-frame-bottom{
  position:absolute;
  left:0; width:100%;
  height:var(--frame-h);
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  z-index:1;
}
.qh-frame-top{
  top:0;
  background-image:url('https://qhiaworkandstay.com/wp-content/uploads/2025/10/1.png');
  background-position:center top;
}
.qh-frame-bottom{
  bottom:0;
  background-image:url('https://qhiaworkandstay.com/wp-content/uploads/2025/10/9.png');
  background-position:center bottom;
}

/* Contenido (título + subtítulo + CTA) centrado y encima de todo */
.hero-content{
  position:relative;
  z-index:2;                     /* encima de marcos y video */
  text-align:center;
  max-width:1100px;
  padding:0 clamp(20px,5vw,40px);
}
.hero-content h1,
.hero-content .lead{
  color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.35);
  margin:0 0 12px;
}
.hero-content h1{
  font-size:clamp(32px,5vw,56px);
  font-weight:800;
  letter-spacing:.4px;
}
.hero-content .lead{
  font-size:clamp(16px,2.2vw,22px);
  line-height:1.35;
}

/* Botones superiores (barra ligera) */
.hero-buttons{
  position:absolute;
  top:clamp(12px,3vw,24px);
  left:50%;
  transform:translateX(-50%);
  display:flex; gap:clamp(8px,2vw,16px);
  z-index:3;                     /* por encima del título si coincide */
}
.hero-buttons .btn{
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:8px 14px;
  border-radius:6px;
  text-decoration:none;
  font-size:clamp(12px,1.8vw,16px);
  transition:background .3s,color .3s;
}
.hero-buttons .btn:hover{
  background:#fff;
  color:#111;
}

/* CTA principal */
.cta{
  display:inline-block;
  background:#111;
  color:#fff;
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.3px;
  text-decoration:none;
  transition:background .3s,color .3s;
}
.cta:hover{ background:#fff; color:#111; }

/* Pequeño ajuste móvil para que no tape el marco inferior */
@media (max-width: 767px){
  .qh-hero{ padding-bottom: calc(var(--frame-h) + 10px); }
}
/* Scroll suave al hacer clic en anclas */
html { scroll-behavior: smooth; }

/* Deja margen superior al llegar a la sección (para que no la tape el hero/marco) */
.qh-section { 
  scroll-margin-top: calc(var(--frame-h) + 24px);  /* usa la misma --frame-h que ya definimos */
}
/* Offset para que el ancla no quede oculto bajo la parte superior */
:root{ --anchor-offset: 96px; } /* ajusta si lo necesitas */
.qh-section{ scroll-margin-top: var(--anchor-offset); }
html{ scroll-behavior: smooth; } /* animación nativa */
html { scroll-behavior: auto; }           /* dejamos el smooth al JS */
:root { --anchor-offset: 96px; }          /* opcional: referencia */
.qh-section { scroll-margin-top: var(--anchor-offset); } /* por si el user llega sin JS */
/* que las secciones no queden ocultas al anclar */
.qh-section{
  scroll-margin-top: 120px;   /* ajusta si lo quieres más/menos */
}

/* suaviza el scroll */
html{ scroll-behavior: smooth; }
/* ===== Anchor offset (que la sección no quede escondida) ===== */
:root{
  /* Altura de la franja superior + respirar un poco. Ajusta si lo deseas */
  --anchor-offset: 120px;
}

/* Hace que cada sección “se ancle” dejando espacio arriba */
.qh-section{
  scroll-margin-top: var(--anchor-offset);
}

/* Scroll suave nativo del navegador */
html{ scroll-behavior: smooth; }

/* Extra: si estás logueado en WP, el admin bar añade ~32px (desktop).
   Esto compensa automáticamente en el front mientras estés logueado. */
html[wp-toolbar] .qh-section{
  scroll-margin-top: calc(var(--anchor-offset) + 32px);
}
/* Centra verticalmente el contenido sobre el video */
.hero-content{
  position: relative;
  z-index: 4;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;

  /* centrado vertical suave */
  display: grid;
  place-items: center;
  min-height: 68vh;  /* ajusta si lo quieres más alto/bajo */
}

/* Título y subtítulo con el mismo color */
.hero-content h1,
.hero-content .lead{
  color: #fff;               /* mismo color */
  text-shadow: 0 6px 30px rgba(0,0,0,.35); /* legibilidad sobre video */
}
/* --- Anclas con offset y scroll suave (sin JS) --- */
:root{
  /* ajusta si tienes header fijo más alto/bajo */
  --anchor-offset: 120px;
}

html{ scroll-behavior: smooth; }

/* Hace que al navegar a #id, la sección no quede oculta bajo el header */
.qh-section{ scroll-margin-top: var(--anchor-offset); }

/* (Plan B) si alguna sección no respeta scroll-margin-top, fuerza el offset: */
#why::before,
#accommodation::before,
#tours::before,
#offers::before{
  content:"";
  display:block;
  height:var(--anchor-offset);
  margin-top:calc(-1 * var(--anchor-offset));
}
:root { --anchor-offset: 120px; }
:root {
  --anchor-offset: 120px; /* offset por defecto (ajústalo a tu header fijo) */
}

.qh-section {
  scroll-margin-top: var(--anchor-offset);
}
.qh-section {
  scroll-margin-top: 120px; /* coincide con el "extra" de JS */
}
:root{ --anchor-offset: 160px; }  /* try 140–160px */
:root {
  --anchor-offset: 140px;
}
/* Joinchat siempre arriba y pegado abajo-derecha */
#joinchat,
.joinchat,
.joinchat__button {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 2147483647 !important; /* tope */
}

/* (Opcional) Oculta el globito/tooltip automático */
.joinchat__box,
.joinchat__tooltip {
  display: none !important;
}
.sharedaddy,
.sd-sharing,
.sharedaddy.sd-sharing-enabled {
    display: none !important;
}
/* Ocultar por completo los bloques de compartir/likes de Jetpack */
.sharedaddy,
.sd-sharing-enabled,
.sd-like,
.sharedaddy.sd-block,
#jp-post-flair,
div#jp-post-flair,
.jetpack-likes-widget-wrapper,
.wp-block-jetpack-sharing-buttons {
  display: none !important;
}
.sharedaddy,
.sd-sharing,
.sharedaddy.sd-sharing-enabled,
.sharedaddy.sd-block,
.jetpack-sharing {
    display: none !important;
}