/* ==========================================================================
   Hotel Boutique Luxury — sistema de diseño
   Tema hijo de Albatross · Marketango
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* El vinotinto sale de la señalética física del hotel (tótem y toldo),
     no del logo digital: ese es #BE1313 y en botones lee a comida rápida. */
  --hbl-vino:      #6E1622;
  --hbl-vino-osc:  #4E0F18;
  --hbl-tinta:     #141414;
  --hbl-texto:     #222222;
  --hbl-suave:     #6B6B6B;
  --hbl-linea:     #E2E0DE;
  --hbl-fondo:     #FFFFFF;
  --hbl-crema:     #F6F4F1;

  --hbl-ancho:     1240px;
  --hbl-lado:      34px;
  --hbl-sec-top:   100px;
  --hbl-sec-bot:   120px;

  --hbl-fuente:    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body{
  font-family:var(--hbl-fuente);
  font-size:17px;
  line-height:1.82;
  color:var(--hbl-texto);
  background:var(--hbl-fondo);
  -webkit-font-smoothing:antialiased;
}
.hbl-wrap{max-width:var(--hbl-ancho);margin:0 auto;padding:0 var(--hbl-lado)}

/* Titulares: mayúsculas, peso 700, interlínea 1.0 — la firma del sistema */
.hbl-h1,.hbl-h2,
.hbl-header + * h1,
h1.hbl,h2.hbl{
  font-family:var(--hbl-fuente);
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.hbl-h1{font-size:clamp(2.4rem,5.6vw,3.9rem)}
.hbl-h2{font-size:clamp(1.7rem,3.4vw,2.35rem)}

.hbl-eyebrow{
  font-size:15px;font-weight:700;line-height:1;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hbl-vino);margin-bottom:20px;
}

/* --------------------------------------------------------------------------
   3. Botones — esquinas rectas, sin excepción
   -------------------------------------------------------------------------- */
.hbl-btn:not(.elementor-widget),
.hbl-cta,
.hbl-btn-wa{
  display:inline-block;padding:15px 35px;
  border:1px solid var(--hbl-vino);background:var(--hbl-vino);color:#fff;
  text-decoration:none;font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;border-radius:0;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.hbl-btn:not(.elementor-widget):hover,.hbl-cta:hover{
  background:var(--hbl-vino-osc);border-color:var(--hbl-vino-osc);color:#fff;
}
.hbl-btn-linea:not(.elementor-widget){background:transparent;color:var(--hbl-vino)}
.hbl-btn-linea:not(.elementor-widget):hover{background:var(--hbl-vino);color:#fff}
.hbl-btn-ancho:not(.elementor-widget){display:block;text-align:center;width:100%}

/* --------------------------------------------------------------------------
   4. Header sticky
   -------------------------------------------------------------------------- */
.hbl-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .3s ease,box-shadow .3s ease;
}
.hbl-header.is-fijo{
  background:#fff;
  box-shadow:0 1px 0 var(--hbl-linea),0 4px 20px rgba(0,0,0,.05);
}
.hbl-header .hbl-wrap{padding-left:0}
.hbl-hd{display:flex;align-items:stretch;gap:38px;min-height:96px}
.hbl-header.is-fijo .hbl-hd{min-height:78px}

/* El logo va en bloque vinotinto sólido: se lee sobre foto y sobre blanco */
.hbl-marca{
  display:grid;place-items:center;background:var(--hbl-vino);
  padding:16px 22px;align-self:stretch;transition:padding .3s ease;
  text-decoration:none;line-height:0;
}
.hbl-marca img{height:66px;width:auto;display:block;transition:height .3s ease}
.hbl-marca-texto{
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.3;
}
.hbl-header.is-fijo .hbl-marca{padding:12px 20px}
.hbl-header.is-fijo .hbl-marca img{height:52px}

.hbl-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.hbl-menu{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none}
.hbl-menu a{
  color:#fff;text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;transition:color .3s ease;
}
.hbl-menu a:hover{text-decoration:underline;text-underline-offset:5px}
.hbl-header.is-fijo .hbl-menu a{color:var(--hbl-tinta)}
.hbl-header.is-fijo .hbl-menu a:hover{color:var(--hbl-vino)}

/* Cuando NO hay hero a sangre completa, el header parte ya en estado sólido */
body:not(.hbl-hero-completo) .hbl-header{
  position:sticky;background:#fff;box-shadow:0 1px 0 var(--hbl-linea);
}
body:not(.hbl-hero-completo) .hbl-menu a{color:var(--hbl-tinta)}

/* --------------------------------------------------------------------------
   5. Menú móvil
   -------------------------------------------------------------------------- */
.hbl-burger{
  display:none;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between;
}
.hbl-burger span{display:block;height:2px;background:#fff;transition:background .3s ease}
.hbl-header.is-fijo .hbl-burger span{background:var(--hbl-tinta)}
body:not(.hbl-hero-completo) .hbl-burger span{background:var(--hbl-tinta)}

.hbl-menu-movil{
  position:fixed;inset:0;z-index:890;background:var(--hbl-tinta);
  padding:120px var(--hbl-lado) 40px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
}
.hbl-menu-movil-lista{list-style:none;margin:0 0 24px;padding:0}
.hbl-menu-movil-lista a{
  display:block;padding:16px 0;color:#fff;text-decoration:none;
  font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.hbl-menu-movil .hbl-btn{text-align:center}
.hbl-menu-movil .hbl-btn-linea{color:#fff;border-color:rgba(255,255,255,.5)}

@media(max-width:900px){
  .hbl-menu{display:none}
  .hbl-burger{display:flex}
}
@media(max-width:760px){
  .hbl-marca{padding:12px 16px}
  .hbl-marca img{height:48px}
  .hbl-header.is-fijo .hbl-marca{padding:10px 14px}
  .hbl-header.is-fijo .hbl-marca img{height:40px}
  .hbl-header .hbl-wrap{padding-right:22px}
  .hbl-cta{padding:12px 20px;font-size:12px}
}

/* --------------------------------------------------------------------------
   6. Hero rotativo con ken burns
   -------------------------------------------------------------------------- */
.hbl-hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  overflow:hidden;background:#0C0A0A;
}
.hbl-capas{position:absolute;inset:0;z-index:0}
.hbl-capa{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.02);transform-origin:center;
  animation:hblKenBurns 40s infinite;will-change:opacity,transform;
}
.hbl-capa:nth-child(1){animation-delay:0s}
.hbl-capa:nth-child(2){animation-delay:10s}
.hbl-capa:nth-child(3){animation-delay:20s}
.hbl-capa:nth-child(4){animation-delay:30s}

@keyframes hblKenBurns{
  0%   {opacity:0;transform:scale(1.02)}
  3%   {opacity:1}
  22%  {opacity:1}
  25%  {opacity:0;transform:scale(1.16)}
  100% {opacity:0;transform:scale(1.02)}
}

.hbl-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(0,0,0,.60) 0%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.28) 100%),
    rgba(0,0,0,.18);
}
.hbl-hero .hbl-wrap{position:relative;z-index:2;width:100%;padding-top:170px;padding-bottom:60px}
.hbl-hero .hbl-eyebrow{color:#fff;opacity:.9}
.hbl-hero .hbl-h1{color:#fff;margin-bottom:34px}

/* En móvil: una sola imagen (las jacarandas), sin rotación.
   El encuadre va al 30% horizontal para que la copa del árbol quede en cuadro:
   la pantalla es más alargada que la foto, así que el recorte es lateral. */
.hbl-capa-movil{display:none}
@media(max-width:760px){
  .hbl-capa{display:none}
  .hbl-capa-movil{
    display:block;position:absolute;inset:0;
    background-size:cover;background-position:30% 20%;
    transform:scale(1.02);transform-origin:30% 22%;
    animation:hblKenBurnsMovil 22s linear infinite alternate;will-change:transform;
  }
  /* Sobre la fachada blanca el degradado lateral no alcanza: se cambia a vertical */
  .hbl-hero::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.34) 32%,rgba(0,0,0,.74) 100%),
      rgba(0,0,0,.14);
  }
}
@keyframes hblKenBurnsMovil{
  from{transform:scale(1.02)}
  to  {transform:scale(1.13)}
}

.hbl-puntos{position:absolute;left:var(--hbl-lado);bottom:38px;z-index:4;display:flex;gap:9px}
.hbl-puntos i{
  display:block;width:34px;height:2px;background:rgba(255,255,255,.32);
  animation:hblPunto 40s infinite;
}
.hbl-puntos i:nth-child(1){animation-delay:0s}
.hbl-puntos i:nth-child(2){animation-delay:10s}
.hbl-puntos i:nth-child(3){animation-delay:20s}
.hbl-puntos i:nth-child(4){animation-delay:30s}
@keyframes hblPunto{
  0%,25%  {background:rgba(255,255,255,.95)}
  26%,100%{background:rgba(255,255,255,.32)}
}
@media(max-width:760px){.hbl-puntos{display:none}}

/* --------------------------------------------------------------------------
   7. Franja de prueba social
   -------------------------------------------------------------------------- */
.hbl-prueba{
  display:flex;flex-wrap:wrap;gap:10px 40px;align-items:baseline;margin-top:26px;
  color:#fff;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
}
.hbl-prueba b{font-size:19px;font-weight:700;letter-spacing:0;margin-right:7px}
.hbl-prueba span{opacity:.85}

/* --------------------------------------------------------------------------
   8. Contadores
   -------------------------------------------------------------------------- */
/* Las lineas separadoras van como borde de cada celda, no como fondo del grid:
   .hbl-wrap mete 34px de padding lateral y ese fondo asomaba por los costados. */
.hbl-cifras{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--hbl-linea);border-bottom:1px solid var(--hbl-linea);
}
/* '>' y no descendente: si no, .hbl-n y .hbl-t heredan el padding y se abre un hueco */
.hbl-cifras > div{
  padding:38px 18px;text-align:center;
  border-left:1px solid var(--hbl-linea);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.hbl-cifras > div:first-child{border-left:0}
.hbl-n{
  font-size:clamp(2.1rem,7vw,3.25rem);font-weight:700;line-height:1;
  color:var(--hbl-vino);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.hbl-t{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--hbl-suave);
  margin-top:11px;font-weight:600;line-height:1.4;max-width:16ch;
}
@media(max-width:760px){
  .hbl-cifras{grid-template-columns:1fr 1fr}
  .hbl-cifras > div{padding:28px 14px}
  .hbl-cifras > div:nth-child(odd){border-left:0}
  .hbl-cifras > div:nth-child(n+3){border-top:1px solid var(--hbl-linea)}
}

/* --------------------------------------------------------------------------
   9. Servicios con icono
   -------------------------------------------------------------------------- */
/* Las líneas van como borde de cada celda y no como fondo del grid: cuando la
   última fila queda incompleta, ese fondo se veía como un bloque gris suelto. */
.hbl-servicios{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--hbl-linea);
}
.hbl-servicios > div{
  padding:30px 26px;display:grid;
  grid-template-columns:28px 1fr;gap:15px;align-items:start;
  border-left:1px solid var(--hbl-linea);
  border-top:1px solid var(--hbl-linea);
}
.hbl-servicios > div:nth-child(3n+1){border-left:0}
.hbl-servicios > div:nth-child(-n+3){border-top:0}
.hbl-servicios svg{
  width:26px;height:26px;stroke:var(--hbl-vino);stroke-width:1.4;fill:none;
  stroke-linecap:square;stroke-linejoin:miter;margin-top:2px;
}
.hbl-servicios .hbl-s{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hbl-tinta);
}
.hbl-servicios .hbl-d{font-size:14px;color:var(--hbl-suave);margin-top:5px;line-height:1.5}
@media(max-width:820px){
  .hbl-servicios{grid-template-columns:1fr 1fr}
  .hbl-servicios > div:nth-child(3n+1){border-left:1px solid var(--hbl-linea)}
  .hbl-servicios > div:nth-child(odd){border-left:0}
  .hbl-servicios > div:nth-child(-n+3){border-top:1px solid var(--hbl-linea)}
  .hbl-servicios > div:nth-child(-n+2){border-top:0}
}
@media(max-width:520px){
  .hbl-servicios{grid-template-columns:1fr}
  .hbl-servicios > div{padding:24px 20px;border-left:0;border-top:1px solid var(--hbl-linea)}
  .hbl-servicios > div:first-child{border-top:0}
}

/* --------------------------------------------------------------------------
   10. Carrusel de habitaciones
   -------------------------------------------------------------------------- */
.hbl-carrusel{position:relative;margin-top:50px}
.hbl-pista{
  display:flex;gap:38px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:6px;
}
.hbl-pista::-webkit-scrollbar{display:none}
/* flex:0 0 → no crece ni se encoge. Con minmax(0,...) el grid las apretaba todas */
.hbl-pista > .hbl-hab{flex:0 0 calc((100% - 76px)/3);scroll-snap-align:start;min-width:0}
@media(max-width:1000px){
  .hbl-pista{gap:30px}
  .hbl-pista > .hbl-hab{flex:0 0 calc((100% - 30px)/2)}
}
@media(max-width:680px){
  /* La tarjeta ocupa el ancho menos los dos márgenes, y la pista lleva el
     respiro como relleno: así la primera arranca alineada con el resto del
     contenido y la siguiente asoma, que es lo que avisa de que hay más.
     `scroll-padding` mantiene ese margen al hacer el enganche. */
  .hbl-pista{
    gap:14px;
    padding-left:var(--hbl-lado);
    padding-right:var(--hbl-lado);
    scroll-padding-left:var(--hbl-lado);
  }
  .hbl-pista > .hbl-hab{flex:0 0 calc(100% - var(--hbl-lado) * 2)}
}

.hbl-hab{background:var(--hbl-fondo);text-decoration:none;color:inherit;display:block}
.hbl-hab .hbl-foto{position:relative;overflow:hidden;aspect-ratio:4/3}
.hbl-hab .hbl-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hbl-hab:hover .hbl-foto img{transform:scale(1.04)}
.hbl-hab .hbl-precio{
  position:absolute;left:0;bottom:0;background:var(--hbl-vino);color:#fff;
  padding:9px 17px;font-size:13px;font-weight:600;letter-spacing:.05em;
}
.hbl-hab .hbl-cuerpo{padding:22px 0 0}
.hbl-hab .hbl-num{
  font-size:11px;letter-spacing:.19em;color:var(--hbl-suave);text-transform:uppercase;
  margin-bottom:9px;font-weight:600;
}
.hbl-hab h3{
  font-size:20px;font-weight:700;text-transform:uppercase;line-height:1.15;
  letter-spacing:.01em;margin-bottom:7px;color:var(--hbl-tinta);
}
.hbl-hab p{font-size:15px;line-height:1.6;margin-bottom:14px}
.hbl-hab .hbl-mas{
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--hbl-vino);text-decoration:none;border-bottom:1px solid var(--hbl-vino);
  padding-bottom:3px;
}

.hbl-flechas{display:flex;gap:10px;margin-top:30px;justify-content:center}
.hbl-flechas button{
  width:52px;height:52px;border:1px solid var(--hbl-linea);background:transparent;
  cursor:pointer;display:grid;place-items:center;transition:all .2s;padding:0;
}
.hbl-flechas button:hover:not(:disabled){background:var(--hbl-vino);border-color:var(--hbl-vino)}
.hbl-flechas button:hover:not(:disabled) svg{stroke:#fff}
.hbl-flechas button:disabled{opacity:.3;cursor:default}
.hbl-flechas svg{
  width:19px;height:19px;stroke:var(--hbl-tinta);stroke-width:1.4;fill:none;
  stroke-linecap:square;transition:stroke .2s;
}

/* --------------------------------------------------------------------------
   11. Video de zonas comunes
   -------------------------------------------------------------------------- */
.hbl-video{position:relative;background:#0C0A0A;overflow:hidden}
.hbl-video video{display:block;width:100%;height:auto;object-fit:cover;max-height:78vh;opacity:.92}
.hbl-video .hbl-rotulo{
  position:absolute;left:var(--hbl-lado);bottom:34px;z-index:2;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.hbl-video .hbl-eyebrow{color:#E8B4BC}
.hbl-video .hbl-h2{color:#fff}
.hbl-video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 45%);
}
@media(max-width:760px){
  .hbl-video video{max-height:62vh}
  .hbl-video .hbl-rotulo{left:22px;bottom:24px}
}

/* --------------------------------------------------------------------------
   12. Ficha de habitación
   -------------------------------------------------------------------------- */
.hbl-hero-hab{min-height:74vh;align-items:flex-end}
.hbl-hero-hab::after{
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 55%,rgba(0,0,0,.42) 100%);
}
.hbl-hero-hab .hbl-wrap{padding-bottom:52px}
.hbl-miga{
  display:flex;gap:9px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:26px;
}
.hbl-miga a{color:rgba(255,255,255,.72);text-decoration:none}
.hbl-miga a:hover{color:#fff}
.hbl-meta-hero{
  display:flex;flex-wrap:wrap;gap:12px 34px;color:#fff;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;margin-top:6px;
}
.hbl-meta-hero b{font-size:20px;font-weight:700;letter-spacing:0;margin-right:8px}

.hbl-cuerpo-hab{
  display:grid;grid-template-columns:1fr 380px;gap:70px;
  /* El atajo `padding` pisaba el respiro lateral que trae `.hbl-wrap`: en
     escritorio no se notaba porque el ancho máximo ya centra el bloque, pero en
     celular el texto de la ficha quedaba pegado al borde. */
  padding:96px var(--hbl-lado) 110px;align-items:start;
}
@media(max-width:1000px){.hbl-cuerpo-hab{grid-template-columns:1fr;gap:48px}}

.hbl-galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hbl-galeria a{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--hbl-crema)}
.hbl-galeria img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hbl-galeria a:hover img{transform:scale(1.05)}
.hbl-galeria a:first-child{grid-column:1/-1;aspect-ratio:16/9}
@media(max-width:620px){.hbl-galeria{grid-template-columns:1fr 1fr}}

.hbl-datos{border-top:1px solid var(--hbl-linea)}
.hbl-datos > div{
  display:grid;grid-template-columns:190px 1fr;gap:24px;padding:15px 0;
  border-bottom:1px solid var(--hbl-linea);font-size:15.5px;
}
.hbl-datos dt{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--hbl-suave);
  font-weight:600;padding-top:4px;margin:0;
}
.hbl-datos dd{color:var(--hbl-tinta);margin:0}
@media(max-width:560px){.hbl-datos > div{grid-template-columns:1fr;gap:2px}}

.hbl-amen{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--hbl-linea);border:1px solid var(--hbl-linea)}
.hbl-amen > div{
  background:var(--hbl-fondo);padding:20px 22px;display:grid;
  grid-template-columns:24px 1fr;gap:14px;align-items:center;font-size:14.5px;
}
.hbl-amen svg{width:22px;height:22px;stroke:var(--hbl-vino);stroke-width:1.4;fill:none;
  stroke-linecap:square;stroke-linejoin:miter}
@media(max-width:560px){.hbl-amen{grid-template-columns:1fr}}

.hbl-sinesto{background:var(--hbl-crema);padding:26px 30px;border-left:3px solid var(--hbl-vino)}
.hbl-sinesto p{font-size:15px;color:var(--hbl-suave);margin:0}

.hbl-reserva{
  border:1px solid var(--hbl-linea);padding:32px 30px;position:sticky;top:110px;
  background:var(--hbl-fondo);
}
.hbl-reserva .hbl-desde{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--hbl-suave);font-weight:600;
}
.hbl-reserva .hbl-precio-g{
  font-size:2.7rem;font-weight:700;line-height:1;color:var(--hbl-vino);
  letter-spacing:-.02em;margin:8px 0 4px;
}
.hbl-reserva .hbl-nota{font-size:13px;color:var(--hbl-suave);line-height:1.55;margin-top:16px}
@media(max-width:1000px){.hbl-reserva{position:static}}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.hbl-footer{background:var(--hbl-tinta);color:#B9B4B0;padding:74px 0 30px;font-size:14.5px}
.hbl-fcols{
  display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:44px;padding-bottom:46px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
@media(max-width:980px){.hbl-fcols{grid-template-columns:1fr 1fr;gap:38px}}
@media(max-width:600px){.hbl-fcols{grid-template-columns:1fr;gap:32px}}
.hbl-flogo{height:82px;width:auto;margin-bottom:20px}
.hbl-fh{
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:#fff;
  margin-bottom:16px;font-weight:700;
}
.hbl-footer a{color:#B9B4B0;text-decoration:none}
.hbl-footer a:hover{color:#fff}
.hbl-redes,.hbl-fmenu{list-style:none;margin:0;padding:0}
.hbl-redes li,.hbl-fmenu li{margin-bottom:7px}
.hbl-cta-col{border-left:1px solid rgba(255,255,255,.13);padding-left:36px}
@media(max-width:980px){
  .hbl-cta-col{
    border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.13);
    padding-top:30px;grid-column:1/-1;
  }
}
.hbl-frase{
  font-size:20px;line-height:1.4;color:#fff;font-weight:500;margin-bottom:24px;
  letter-spacing:-.005em;
}
.hbl-btn-wa{display:inline-flex;align-items:center;gap:10px}
.hbl-btn-wa:hover{background:#fff;color:var(--hbl-vino);border-color:#fff}
.hbl-btn-wa svg{width:17px;height:17px;fill:currentColor}
.hbl-fnota{margin-top:16px;font-size:13px;color:#7E7975}
.hbl-fbot{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  padding-top:22px;font-size:12.5px;color:#8B8683;
}

/* --------------------------------------------------------------------------
   14. Secciones y accesibilidad
   -------------------------------------------------------------------------- */
.hbl-sec{padding:var(--hbl-sec-top) 0 var(--hbl-sec-bot)}
.hbl-sec-crema{background:var(--hbl-crema)}
.hbl-2col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
@media(max-width:900px){.hbl-2col{grid-template-columns:1fr;gap:40px}}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--hbl-vino);outline-offset:3px;
}
.hbl-header.is-fijo a:focus-visible{outline-color:var(--hbl-vino)}

/* El header es fijo: al saltar por anclas, dejar aire para que no lo tape */
:target{scroll-margin-top:110px}
[id]{scroll-margin-top:110px}

@media(prefers-reduced-motion:reduce){
  .hbl-capa{animation:none;opacity:0;transform:none}
  .hbl-capa:nth-child(1){opacity:1}
  .hbl-capa-movil{animation:none;transform:none}
  .hbl-puntos i{animation:none}
  .hbl-puntos i:nth-child(1){background:rgba(255,255,255,.95)}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   15. Marcado de MotoPress dentro de la ficha
   Estas clases las genera el plugin, no nosotros. Se estilan en vez de
   reimplementarlas: así sobreviven a sus actualizaciones.
   -------------------------------------------------------------------------- */

/* Atributos: capacidad, servicios, vista, cama, categorías */
.hbl-atributos .mphb-single-room-type-attributes{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--hbl-linea);
}
.hbl-atributos .mphb-single-room-type-attributes > li{
  display:grid;grid-template-columns:190px 1fr;gap:24px;padding:15px 0;
  border-bottom:1px solid var(--hbl-linea);font-size:15.5px;
}
.hbl-atributos .mphb-attribute-title{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--hbl-suave);font-weight:600;padding-top:4px;
}
.hbl-atributos .mphb-attribute-value{color:var(--hbl-tinta)}
.hbl-atributos .mphb-attribute-value a{
  color:var(--hbl-tinta);text-decoration:none;border-bottom:1px solid var(--hbl-linea);
}
.hbl-atributos .mphb-attribute-value a:hover{color:var(--hbl-vino);border-color:var(--hbl-vino)}
@media(max-width:560px){
  .hbl-atributos .mphb-single-room-type-attributes > li{grid-template-columns:1fr;gap:2px}
}

/* Formulario de reserva */
.hbl-reserva .mphb-booking-form{margin:0}
.hbl-reserva .mphb-required-fields-tip{
  font-size:12px;color:var(--hbl-suave);margin-bottom:14px;
}
.hbl-reserva .mphb-check-in-date-wrapper,
.hbl-reserva .mphb-check-out-date-wrapper,
.hbl-reserva .mphb-adults-wrapper,
.hbl-reserva .mphb-children-wrapper,
.hbl-reserva .mphb-capacity-wrapper{
  border:1px solid var(--hbl-linea);padding:11px 15px;margin-bottom:10px;
}
.hbl-reserva .mphb-booking-form label{
  display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--hbl-suave);font-weight:600;margin-bottom:4px;
}
.hbl-reserva .mphb-booking-form input,
.hbl-reserva .mphb-booking-form select{
  width:100%;border:0;padding:0;background:transparent;
  font-family:var(--hbl-fuente);font-size:15px;font-weight:500;color:var(--hbl-tinta);
}
.hbl-reserva .mphb-booking-form input:focus,
.hbl-reserva .mphb-booking-form select:focus{outline:none}
.hbl-reserva .mphb-check-in-date-wrapper:focus-within,
.hbl-reserva .mphb-check-out-date-wrapper:focus-within,
.hbl-reserva .mphb-adults-wrapper:focus-within,
.hbl-reserva .mphb-capacity-wrapper:focus-within{border-color:var(--hbl-vino)}

/* Botón de reservar: hereda el estilo del sistema */
.hbl-reserva .mphb-reserve-btn,
.hbl-reserva .mphb-reserve-btn.button{
  display:block;width:100%;text-align:center;padding:15px 35px;
  background:var(--hbl-vino);border:1px solid var(--hbl-vino);color:#fff;
  font-family:var(--hbl-fuente);font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;border-radius:0;cursor:pointer;
  transition:background .22s ease,border-color .22s ease;
}
.hbl-reserva .mphb-reserve-btn:hover{background:var(--hbl-vino-osc);border-color:var(--hbl-vino-osc)}
.hbl-reserva .mphb-errors-wrapper{
  font-size:13.5px;color:var(--hbl-vino);margin-top:12px;line-height:1.5;
}

/* Separador "o" entre el motor de reservas y WhatsApp */
.hbl-o{
  display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hbl-suave);
}
.hbl-o::before,.hbl-o::after{content:"";flex:1;height:1px;background:var(--hbl-linea)}

/* Galería que renderiza MotoPress dentro del contenido */
.hbl-hab-single .mphb-gallery,
.hbl-hab-single .gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:34px 0;
}
.hbl-hab-single .mphb-gallery br,
.hbl-hab-single .gallery br{display:none}
.hbl-hab-single .gallery-item{margin:0;width:auto !important}
.hbl-hab-single .gallery-item img{
  width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border:0 !important;
}
@media(max-width:620px){
  .hbl-hab-single .mphb-gallery,
  .hbl-hab-single .gallery{grid-template-columns:1fr 1fr}
}

.hbl-bloque{margin-bottom:56px}
.hbl-bloque:last-child{margin-bottom:0}
.hbl-otras{padding:90px 0 100px}


/* ==========================================================================
   16. Correcciones — 2026-09-04
   ========================================================================== */

/* El menú móvil se veía desplegado en escritorio.
   Causa: el elemento lleva [hidden], que el navegador traduce a display:none,
   pero mi propia regla .hbl-menu-movil{display:flex} le ganaba. */
.hbl-menu-movil[hidden]{display:none !important}
@media(min-width:901px){
  .hbl-menu-movil{display:none !important}
}

/* Los <li> heredaban márgenes del tema padre y "CONTACTO" caía a otra línea base */
/* Sin `display` a propósito: esta regla va después de la media query que oculta
   el menú en móvil, y volver a declararlo aquí la anulaba. */
.hbl-menu{
  align-items:center;gap:28px;
  margin:0;padding:0;list-style:none;flex-wrap:nowrap;
}
.hbl-menu li{
  margin:0;padding:0;list-style:none;
  display:flex;align-items:center;line-height:1;
}
.hbl-menu li::before,.hbl-menu li::marker{content:none;display:none}
.hbl-menu a{
  display:inline-flex;align-items:center;
  white-space:nowrap;line-height:1;padding:0;
}
.hbl-menu .sub-menu{display:none}

.hbl-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.hbl-cta{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}

.hbl-menu-movil-lista li{margin:0;padding:0;list-style:none}
.hbl-menu-movil-lista .sub-menu{display:none}

/* Galería: Albatross la sirve en 'albatross-small' y se veía diminuta.
   Se fuerza a llenar la celda para que el tamaño lo mande la rejilla. */
.hbl-hab-single .gallery,
.hbl-hab-single .mphb-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:34px 0;
}
.hbl-hab-single .gallery-item,
.hbl-hab-single .gallery dl,
.hbl-hab-single .gallery dt{
  margin:0 !important;padding:0 !important;
  width:100% !important;max-width:none !important;
}
.hbl-hab-single .gallery img,
.hbl-hab-single .mphb-gallery img{
  width:100% !important;height:100% !important;aspect-ratio:4/3;
  object-fit:cover;border:0 !important;display:block;
}
.hbl-hab-single .gallery br{display:none}
@media(max-width:620px){
  .hbl-hab-single .gallery,
  .hbl-hab-single .mphb-gallery{grid-template-columns:1fr 1fr}
}

/* El calendario que MotoPress inyecta en el contenido */
.hbl-hab-single .mphb-calendar,
.hbl-hab-single .mphb-single-room-type-calendar{
  margin:34px 0;padding:22px;border:1px solid var(--hbl-linea);
}

/* --------------------------------------------------------------------------
   16. Piezas de la portada
   -------------------------------------------------------------------------- */

/* Centinela del header: marca dónde termina el hero para el IntersectionObserver */
.hbl-centinela{position:absolute;bottom:88px;left:0;width:1px;height:1px}

.hbl-hero-texto{color:#EDEAE7;max-width:46ch;margin-bottom:38px;font-size:18px}
.hbl-hero-botones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px}

/* Variantes de botón que faltaban */
.hbl-btn-oscuro:not(.elementor-widget){background:var(--hbl-tinta);border-color:var(--hbl-tinta)}
.hbl-btn-oscuro:not(.elementor-widget):hover{background:var(--hbl-vino);border-color:var(--hbl-vino)}
.hbl-btn-claro:not(.elementor-widget){background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.hbl-btn-claro:not(.elementor-widget):hover{background:#fff;border-color:#fff;color:var(--hbl-vino)}

/* Rail vertical con el usuario de Instagram, pegado al borde derecho del hero */
.hbl-rail{
  position:absolute;right:14px;top:50%;z-index:4;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
@media(max-width:900px){.hbl-rail{display:none}}

/* Buscador de disponibilidad de MotoPress dentro del hero.
   Se estilan sus clases en vez de reimplementar el formulario. */
.hbl-buscador{background:#fff;padding:8px;margin-bottom:38px;max-width:900px}
.hbl-buscador form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0;margin:0}
.hbl-buscador .mphb-check-in-date-wrapper,
.hbl-buscador .mphb-check-out-date-wrapper,
.hbl-buscador .mphb-adults-wrapper,
.hbl-buscador .mphb-children-wrapper{
  flex:1 1 150px;min-width:0;padding:14px 20px;border-right:1px solid var(--hbl-linea);
}
.hbl-buscador label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hbl-suave);margin-bottom:6px;
}
.hbl-buscador input,.hbl-buscador select{
  width:100%;border:0;padding:0;font-family:var(--hbl-fuente);
  font-size:16px;color:var(--hbl-tinta);background:transparent;
}
.hbl-buscador input:focus,.hbl-buscador select:focus{outline:none}
.hbl-buscador button,.hbl-buscador input[type=submit]{
  flex:0 0 auto;margin:0;border:0;cursor:pointer;
  background:var(--hbl-vino);color:#fff;padding:22px 34px;
  font-family:var(--hbl-fuente);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.hbl-buscador button:hover,.hbl-buscador input[type=submit]:hover{background:var(--hbl-vino-osc)}
@media(max-width:760px){
  .hbl-buscador form{display:block}
  .hbl-buscador .mphb-check-in-date-wrapper,
  .hbl-buscador .mphb-check-out-date-wrapper,
  .hbl-buscador .mphb-adults-wrapper,
  .hbl-buscador .mphb-children-wrapper{
    border-right:0;border-bottom:1px solid var(--hbl-linea);
  }
  .hbl-buscador button,.hbl-buscador input[type=submit]{width:100%}
}

/* Título de sección */
.hbl-titulo-sec{margin-bottom:26px}
.hbl-titulo-sec .hbl-h2{margin:0}
.hbl-titulo-sec.hbl-centrado{text-align:center}

/* Sección destacada a sangre: texto a un lado, foto ocupando toda la columna */
.hbl-destacado{background:var(--hbl-crema)}
.hbl-destacado .hbl-2col{gap:0;align-items:stretch}
.hbl-destacado .hbl-texto{
  padding:100px var(--hbl-lado) 100px 0;max-width:640px;margin-left:auto;
}
.hbl-destacado img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .hbl-destacado .hbl-texto{padding:70px var(--hbl-lado)}
  .hbl-destacado img{max-height:52vh}
}

/* Imagen suelta dentro de una columna */
.hbl-2col img{width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   17. Widgets gratuitos de Elementor dentro del sistema
   Elementor pone nuestra clase en el DIV contenedor del widget, no en el
   elemento interno, y su global.css lo pinta con los colores del kit. Por eso
   se apunta al elemento interno con la clase del contenedor delante: gana por
   especificidad sin recurrir a !important.
   -------------------------------------------------------------------------- */

.elementor-widget-heading.hbl-h1 .elementor-heading-title,
.elementor-widget-heading.hbl-h2 .elementor-heading-title{
  font-family:var(--hbl-fuente);
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.005em;
  color:var(--hbl-tinta);
  text-wrap:balance;
  margin:0;
}
.elementor-widget-heading.hbl-h1 .elementor-heading-title{font-size:clamp(2.4rem,5.6vw,3.9rem)}
.elementor-widget-heading.hbl-h2 .elementor-heading-title{font-size:clamp(1.7rem,3.4vw,2.35rem)}

.elementor-widget-heading.hbl-eyebrow{margin-bottom:20px}
.elementor-widget-heading.hbl-eyebrow .elementor-heading-title{
  font-family:var(--hbl-fuente);
  font-size:15px;font-weight:700;line-height:1;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hbl-vino);margin:0;
}

/* Cuerpo de texto: el kit lo traía en blanco del diseño anterior */
.elementor-widget-text-editor{
  font-family:var(--hbl-fuente);font-size:17px;line-height:1.82;color:var(--hbl-texto);
}
.elementor-widget-text-editor p{margin:0 0 18px}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-widget-text-editor strong{color:var(--hbl-tinta);font-weight:500}

/* Botones. Albatross los estira a todo el ancho de la columna: se devuelven
   a su tamaño natural y se alinean a la izquierda como en el resto del sitio. */
/* Sólo cuando el widget no trae alineación propia: si no, pisa el 'centrar'
   que el hotel elija en Elementor. */
.elementor-widget-button.hbl-btn:not([class*="elementor-align-"]) .elementor-button-wrapper{text-align:left}
.elementor-widget-button.hbl-btn .elementor-button{
  width:auto;max-width:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--hbl-fuente);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:17px 32px;border-radius:0;border:1px solid var(--hbl-vino);
  background:var(--hbl-vino);color:#fff;transition:background .25s,border-color .25s;
}
.elementor-widget-button.hbl-btn .elementor-button:hover{
  background:var(--hbl-vino-osc);border-color:var(--hbl-vino-osc);color:#fff;
}
.elementor-widget-button.hbl-btn .elementor-button-content-wrapper{gap:0}

/* Imagen dentro de una columna: recorte controlado en vez de la foto entera.
   Casi todas las fotos del hotel son verticales 2:3 y sin esto miden 800 px. */
.elementor-widget-image.hbl-foto-alta img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
}

/* Sección destacada: la foto ocupa toda la altura de la fila */
.hbl-destacado .hbl-texto > .elementor-widget-wrap{
  padding:100px var(--hbl-lado) 100px 0;max-width:620px;margin-left:auto;
}
.hbl-destacado .hbl-foto-llena > .elementor-widget-wrap{padding:0;height:100%}
.hbl-destacado .hbl-foto-llena .elementor-widget-image,
.hbl-destacado .hbl-foto-llena .elementor-widget-container,
.hbl-destacado .hbl-foto-llena figure,
.hbl-destacado .hbl-foto-llena a{height:100%}
.hbl-destacado .hbl-foto-llena img{
  width:100%;height:100%;min-height:560px;object-fit:cover;display:block;
}
@media(max-width:900px){
  .hbl-destacado .hbl-texto > .elementor-widget-wrap{
    padding:70px var(--hbl-lado);max-width:none;
  }
  .hbl-destacado .hbl-foto-llena img{min-height:0;max-height:56vh}
}

/* En móvil el botón partía "Escribir por WhatsApp" en dos líneas */
@media(max-width:520px){
  .elementor-widget-button.hbl-btn .elementor-button{
    white-space:nowrap;padding:16px 22px;font-size:12px;letter-spacing:.08em;
  }
  .hbl-hero-botones .hbl-btn{white-space:nowrap;padding:16px 22px;font-size:12px}
}

/* --------------------------------------------------------------------------
   18. Ficha de habitación: correcciones sobre el tema padre
   -------------------------------------------------------------------------- */

/* Albatross mete 50px de padding al <article>: el hero dejaba de ir a sangre.
   Los márgenes laterales los pone .hbl-wrap, que ya está dentro. */
.site-main article.hbl-hab-single{padding-left:0;padding-right:0;margin-bottom:0}

/* Amiri (la serif de Albatross) se colaba en varios titulares nuestros y en
   los que imprime MotoPress. Se devuelven al sistema. */
.hbl-hab h3,
.hbl-fh,
.hbl-hab-single .mphb-calendar-title,
.hbl-hab-single .mphb-single-room-type-title{
  font-family:var(--hbl-fuente);
}
.hbl-hab-single .mphb-calendar-title{
  font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:700;text-transform:uppercase;
  line-height:1;letter-spacing:-.005em;color:var(--hbl-tinta);margin:0 0 26px;
}

/* Una ficha de habitación no lleva comentarios ni navegación entre entradas */
.hbl-hab-single + .post-navigation,
.single-mphb_room_type .post-navigation,
.single-mphb_room_type .comment-respond,
.single-mphb_room_type #comments{display:none}

/* --------------------------------------------------------------------------
   19. Páginas interiores: cabecera y rejilla de habitaciones
   -------------------------------------------------------------------------- */

.hbl-hero-pagina{
  min-height:56vh;align-items:flex-end;
  background-size:cover;background-position:center 40%;
}
.hbl-hero-pagina::after{
  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.30) 62%,rgba(0,0,0,.44) 100%);
}
.hbl-hero-pagina .hbl-wrap{padding-top:150px;padding-bottom:56px}
.hbl-hero-pagina .hbl-hero-texto{margin-bottom:0;margin-top:22px}
@media(max-width:760px){
  .hbl-hero-pagina{min-height:52vh}
  .hbl-hero-pagina .hbl-wrap{padding-top:130px;padding-bottom:42px}
}

/* Encabezado de cada grupo de habitaciones */
.hbl-grupo{
  display:flex;align-items:baseline;gap:18px;
  border-bottom:1px solid var(--hbl-linea);
  padding-bottom:18px;margin:0 0 40px;
}
.hbl-grupo + .hbl-rejilla{margin-bottom:74px}
.hbl-grupo .hbl-h2{margin:0}
.hbl-cuenta{
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hbl-suave);font-weight:600;margin-left:auto;
}

/* La misma tarjeta del carrusel, pero en rejilla: aquí sí pueden envolver */
.hbl-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
@media(max-width:1000px){.hbl-rejilla{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:680px){.hbl-rejilla{grid-template-columns:1fr;gap:34px}}

/* --------------------------------------------------------------------------
   20. Tabla de datos prácticos (check-in, desayuno, pagos…)
   Va en un widget de Texto de Elementor para que el hotel edite horarios
   sin tocar código.
   -------------------------------------------------------------------------- */

.hbl-tabla table,
table.hbl-tabla{width:100%;border-collapse:collapse;margin:0}
.hbl-tabla th,.hbl-tabla td{
  padding:18px 0;border-bottom:1px solid var(--hbl-linea);
  vertical-align:top;text-align:left;font-size:16px;line-height:1.6;
}
.hbl-tabla tr:first-child th,.hbl-tabla tr:first-child td{border-top:1px solid var(--hbl-linea)}
.hbl-tabla th,
.hbl-tabla td:first-child{
  width:38%;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hbl-suave);padding-right:24px;
}
.hbl-tabla td:last-child{color:var(--hbl-tinta)}
@media(max-width:620px){
  .hbl-tabla td,.hbl-tabla th{display:block;width:100%;padding:0;border:0}
  .hbl-tabla td:first-child{padding-top:16px}
  .hbl-tabla td:last-child{padding-bottom:16px;border-bottom:1px solid var(--hbl-linea)}
}

/* Lista con viñeta vinotinto para "Cerca del hotel" */
.hbl-lista ul{list-style:none;margin:0;padding:0}
.hbl-lista li{position:relative;padding-left:26px;margin-bottom:14px}
.hbl-lista li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--hbl-vino);
}

/* --------------------------------------------------------------------------
   21. Contacto
   -------------------------------------------------------------------------- */

.hbl-contacto{border-top:1px solid var(--hbl-linea)}
.hbl-dato{padding:22px 0;border-bottom:1px solid var(--hbl-linea)}
.hbl-dato-t{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hbl-suave);margin-bottom:9px;
}
.hbl-dato-v{
  display:block;font-size:18px;color:var(--hbl-tinta);text-decoration:none;line-height:1.5;
}
a.hbl-dato-v:hover{color:var(--hbl-vino)}
.hbl-dato-n{font-size:14px;color:var(--hbl-suave);margin-top:6px}

.hbl-mapa{line-height:0;background:var(--hbl-crema)}
.hbl-mapa iframe{display:block;filter:grayscale(.35) contrast(1.05)}

/* Formulario de WPForms dentro del sistema */
.hbl-formulario .wpforms-container{margin:0}
.hbl-formulario .wpforms-field{padding:0 0 18px}
.hbl-formulario .wpforms-field-label{
  font-family:var(--hbl-fuente);font-size:12px;font-weight:700 !important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hbl-suave);margin-bottom:8px;
}
.hbl-formulario input[type=text],
.hbl-formulario input[type=email],
.hbl-formulario input[type=tel],
.hbl-formulario textarea{
  width:100% !important;max-width:none !important;
  font-family:var(--hbl-fuente);font-size:16px;color:var(--hbl-tinta);
  border:1px solid var(--hbl-linea) !important;border-radius:0 !important;
  padding:14px 16px !important;background:#fff;
}
.hbl-formulario input:focus,.hbl-formulario textarea:focus{
  outline:none;border-color:var(--hbl-vino) !important;
}
.hbl-formulario button[type=submit],
.hbl-formulario .wpforms-submit{
  font-family:var(--hbl-fuente);font-size:13px;font-weight:700 !important;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--hbl-vino) !important;color:#fff !important;
  border:1px solid var(--hbl-vino) !important;border-radius:0 !important;
  padding:17px 32px !important;cursor:pointer;
}
.hbl-formulario .wpforms-submit:hover{background:var(--hbl-vino-osc) !important}

/* --------------------------------------------------------------------------
   22. Páginas de texto legal
   Los encabezados van dentro de un widget de Texto, así que no llevan clase
   propia: se estilan por contexto para que no hereden la serif del tema padre.
   -------------------------------------------------------------------------- */

.hbl-legal{font-size:16.5px;line-height:1.85}
.hbl-legal h2,
.hbl-legal h3{
  font-family:var(--hbl-fuente);color:var(--hbl-tinta);
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.1;
}
.hbl-legal h2{font-size:1.5rem;font-weight:700;margin:56px 0 18px}
.hbl-legal h3{font-size:1.05rem;font-weight:700;margin:36px 0 12px;letter-spacing:.02em}
.hbl-legal h2:first-child,.hbl-legal h3:first-child{margin-top:0}
.hbl-legal p{margin:0 0 18px}
.hbl-legal ul,.hbl-legal ol{margin:0 0 22px;padding-left:22px}
.hbl-legal li{margin-bottom:9px}
.hbl-legal strong{color:var(--hbl-tinta);font-weight:600}
.hbl-legal a{color:var(--hbl-vino);text-decoration:underline;text-underline-offset:3px}
.hbl-legal hr{border:0;border-top:1px solid var(--hbl-linea);margin:44px 0}

/* Aviso destacado dentro del texto legal */
.hbl-legal .aviso{
  background:var(--hbl-crema);border-left:3px solid var(--hbl-vino);
  padding:22px 26px;margin:0 0 30px;
}
.hbl-legal .aviso p:last-child{margin-bottom:0}

/* Ficha de datos del responsable */
.hbl-legal .datos{
  border-top:1px solid var(--hbl-linea);border-bottom:1px solid var(--hbl-linea);
  padding:22px 0;margin:0 0 30px;
}
.hbl-legal .datos p{margin:0 0 6px;font-size:16px}
.hbl-legal .datos p:last-child{margin-bottom:0}

/* Enlaces legales en la barra inferior del pie */
.hbl-flegal a{color:#8B8683;text-decoration:none}
.hbl-flegal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hbl-flegal i{font-style:normal;opacity:.5;margin:0 4px}
@media(max-width:700px){
  .hbl-fbot{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Estado vacío del blog y de la búsqueda */
.hbl-vacio{text-align:center}
.hbl-vacio p{max-width:56ch;margin:0 auto 18px}
.hbl-vacio-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* Aviso de dato legal faltante: sólo lo ve quien administra el sitio */
.hbl-falta a{
  color:#E8B4BC;text-decoration:none;border-bottom:1px dashed rgba(232,180,188,.5);
}
.hbl-falta a:hover{color:#fff;border-bottom-color:#fff}

/* --------------------------------------------------------------------------
   23. Habitaciones sin foto todavía
   Se declara la ausencia en vez de rellenar con una foto de otra habitación:
   el huésped lee la imagen de una tarjeta como «así es esta habitación».
   -------------------------------------------------------------------------- */

.hbl-hab .hbl-sin-foto{
  display:flex;align-items:center;justify-content:center;
  background:var(--hbl-crema);
  border:1px solid var(--hbl-linea);
  aspect-ratio:4/3;
}
.hbl-sin-foto-t{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hbl-suave);
}
.hbl-hab:hover .hbl-sin-foto{border-color:var(--hbl-vino)}

/* Aviso dentro de la ficha */
.hbl-aviso-fotos{
  background:var(--hbl-crema);border-left:3px solid var(--hbl-vino);
  padding:26px 30px;margin:0 0 38px;
}
.hbl-aviso-fotos p{margin:0 0 18px;font-size:16px;line-height:1.7}
.hbl-aviso-fotos strong{color:var(--hbl-tinta)}

/* --------------------------------------------------------------------------
   24. Marcado de MotoPress y del tema padre que se salía de la paleta
   Albatross pinta su acento (#FC9285, salmón) y su verde (#58A193) en el
   precio, los iconos de atributos y el calendario. Se traen a la paleta.
   -------------------------------------------------------------------------- */

/* Precio: estaba en salmón y en Amiri */
.hbl-hab-single .mphb-price,
.hbl-reserva .mphb-price,
.mphb-price{
  font-family:var(--hbl-fuente);
  font-weight:700;
  color:var(--hbl-vino);
  letter-spacing:-.01em;
}
.hbl-hab-single .mphb-price .mphb-currency{font-weight:700}

/* Iconos de los atributos: son un ::before con Font Awesome, en salmón y a 15px */
.hbl-atributos .mphb-single-room-type-attributes > li::before{
  color:var(--hbl-vino);
  font-size:20px;
  line-height:1;
  opacity:1;
}
.hbl-atributos .mphb-single-room-type-attributes > li{align-items:flex-start}

/* Calendario de disponibilidad */
.hbl-hab-single .datepick .datepick-month table td .mphb-check-in-date,
.hbl-hab-single .datepick .datepick-month table td .mphb-check-out-date,
.hbl-hab-single .datepick .datepick-month table td .mphb-selected-date,
.hbl-hab-single .datepick .datepick-month table td a.datepick-today,
.mphb-datepick-popup .datepick-month td .mphb-check-in-date,
.mphb-datepick-popup .datepick-month td .mphb-check-out-date,
.mphb-datepick-popup .datepick-month td .mphb-selected-date{
  background:var(--hbl-vino) !important;
  background-color:var(--hbl-vino) !important;
  color:#fff !important;
  border-radius:0 !important;
}
.hbl-hab-single .datepick .datepick-month table td .mphb-booked-date.mphb-date-check-in,
.hbl-hab-single .datepick .datepick-month table td .mphb-booked-date.mphb-date-check-out,
.mphb-datepick-popup .datepick-month td .mphb-booked-date{
  color:var(--hbl-suave) !important;
}
.hbl-hab-single .datepick .datepick-month table td a:hover,
.mphb-datepick-popup .datepick-month td a:hover{
  background:var(--hbl-crema);color:var(--hbl-vino);
}
.hbl-hab-single .datepick-month-header,
.mphb-datepick-popup .datepick-month-header{
  font-family:var(--hbl-fuente);font-weight:700;
}

/* --------------------------------------------------------------------------
   25. Tarjetas de «Más habitaciones»
   El texto iba pegado al borde del bloque y el enlace se resaltaba en salmón.
   -------------------------------------------------------------------------- */

.hbl-otras .hbl-hab .hbl-cuerpo{padding:24px 22px 26px}
.hbl-otras .hbl-hab{background:var(--hbl-fondo);border:1px solid var(--hbl-linea)}
.hbl-otras .hbl-hab:hover{border-color:var(--hbl-vino)}

/* El acento del tema padre se colaba en los enlaces de nuestras tarjetas */
.hbl-hab:hover h3,
.hbl-hab h3 a:hover,
.hbl-hab:hover .hbl-mas,
.hbl-hab .hbl-mas:hover{color:var(--hbl-vino)}
.hbl-hab:hover .hbl-num{color:var(--hbl-suave)}
.hbl-hab,
.hbl-hab:hover,
.hbl-hab:focus{text-decoration:none}
.hbl-hab h3,
.hbl-hab .hbl-num,
.hbl-hab p{text-decoration:none}

/* Redes sociales en la página de contacto */
.hbl-redes-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.hbl-redes-lista a{
  display:inline-block;padding:9px 16px;
  border:1px solid var(--hbl-linea);
  font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--hbl-tinta);text-decoration:none;
  transition:border-color .2s,color .2s;
}
.hbl-redes-lista a:hover{border-color:var(--hbl-vino);color:var(--hbl-vino)}

/* Sección de reseñas */
.hbl-resenas{padding-top:6px}
.hbl-resenas .hbl-titulo-sec{margin-bottom:34px}

/* El verde de Albatross (#58A193) también pinta «hoy», el día resaltado y el
   seleccionado, y no sólo con la clase de entrada/salida. Se cubren todas. */
.datepick .datepick-month table td .datepick-today,
.datepick .datepick-month table td .datepick-highlight,
.datepick .datepick-month table td .datepick-selected,
.datepick .datepick-month table td .mphb-selected-date,
.datepick .datepick-month table td .mphb-check-in-date,
.datepick .datepick-month table td .mphb-check-out-date,
.mphb-datepick-popup .datepick-month td .datepick-today,
.mphb-datepick-popup .datepick-month td .datepick-highlight,
.mphb-datepick-popup .datepick-month td .datepick-selected{
  background:var(--hbl-vino) !important;
  background-color:var(--hbl-vino) !important;
  color:#fff !important;
  border-radius:0 !important;
}
.datepick .datepick-month table td .mphb-available-date:hover,
.mphb-datepick-popup .datepick-month td .mphb-available-date:hover{
  background:var(--hbl-crema) !important;
  color:var(--hbl-vino) !important;
}
.datepick .datepick-month table td .datepick-today:hover,
.mphb-datepick-popup .datepick-month td .datepick-today:hover{
  background:var(--hbl-vino-osc) !important;color:#fff !important;
}
/* Los nombres de mes y la cabecera, en la tipografía del sistema */
.datepick,
.mphb-datepick-popup{font-family:var(--hbl-fuente)}
.datepick .datepick-month-header,
.datepick .datepick-month-header select,
.mphb-datepick-popup .datepick-month-header{
  font-family:var(--hbl-fuente);font-weight:700;color:var(--hbl-tinta);
}

/* La línea del precio: «Precio desde:» y «/ por noche» venían en Amiri cursiva */
.hbl-atributos .mphb-regular-price{
  font-family:var(--hbl-fuente);
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;
  margin-bottom:8px;
}
.hbl-atributos .mphb-regular-price > strong{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hbl-suave);width:100%;margin-bottom:4px;
}
.hbl-atributos .mphb-price-period{
  font-family:var(--hbl-fuente);font-style:normal;
  font-size:14px;color:var(--hbl-suave);
}

/* ==========================================================================
   26. Correcciones — 2026-09-05 (tarde)
   ========================================================================== */

/* --------------------------------------------------------------------------
   El salmón de Albatross (#FC9285) está escrito a mano en 45 sitios de su
   style.css, incluido `a:visited`. Como una tarjeta de habitación entera es un
   enlace, al visitarla se teñía de salmón el texto completo. Nuestro CSS carga
   después que el del tema padre, así que basta con redeclarar los enlaces.
   -------------------------------------------------------------------------- */

a{color:var(--hbl-vino)}
a:visited{color:var(--hbl-vino)}
a:hover,a:focus,a:active{color:var(--hbl-vino-osc)}

/* Las tarjetas de habitación son enlaces: su texto no debe cambiar de color */
.hbl-hab,
.hbl-hab:link,
.hbl-hab:visited,
.hbl-hab:hover,
.hbl-hab:focus,
.hbl-hab:active{color:var(--hbl-texto)}
.hbl-hab p,
.hbl-hab:visited p,
.hbl-hab:hover p{color:var(--hbl-texto)}
.hbl-hab h3,
.hbl-hab:visited h3{color:var(--hbl-tinta)}
.hbl-hab .hbl-num,
.hbl-hab:visited .hbl-num{color:var(--hbl-suave)}
.hbl-hab .hbl-mas,
.hbl-hab:visited .hbl-mas{color:var(--hbl-vino)}

/* Header y pie mantienen sus colores propios */
.hbl-menu a,.hbl-menu a:visited{color:#fff}
.hbl-header.is-fijo .hbl-menu a,
.hbl-header.is-fijo .hbl-menu a:visited{color:var(--hbl-tinta)}
body:not(.hbl-hero-completo) .hbl-menu a,
body:not(.hbl-hero-completo) .hbl-menu a:visited{color:var(--hbl-tinta)}
.hbl-footer a,.hbl-footer a:visited{color:#B9B4B0}
.hbl-footer a:hover{color:#fff}
.hbl-miga a,.hbl-miga a:visited{color:rgba(255,255,255,.72)}
.hbl-cta,.hbl-cta:visited,
.hbl-btn:not(.elementor-widget),
.hbl-btn:not(.elementor-widget):visited{color:#fff}
.hbl-btn-linea:not(.elementor-widget),
.hbl-btn-linea:not(.elementor-widget):visited{color:var(--hbl-vino)}
.hbl-btn-claro:not(.elementor-widget),
.hbl-btn-claro:not(.elementor-widget):visited{color:#fff}
.hbl-flegal a:visited{color:#8B8683}

/* --------------------------------------------------------------------------
   Contadores del hero: sobre la foto van en blanco, no en vinotinto
   -------------------------------------------------------------------------- */

.hbl-prueba .hbl-n{
  color:#fff;
  font-size:19px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
}

/* --------------------------------------------------------------------------
   Móvil: el menú de escritorio se colaba y los márgenes eran de escritorio
   -------------------------------------------------------------------------- */

@media(max-width:900px){
  .hbl-menu{display:none !important}
  .hbl-burger{display:flex}
  .hbl-nav{margin-left:auto;gap:14px}
}
@media(max-width:600px){
  :root{--hbl-lado:20px;--hbl-sec-top:64px;--hbl-sec-bot:72px}
  .hbl-hero .hbl-wrap{padding-top:130px;padding-bottom:44px}
  .hbl-hero-texto{font-size:16px;margin-bottom:28px}
  .hbl-prueba{gap:10px 18px;font-size:12.5px}
  .hbl-prueba .hbl-n{font-size:17px}
  .hbl-header .hbl-wrap{padding-right:16px}
  .hbl-cta{padding:11px 16px;font-size:11px;letter-spacing:.06em}
  .hbl-grupo{flex-wrap:wrap;gap:6px}
  .hbl-cuenta{margin-left:0}
  .hbl-legal{font-size:16px}
  .hbl-aviso-fotos{padding:20px 22px}
  .hbl-dato-v{font-size:17px}
}

/* El párrafo que envuelve el precio conservaba el salmón como color heredado */
.mphb-regular-price,
.hbl-atributos .mphb-regular-price{color:var(--hbl-texto)}

/* --------------------------------------------------------------------------
   27. Citas de huéspedes
   -------------------------------------------------------------------------- */

.hbl-citas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:1px solid var(--hbl-linea);margin-top:44px}
.hbl-cita{
  margin:0;padding:38px 34px;display:flex;flex-direction:column;
  border-left:1px solid var(--hbl-linea);
}
.hbl-cita:first-child{border-left:0}
.hbl-cita blockquote{
  margin:0 0 22px;padding:0;border:0;
  font-size:19px;line-height:1.6;color:var(--hbl-tinta);
  text-wrap:pretty;
}
.hbl-cita blockquote::before{content:"«"}
.hbl-cita blockquote::after{content:"»"}
.hbl-cita figcaption{margin-top:auto;display:flex;flex-direction:column;gap:3px}
.hbl-cita-quien{
  font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hbl-tinta);
}
.hbl-cita-fuente{font-size:13px;color:var(--hbl-suave)}
@media(max-width:900px){
  .hbl-citas{grid-template-columns:1fr}
  .hbl-cita{border-left:0;border-top:1px solid var(--hbl-linea)}
  .hbl-cita:first-child{border-top:0}
  .hbl-cita blockquote{font-size:17.5px}
}

/* Una sola cita, sin titular: bloque centrado en vez de rejilla de tres */
.hbl-citas-una{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}
.hbl-citas-sola{margin-top:0}
.hbl-citas-una .hbl-cita{padding:34px 38px;text-align:center;align-items:center}
.hbl-citas-una .hbl-cita blockquote{font-size:21px}
.hbl-citas-una .hbl-cita figcaption{align-items:center}

/* --------------------------------------------------------------------------
   28. Reserva de habitación (checkout de MotoPress)

   El plugin no trae CSS propio: hereda el de Albatross, que aquí mete su
   salmón (#FC9285) en los precios, su verde (#455D58) en todos los campos,
   Amiri en los títulos y Montserrat en los formularios. Y lo arma todo en una
   sola columna. Este bloque lo trae a la paleta y lo reparte en dos columnas;
   los contenedores .hbl-co-* los inserta inc/reservas.php.
   -------------------------------------------------------------------------- */

.mphb_sc_checkout-wrapper{max-width:1160px;margin:0 auto;padding:0 var(--hbl-lado)}
/* Albatross pone `line-height:2.3` en el body; en un formulario eso separa
   tanto las líneas que cada dato parece un párrafo aparte. */
.mphb_sc_checkout-form{font-family:var(--hbl-fuente);color:var(--hbl-texto);line-height:1.6}

/* --- Dos columnas: lo que se llena a la izquierda, lo que se lee a la derecha */

@media(min-width:1000px){
  .mphb_sc_checkout-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    column-gap:52px;
    align-items:start;
  }
  .hbl-co-principal{grid-column:1;grid-row:1;min-width:0}
  .hbl-co-resumen{
    grid-column:2;grid-row:1 / span 2;min-width:0;
    align-self:start;position:sticky;top:104px;
  }
  .mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper{grid-column:1;grid-row:2}
}

/* --- Bloques ------------------------------------------------------------- */

.mphb_sc_checkout-form .mphb-checkout-section{
  background:#fff;
  border:1px solid var(--hbl-linea);
  border-radius:0;
  padding:26px 28px;
  margin:0 0 20px;
}
.hbl-co-resumen .mphb-checkout-section{background:var(--hbl-crema);border-color:var(--hbl-linea)}
.mphb_sc_checkout-form .mphb-checkout-item-section{border:0;padding:0;margin:20px 0 0}

/* Títulos: Albatross los pone en Amiri a 30px, tamaño de titular de página
   dentro de un formulario. Se bajan al mismo antetítulo del resto del sitio.
   Va calificado con la sección porque el tema padre apunta a cada título por su
   clase (`.mphb-booking-details .mphb-booking-details-title`) y eso pesa más
   que una clase y un elemento. */
.mphb_sc_checkout-form .mphb-checkout-section h3,
.mphb_sc_checkout-form .mphb-checkout-section h4,
.mphb_sc_checkout-form #mphb-booking-details h3,
.mphb_sc_checkout-form #mphb-coupon-details h3,
.mphb_sc_checkout-form #mphb-customer-details h3,
.mphb_sc_checkout-form #mphb-billing-details h3,
.mphb_sc_checkout-form #mphb-price-details h4{
  font-family:var(--hbl-fuente);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hbl-suave);
  margin:0 0 20px;
  line-height:1.4;
}
.mphb_sc_checkout-form #mphb-booking-details .mphb-room-number{
  font-size:13px;letter-spacing:.13em;color:var(--hbl-tinta);
  margin:22px 0 12px;padding-top:22px;border-top:1px solid var(--hbl-linea);
}

/* --- Datos de la reserva -------------------------------------------------- */

/* Albatross los saca del contenedor con `margin:54px -40px 0` y les pone
   borde y 54px de relleno, pensado para otra maqueta. */
.mphb_sc_checkout-form .mphb-reserve-rooms-details{margin:0;padding:0}
.mphb_sc_checkout-form .mphb-room-details{border:0;margin:0;padding:0}
.mphb_sc_checkout-form .guest-chooser-wrapper{margin:0 0 8px}
.mphb_sc_checkout-form .mphb-price-breakdown{width:100%;margin:0}

.mphb-check-in-date,
.mphb-check-out-date{margin:0 0 6px;font-size:15px;color:var(--hbl-texto)}
.mphb-check-in-date strong,
.mphb-check-out-date strong{color:var(--hbl-tinta);font-weight:700}
.mphb-room-type-title{margin:0 0 14px;font-size:15px}
.mphb-room-type-title a{font-weight:700}

/* El nombre del huésped repite lo que ya se pide en «Su información» y no es
   obligatorio: se esconde para no sumar un campo más. El input sigue en el
   formulario y viaja vacío, que es lo que el plugin espera cuando no se llena. */
.mphb_sc_checkout-form .mphb-guest-name-wrapper{display:none}

/* --- Tarifas -------------------------------------------------------------- */

.mphb-rate-chooser .mphb-room-rate-chooser-title{margin-bottom:12px}
.mphb-room-rate-variant{
  display:block;margin:0 0 8px;padding:13px 15px;
  border:1px solid var(--hbl-linea);background:#fff;
  font-size:15px;line-height:1.5;
}
.mphb-room-rate-variant:last-child{margin-bottom:0}
/* La etiqueta ya es de bloque: el <br> del plugin sólo abre un hueco. */
.mphb-room-rate-variant br{display:none}
.mphb-room-rate-variant .mphb-radio-label{margin-right:9px}

/* Albatross gana con `.mphb-reserve-rooms-details .mphb-room-rate-variant
   .mphb-price`; se repite la misma especificidad para poder ganarle por orden. */
.mphb_sc_checkout-form .mphb-price,
.mphb-reserve-rooms-details .mphb-room-rate-variant .mphb-price,
.mphb-reserve-rooms-details .mphb-room-rate-variant .mphb-currency{
  color:var(--hbl-vino);
  font-family:var(--hbl-fuente);
  font-weight:700;
}

/* --- Desglose de precios -------------------------------------------------- */

/* La tabla del desglose mide por contenido y se salía de la columna: con
   ancho fijo la columna de importes manda y la de conceptos ajusta. */
.mphb-price-breakdown{
  width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px;margin:0;
}
.hbl-co-resumen .mphb-checkout-section{padding:24px}
.mphb-price-breakdown td:first-child,
.mphb-price-breakdown th:first-child{word-break:break-word}
.mphb-price-breakdown th,
.mphb-price-breakdown td{
  border:0;border-bottom:1px solid var(--hbl-linea);
  padding:9px 0;text-align:left;background:transparent;
  font-size:13.5px;color:var(--hbl-texto);
}
.mphb-price-breakdown .mphb-table-price-column{
  text-align:right;white-space:nowrap;width:118px;
}
.mphb-price-breakdown th{
  font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hbl-suave);
}
.mphb-price-breakdown .mphb-price-breakdown-group > td{
  font-weight:700;color:var(--hbl-tinta);
}
.mphb-price-breakdown tfoot td{
  border-bottom:0;border-top:1px solid var(--hbl-tinta);
  padding-top:12px;font-weight:700;color:var(--hbl-tinta);
}
.mphb-price-breakdown-accommodation{font-weight:700}
.mphb-inner-icon{color:var(--hbl-vino)}

/* --- Su información: dos campos por fila ---------------------------------- */

@media(min-width:700px){
  #mphb-customer-details{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  #mphb-customer-details > *{grid-column:span 2}
  #mphb-customer-details > .mphb-customer-name,
  #mphb-customer-details > .mphb-customer-last-name,
  #mphb-customer-details > .mphb-customer-email,
  #mphb-customer-details > .mphb-customer-phone,
  #mphb-customer-details > .mphb-customer-country{grid-column:span 1}
}
#mphb-customer-details > p{margin:0 0 16px}
/* Con etiquetas en bloque, el <br /> del plugin abre una línea vacía de más. */
#mphb-customer-details > p > br{display:none}
.mphb-required-fields-tip{margin:-6px 0 18px;color:var(--hbl-suave)}
.mphb-required-fields-tip small{font-size:12.5px}
.mphb_sc_checkout-form abbr[title]{
  color:var(--hbl-vino);text-decoration:none;border:0;cursor:help;
}

/* --- Campos --------------------------------------------------------------- */

/* Rótulo de campo. Va enumerado y no como `.mphb_sc_checkout-form label`
   porque en el checkout también son etiquetas las frases que acompañan a un
   radio (tarifas, medios de pago) y esas son texto corrido, no rótulos. */
.mphb_sc_checkout-form .mphb-adults-chooser > label,
.mphb_sc_checkout-form .mphb-children-chooser > label,
.mphb_sc_checkout-form .mphb-coupon-code-title,
#mphb-customer-details > p > label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--hbl-suave);
  margin:0 0 7px;
  line-height:1.5;
}
.mphb_sc_checkout-form input[type="text"],
.mphb_sc_checkout-form input[type="email"],
.mphb_sc_checkout-form input[type="tel"],
.mphb_sc_checkout-form input[type="number"],
.mphb_sc_checkout-form select,
.mphb_sc_checkout-form textarea{
  font-family:var(--hbl-fuente);
  font-size:15px;
  line-height:1.5;
  color:var(--hbl-texto);
  background:#fff;
  border:1px solid var(--hbl-linea);
  border-radius:0;
  padding:12px 14px;
  width:100%;
  max-width:100%;
  transition:border-color .2s;
}
.mphb_sc_checkout-form textarea{min-height:96px;line-height:1.6}
.mphb_sc_checkout-form input[type="text"]:focus,
.mphb_sc_checkout-form input[type="email"]:focus,
.mphb_sc_checkout-form input[type="tel"]:focus,
.mphb_sc_checkout-form input[type="number"]:focus,
.mphb_sc_checkout-form select:focus,
.mphb_sc_checkout-form textarea:focus{
  outline:none;
  border-color:var(--hbl-vino);
  box-shadow:inset 0 0 0 1px var(--hbl-vino);
}

/* Albatross pone estas frases a 18px y en versalitas; se dejan como texto. */
.mphb_sc_checkout-form .mphb-room-rate-variant label,
.mphb_sc_checkout-form .mphb-gateway-title,
.mphb_sc_checkout-form .mphb-terms-and-conditions-accept label{
  display:block;
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--hbl-tinta);
  margin:0;
}
.mphb_sc_checkout-form input[type="radio"],
.mphb_sc_checkout-form input[type="checkbox"]{
  width:auto;accent-color:var(--hbl-vino);margin-right:9px;
}

/* --- Medio de pago -------------------------------------------------------- */

.mphb-gateways-list{list-style:none;margin:0;padding:0}
/* El radio y su etiqueta son hermanos, no van anidados: sin la fila flexible
   la etiqueta en bloque se iría debajo del radio. */
.mphb-gateway{
  display:flex;flex-wrap:wrap;align-items:baseline;
  margin:0 0 10px;padding:15px 17px;
  border:1px solid var(--hbl-linea);background:#fff;
}
.mphb-gateway .mphb-gateway-title{flex:1 1 auto}
.mphb-gateway:last-child{margin-bottom:0}
.mphb-gateway-description{
  flex:1 0 100%;
  margin:8px 0 0 26px;font-size:13.5px;line-height:1.6;color:var(--hbl-suave);
}

/* --- Total y envío -------------------------------------------------------- */

.mphb_sc_checkout-form .mphb-total-price,
.mphb_sc_checkout-form .mphb-deposit-amount{margin:0;padding:18px 0 0}
.mphb_sc_checkout-form .mphb-total-price output,
.mphb_sc_checkout-form .mphb-deposit-amount output{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hbl-suave);
}
.mphb_sc_checkout-form .mphb-total-price-field{
  font-size:26px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--hbl-vino);
}
.mphb_sc_checkout-form .mphb-deposit-amount-field{
  font-size:17px;font-weight:700;text-transform:none;color:var(--hbl-tinta);
}
.mphb_sc_checkout-form .mphb-errors-wrapper:not(.mphb-hide){
  margin:16px 0 0;padding:13px 15px;
  border-left:3px solid var(--hbl-vino);background:var(--hbl-crema);
  font-size:14px;line-height:1.55;color:var(--hbl-tinta);
}

.mphb_sc_checkout-form .mphb_sc_checkout-submit-wrapper{margin:4px 0 0}
.mphb_sc_checkout-form .mphb_sc_checkout-submit-wrapper .button,
.mphb_sc_checkout-form .mphb_sc_checkout-submit-wrapper input[type="submit"]{
  font-family:var(--hbl-fuente);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:var(--hbl-vino);
  border:1px solid var(--hbl-vino);
  border-radius:0;
  padding:19px 34px;
  width:100%;
  line-height:1.2;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.mphb_sc_checkout-form .mphb_sc_checkout-submit-wrapper .button:hover,
.mphb_sc_checkout-form .mphb_sc_checkout-submit-wrapper input[type="submit"]:hover{
  background:var(--hbl-vino-osc);border-color:var(--hbl-vino-osc);
}

/* --- Móvil ---------------------------------------------------------------- */

@media(max-width:999px){
  .hbl-co-resumen{position:static;margin-top:4px}
}
@media(max-width:600px){
  .mphb_sc_checkout-form .mphb-checkout-section{padding:22px 20px}
  .mphb_sc_checkout-form .mphb-total-price-field{font-size:23px}
}

/* --------------------------------------------------------------------------
   29. Reserva confirmada y pago no completado

   La página de reserva confirmada la pinta [mphb_booking_confirmation], que
   hereda el CSS de Albatross igual que el checkout: Amiri en los títulos,
   viñetas de lista en los datos y el salmón en los enlaces. Se trae a la
   paleta y se ordena como una ficha.
   -------------------------------------------------------------------------- */

.mphb_sc_booking_confirmation{
  font-family:var(--hbl-fuente);
  color:var(--hbl-texto);
  line-height:1.6;
}

/* El mensaje de estado: es lo primero que el huésped busca al llegar. */
.mphb_sc_booking_confirmation .mphb-booking-confirmation-messages,
.mphb_sc_booking_confirmation .mphb-payment-messages{
  margin:0 0 30px;
  padding:22px 26px;
  background:var(--hbl-crema);
  border-left:3px solid var(--hbl-vino);
}
.mphb_sc_booking_confirmation .mphb-booking-confirmation-messages p,
.mphb_sc_booking_confirmation .mphb-payment-messages p{
  margin:0;
  font-size:19px;
  line-height:1.5;
  color:var(--hbl-tinta);
  text-wrap:pretty;
}
/* Cuando no hay nada que decir el plugin igual imprime el contenedor vacío. */
.mphb_sc_booking_confirmation .mphb-booking-confirmation-messages:empty,
.mphb_sc_booking_confirmation .mphb-payment-messages:empty{display:none}

/* Fichas de datos */
.mphb_sc_booking_confirmation .mphb-booking-details-section{
  margin:0 0 20px;
  padding:26px 28px;
  background:#fff;
  border:1px solid var(--hbl-linea);
}
.mphb_sc_booking_confirmation .mphb-booking-details-section h3,
.mphb_sc_booking_confirmation .mphb-booking-details-title{
  font-family:var(--hbl-fuente);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hbl-suave);
  margin:0 0 16px;
  line-height:1.4;
}

/* El CSS del plugin arma la lista con `display:flex` y `flex:1 0 100%` en cada
   fila, calificando con la sección (tres clases). Para ganarle sin `!important`
   hay que calificar igual y sumar el elemento. */
.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details{
  display:block;
  list-style:none;
  margin:0;
  padding:0;
}
.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:10px 0;
  border-bottom:1px solid var(--hbl-linea);
  list-style:none;
}
.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li::before{content:none}
.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li:last-child{border-bottom:0;padding-bottom:0}
.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details .label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--hbl-suave);
  flex:0 0 auto;
}
.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details .value{
  font-size:16px;
  font-weight:700;
  color:var(--hbl-tinta);
  text-align:right;
}

/* El estado de la reserva usa los rótulos del escritorio («Requiere acción de
   admin», «Requiere pago»): son para quien administra, no para el huésped, que
   ya tiene el mensaje de arriba. El estado del pago sí se deja: le dice si su
   transferencia todavía está en espera. */
.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li.booking-status{display:none}

.mphb_sc_booking_confirmation .accommodations{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid var(--hbl-linea);
}
.mphb_sc_booking_confirmation .accommodations-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--hbl-suave);
  flex:0 0 auto;
}
.mphb_sc_booking_confirmation .accommodations-list{
  font-size:16px;
  font-weight:700;
  text-align:right;
}
.mphb_sc_booking_confirmation a{color:var(--hbl-vino);text-decoration:underline}
.mphb_sc_booking_confirmation a:hover{color:var(--hbl-vino-osc)}

/* Instrucciones de pago: los datos de la cuenta para transferir. */
.mphb_sc_booking_confirmation .mphb-payment-instructions{
  margin:0;
  padding:26px 28px;
  background:var(--hbl-crema);
  border:1px solid var(--hbl-linea);
}
.mphb_sc_booking_confirmation .mphb-payment-instructions p{
  margin:0 0 12px;
  font-size:15.5px;
  line-height:1.65;
}
.mphb_sc_booking_confirmation .mphb-payment-instructions p:last-child{margin-bottom:0}
.mphb_sc_booking_confirmation .mphb-payment-instructions strong{color:var(--hbl-tinta)}

@media(max-width:600px){
  .mphb_sc_booking_confirmation .mphb-booking-confirmation-messages,
  .mphb_sc_booking_confirmation .mphb-payment-messages,
  .mphb_sc_booking_confirmation .mphb-booking-details-section,
  .mphb_sc_booking_confirmation .mphb-payment-instructions{padding:20px 22px}
  .mphb_sc_booking_confirmation .mphb-booking-confirmation-messages p,
  .mphb_sc_booking_confirmation .mphb-payment-messages p{font-size:17.5px}
  .mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li,
  .mphb_sc_booking_confirmation .accommodations{
    flex-direction:column;align-items:flex-start;gap:4px;
  }
  .mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details .value,
  .mphb_sc_booking_confirmation .accommodations-list{text-align:left}
}

/* --------------------------------------------------------------------------
   30. Correcciones de celular y del menú (2026-09-08)
   -------------------------------------------------------------------------- */

/* --- El salmón del tema padre en los botones -----------------------------
   Albatross pinta `button:hover` y `button:focus` en #FC9285. En celular el
   `:focus` se queda pegado después de tocar, así que el botón del menú se
   quedaba salmón mientras el menú estaba abierto. Alcanza a todo lo que sea
   <button> o input de botón: la hamburguesa, las flechas del carrusel y el
   botón de enviar del checkout. */
button:hover, button:focus, button:active,
input[type="button"]:hover, input[type="button"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus{
  background-color:var(--hbl-vino-osc);
}

/* La hamburguesa: vinotinto en todos los estados y barras siempre blancas.
   Antes el color venía del kit de Elementor por accidente y las barras se
   volvían oscuras sobre el vinotinto en las páginas sin hero. */
.hbl-header .hbl-burger,
.hbl-header .hbl-burger:hover,
.hbl-header .hbl-burger:focus,
.hbl-header .hbl-burger:active{
  background-color:var(--hbl-vino);
  border:0;
  box-shadow:none;
}
.hbl-header .hbl-burger:hover,
.hbl-header .hbl-burger:active{background-color:var(--hbl-vino-osc)}
.hbl-header .hbl-burger span,
.hbl-header.is-fijo .hbl-burger span,
body:not(.hbl-hero-completo) .hbl-header .hbl-burger span{background:#fff}

/* --- El botón de WhatsApp dentro del menú --------------------------------
   La sección 24 redeclaró `.hbl-btn-linea` para sacarle el salmón heredado y,
   con la misma especificidad pero más abajo, le ganó al blanco del menú: el
   texto quedaba vinotinto sobre el panel casi negro. */
.hbl-menu-movil .hbl-btn-linea:not(.elementor-widget),
.hbl-menu-movil .hbl-btn-linea:not(.elementor-widget):visited,
.hbl-menu-movil .hbl-btn-linea:not(.elementor-widget):hover{
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.hbl-menu-movil .hbl-btn-linea:not(.elementor-widget):hover{background:rgba(255,255,255,.10)}

/* --- Reseñas de Google: reservarle el alto -------------------------------
   Trustindex arma el widget desde su CDN después de la carga. Aparecían ~350 px
   de golpe que empujaban todo lo de abajo: era el 0,27 de CLS de la portada
   (las páginas sin este widget miden 0,003). Con el alto reservado el hueco ya
   está hecho cuando el widget llega. */
.hbl-resenas .ti-widget{min-height:350px}
@media(min-width:761px){
  .hbl-resenas .ti-widget{min-height:330px}
}

/* --- Respiro lateral en celular ------------------------------------------
   Convivían tres márgenes: 20 px en los bloques propios (`.hbl-wrap`), 10 px
   donde Elementor reparte su gap, y 0 en las secciones a sangre, donde el
   texto quedaba pegado al borde de la pantalla. Se unifica en `--hbl-lado`:
   la columna deja de aportar y el respiro lo pone el widget de texto, para que
   las fotos sigan llegando a los bordes. */
@media(max-width:760px){
  /* Elementor pone los 10 px en `.elementor-widget-wrap` calificando con tres
     clases; hay que igualarle la especificidad para quitárselos. */
  .elementor-section .elementor-column > .elementor-widget-wrap.elementor-element-populated{
    padding-left:0;
    padding-right:0;
  }
  .elementor-widget-heading,
  .elementor-widget-text-editor,
  .elementor-widget-button,
  .elementor-widget-divider{
    padding-left:var(--hbl-lado);
    padding-right:var(--hbl-lado);
  }
  /* Los shortcodes se pintan sin envoltorio porque en escritorio los encuadra
     la sección de Elementor. En celular el respiro se lo damos a cada bloque
     que salga del shortcode, y se lo quitamos sólo a los que van a sangre.
     Enumerar las excepciones y no las reglas evita que un bloque nuevo nazca
     pegado al borde. */
  .elementor-widget-shortcode{padding-left:0;padding-right:0}
  .elementor-shortcode > *{
    padding-left:var(--hbl-lado);
    padding-right:var(--hbl-lado);
  }
  .elementor-shortcode > .hbl-hero,
  .elementor-shortcode > .hbl-video,
  .elementor-shortcode > .hbl-mapa,
  .elementor-shortcode > .hbl-carrusel,
  .elementor-shortcode > .hbl-wrap{
    padding-left:0;
    padding-right:0;
  }

  /* Las dos columnas se apilan y quedaban pegadas: la foto terminaba y el
     texto empezaba en el mismo píxel. */
  .elementor-section .elementor-column + .elementor-column{margin-top:44px}
}

/* --------------------------------------------------------------------------
   31. Encuadre de las fotos de fondo en celular

   Los hero son `background-image` con `cover`. En escritorio la caja es
   apaisada y la foto entra entera; en celular la caja es más alta que ancha
   (375 × 747 en la portada, o sea 0,50 contra el 1,78 de la foto), así que
   `cover` la ampliaba hasta que cabía de alto y sólo quedaba a la vista una
   franja del 28 %: una ventana y un pedazo de árbol.

   La solución es un recorte vertical propio (`hbl-hero-movil`, 1000 × 1400) y
   dejar que la hoja de estilos elija cuál usar. Por eso el PHP ya no pinta
   `background-image` en línea sino dos variables: una consulta de medios no
   puede alcanzar un atributo `style`.
   -------------------------------------------------------------------------- */

.hbl-hero-pagina,
/* 🔴 `.hbl-hero` declara `background:#0C0A0A` con el atajo, que de paso pone
   `background-position:0% 0%` y `background-size:auto`. La ficha de habitación
   nunca los volvió a declarar: la foto salía anclada a la esquina superior
   izquierda y sin escalar, así que se veía el aire acondicionado y un pedazo de
   pared en vez de la habitación. */
.hbl-hero-hab{
  background-image:var(--hbl-fondo);
  background-size:cover;
  background-position:50% 45%;
  background-repeat:no-repeat;
}

@media(max-width:760px){
  .hbl-hero-pagina,
  .hbl-hero-hab{background-image:var(--hbl-fondo-sm, var(--hbl-fondo))}
  /* Con el recorte vertical el encuadre ya es el bueno: centrado. */
  .hbl-capa-movil{background-position:50% 45%}
}

/* --------------------------------------------------------------------------
   32. La paleta del tema padre, de raíz

   Albatross NO tiene opción de color: su acento salmón (#FC9285) y su verde
   (#455D58, #58A193) están escritos a mano en `style.css`, en 71 sitios. Por eso
   seguía apareciendo por todos lados aunque se fueran tapando casos sueltos.

   Este bloque redeclara **los mismos selectores** del tema padre con nuestros
   colores. Se generó leyendo su hoja de estilos, así que están todos, no los que
   se fueron encontrando a ojo. Al tener igual especificidad y cargar después,
   gana siempre.

   Si algún día se actualiza Albatross, hay que volver a generarlo: son sus
   selectores, y podrían cambiar.

   Quedan fuera a propósito: el pie y la portada del tema padre (no se usan, y su
   fondo en vinotinto estropearía bloques que ya tienen estilo propio) y los
   grises #DADFDE y #FAF7F2, que son casi idénticos a los nuestros.
   -------------------------------------------------------------------------- */

a{color:var(--hbl-vino)}
a:visited{color:var(--hbl-vino)}
a:hover, a:focus, a:active{color:var(--hbl-vino)}
button, .edit-link .post-edit-link, input[type="button"], input[type="reset"], input[type="submit"], .button, .stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__read-more a, .more-link{background:var(--hbl-vino)}
button:hover, .edit-link .post-edit-link:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__read-more a:hover, .more-link:hover{background-color:var(--hbl-vino-osc)}
button:focus, .edit-link .post-edit-link:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button:focus, .stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__read-more a:focus, .more-link:focus{background-color:var(--hbl-vino-osc)}
.albatross-button{color:var(--hbl-vino)}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select{color:var(--hbl-texto)}
.an_mailchimp_wrapper form .mpam-submit{color:var(--hbl-vino)}
.social-menu a:hover{color:var(--hbl-vino)}
.main-navigation{color:var(--hbl-texto)}
.main-navigation li:hover > a{color:var(--hbl-vino)}
.main-navigation li:hover > .dropdown-toggle{background:linear-gradient(var(--hbl-vino), var(--hbl-vino)), linear-gradient(var(--hbl-vino), var(--hbl-vino))}
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a{color:var(--hbl-vino)}
.primary-menu-more ul ul a, .header-menu-container ul ul a{color:var(--hbl-texto)}
.primary-menu-more li.opened > a, .primary-menu-more li.focus > a, .primary-menu-more li:hover > a, .header-menu-container li.opened > a, .header-menu-container li.focus > a, .header-menu-container li:hover > a{color:var(--hbl-vino)}
.primary-menu-more .current_page_item > a, .primary-menu-more .current-menu-item > a, .primary-menu-more .current_page_ancestor > a, .primary-menu-more .current-menu-ancestor > a, .header-menu-container .current_page_item > a, .header-menu-container .current-menu-item > a, .header-menu-container .current_page_ancestor > a, .header-menu-container .current-menu-ancestor > a{color:var(--hbl-vino)}
.post-navigation .nav-links a:hover{color:var(--hbl-vino)}
.navigation.pagination .page-numbers.current, .navigation.pagination .page-numbers:hover{background:var(--hbl-vino)}
.navigation.pagination .page-numbers.next:hover, .navigation.pagination .page-numbers.prev:hover{color:var(--hbl-vino)}
.site-header .header-dropdown-toggle{background:var(--hbl-vino) center center no-repeat}
.site-header .header-dropdown-toggle:focus, .site-header .header-dropdown-toggle:hover{background-color:var(--hbl-vino)}
.site-header .header-dropdown-toggle.toggled-on{border:2px solid var(--hbl-vino)}
.site-header .header-dropdown-toggle.toggled-on:hover, .site-header .header-dropdown-toggle.toggled-on:focus{border-color:var(--hbl-texto)}
.footer-widgets a:hover{color:var(--hbl-vino)}
.entry-title a:hover{color:var(--hbl-vino)}
.entry-meta a:hover{color:var(--hbl-vino)}
.byline a:hover{color:var(--hbl-vino)}
.cat-links a:hover{background:var(--hbl-vino);border-color:var(--hbl-vino)}
.tags-links a:hover{color:var(--hbl-vino)}
.comments-link a:hover{color:var(--hbl-vino)}
body.page-has-thumbnail .page-header-wrapper .scroll-to-content-button svg{fill:var(--hbl-texto)}
.comment-list .comment-metadata a:hover{color:var(--hbl-vino)}
.front-page-sidebar-wrapper .widget_mphb_search_availability_widget .mphb_widget_search-submit-button-wrapper input{color:var(--hbl-texto)}
.front-page-sidebar-wrapper .widget_mphb_search_availability_widget .mphb_widget_search-submit-button-wrapper input:hover{background:var(--hbl-vino)}
.wp-block-file a.wp-block-file__button{background:var(--hbl-vino)}
.wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:active{background-color:var(--hbl-vino-osc)}
.wp-block-button__link{background-color:var(--hbl-vino)}
.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active, .wp-block-button__link:visited{background:var(--hbl-vino-osc)}
:root .has-color-1-color{color:var(--hbl-vino)}
:root .has-color-1-background-color{background-color:var(--hbl-vino)}
:root .has-color-2-color{color:var(--hbl-texto)}
:root .has-color-2-background-color{background-color:var(--hbl-vino)}
.mphb_sc_room-wrapper .type-mphb_room_type .mphb-view-details-button, .mphb_sc_search_results-wrapper .type-mphb_room_type .mphb-view-details-button, .mphb_sc_rooms-wrapper .type-mphb_room_type .mphb-view-details-button{color:var(--hbl-vino)}
.mphb_sc_room-wrapper .type-mphb_room_type .mphb-view-details-button:hover, .mphb_sc_search_results-wrapper .type-mphb_room_type .mphb-view-details-button:hover, .mphb_sc_rooms-wrapper .type-mphb_room_type .mphb-view-details-button:hover{color:var(--hbl-texto)}
.mphb_widget_rooms-wrapper .mphb-widget-room-type-title a:hover{color:var(--hbl-vino)}
.type-mphb_room_type ul.flex-direction-nav .flex-nav-next a svg, .type-mphb_room_type ul.flex-direction-nav .flex-nav-prev a svg{fill:var(--hbl-texto)}
.mphb_sc_rooms-wrapper.slider .type-mphb_room_type .mphb-to-book-btn-wrapper .mphb-book-button:hover{color:var(--hbl-vino)}
.mphb-single-room-type-attributes li:before, .mphb-loop-room-type-attributes li:before, .mphb-widget-room-type-attributes li:before, .loop-room-short-attributes li:before{color:var(--hbl-vino)}
.mphb-single-room-type-attributes li.mphb-room-type-rating:before, .mphb-loop-room-type-attributes li.mphb-room-type-rating:before, .mphb-widget-room-type-attributes li.mphb-room-type-rating:before, .loop-room-short-attributes li.mphb-room-type-rating:before{color:var(--hbl-vino)}
.mphb-single-room-type-attributes a:hover, .mphb-loop-room-type-attributes a:hover, .mphb-widget-room-type-attributes a:hover, .loop-room-short-attributes a:hover{color:var(--hbl-vino)}
.mphb-regular-price{color:var(--hbl-vino)}
.datepick .datepick-cmd-today:hover{color:var(--hbl-vino)}
.datepick .datepick-cmd-next, .datepick .datepick-cmd-prev{color:var(--hbl-texto)}
.datepick .datepick-cmd-next:hover:not(.datepick-disabled), .datepick .datepick-cmd-prev:hover:not(.datepick-disabled){background:var(--hbl-vino)}
.datepick .datepick-month table td .mphb-check-in-date, .datepick .datepick-month table td .datepick-selected, .datepick .datepick-month table td .datepick-highlight{background:var(--hbl-vino)}
.datepick .datepick-month table td .mphb-booked-date.mphb-date-check-out, .datepick .datepick-month table td .mphb-booked-date.mphb-date-check-in, .datepick .datepick-month table td .mphb-available-date.mphb-date-check-out, .datepick .datepick-month table td .mphb-available-date.mphb-date-check-in{color:var(--hbl-texto)}
.datepick .datepick-ctrl a:hover{color:var(--hbl-vino)}
.mphbr-review-wrapper .mphbr-star-rating > span{color:var(--hbl-vino)}
.mphb-reserve-rooms-details .mphb-room-rate-variant .mphb-price{color:var(--hbl-vino)}
.stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__post-title a:hover{color:var(--hbl-vino)}
.stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__entry-footer .posted-on a:hover{color:var(--hbl-vino)}

/* WPForms trae `div.wpforms-container-full{padding:0}` —una clase y un
   elemento—, que le gana a la regla general del respiro lateral. */
@media(max-width:760px){
  .hbl-formulario .wpforms-container{
    padding-left:var(--hbl-lado);
    padding-right:var(--hbl-lado);
  }
}

/* --------------------------------------------------------------------------
   33. Calendario, ficha y pie — correcciones (2026-09-08)
   -------------------------------------------------------------------------- */

/* --- El icono fantasma de la ficha ---------------------------------------
   Albatross le pone a cada atributo un icono de Font Awesome en un `::before`
   absoluto, y MotoPress lo deja luego en `content:""`. Resultado: una caja
   vacía de 20 px clavada en la esquina superior izquierda de cada fila, justo
   debajo de la línea que las separa. Como la ficha es una tabla de rótulo y
   valor —donde el icono no aporta nada—, se quita del todo. */
.hbl-atributos .mphb-single-room-type-attributes > li::before{content:none}
.hbl-atributos .mphb-single-room-type-attributes > li{padding:18px 0}

/* --- El botón de WhatsApp del pie ----------------------------------------
   Heredaba el gris del pie sobre el vinotinto: poco contraste. */
/* Calificado con `.hbl-footer` porque `.hbl-footer a` —una clase y un
   elemento— le gana a la clase sola del botón. */
.hbl-footer .hbl-btn-wa,
.hbl-footer .hbl-btn-wa:visited,
.hbl-footer .hbl-btn-wa:hover,
.hbl-footer .hbl-btn-wa:focus{color:#fff}

/* --- El calendario en celular --------------------------------------------
   MotoPress abre el selector con dos meses lado a lado. En escritorio son
   621 px y entra bien; en un teléfono se comprime a la mitad y cada día queda
   en un cuadrito de unos 25 px, imposible de acertar con el dedo.

   En celular los dos meses se apilan: cada uno ocupa el ancho completo y cada
   día pasa a 40 px de alto, que es la medida mínima para tocar con comodidad.
   El desplegable se limita en alto y se le deja desplazamiento propio. */
@media(max-width:760px){
  .datepick-popup{
    max-width:calc(100vw - 24px);
    max-height:74vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .datepick-popup .datepick{width:auto !important;max-width:100%}
  .datepick-popup .datepick-month-row{flex-direction:column;gap:18px}
  .datepick-popup .datepick-month{width:100%;float:none}
  .datepick-popup .datepick-month table{width:100%;table-layout:fixed}
  .datepick-popup .datepick-month td,
  .datepick-popup .datepick-month th{padding:0}
  .datepick-popup .datepick-month td a,
  .datepick-popup .datepick-month td span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    font-size:15px;
  }
  .datepick-popup .datepick-month-header{font-size:15px}
}