/* ============ Doroteo: Single Habitación (clases propias) ============
   Mismo diseño que "Hotel": 50/50 alternado, galería 3-2-1, CTA dorado.
   Aislado bajo .room-view para no tocar otras plantillas.
====================================================================== */
.room-view {
  --room-maxw: 1200px;
  /* --room-gap:  2rem; */
  --room-pad:  clamp(1.25rem, 2vw, 2rem);
  --room-accent: #b38b2e; /* dorado */
  --room-text:   #222;
  --room-muted:  #666;
}
.room-gallery--fit .wp-block-gallery {
  /* Anula la cadena de variables de Gutenberg */
  --wp--style--unstable-gallery-gap: 0 !important;
  --wp--style--gallery-gap-default: 0 !important;
  --gallery-block--gutter-size: 0 !important;
  --wp--style--block-gap: 0 !important;

  gap: 0 !important;           /* por si acaso */
}

/* Los figure del bloque suelen traer margen: bórralo */
.room-gallery--fit .wp-block-image { 
  margin: 0 !important;
}

/* Si el bloque añade una clase de layout, cúbrela también */
.room-gallery--fit .wp-block-gallery.is-layout-flex,
.room-gallery--fit .wp-block-gallery.is-layout-grid {
  gap: 0 !important;
}

/* Nuestro fallback de adjuntos sin separación */
.room-gallery--fit .room-gallery__grid { 
  gap: 0 !important;
}
/* Quitar fondos/bordes que generaban el panel gris */
.room-view .room-section { 
  width: 100%;
  padding: 0; 
}
.room-view .room-section--primary,
.room-view .room-section--secondary {
  background: transparent !important;
  border: 0 !important;
  
}
.room-view .room-section--secondary{
  background-color: orange;
}
/* Contenedor y 50/50 como Hotel */
.room-view .room-container {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  /* min-height: 550px; */
}
.room-view .room-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* Alternado (imagen/texto) sin invertir estilos de texto */
.room-view .room-split--reverse {
  grid-auto-flow: dense;
}
.room-view .room-split--reverse .room-col--media { order: 1; }
.room-view .room-split--reverse .room-col--text  { order: 2; }
.room-view .room-col {
  display: flex;
  padding: 3rem;
}
@media(max-width: 768px){
  .room-view .room-col {
  padding: 1rem;
}
}
.room-view .room-col--text {
  background: #fff;
}
/* Tipografía y espaciados como Hotel */
.room-view .room-col--text .room-text {
  font-size: clamp(1rem, 1.2vw + 0.8rem, 1.125rem);
  line-height: 1.7;
  color: var(--room-text);
  padding: 30px;            /* sin panel */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.room-view .room-col--text .room-text h1,
.room-view .room-col--text .room-text h2 {
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 1rem;
  text-transform: none;  /* ajusta si en Hotel lo usas en mayúsculas */
}
.room-view .room-col--text .room-text p + p { margin-top: 1rem; color: var(--room-muted); }

/* Imagen como Hotel (bordes redondeados + sombra suave) */
.room-view .room-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.room-view .room-image--placeholder {
  min-height: 300px;
  background: #e9e9e9;
  border-radius: 16px;
}

/* Galería: usa el grid nativo de Gutenberg, con ajustes sutiles */
.room-view .room-gallery .room-gallery__inner { padding: var(--room-pad) 0; }


/* Fallback 3-2-1 */
.room-view .room-gallery__grid {
  display: grid; /*gap: 12px;*/
  grid-template-columns: repeat(3, 1fr);
}
.room-view .room-gallery__img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* CTA como Hotel (botón dorado) */
.seccion-btn{
  text-align: center;
  margin: 100px;
}
.room-view .room-btn {
  background-color: #BE995C;
  padding: 20px 50px;
  font-size: 1.5rem;
  text-decoration: none;
  color: white;
}
@media(max-width: 600px){
  .seccion-btn{

  margin: 100px 0px;
}
  .room-view .room-btn {
    background-color: #BE995C;
    padding: 20px 50px;
    font-size: 1rem;
    text-decoration: none;
    color: white;
  }
}
.room-view .room-btn:hover { 
  background-color: #DBDBDB;
  color: #6F6261;
  transition: .5s ease;
}

/* Responsivo igual que Hotel */

@media (max-width: 768px)  { 
  .room-view .room-split { grid-template-columns: 1fr; }
  .room-view .room-section { padding: 0; }
  .room-view .room-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px)  { .room-view .room-gallery__grid { grid-template-columns: 1fr; } }

.room-view .room-col--media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 600px;          /* asegura que tenga altura */
}
/* Texto dentro */
.room-view .room-text {
  max-width: 600px;
}
.room-view .room-text h1,
.room-view .room-text h2 {
  margin-bottom: 1rem;
  font-weight: 800;
  font-size: 2rem;
}
.room-view .room-text p {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Alternado */
.room-view .room-split--reverse {
  grid-template-columns: 1fr 1fr;
}
.room-view .room-split--reverse .room-col--text {order: 2;}
.room-view .room-split--reverse .room-col--media { order: 1; }

/* Responsivo */
@media (max-width: 768px) {
  .room-view .room-container {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .room-view .room-col--media {
    min-height: 300px;
  }
}

/* ===== Galería en una sola fila, sin scroll, todas visibles ===== */


/* Forzamos core/gallery a ser nuestro grid */
.room-gallery--fit .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(var(--room-cols, 3), 1fr);
  /*gap: 12px;*/
  margin: 0;
}

/* Normaliza items de Gutenberg */
.room-gallery--fit .wp-block-image {
  margin: 0 !important;
}
.room-gallery--fit .wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;   /* altura consistente; ajusta si quieres */
  object-fit: cover;
  /* border-radius: 12px; */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Fallback de adjuntos usa el mismo grid */
.room-gallery--fit .room-gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--room-cols, 3), 1fr);
  /*gap: 12px;*/
}
.room-gallery--fit .room-gallery__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Opcional: oculta captions si no los usas */
.room-gallery--fit figcaption { display: none; }

/* Responsivo:
   Siempre todas visibles; solo ajustamos la relación si el ancho es muy pequeño. */
@media (max-width: 520px) {
  .room-gallery--fit .wp-block-image img,
  .room-gallery--fit .room-gallery__img {
    aspect-ratio: 4 / 3;
  }
}

/* --- Que la fila 50/50 no tenga hueco y ambas columnas estiren a la misma altura --- */
.room-view .room-section--secondary .room-split {
  gap: 0;                 /* sin espacio entre texto e imagen */
  align-items: stretch;   /* las columnas ocupan toda la altura de la fila */
}

/* Quitamos padding de la columna y lo pasamos a la caja interna */
.room-view .room-section--secondary .room-col {
  padding: 0;
}

/* La caja ocupa TODA la columna (ancho y alto) */
.room-view .room-section--secondary .room-col--text {
  display: grid;          /* permite que el hijo se estire fácil */
}
.room-view .room-section--secondary .room-col--text .room-box {
  width: 100%;
  height: 100%;           /* llena toda la altura de la columna */
  /* padding: clamp(1.25rem, 2.5vw, 2rem); */
  border-radius: 0;       /* si quieres esquinas rectas al ras; cámbialo si prefieres redondeo */
  box-shadow: none;      
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Asegura que el color de texto se herede dentro */
.room-view .room-section--secondary .room-box .room-text,
.room-view .room-section--secondary .room-box .room-text * {
  color: inherit !important;
}

/* Importante: si antes habíamos forzado transparente en la columna, lo anulamos aquí */
.room-view .room-section--secondary .room-col--text {
  background: transparent !important; /* el fondo ahora lo lleva .room-box (inline) */
}

/* Parallax en columnas de media */
.room-view .room-col--media {
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  will-change: background-position;
  transition: background-position 0.05s linear; /* evita saltos sutiles */
}

/* Respeta accesibilidad: si el usuario prefiere menos movimiento,
   el JS ya no correrá, pero por si acaso */
@media (prefers-reduced-motion: reduce) {
  .room-view .room-col--media {
    transition: none;
  }
}

/* ====== PARALLAX: anti-bandas (bleed) ====== */
/* Ampliamos ligeramente la imagen SOLO cuando hay data-parallax="bg" */
.room-view .room-col--media[data-parallax="bg"] {
  background-size: 110% auto;
}

/* En móvil, menos zoom para no recortar demasiado */
@media (max-width: 768px) {
  .room-view .room-col--media[data-parallax="bg"] {
    background-size: 105% auto;
  }
}

/* === FIX franjas arriba/abajo en la imagen === */
.room-view .room-split{
  align-items: stretch;   /* que ambas columnas llenen toda la altura */
  gap: 0;                 /* sin hueco vertical u horizontal de la fila */
}

/* la columna de IMAGEN debe estirar y sin padding */
.room-view .room-col--media{
  height: 100%;           /* ocupa toda la pista del grid */
  padding: 0 !important;  /* pisa el padding:3rem heredado de .room-col */
}
@media (max-width: 768px){
  .room-view .room-col--media{
    background-position: center center !important;
    transition: none !important;
  }
}
/* por claridad: también sin padding en cada sección */
.room-view .room-section--primary  .room-col--media,
.room-view .room-section--secondary .room-col--media{
  padding: 0 !important;
}

/* si usas parallax, un poco más de zoom para evitar bordes en el movimiento */
.room-view .room-col--media[data-parallax="bg"]{
  background-size: 1200px auto;   /* ya lo tenías; súbelo a 115% si hiciera falta */
}
@media(max-width: 768px){
 /* trabajando */
}
/* ===== Menú: ajustes SOLO en singles de Habitaciones ===== */

/* Quita la línea inferior del ítem superior activo (Habitaciones) y deja solo color */
body.single-habitacion  .site-header .menu > li.current-menu-item > a,
body.single-habitacion  .site-header .menu > li.current-menu-parent > a,
body.single-habitacion  .site-header .menu > li.current-menu-ancestor > a,
body.single-habitaciones .site-header .menu > li.current-menu-item > a,
body.single-habitaciones .site-header .menu > li.current-menu-parent > a,
body.single-habitaciones .site-header .menu > li.current-menu-ancestor > a {
  color: var(--room-accent, #b38b2e) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.single-habitacion  .site-header .menu > li.current-menu-item > a::after,
body.single-habitacion  .site-header .menu > li.current-menu-parent > a::after,
body.single-habitacion  .site-header .menu > li.current-menu-ancestor > a::after,
body.single-habitaciones .site-header .menu > li.current-menu-item > a::after,
body.single-habitaciones .site-header .menu > li.current-menu-parent > a::after,
body.single-habitaciones .site-header .menu > li.current-menu-ancestor > a::after {
  display: none !important;  /* por si la línea se dibuja con ::after */
}

/* Submenú: pinta la habitación seleccionada (solo texto dorado) */
body.single-habitacion  .site-header .menu .sub-menu li.current-menu-item > a,
body.single-habitaciones .site-header .menu .sub-menu li.current-menu-item > a {
  color: var(--room-accent, #b38b2e) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.single-habitacion  .site-header .menu .sub-menu li.current-menu-item > a::after,
body.single-habitaciones .site-header .menu .sub-menu li.current-menu-item > a::after {
  display: none !important;
}

@media (max-width: 768px){
  body.single-habitacion  .room-view .room-col--media,
  body.single-habitaciones .room-view .room-col--media{
    background-size: cover !important;      /* <<< SIN recorte */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: var(--media-mobile-min-h, 400px);
  
  }
}