.elementor-kit-34217{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-7fede16:#EEE8DF;--e-global-color-3d0d80b:#361E20;--e-global-color-2caaf9c:#8B703C;--e-global-typography-primary-font-family:"freighttextpro";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"freighttextpro";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"freighttextpro";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"freighttextpro";--e-global-typography-accent-font-weight:500;color:#FFFFFF;font-family:"freighttextpro", Sans-serif;}.elementor-kit-34217 e-page-transition{background-color:#FFBC7D;}.elementor-kit-34217 a{color:#FFFFFF;font-family:"freighttextpro", Sans-serif;font-size:18px;}.elementor-kit-34217 h1{color:#FFFFFF;}.elementor-kit-34217 h2{color:#FFFFFF;}.elementor-kit-34217 button,.elementor-kit-34217 input[type="button"],.elementor-kit-34217 input[type="submit"],.elementor-kit-34217 .elementor-button{font-family:"freighttextpro", Sans-serif;border-radius:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-kit-34217 label{font-family:"freighttextpro", Sans-serif;}.elementor-kit-34217 input:not([type="button"]):not([type="submit"]),.elementor-kit-34217 textarea,.elementor-kit-34217 .elementor-field-textual{font-family:"freighttextpro", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}.sc_layouts_title_caption{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-34217 button,.elementor-kit-34217 input[type="button"],.elementor-kit-34217 input[type="submit"],.elementor-kit-34217 .elementor-button{padding:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== HB v10 — Panel izquierdo único + tira derecha sin transiciones ===== */

/* alto del header si es sticky (0px si quieres pegado arriba) */
:root { --hdr: 0px; }

/* 0) cero espacios/gaps en toda la sección HB */
.hb-section,
.hb-section > .elementor-container,
.hb-section > .e-con,
.hb-section .elementor-column,
.hb-section .elementor-widget-wrap,
.hb-section .e-con-inner { padding:0 !important; gap:0 !important; }
.hb-section .e-con { --container-widget-gap:0px !important; }
.hb-section .elementor-widget:not(:last-child){ margin:0 !important; }
.hb-section .elementor-element-populated{ padding:0 !important; }
.hb-section .elementor-widget-spacer,
.hb-section .elementor-widget-spacer .elementor-spacer-inner{ height:0 !important; margin:0 !important; }
.hb-section [class*="trx_addons_parallax"]{ transform:none !important; }

/* 1) IZQUIERDA: un panel sticky que cambia el texto */
.hb-left{
  position: sticky;
  top: var(--hdr);
  height: calc(100vh - var(--hdr));
  z-index: 2;
}
body.admin-bar .hb-left{
  top: calc(var(--hdr) + 32px);
  height: calc(100vh - var(--hdr) - 32px);
}
.hb-left > .elementor-widget-wrap,
.hb-left > .e-con-inner{ position:relative; height:100%; }

/* cada bloque de texto (usa clase hb-copy) ocupa el panel y se alterna */
.hb-left .hb-copy{
  position:absolute; inset:0;
  display:grid; align-content:center;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.hb-left .hb-copy.is-current{
  opacity:1; transform:none; pointer-events:auto;
}

/* si te quedaron antiguos hb-item en la izquierda, ocúltalos */
.hb-left .hb-item{ display:none !important; }

/* 2) DERECHA: tira de imágenes, una debajo de otra (100vh), sin fade */
.hb-right{ position:relative; top:0; height:auto; overflow:visible; border-radius:0; z-index:1; }
.hb-right > .elementor-widget-wrap,
.hb-right > .e-con-inner{ position:relative; height:auto; }

/* sin márgenes y sin “seam” entre frames */
.hb-right .hb-img.elementor-widget{ margin:0 !important; }
.hb-right .hb-img{ position:relative; height:calc(100vh + 1px); overflow:hidden; }
.hb-right .hb-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  opacity:1 !important;                 /* sin crossfade */
  transform:scale(var(--z,1.02));       /* zoom lo maneja el JS */
  transition:none;
  will-change:transform;
}

/* Asegura que el wrapper de la columna izq es el que contiene los .hb-copy */
.hb-left > .elementor-widget-wrap,
.hb-left > .e-con-inner { position:relative; height:100%; }

/* Capas correctas para que el texto activo siempre quede encima */
.hb-left .hb-copy { z-index:0; }
.hb-left .hb-copy.is-current { z-index:2; }

/* (opcional) color de fondo transparente por si algún copy trae fondo */
.hb-left .hb-copy { background: transparent !important; }

/* Quitar “badge” circular de los íconos sociales del theme */
body:not(.elementor-editor-active) .socials_wrap .social_item .social_icon,
body:not(.elementor-editor-active) .socials_wrap .socials_item .social_icon,
body:not(.elementor-editor-active) .sc_layouts_row .socials_wrap .social_item .social_icon,
body:not(.elementor-editor-active) .elementor-widget-social-icons .elementor-social-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Por si el borde/fondo viene en el pseudo-elemento */
body:not(.elementor-editor-active) .socials_wrap .social_item .social_icon::before,
body:not(.elementor-editor-active) .elementor-widget-social-icons .elementor-social-icon::before {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mantener accesibilidad: solo quitamos el aro “feíto” en mouse,
   pero permitimos foco visible para teclado */
body:not(.elementor-editor-active) .socials_wrap .social_item .social_icon:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Oculta el promo popup del theme/magnific en el frontend */
body:not(.elementor-editor-active) .popup_wrap.popup_promo,
body:not(.elementor-editor-active) .mfp-bg,
body:not(.elementor-editor-active) .mfp-wrap {
  display: none !important;
  visibility: hidden !important;
}
html.mfp-zoom-out-cur, html.mfp-ready { overflow:auto !important; }

/* === Cards altas tipo Teravalis === */

/* El contenedor que TIENE el fondo */
.tv-card-bg{
  position: relative;
  overflow: hidden;
  /* Relación vertical (alargada) */
  aspect-ratio: 3 / 4;                 /* ⇠ prueba 2/3 si las quieres aún más delgadas */
  border-radius: 14px;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;   /* base */
  isolation: isolate;

  /* zoom (hover o scroll controla --z) */
  --z: 1.02;
}

/* Si usas la versión “zoom con pseudo-elemento” (recomendada) */
.tv-card-bg::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: inherit;
  background-size: inherit;
  transform: scale(var(--z));
  transition: transform .6s ease;
  will-change: transform;
}
.tv-card-bg:hover{ --z: 1.08; }        /* hover opcional */

/* Texto al borde inferior, alineado a la izquierda, con degradado */
.tv-card-bg .tv-caption{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding: clamp(16px, 3vw, 32px);
  width:100%;
  text-align:left; color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.tv-card-bg .tv-caption *{ pointer-events:auto; } /* permite clicks en enlaces/botones */

/* Opcional: barra decorativa bajo el título (añade <span class="tv-bar"></span>) */
.tv-card-bg .tv-bar{
  display:block; width:64px; height:3px; margin-top:10px;
  background: currentColor; opacity:.8;
  border-radius: 2px;
}

/* Responsivo: un poco más esbeltas en desktop, más “cuadradas” en móvil */
@media (min-width:1025px){
  .tv-card-bg{ aspect-ratio: 2 / 3; }   /* ⇠ aún más delgadas en desktop */
}
@media (max-width:767px){
  .tv-card-bg{ aspect-ratio: 4 / 5; }   /* ⇠ menos alta en móvil si queda muy larga */
}

/* (Opcional) quita espacios/gutters excesivos del grid donde están */
.section-con-cards .elementor-container,
.section-con-cards .e-con{ gap: 24px !important; }   /* ajusta el gap del contenedor padre */

/* === Carrusel alto/delgado específico (widget ID b756082) === */
.elementor-element-b756082 .swiper,
.elementor-element-b756082 .swiper-container{
  height: clamp(340px, 58vh, 560px) !important;   /* ALTURA del carrusel */
}

.elementor-element-b756082 .swiper-wrapper{ 
  align-items: stretch !important;
}

.elementor-element-b756082 .swiper-slide{
  height: 100% !important;
}

.elementor-element-b756082 .swiper-slide-inner{
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Imagen tipo “poster” (alto > ancho) */
.elementor-element-b756082 .swiper-slide-image{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 2 / 3;               /* prueba 3/4 si las quieres menos delgadas */
  border-radius: 12px;                /* opcional */
}

/* Limpia paddings que a veces agrega el tema */
.elementor-element-b756082 .elementor-image-carousel,
.elementor-element-b756082 .elementor-image-carousel-wrapper{
  padding: 0 !important;
}

/* Si ves líneas entre slides, reduce el gap desde el widget.
   (Si tu Swiper soporta gap por CSS, puedes usar:) */
/* .elementor-element-b756082 .swiper-wrapper{ gap: 24px !important; } */

/* HEADER y contenedores del menú: quitar transform para que fixed use el viewport */
header.elementor-element-6f55fa9,
header.elementor-element-395570a,
#mega-menu-wrap-menu_main,
#mega-menu-menu_main{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  overflow: visible !important;          /* el menú necesita desbordar */
}

/* Z-index seguro sobre el contenido */
header.elementor-element-6f55fa9,
#mega-menu-wrap-menu_main{
  z-index: 10000 !important;
}

/* ===== Mega panel FULL-WIDTH (desktop) ===== */
/* Backdrop: que cubra TODO el viewport (detrás del header) */
/* Header siempre al frente */
header.elementor-element-6f55fa9,
#mega-menu-wrap-menu_main {
  z-index: 10000 !important;
}

/* Submenú de “Características” ocupando TODO el viewport,
   pero por debajo del header.  */
@media (min-width:769px){
  :root{
    --panel-pad-x: clamp(16px,4vw,48px);
    --panel-pad-y: clamp(24px,6vw,56px);
    --content-max: 1400px;
    
    /* tamaño del corte inferior visible */
    --mega-bottom-gap: 100px;   /* ajusta a gusto (20–40px) */
  }

  /* Asegura overflow visible en el wrapper de Max Mega Menu */
  #mega-menu-wrap-menu_main,
  #mega-menu-menu_main{ overflow: visible !important; }

  /* ID del item con submenú (ajusta si cambia) */
  #mega-menu-item-34255 > .mega-sub-menu{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
/* cubre detrás del header (desde el top del viewport)… */
    top: 0 !important;
/* …pero deja un “corte” visible abajo */
   bottom: var(--mega-bottom-gap) !important;

width: 100vw !important;
max-width: 100vw !important;
/* sin height para no pelear con bottom; si quieres, explícitamente: */
/* height: auto !important; */

    /* El contenido NO queda bajo el header: empujamos con padding-top = altura del header */
    padding:
      calc(var(--mega-top,110px) + var(--panel-pad-y))
      var(--panel-pad-x)
      var(--panel-pad-y) !important;

    background: #e9e0d4;                /* tu beige */
    z-index: 9998 !important;           /* por debajo del header (10000) */
    border-radius: 0 !important;
  }

  /* Centrar y limitar el contenido interno del mega */
  #mega-menu-item-34255 > .mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu{
    max-width: var(--content-max);
    margin-inline: auto;
    width: 100%;
  }

  /* Si estás logueado con la barra de admin, compensa el alto extra */
  body.admin-bar #mega-menu-item-34255 > .mega-sub-menu{
    padding-top:
      calc(var(--mega-top,110px) + 32px + var(--panel-pad-y)) !important;
  }
}

/* --- Mantén el panel detrás de los elementos del header --- */
@media (min-width:769px){
  /* El overlay del submenú queda por debajo (z:1) */
  #mega-menu-item-34255 > .mega-sub-menu{
    z-index: 1 !important;
  }

  /* Los enlaces de primer nivel por encima (z:2) para que sean clicables */
  #mega-menu-menu_main > li.mega-menu-item > a.mega-menu-link{
    position: relative;
    z-index: 2;               /* más que el submenú */
  }

  /* Sube también el logo y el CTA si hiciera falta */
  header.elementor-element-6f55fa9 [data-id="074c5c6"],   /* contenedor logo */
  header.elementor-element-6f55fa9 .sc_layouts_logo,
  header.elementor-element-6f55fa9 .elementor-element-f1d8d71, /* "Haz tu reserva" */
  header.elementor-element-6f55fa9 [data-id="c9f9a58"]{        /* si tu CTA tiene este id */
    position: relative;
    z-index: 2;
  }
}

/* CTA "Haz tu reserva" SIEMPRE por encima del panel */
@media (min-width:769px){
  /* el overlay del submenú sigue detrás */
  #mega-menu-item-34255 > .mega-sub-menu{
    z-index: 1 !important;
  }

  /* contenedor del CTA (ID que pasaste) */
  header.elementor-element-6f55fa9 .elementor-element-c9f9a58{
    position: relative !important;
    z-index: 9999 !important;
  }

  /* widget del texto del CTA y su <a> por si crean otro contexto */
  header.elementor-element-6f55fa9 .elementor-element-f1d8d71,
  header.elementor-element-6f55fa9 .elementor-element-f1d8d71 a{
    position: relative !important;
    z-index: 9999 !important;
  }

  /* los links de primer nivel del menú también por encima */
  #mega-menu-menu_main > li.mega-menu-item > a.mega-menu-link{
    position: relative;
    z-index: 9999;
  }
}

/* === Header móvil: burger a la derecha y centrado === */
@media (max-width: 768px){
  :root{ --mob-header-h: 64px; }

  /* Header móvil */
  header.elementor-element-395570a{
    min-height: var(--mob-header-h);
    display: flex !important;
    align-items: center !important;           /* centra vertical todo */
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    padding-right: calc(22px + env(safe-area-inset-right)) !important; /* empuja más a la derecha */
  }

  /* Columna del botón (hamburguesa) */
  header.elementor-element-395570a [data-id="e9001ea"]{
    margin-left: auto !important;             /* lo lleva a la derecha */
    display: flex !important;
    align-items: center !important;           /* centra vertical dentro de la columna */
    padding-right: 26px;                       /* ajuste fino a la derecha */
  }

  /* Wrapper del botón */
  header.elementor-element-395570a
  [data-id="e9001ea"] .sc_layouts_menu_mobile_button_burger{
    display: flex;
    align-items: center;                      /* centra el icono en su caja */
    justify-content: center;
    height: var(--mob-header-h);              /* usa el alto del header para centrar perfecto */
  }

  /* Hit area del <a> */
  header.elementor-element-395570a
  [data-id="e9001ea"] .sc_layouts_menu_mobile_button_burger a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                              /* área táctil cómoda */
    height: 44px;
    line-height: 1;
  }

  /* El icono mismo por si trae line-height extraño */
  header.elementor-element-395570a
  [data-id="e9001ea"] .sc_layouts_menu_mobile_button_burger
  .sc_layouts_item_icon{
    line-height: 1 !important;
    display: block;
  }
}

/* === HEADER MÓVIL: transparente y por encima del hero === */
@media (max-width: 768px){

  /* Saca el header del flujo: va por encima del hero */
  header.elementor-element-395570a{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 10020 !important;     /* por encima de todo */
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Mata cualquier fondo/overlay que venga de Elementor o del theme */
  header.elementor-element-395570a::before,
  header.elementor-element-395570a::after,
  header.elementor-element-395570a .elementor-background-overlay,
  header.elementor-element-395570a .sc_layouts_row,
  header.elementor-element-395570a .sc_layouts_row_type_compact,
  header.elementor-element-395570a .elementor-container,
  header.elementor-element-395570a .e-con,
  header.elementor-element-395570a .e-con-inner{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Elementor crea un placeholder cuando hay sticky: elimínalo */
  .elementor-sticky__spacer{ height: 0 !important; background: transparent !important; }

  /* Asegúrate que la primera sección NO agrega separación arriba */
  .page_content_wrap,
  .content_wrap,
  .post_content,
  .elementor-section-wrap > .elementor-section:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Si tu hero/slider/video trae z-index alto, bájalo para que el header quede encima */
  .elementor-section.hero,                 /* cambia .hero si tu sección tiene otra clase */
  .elementor-section:first-child{
    position: relative;
    z-index: 1;
  }

  /* Burger: mantenerlo alineado a la derecha y centrado vertical (por si se reseteó) */
  header.elementor-element-395570a [data-id="e9001ea"]{
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  header.elementor-element-395570a
  [data-id="e9001ea"] .sc_layouts_menu_mobile_button_burger a{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; line-height:1;
  }
}
/* Desktop: desplaza la columna de enlaces a la derecha */
@media (min-width:769px){
  /* mueve TODO el bloque interior un poco a la derecha */
  #mega-menu-item-34255 > .mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu{
    padding-right: clamp(50px, 4vw, 80px) !important; /* ↑ sube/baja este valor */
  }

}/* End custom CSS */