/* ============================================================
   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-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; max-width:760px; margin:30px auto 0; background:#fff; border-radius:999px; box-shadow:0 14px 40px rgba(28,28,28,.25); overflow:hidden; }
.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 button{ background:var(--qem-accent); color:#fff; border:none; padding:0 34px; font-weight:600; cursor:pointer; font-family:var(--qem-sans); transition:background-color .3s var(--qem-ease); }
.qem-hero .qem-hero-search button: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:760px){
  .qem-hero .qem-hero-search{ flex-wrap:wrap; border-radius:22px; }
  .qem-hero .qem-hero-search .f{ flex:1 0 40%; border-right:none; border-bottom:1px solid var(--qem-line); }
  .qem-hero .qem-hero-search button{ flex:1 0 100%; padding:15px; }
}

/* ============================================================
   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 <img> 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: columnas desfasadas (zigzag) */
.qem-propgrid > .elementor-container{ align-items:start; gap:60px 40px; }
.qem-propcard:nth-child(3n+2){ margin-top:56px; }
.qem-propcard:nth-child(3n+3){ margin-top:26px; }
@media(max-width:900px){
  .qem-propcard:nth-child(3n+2),
  .qem-propcard:nth-child(3n+3){ margin-top:0; }
  .qem-propcard:nth-child(even){ margin-top:40px; }
}

/* Proporciones de foto alternadas → look orgánico, no de grilla */
.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:3/4; }
.qem-propcard:nth-child(3n+3) .elementor-widget-image .elementor-widget-container{ aspect-ratio:1/1; }

/* Nombre un punto más grande, hover cobrizo (ya en base) */
.qem-propcard .elementor-heading-title{ font-size:28px; }