/* ============================================================
QEM — CSS custom (efectos estilo Simply Haus sobre Elementor)
Editable por el dev; el contenido se sigue editando en Elementor.
============================================================ */
/* ---- Design tokens de marca (paleta acordada · propuesta v1) ---- */
:root{
/* Color */
--qem-bg: #F7F5F2; /* fondo principal (blanco roto) */
--qem-bg-alt: #EEECE9; /* secciones alternas */
--qem-ink: #1C1C1C; /* texto principal / negro suave */
--qem-ink-soft: #5A5A5A; /* texto secundario */
--qem-accent: #C07840; /* cobrizo — acento de marca */
--qem-accent-2: #A8632F; /* cobrizo oscuro (hover/pressed) */
--qem-line: #E2DDD6; /* bordes/divisores sutiles */
--qem-overlay: rgba(20,18,16,.32); /* capa sobre fotos del hero */
--qem-dark: #1C1C1C; /* franjas/footer/header sólido */
/* Tipografía */
--qem-serif: "Cormorant Garamond", Georgia, serif; /* titulares */
--qem-sans: "DM Sans", system-ui, -apple-system, sans-serif; /* cuerpo/UI */
/* Forma / sombra (lenguaje "nature glamour") */
--qem-radius: 16px;
--qem-radius-sm: 10px;
--qem-r: 8px; /* radio UNIFICADO de fotos/tarjetas (conversa con el logo redondeado) */
--qem-shadow: 0 14px 40px rgba(28,28,28,.12);
--qem-shadow-lg: 0 24px 60px rgba(28,28,28,.18);
--qem-ease: cubic-bezier(.22,.61,.36,1);
}
/* ---- Tipografía base de marca (Elementor puede sobrescribir por widget) ---- */
body{ font-family:var(--qem-sans); color:var(--qem-ink); }
h1,h2,h3,h4{ font-family:var(--qem-serif); }
/* ---- Flip cards "Lo que buscas" (Fancy Elementor Flipbox) ---- */
.qem-flipcard .tp-flipbox,
.qem-flipcard .tp-flipbox__holder{ height:380px !important; min-height:380px; border-radius:var(--qem-radius); overflow:hidden; }
.qem-flipcard .tp-flipbox{ box-shadow:var(--qem-shadow); }
.qem-flipcard .tp-flipbox__front,
.qem-flipcard .tp-flipbox__back{ height:100% !important; border-radius:var(--qem-radius); }
/* Foto frontal a sangre + degradado para legibilidad del título */
.qem-flipcard .tp-flipbox__front{ background-size:cover !important; background-position:center !important; position:relative; }
.qem-flipcard .tp-flipbox__front::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg,rgba(20,18,16,.10) 35%,rgba(20,18,16,.82));
}
.qem-flipcard .tp-flipbox__front .tp-flipbox__content{
position:relative; z-index:2; height:100%;
display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
}
.qem-flipcard .tp-flipbox__front .tp-flipbox__title{
text-transform:uppercase; font-weight:700; letter-spacing:.02em; margin:0;
}
.qem-flipcard .tp-flipbox__front .tp-flipbox__title::before{
content:""; display:block; width:42px; height:3px; background:var(--qem-accent); margin:0 0 10px;
}
.qem-flipcard .tp-flipbox__back{ display:flex; align-items:center; justify-content:center; text-align:center; padding:28px; }
.qem-flipcard .tp-flipbox__back .tp-flipbox__content{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.qem-flipcard .tp-flipbox__back .tp-flipbox__title{ text-transform:uppercase; font-weight:700; }
/* ---- Sección de propiedades: fondo crema cálido (foto protagonista, sin cajas) ---- */
.qem-propgrid{ background:var(--qem-bg) !important; }
.qem-propgrid .elementor-section{ background:transparent !important; }
/* ---- Grid de propiedades con aire (3 col) ---- */
.qem-propgrid > .elementor-container{
display:grid !important; grid-template-columns:repeat(3,1fr); gap:54px 34px;
max-width:1200px; margin-left:auto; margin-right:auto;
}
.qem-propgrid > .elementor-container > .elementor-column{ width:100% !important; max-width:none !important; }
@media(max-width:900px){ .qem-propgrid > .elementor-container{ grid-template-columns:1fr 1fr; gap:44px 26px; } }
@media(max-width:600px){ .qem-propgrid > .elementor-container{ grid-template-columns:1fr; } }
/* ============================================================
Alojamiento — estilo EDITORIAL "Simply Haus" (lo pedido en reuniones:
"que no quede un cuadrado sobre fondo blanco", foto protagonista,
rayita cobriza arriba, mínimo chrome). NO caja, NO sombra flotante.
Markup real: image · heading · review · atribución · button.
============================================================ */
/* anular la caja blanca/sombra/radius que mete Elementor (y la versión previa) */
.qem-propcard,
.qem-propcard > .elementor-widget-wrap.elementor-element-populated{
background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
.qem-propcard > .elementor-widget-wrap{
display:flex; flex-direction:column; height:100%; padding:0 !important;
}
.qem-propcard > .elementor-widget-wrap > .elementor-element{ width:100%; }
.qem-propcard .elementor-widget{ margin-bottom:0 !important; }
/* foto protagonista 4:5 + zoom lento; "rayita" cobriza arriba (firma Simply Haus) */
.qem-propcard .elementor-widget-image{ margin:0; position:relative; }
.qem-propcard .elementor-widget-image::before{
content:""; position:absolute; top:0; left:0; z-index:2;
width:48px; height:3px; background:var(--qem-accent);
transition:width .5s var(--qem-ease);
}
.qem-propcard:hover .elementor-widget-image::before{ width:88px; }
.qem-propcard .elementor-widget-image .elementor-widget-container{
position:relative; aspect-ratio:4/5; overflow:hidden; margin:0;
}
.qem-propcard .elementor-widget-image img{
width:100%; height:100%; object-fit:cover; display:block; border-radius:0 !important;
transition:transform 1.1s var(--qem-ease) !important;
}
.qem-propcard .elementor-animation-grow:hover{ transform:none; }
.qem-propcard:hover .elementor-widget-image img{ transform:scale(1.05); }
/* nombre de alojamiento en serif aireado (no uppercase pesado) */
.qem-propcard .elementor-widget-heading{ padding:20px 2px 0; }
.qem-propcard .elementor-heading-title{
font-family:var(--qem-serif) !important; font-weight:500; font-size:26px;
letter-spacing:0; text-transform:none; color:var(--qem-ink) !important; margin:0; line-height:1.18;
transition:color .3s var(--qem-ease);
}
.qem-propcard:hover .elementor-heading-title{ color:var(--qem-accent) !important; }
/* reseña (crece para alinear el CTA abajo) */
.qem-propcard .elementor-widget-heading + .elementor-widget-text-editor{
flex:1 0 auto; padding:8px 2px 0;
}
.qem-propcard .elementor-widget-text-editor p{
font-family:var(--qem-sans); font-size:14.5px; line-height:1.7; color:var(--qem-ink-soft); margin:0;
}
/* atribución (segundo text-editor) — ya lleva color cobrizo inline */
.qem-propcard .elementor-widget-text-editor + .elementor-widget-text-editor{ padding:9px 2px 0; }
/* CTA como LINK cobrizo con flecha (no pastilla cuadrada) */
.qem-propcard .elementor-widget-button{ padding:16px 2px 2px; text-align:left; }
.qem-propcard .elementor-button{
background:transparent !important; color:var(--qem-accent) !important;
border:none !important; border-radius:0 !important; padding:0 !important;
font-family:var(--qem-sans) !important; font-weight:600; letter-spacing:.08em;
text-transform:uppercase; font-size:12.5px;
}
.qem-propcard .elementor-button .elementor-button-text::after{
content:" →"; display:inline-block; transition:transform .35s var(--qem-ease);
}
.qem-propcard:hover .elementor-button{ color:var(--qem-accent-2) !important; }
.qem-propcard:hover .elementor-button .elementor-button-text::after{ transform:translateX(6px); }
/* ---- Hero full-viewport + carrusel ---- */
.qem-hero{ min-height:100vh !important; display:flex; align-items:center; transition:background-image 1.2s ease; }
.qem-hero .qem-hero-search{ display:flex !important; align-items:stretch; max-width:880px; margin:30px auto 0; background:#fff; border-radius:999px; box-shadow:0 14px 40px rgba(28,28,28,.25); overflow:visible; }
.qem-hero .elementor-widget-html{ width:100%; }
.qem-hero .qem-hero-search .f{ flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:14px 22px; border-right:1px solid var(--qem-line); text-align:left; }
.qem-hero .qem-hero-search label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--qem-accent); font-weight:600; }
.qem-hero .qem-hero-search input{ border:none; outline:none; font-family:var(--qem-sans); font-size:.95rem; color:var(--qem-ink); width:100%; background:transparent; }
.qem-hero .qem-hero-search .qem-motor-go{ background:var(--qem-accent); color:#fff; border:none; padding:0 38px; font-weight:600; cursor:pointer; font-family:var(--qem-sans); font-size:.95rem; border-radius:0 999px 999px 0; transition:background-color .3s var(--qem-ease); }
.qem-hero .qem-hero-search .qem-motor-go:hover{ background:var(--qem-accent-2); }
/* ---- Header transparente sobre el hero, sólido al scroll (HFE => #masthead) ---- */
#masthead{ position:fixed !important; top:0; left:0; right:0; width:100%; z-index:999; background:transparent !important; transition:background-color .35s, box-shadow .35s; }
#masthead .elementor-section{ background:transparent !important; }
#masthead.qem-scrolled{ background:var(--qem-dark) !important; box-shadow:0 6px 24px rgba(0,0,0,.18); }
@media(max-width:860px){
.qem-hero .qem-hero-search{ flex-wrap:wrap; border-radius:22px; }
.qem-hero .qem-hero-search .f{ flex:1 1 46%; border-right:none; border-bottom:1px solid var(--qem-line); }
.qem-hero .qem-hero-search .qem-motor-go{ flex:1 1 100%; padding:16px; border-radius:0 0 22px 22px; }
}
@media(max-width:520px){
.qem-hero .qem-hero-search .f{ flex:1 1 100%; }
}
/* ============================================================
PASE DE CONTRASTE + ESTILO (sesión 2026-06-14 · feedback cliente)
Sube el contraste donde el texto se lavaba y refuerza el lenguaje
de marca (separador volcán, logos transparentes, franjas oscuras).
============================================================ */
/* ---- Hero: overlay más fuerte y cálido (antes ~27% azulado → ilegible) ---- */
.qem-hero > .elementor-background-overlay{
background:linear-gradient(180deg,
rgba(20,18,16,.32) 0%,
rgba(20,18,16,.40) 48%,
rgba(20,18,16,.70) 100%) !important;
opacity:1 !important;
}
/* el título/subtítulo se despegan de la foto con una sombra sutil */
.qem-hero .elementor-widget-heading .elementor-heading-title{
text-shadow:0 2px 22px rgba(0,0,0,.40);
}
/* ---- Separador "volcán" cobrizo sobre los eyebrows de sección (marca) ---- */
.elementor-element-qp00006 .elementor-heading-title::before, /* "LO QUE BUSCAS" */
.elementor-element-qp00017 .elementor-heading-title::before{ /* "NUESTRAS PROPIEDADES" */
content:""; display:block; width:54px; height:30px; margin:0 auto 14px;
background:url('/wp-content/uploads/2026/06/qem-emblema-cobre.png') no-repeat center/contain;
}
/* separador volcán también en la franja oscura del CTA (le da estilo) */
.elementor-element-qp00061 .elementor-heading-title::before{
content:""; display:block; width:62px; height:34px; margin:0 auto 18px;
background:url('/wp-content/uploads/2026/06/qem-emblema-cobre.png') no-repeat center/contain;
}
/* ---- Títulos de sección con más presencia ---- */
.elementor-element-qp00007 .elementor-heading-title, /* "Para que disfrutes…" */
.elementor-element-qp00018 .elementor-heading-title{ /* "Los mejores lugares…" */
font-size:40px; line-height:1.15; margin-top:2px;
}
@media(max-width:600px){
.elementor-element-qp00007 .elementor-heading-title,
.elementor-element-qp00018 .elementor-heading-title{ font-size:30px; }
}
/* ---- Logo blanco transparente en header + footer (no el JPEG con caja) ---- */
.elementor-element-qh0001 .elementor-widget-container, /* header */
.elementor-element-qh0010 .elementor-widget-container{ /* footer */
background:url('/wp-content/uploads/2026/06/qem-logo-white.png') no-repeat center/contain;
}
.elementor-element-qh0001 .elementor-widget-container{ width:58px; height:53px; }
.elementor-element-qh0010 .elementor-widget-container{ width:120px; height:108px; }
/* mantener el área clickeable del logo */
.elementor-element-qh0001 .elementor-widget-container a,
.elementor-element-qh0010 .elementor-widget-container a{ display:block; width:100%; height:100%; }
/* ocultar el ![]()
original (JPEG con fondo) sin romper el layout */
.elementor-element-qh0001 img,
.elementor-element-qh0010 img{ display:none !important; }
/* ---- Footer: barra de copyright (navy viejo #22303f → negro de marca) ---- */
.elementor-element-qh0017{ background-color:#161616 !important; }
.elementor-element-qh0017 .hfe-copyright-wrapper,
.elementor-element-qh0017 .hfe-copyright-wrapper a{ color:rgba(255,255,255,.5) !important; }
/* ---- Footer: enlaces e inputs con mejor contraste ---- */
footer a:hover{ color:var(--qem-accent); }
.qem-form input:focus,
.qem-form textarea:focus{
border-color:var(--qem-accent) !important;
background:rgba(255,255,255,.12) !important;
outline:none;
}
/* ============================================================
MOVIMIENTO: animaciones + navegación suave (sesión 2026-06-15)
============================================================ */
/* ---- Scroll suave + offset por el header fijo ---- */
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:96px; }
/* ---- Hero: capas de crossfade real (background-image no transiciona solo) ---- */
.qem-hero{ position:relative; overflow:hidden; }
.qem-hero-layer{
position:absolute; inset:0; z-index:0;
background-size:cover; background-position:center;
opacity:0; transition:opacity 1.6s ease, transform 7s linear;
transform:scale(1.04);
}
.qem-hero-layer.is-active{ opacity:1; transform:scale(1.10); } /* ken-burns lento */
.qem-hero > .elementor-background-overlay{ z-index:1; }
.qem-hero > .elementor-container{ position:relative; z-index:2; }
/* ---- Entrada del hero al cargar (sin JS) ---- */
@keyframes qemHeroIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.qem-hero .elementor-widget-heading,
.qem-hero .elementor-widget-html{ animation:qemHeroIn 1s var(--qem-ease) both; }
.qem-hero .elementor-widget-heading:nth-of-type(1){ animation-delay:.15s; }
.qem-hero .elementor-widget-heading:nth-of-type(2){ animation-delay:.30s; }
.qem-hero .elementor-widget-html{ animation-delay:.48s; }
/* ---- Scroll reveal: fade-up al entrar al viewport ---- */
.qem-reveal{
opacity:0; transform:translateY(28px);
transition:opacity .8s var(--qem-ease), transform .8s var(--qem-ease);
will-change:opacity, transform;
}
.qem-reveal.is-in{ opacity:1; transform:none; }
/* stagger en las grillas (tarjetas en cascada) */
.qem-propgrid .elementor-column:nth-child(3n+2),
.qem-flipcard:nth-child(2){ transition-delay:.10s; }
.qem-propgrid .elementor-column:nth-child(3n+3),
.qem-flipcard:nth-child(3){ transition-delay:.20s; }
/* ---- Navegación: subrayado cobrizo animado en el menú ---- */
#masthead .elementor-nav-menu a,
#masthead .hfe-nav-menu a,
#masthead .menu-item > a{
position:relative; transition:color .25s var(--qem-ease);
}
#masthead .elementor-nav-menu a::after,
#masthead .hfe-nav-menu a::after,
#masthead .menu-item > a::after{
content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0;
background:var(--qem-accent); transition:width .32s var(--qem-ease);
}
#masthead .elementor-nav-menu a:hover::after,
#masthead .hfe-nav-menu a:hover::after,
#masthead .menu-item > a:hover::after,
#masthead .menu-item.current-menu-item > a::after{ width:100%; }
#masthead .elementor-nav-menu a:hover,
#masthead .hfe-nav-menu a:hover,
#masthead .menu-item > a:hover{ color:var(--qem-accent); }
/* ---- Botones: transición suave global + lift en los CTA pastilla ---- */
.elementor-button{
transition:background-color .3s var(--qem-ease), color .3s var(--qem-ease),
transform .3s var(--qem-ease), box-shadow .3s var(--qem-ease) !important;
}
.elementor-element-qp00058 .elementor-button:hover, /* "Ver propiedades" */
.elementor-element-qp00063 .elementor-button:hover, /* CTA "Ver propiedades" */
.qem-form button:hover{
transform:translateY(-2px);
box-shadow:0 12px 26px rgba(192,120,64,.38);
}
.qem-form button{ transition:transform .3s var(--qem-ease), box-shadow .3s var(--qem-ease), background-color .3s var(--qem-ease); }
/* ---- Flip cards: sombra/elevación suave al hover (refuerza la profundidad) ---- */
.qem-flipcard .tp-flipbox{ transition:transform .5s var(--qem-ease), box-shadow .5s var(--qem-ease); }
.qem-flipcard:hover .tp-flipbox{ transform:translateY(-6px); box-shadow:var(--qem-shadow-lg); }
/* ---- Respeto a usuarios con movimiento reducido ---- */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
.qem-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
.qem-hero-layer{ transition:opacity .4s ease !important; transform:none !important; }
.qem-hero-layer.is-active{ transform:none !important; }
.qem-hero .elementor-widget-heading,
.qem-hero .elementor-widget-html{ animation:none !important; }
}
/* ============================================================
PROPUESTA A — "Editorial claro / Revista de montaña"
Luz, calidez y asimetría tipo revista. Rompe la sensación
"cuadrada/ordenada" con ritmo en zigzag y proporciones de foto
alternadas. Tipografía display grande, mucho aire.
============================================================ */
body{ background:var(--qem-bg); }
/* Titulares de sección como display (Cormorant grande, aireado) */
.elementor-element-qp00007 .elementor-heading-title,
.elementor-element-qp00018 .elementor-heading-title{ font-size:48px; line-height:1.08; font-weight:400; }
.qem-hero .elementor-element-qp00001 .elementor-heading-title{ font-size:62px !important; line-height:1.04; font-weight:300; }
@media(max-width:760px){
.qem-hero .elementor-element-qp00001 .elementor-heading-title{ font-size:38px !important; }
.elementor-element-qp00007 .elementor-heading-title,
.elementor-element-qp00018 .elementor-heading-title{ font-size:32px; }
}
/* Alojamientos en ritmo de revista (MASONRY).
Antes: zigzag con margin-top dentro de un CSS grid → cada offset hacía
crecer la fila y dejaba huecos verticales irregulares (lo que se veía
"descuadrado / con espacios raros"). Ahora multi-columna: las cards se
empaquetan por su altura natural → flujo orgánico de revista, sin grilla
cuadrada y con un ritmo de separación constante (40px). */
.qem-propgrid > .elementor-container{
display:block !important;
column-count:3; column-gap:40px;
max-width:1200px; margin-left:auto; margin-right:auto;
}
.qem-propgrid > .elementor-container > .qem-propcard{
break-inside:avoid; -webkit-column-break-inside:avoid;
display:block; width:100% !important; max-width:none !important;
margin:0 0 40px !important;
}
@media(max-width:900px){ .qem-propgrid > .elementor-container{ column-count:2; column-gap:28px; }
.qem-propgrid > .elementor-container > .qem-propcard{ margin-bottom:28px !important; } }
@media(max-width:600px){ .qem-propgrid > .elementor-container{ column-count:1; } }
/* ============================================================
NAVBAR — Boutique centrado (logo arriba · menú centrado)
Logo legible (antes 58px ilegible), menú con tracking +
subrayado cobre, header que se compacta al scrollear.
Override sobre la estructura HFE (sección qh0005).
============================================================ */
/* Apilar las dos columnas (logo / menú) y centrarlas */
#masthead .elementor-element-qh0005 > .elementor-container{
flex-direction:column !important;
align-items:center !important;
max-width:none !important;
gap:2px; padding:16px 20px;
transition:padding .35s var(--qem-ease);
}
#masthead .elementor-element-qh0002,
#masthead .elementor-element-qh0004{ width:100% !important; max-width:100% !important; }
#masthead .elementor-element-qh0002 > .elementor-widget-wrap,
#masthead .elementor-element-qh0004 > .elementor-widget-wrap{ justify-content:center !important; }
/* Logo centrado y LEGIBLE (override del 58×53) */
.elementor-element-qh0001 .elementor-widget-container{
width:118px !important; height:107px !important; margin:0 auto;
transition:width .35s var(--qem-ease), height .35s var(--qem-ease);
}
/* Menú: centrado, mayúsculas, tracking editorial */
#masthead .elementor-element-qh0003,
#masthead .elementor-element-qh0003 > .elementor-widget-container,
#masthead .elementor-element-qh0003 nav{ width:100% !important; text-align:center; }
#masthead .elementor-element-qh0003 .hfe-nav-menu{
display:flex !important; flex-wrap:wrap; justify-content:center !important;
width:100% !important; padding-left:0 !important; margin:0 auto;
}
#masthead .elementor-element-qh0003 a.hfe-menu-item{
text-transform:uppercase; letter-spacing:.16em;
font-family:var(--qem-sans); font-weight:500; font-size:12px;
color:#fff !important; padding:8px 16px !important; position:relative;
}
/* subrayado cobre animado (en hover y en el ítem activo) */
#masthead .elementor-element-qh0003 a.hfe-menu-item::after{
content:""; position:absolute; left:16px; right:16px; bottom:2px; height:1.5px;
background:var(--qem-accent); transform:scaleX(0); transform-origin:center;
transition:transform .3s var(--qem-ease);
}
#masthead .elementor-element-qh0003 a.hfe-menu-item:hover::after,
#masthead .elementor-element-qh0003 .current-menu-item > a.hfe-menu-item::after{ transform:scaleX(1); }
/* Header se compacta al scrollear (más elegante, menos peso) */
#masthead.qem-scrolled .elementor-element-qh0005 > .elementor-container{ padding:8px 20px; }
#masthead.qem-scrolled .elementor-element-qh0001 .elementor-widget-container{ width:72px !important; height:65px !important; }
@media(max-width:760px){
.elementor-element-qh0001 .elementor-widget-container{ width:90px !important; height:81px !important; }
#masthead .elementor-element-qh0003 a.hfe-menu-item{ font-size:11px; letter-spacing:.12em; padding:6px 10px !important; }
}
/* ============================================================
FIX MÓVIL — menú hamburguesa (3 barras) desplegable legible
Los ítems del menú son texto blanco (#fff) para verse sobre el
hero. En móvil/tablet HFE despliega el menú con fondo claro por
defecto → texto blanco sobre fondo blanco (ilegible). Aquí le
damos al panel desplegable fondo oscuro de marca, ítems en
columna a lo ancho y acento cobre al ítem activo.
Breakpoint del widget = tablet (≤1024px → aparece el ícono).
============================================================ */
@media(max-width:1024px){
/* Panel desplegable: la que abre el ícono de 3 barras */
#masthead .elementor-element-qh0003 .hfe-nav-menu-layout,
#masthead .elementor-element-qh0003 nav.hfe-nav-menu__layout-horizontal{
position:absolute !important;
top:100% !important;
right:0 !important;
left:auto !important;
width:min(360px, calc(100vw - 32px)) !important;
max-width:calc(100vw - 32px) !important;
z-index:10020 !important;
}
#masthead .elementor-element-qh0003 ul.hfe-nav-menu{
flex-direction:column !important; flex-wrap:nowrap;
align-items:stretch !important;
width:100% !important;
min-width:0 !important;
background:var(--qem-dark) !important;
border-top:2px solid var(--qem-accent);
border-radius:0 0 var(--qem-r) var(--qem-r);
box-shadow:0 18px 40px rgba(0,0,0,.32);
padding:4px 0 !important; margin:0;
}
/* cada ítem ocupa todo el ancho, separado por una línea sutil */
#masthead .elementor-element-qh0003 ul.hfe-nav-menu > li.menu-item{ width:100%; }
#masthead .elementor-element-qh0003 ul.hfe-nav-menu > li.menu-item + li.menu-item{
border-top:1px solid rgba(255,255,255,.08);
}
#masthead .elementor-element-qh0003 a.hfe-menu-item{
display:block; width:100%; text-align:center;
color:#F7F5F2 !important; text-shadow:none !important;
background:var(--qem-dark) !important;
padding:14px 18px !important; font-size:13px; letter-spacing:.14em;
}
/* ítem activo o al tocar → acento cobre, con leve realce de fondo */
#masthead .elementor-element-qh0003 a.hfe-menu-item:hover,
#masthead .elementor-element-qh0003 a.hfe-menu-item:focus,
#masthead .elementor-element-qh0003 .current-menu-item > a.hfe-menu-item{
color:var(--qem-accent) !important;
background:#24211e !important;
}
/* el subrayado cobre no aporta en vertical → lo ocultamos */
#masthead .elementor-element-qh0003 a.hfe-menu-item::after{ display:none; }
/* ícono hamburguesa siempre visible (blanco) sobre el hero claro */
#masthead .elementor-element-qh0003 .hfe-nav-menu-icon svg,
#masthead .elementor-element-qh0003 .hfe-nav-menu__toggle{
color:#fff !important; fill:#fff !important;
}
}
/* ============================================================
HEADER COMPACTO — al scrollear (home) o en páginas internas
Colapsa el bloque centrado a una BARRA: logo chico a la
izquierda + menú en línea a la derecha, fondo sólido oscuro.
Esto resuelve (1) el navbar "muy grueso" al bajar y
(2) el header que se solapaba con el título en internas.
============================================================ */
#masthead.qem-scrolled,
body:not(.home) #masthead{
background:var(--qem-dark) !important;
box-shadow:0 4px 20px rgba(0,0,0,.22);
}
#masthead.qem-scrolled .elementor-element-qh0005 > .elementor-container,
body:not(.home) #masthead .elementor-element-qh0005 > .elementor-container{
flex-direction:row !important; align-items:center !important;
justify-content:space-between !important; flex-wrap:nowrap;
gap:18px; padding:7px 34px;
}
/* columnas a ancho automático en modo barra */
#masthead.qem-scrolled .elementor-element-qh0002,
body:not(.home) #masthead .elementor-element-qh0002{ width:auto !important; flex:0 0 auto; }
#masthead.qem-scrolled .elementor-element-qh0004,
body:not(.home) #masthead .elementor-element-qh0004{ width:auto !important; flex:1 1 auto; }
/* logo chico, a la IZQUIERDA y bien alineado */
#masthead.qem-scrolled .elementor-element-qh0002 > .elementor-widget-wrap,
body:not(.home) #masthead .elementor-element-qh0002 > .elementor-widget-wrap{ justify-content:flex-start !important; }
#masthead.qem-scrolled .elementor-element-qh0001 .elementor-widget-container,
body:not(.home) #masthead .elementor-element-qh0001 .elementor-widget-container{
width:50px !important; height:46px !important; margin:0 !important;
}
/* menú en línea, alineado a la derecha */
#masthead.qem-scrolled .elementor-element-qh0003 .hfe-nav-menu,
body:not(.home) #masthead .elementor-element-qh0003 .hfe-nav-menu{ justify-content:flex-end !important; }
/* Páginas internas: empujar el contenido bajo el header fijo (sin overlap) */
body:not(.home){ padding-top:62px; }
@media(max-width:760px){ body:not(.home){ padding-top:58px; } }
/* ============================================================
FLIP → TARJETA ESTÁTICA ELEGANTE (sección "Por qué elegirnos")
Se elimina el volteo 3D. La foto + título quedan SIEMPRE
visibles; la descripción aparece en un fade suave al hover.
Animación limpia, acorde a la dirección editorial.
============================================================ */
.qem-flipcard .tp-flipbox,
.qem-flipcard .tp-flipbox__holder,
.qem-flipcard .tp-flipbox__front,
.qem-flipcard .tp-flipbox__back{
perspective:none !important; transform:none !important; -webkit-transform:none !important;
transform-style:flat !important; backface-visibility:visible !important; -webkit-backface-visibility:visible !important;
transition:opacity .45s var(--qem-ease) !important;
}
.qem-flipcard .tp-flipbox__holder{ position:relative !important; }
.qem-flipcard .tp-flipbox__front,
.qem-flipcard .tp-flipbox__back{ position:absolute !important; inset:0 !important; }
/* FRONT: foto + título siempre visibles */
.qem-flipcard .tp-flipbox__front{ opacity:1 !important; z-index:1; }
.elementor-5 .elementor-element.elementor-element-qp00082 .tp-flipbox__front{
background-image:url('/wp-content/uploads/2026/06/card-dedicacion.jpg') !important;
}
.elementor-5 .elementor-element.elementor-element-qp00084 .tp-flipbox__front{
background-image:url('/wp-content/uploads/2026/06/card-exclusividad.jpg') !important;
}
.elementor-5 .elementor-element.elementor-element-qp00086 .tp-flipbox__front{
background-image:url('/wp-content/uploads/2026/06/card-espacios.jpg') !important;
}
.qem-flipcard .tp-flipbox__front .tp-flipbox__content{
display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:26px;
}
.qem-flipcard .tp-flipbox__title-front{
text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-family:var(--qem-sans);
color:#fff; font-size:16px; margin:0; position:relative; z-index:2;
transition:opacity .35s var(--qem-ease);
}
/* al hover, el título del frente se desvanece para no encimarse con el texto de atrás */
.qem-flipcard .tp-flipbox__holder:hover .tp-flipbox__title-front{ opacity:0; }
.qem-flipcard .tp-flipbox__title-front::before{
content:""; display:block; width:42px; height:3px; background:var(--qem-accent); margin:0 0 10px;
}
/* BACK: overlay oscuro con la descripción, oculto hasta el hover */
.qem-flipcard .tp-flipbox__back{
opacity:0 !important; z-index:2;
background:linear-gradient(180deg, rgba(16,14,12,.90) 0%, rgba(16,14,12,.975) 100%) !important;
}
.qem-flipcard .tp-flipbox__holder:hover .tp-flipbox__back{ opacity:1 !important; }
.qem-flipcard .tp-flipbox__back .tp-flipbox__content{
display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:26px; text-align:left;
}
.qem-flipcard .tp-flipbox__title-back{
font-family:var(--qem-serif); font-size:24px; font-weight:500; color:#fff; margin:0 0 8px;
}
.qem-flipcard .tp-flipbox__desc-back{
font-family:var(--qem-sans); font-size:14px; line-height:1.6; color:rgba(255,255,255,.92); margin:0;
}
/* ============================================================
UNIFORMIDAD DE ESQUINAS — radio parejo en fotos/tarjetas
============================================================ */
.qem-propcard img,
.qem-flipcard .tp-flipbox,
.qem-flipcard .tp-flipbox__holder{ border-radius:var(--qem-r) !important; overflow:hidden; }
.qem-propcard img{ display:block; transition:transform .6s var(--qem-ease); }
/* ============================================================
LIGHTBOX / ZOOM de imágenes (galería)
============================================================ */
.qem-lb{ position:fixed; inset:0; z-index:99999; background:rgba(15,13,11,.93);
display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.qem-lb.is-open{ display:flex; opacity:1; }
.qem-lb__img{ max-width:90vw; max-height:88vh; border-radius:var(--qem-r);
box-shadow:0 30px 80px rgba(0,0,0,.55); }
.qem-lb__close{ position:absolute; top:18px; right:26px; width:46px; height:46px;
font-size:34px; line-height:1; color:#fff; background:none; border:none; cursor:pointer; opacity:.85; }
.qem-lb__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:50px;
color:#fff; background:none; border:none; cursor:pointer; padding:0 22px; opacity:.7; transition:opacity .2s; }
.qem-lb__nav:hover,.qem-lb__close:hover{ opacity:1; }
.qem-lb__prev{ left:6px; } .qem-lb__next{ right:6px; }
@media(max-width:600px){ .qem-lb__nav{ font-size:38px; padding:0 12px; } }
/* ============================================================
FRANJA CTA "¿Listo para vivir Malalcahuello?" (qp00065)
Fondo: paisaje de lavanda del Parque Nacional + overlay
oscuro para legibilidad (antes era un bloque plano).
============================================================ */
.elementor-element-qp00065{
background-image:linear-gradient(rgba(20,18,16,.60),rgba(20,18,16,.74)),
url('/wp-content/uploads/2026/06/parque-lavanda.jpg') !important;
background-size:cover !important; background-position:center !important;
background-attachment:fixed;
}
.elementor-element-qp00065 .elementor-background-overlay{ opacity:0 !important; }
/* Proporciones de foto alternadas → ritmo de revista (la del medio cuadrada) */
.qem-propcard:nth-child(3n+1) .elementor-widget-image .elementor-widget-container{ aspect-ratio:4/5; }
.qem-propcard:nth-child(3n+2) .elementor-widget-image .elementor-widget-container{ aspect-ratio:1/1; }
.qem-propcard:nth-child(3n+3) .elementor-widget-image .elementor-widget-container{ aspect-ratio:4/5; }
/* Nombre un punto más grande, hover cobrizo (ya en base) */
.qem-propcard .elementor-heading-title{ font-size:28px; }
/* ============================================================
AJUSTE (sesión 2026-06-19 · feedback Enzo)
1) Flip-cards "Lo que buscas": quitar el "medio redondeo" (16px) que
se veía malardo peleando con el resto editorial (cabañas de esquina
recta) → esquina crisp + sombra más contenida = look intencional.
2) Navbar hover: el texto YA NO se vuelve cobre (ese cobre se mimetizaba
con la madera/café de las fotos de cabañas y no resaltaba). Ahora en
hover el texto queda claro de alto contraste y el cobre se usa solo
como subrayado-acento.
============================================================ */
/* (1) Flip-cards crisp, alineadas con las cards editoriales de cabañas */
.qem-flipcard .tp-flipbox,
.qem-flipcard .tp-flipbox__holder,
.qem-flipcard .tp-flipbox__front,
.qem-flipcard .tp-flipbox__back{ border-radius:4px !important; }
.qem-flipcard .tp-flipbox{ box-shadow:0 10px 30px rgba(28,28,28,.10); }
.qem-flipcard:hover .tp-flipbox{ box-shadow:0 18px 44px rgba(28,28,28,.16); }
/* (2) Navbar: hover de alto contraste (texto claro) + subrayado cobre */
/* legible también sobre el hero claro (estado transparente) */
#masthead .elementor-nav-menu a,
#masthead .hfe-nav-menu a,
#masthead .menu-item > a{ text-shadow:0 1px 10px rgba(0,0,0,.28); }
/* en hover el texto se mantiene claro (NO cobre) → siempre destaca */
#masthead .elementor-nav-menu a:hover,
#masthead .hfe-nav-menu a:hover,
#masthead .menu-item > a:hover,
#masthead .menu-item.current-menu-item > a{ color:#fff !important; }
/* el cobre vive en el subrayado animado, un punto más presente */
#masthead .elementor-nav-menu a::after,
#masthead .hfe-nav-menu a::after,
#masthead .menu-item > a::after{ height:2.5px; bottom:-6px; background:var(--qem-accent); }
/* ============================================================
AJUSTE (sesión 2026-06-22 · revisión estilo/contraste/distancias)
A) Contraste del header transparente: el logo blanco y el menú se
lavaban sobre la nieve clara del tope del hero. Scrim superior
(degradado oscuro) SOLO cuando el header está transparente; al
hacer scroll el header es sólido y el scrim desaparece.
B) Logo con sombra sutil para despegar de fondos claros.
============================================================ */
#masthead{ position:fixed; }
#masthead::before{
content:""; position:absolute; left:0; right:0; top:0; height:220%;
pointer-events:none; z-index:0;
background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 100%);
opacity:1; transition:opacity .35s var(--qem-ease);
}
#masthead.qem-scrolled::before{ opacity:0; } /* sólido → no hace falta scrim */
#masthead > *{ position:relative; z-index:1; } /* contenido por encima del scrim */
.elementor-element-qh0001 .elementor-widget-container{ /* logo header: sombra para fondos claros */
filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
/* C) Hero: un respiro de tracking/altura en el título display uppercase */
.qem-hero .elementor-element-qp00001 .elementor-heading-title{
letter-spacing:.012em; line-height:1.06;
}
/* ============================================================
Motor de reservas (OtaSync) — selector de cabaña + panel inline (toggle)
============================================================ */
/* Selector de cabaña, calzado al resto de campos del .qem-hero-search */
.qem-hero .qem-hero-search .qem-motor-select{
border:none; outline:none; background:transparent; width:100%; cursor:pointer;
font-family:var(--qem-sans); font-size:.95rem; color:var(--qem-ink);
appearance:none; -webkit-appearance:none; padding-right:18px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23C07840' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right center;
}
/* Campo de fechas (rango con flatpickr) */
.qem-hero .qem-hero-search .qem-motor-dates{ cursor:pointer; }
.qem-hero .qem-hero-search input.flatpickr-input{ cursor:pointer; }
/* Stepper de huéspedes (− valor +) */
.qem-hero .qem-hero-search .qem-motor-guestsf{ justify-content:center; }
.qem-stepper{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.qem-hero .qem-hero-search .qem-stepper__btn{
background:transparent; color:var(--qem-accent); border:1px solid var(--qem-line);
width:30px; height:30px; min-width:30px; padding:0; border-radius:50%;
font-size:1.15rem; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background-color .2s var(--qem-ease), color .2s var(--qem-ease);
}
.qem-hero .qem-hero-search .qem-stepper__btn:hover{ background:var(--qem-accent); color:#fff; }
.qem-stepper__val{ min-width:22px; text-align:center; font-family:var(--qem-sans); font-weight:600; font-size:.95rem; color:var(--qem-ink); }
/* Panel inline tipo Imperio: el motor se despliega debajo del hero (no modal) */
.qem-motor-results{
display:none; width:92%; max-width:1100px; margin:40px auto 64px;
background:#fff; border-radius:16px; overflow:hidden;
box-shadow:0 20px 60px rgba(28,28,28,.3); scroll-margin-top:90px;
}
.qem-motor-results.is-open{ display:block; animation:qemMotorFadeUp .5s ease-out; }
.qem-motor-results__head{
display:flex; justify-content:space-between; align-items:center;
padding:14px 22px; color:#fff;
background:linear-gradient(135deg, var(--qem-accent) 0%, var(--qem-accent-2) 100%);
}
.qem-motor-results__head h3{
margin:0; color:#fff; font-family:var(--qem-sans);
font-size:1.05rem; font-weight:600; letter-spacing:.01em;
}
.qem-motor-results__close{
background:rgba(255,255,255,.2); color:#fff; border:none; cursor:pointer;
padding:8px 16px; border-radius:8px; font-weight:600; font-size:.9rem;
font-family:var(--qem-sans); transition:background-color .3s var(--qem-ease);
}
.qem-motor-results__close:hover{ background:rgba(255,255,255,.34); }
.qem-motor-iframe{ width:100%; height:720px; border:0; display:block; background:#fff; }
@keyframes qemMotorFadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }
@media(max-width:760px){
.qem-motor-results{ width:100%; border-radius:0; margin:24px 0 40px; }
.qem-motor-iframe{ height:560px; }
.qem-motor-results__head{ flex-direction:column; gap:10px; text-align:center; }
}