/* ==========================================================================
   Inmobiliaria Berasueta — Theme "Azul Fresco"
   Ficha de propiedad individual — collage + lightbox.
   Extraído de rediseño/propiedad-layout-B2.html (mockup aprobado).
   Por ahora solo Temporario (alquileres/propiedad_temporada.php);
   pensado para reutilizarse tal cual en Estudiantes/Ventas/24 meses.
   ========================================================================== */

/* ============ CONTENIDO (características/descripción/ubicación/reservar) ============
   Clases tal cual rediseño/propiedad-layout-B2.html. .kicker ya existe como
   clase global en theme.css con valores levemente distintos (13px,
   margin-bottom:12px) -acá se usa el valor EXACTO del mockup (12.5px,
   margin:28px 0 10px), escapado a .content-wrap para no pisar el kicker
   global que ya se usa en otras páginas. */
.content-wrap{max-width:820px; margin:0 auto; padding:32px 24px 60px;}

.content-wrap .kicker{font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--blue, #2F8FCC); font-weight:700; margin:28px 0 10px;}
.content-wrap .kicker:first-child{margin-top:0;}

.caract-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; margin:20px 0;}
.caract-item{font-size:14px; color:var(--gray-900, #2B2B2E); font-family:var(--body, 'Inter', sans-serif);}
.caract-item b{color:var(--navy, #1F2A5C); font-weight:700;}

/* Solo mobile: Dirección sola en su fila (ocupa las 3 columnas), y el resto
   (ID, Vista, Habitaciones -en ese orden en el HTML) cae solo en la fila de
   abajo, los 3 juntos, en una sola línea cada uno -nunca el valor partido
   en una línea aparte de la etiqueta. Misma fuente de siempre (14px, no se
   achica): en vez de 3 columnas iguales (1fr), "auto" -cada columna mide
   justo lo que necesita su contenido (ID/Habitaciones angostas, Vista más
   ancha si el valor es largo, ej. "Contrafrente"), así una celda le puede
   "pedir" ancho a la de al lado en vez de partir el texto en dos líneas.
   justify-content:space-between reparte lo que sobra como separación entre
   las 3, no como ancho extra de cada columna. Desktop no se toca. */
@media(max-width:900px){
  .caract-grid{grid-template-columns:repeat(3,auto); justify-content:space-between; gap:10px 10px;}
  .caract-grid .caract-item:first-child{grid-column:1/-1;}
  .caract-grid .caract-item:not(:first-child){white-space:nowrap;}
}

.adic-row{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 8px;}
.adic-chip{display:flex; align-items:center; gap:6px; background:var(--gray-100, #F1F3F7); color:var(--navy, #1F2A5C);
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:100px; font-family:var(--body, 'Inter', sans-serif);}
.adic-chip svg{color:var(--blue, #2F8FCC); flex-shrink:0;}

.descripcion-txt{font-size:14.5px; color:var(--gray-600, #65707A); line-height:1.7; font-family:var(--body, 'Inter', sans-serif);}

/* No estaba en el mockup (era solo texto placeholder) -link nuevo, chico,
   arriba del mapa embebido, para abrir la dirección real en Google Maps
   en una pestaña aparte (el iframe de geoloc es un embed, no sirve bien
   como link para "abrir en la app"). */
.mapa-link{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--blue, #2F8FCC); margin-top:10px;}
.mapa-link:hover{color:var(--navy, #1F2A5C);}

.mapa-box{margin-top:8px; border-radius:14px; overflow:hidden; height:220px; background:var(--gray-100, #F1F3F7);
  display:flex; align-items:center; justify-content:center; color:var(--gray-600, #65707A); font-size:13px; border:1px solid #E7EAF2;}
/* el mockup solo tenía texto placeholder acá -esta regla es nueva, para que
   el iframe real de Google Maps llene el mismo marco sin cambiar su tamaño. */
.mapa-box iframe{width:100%; height:100%; border:0;}

.reservar-box{background:var(--gray-100, #F1F3F7); border-radius:14px; padding:20px 22px; margin-top:10px;}
.reservar-box p{font-size:13.5px; color:var(--gray-600, #65707A); line-height:1.6; margin-bottom:10px; font-family:var(--body, 'Inter', sans-serif);}
.reservar-box p:last-child{margin-bottom:0;}
.reservar-box b{color:var(--navy, #1F2A5C);}

/* ============ PRECIO (Estudiantes/Ventas/24 meses -Temporario no lo usa,
   tiene su propio motor de precios en otro lado del flujo) ============
   Renglón propio arriba de .caract-grid, NO un chip sobre la foto -se
   probó esa idea y se descartó: en mobile el collage no tiene lugar para
   sumar un badge más sin pisar los que ya existen (tour/video/favorito).
   Mismo texto exacto que ya arma cada .php (precioNum/precioSub), acá
   solo se separa en dos <span> para el tratamiento tipográfico -no cambia
   ni un caracter del formato/moneda real de cada sección. */
.precio-ficha{margin:2px 0 20px;}
.precio-ficha .precio-num{font-family:var(--display, 'Sora', sans-serif); font-weight:800; font-size:26px; color:var(--navy, #1F2A5C);}
.precio-ficha .precio-sub{display:block; font-size:13px; color:var(--gray-600, #65707A); font-weight:600; margin-top:2px; font-family:var(--body, 'Inter', sans-serif);}
@media(min-width:901px){
  .precio-ficha .precio-num{font-size:34px;}
  .precio-ficha .precio-sub{font-size:15px;}
}

/* ============ PÍLDORA DE PRECIO FLOTANTE (Estudiantes/Ventas/24 meses)
   ============ Diseño aprobado visualmente por la usuaria, valores tal
   cual -no reinterpretar. position:fixed (no absolute) para quedar visible
   durante todo el scroll; toda la píldora es un <a> a WhatsApp (ver PHP de
   cada .php para el link real y el mensaje precargado por sección).
   Se oculta con visibility (no display, sin reflow) mientras el lightbox de
   fotos o el tour 360° en fullscreen están abiertos -en Estudiantes eso es
   el lightbox nuevo (#fichaLightboxOverlay.active); en Ventas/24 meses
   -todavía en el layout viejo- es lightbox.js (body.lb-disable-scrolling).
   El z-index acá es bajo a propósito (500): el overlay del lightbox viejo
   ya usa 9999 y el modo .pantallaFull del tour360 viejo usa 999999, así que
   con solo esos números esta píldora ya queda debajo sin hacer nada más;
   el toggle de visibility (ver JS al pie de cada archivo) es la garantía
   real, el z-index es un colchón adicional. */
.precio-flotante{
  position:fixed; bottom:20px; right:20px; z-index:500;
  display:flex; flex-direction:column; align-items:flex-start;
  border-radius:100px;
  background:linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(225,224,219,0.55) 100%);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:0.5px solid rgba(255,255,255,0.5);
  /* sombra suave para delinear la píldora contra fotos claras -mismo
     lenguaje que .g-verfotos/.float-icon más abajo en este archivo, no un
     valor inventado nuevo. */
  box-shadow:0 8px 20px -6px rgba(20,27,61,0.4);
  padding:15px 30px;
  color:#1F2A5C; text-decoration:none; cursor:pointer;
  transition:transform .2s ease, visibility 0s;
}
.precio-flotante:hover{
  transform:scale(1.05);
  background:linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(225,224,219,0.63) 100%);
}
.precio-flotante:active{ transform:scale(1.05); }
.precio-flotante.pf-hidden{ visibility:hidden; }
.precio-flotante .pf-num{ font-family:var(--display, 'Sora', sans-serif); font-weight:700; font-size:25.5px; line-height:1.1; color:#1F2A5C; }
.precio-flotante .pf-sub{ display:block; width:100%; text-align:center; font-size:16.5px; color:#1F2A5C; opacity:0.75; margin-top:2px; font-family:var(--body, 'Inter', sans-serif); }

/* Mobile +20% (pedido explícito): 8px 16px -> 9.6px 19.2px, 14px -> 16.8px,
   10px -> 12px. Bottom/right sin tocar -es posición, no tamaño del ícono. */
@media(max-width:900px){
  .precio-flotante{ bottom:14px; right:14px; padding:9.6px 19.2px; }
  .precio-flotante .pf-num{ font-size:16.8px; }
  .precio-flotante .pf-sub{ font-size:12px; }
}

/* ============ CALENDARIO ============
   Clases tal cual rediseño/propiedad-layout-B2.html. El ancho fijo de
   1180px del mockup se pisa en desktop (ver @media abajo) para que quede
   contenido en el mismo 80% que .content-wrap -pedido explícito, no es lo
   que traía el mockup originalmente. Las 4 tarjetas de mes NO se estiran a
   flex-grow/1fr (eso las agrandaría el ANCHO de cada tarjeta para llenar
   el 80% completo): grid con ancho de columna FIJO (260px) +
   justify-content:space-between, así cada tarjeta mantiene su tamaño
   natural pero el grupo se distribuye a lo largo de todo el ancho
   disponible -1ra tarjeta alineada al borde izquierdo (mismo borde que el
   kicker "Disponibilidad" y el resto del contenido), última al borde
   derecho, y el espacio sobrante se reparte como gap ENTRE tarjetas en
   vez de amontonarse a los costados (probado antes con justify-content:
   start y :center, ninguno de los dos daba la distribución pedida). */
.calendario-full{max-width:1180px; margin:0 auto; padding:0 24px 60px;}
.cal-meses-row{display:grid; grid-template-columns:repeat(4, 260px); justify-content:space-between; gap:20px; margin-top:10px;}
.cal-mes-block{background:var(--gray-100, #F1F3F7); border-radius:14px; padding:14px;}
.cal-mes-header{color:var(--navy, #1F2A5C); font-family:var(--display, 'Sora', sans-serif);
  font-weight:700; font-size:14px; text-align:center; padding:8px 8px 12px; margin-bottom:8px; text-transform:capitalize;
  background-image:linear-gradient(90deg, var(--navy, #1F2A5C), var(--blue, #2F8FCC), transparent);
  background-size:70% 3px; background-repeat:no-repeat; background-position:center bottom;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center;}
.cal-dow{font-size:10.5px; color:var(--gray-600, #65707A); font-weight:700; padding-bottom:2px; font-family:var(--body, 'Inter', sans-serif);}
/* aspect-ratio en vez de padding vertical: el alto de la celda tiene que
   salir del ancho real de columna (que cambia según cuántas columnas entren
   por fila), no de un padding fijo -si no, en columnas angostas (mobile) la
   celda queda mucho más alta que ancha. Se sostiene sin importar cuántas
   filas tenga el mes. */
.cal-day{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:0; border-radius:6px; font-size:11.5px; font-weight:600; color:var(--gray-900, #2B2B2E); background:var(--white, #fff); font-family:var(--body, 'Inter', sans-serif);}
.cal-day.empty{visibility:hidden; background:none;}
.cal-day.senia{background:var(--blue-soft, #A7B8E8); color:var(--navy, #1F2A5C);}
.cal-day.ocup{background:var(--navy, #1F2A5C); color:rgba(255,255,255,0.55);}
.cal-day.ocup span{text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.6);}
.cal-leyenda{display:flex; gap:20px; margin-top:16px; font-size:12.5px; color:var(--gray-600, #65707A); justify-content:center; font-family:var(--body, 'Inter', sans-serif);}
.cal-leyenda span{display:flex; align-items:center; gap:6px;}
.cal-dot{width:10px; height:10px; border-radius:3px;}
.cal-dot.disp{background:var(--white, #fff); border:1px solid #E2E7F2;}
.cal-dot.senia{background:var(--blue-soft, #A7B8E8);}
.cal-dot.ocup{background:var(--navy, #1F2A5C);}

@media(max-width:900px){
  .cal-meses-row{grid-template-columns:repeat(2,1fr); gap:14px;}
}

/* ============ COLLAGE HERO ============ */
.hero-collage{position:relative; max-width:100%; margin:0; padding:0;}
.collage-grid{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:0;
  height:440px; overflow:hidden; position:relative;}
.collage-grid .c-main{grid-row:1/3; position:relative; overflow:hidden;}
.collage-grid .c-item{position:relative; overflow:hidden;}
.collage-grid .c-item::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,14,35,0.65) 0%, rgba(10,14,35,0.3) 40%, transparent 60%);}
.collage-grid img{width:100%; height:100%; object-fit:cover; display:block;}

/* degradé: oscurece SOLO donde está el texto, abajo a la izquierda, sin ensuciar toda la foto */
.collage-scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(10,14,35,0.6) 0%, rgba(10,14,35,0.35) 18%, transparent 45%),
    linear-gradient(35deg, rgba(10,14,35,0.88) 0%, rgba(10,14,35,0.7) 35%, rgba(10,14,35,0.3) 65%, rgba(10,14,35,0.05) 90%);}

.hero-text{position:absolute; left:24px; bottom:20px; z-index:3; max-width:640px;}
.hero-text .badge-tour-inline{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.16);
  backdrop-filter:blur(4px); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:100px; margin-bottom:10px;}
.hero-text h1{color:#fff; font-family:var(--display, 'Sora', sans-serif); font-size:24px; font-weight:800; line-height:1.3;}
.hero-text .sub{color:rgba(255,255,255,0.85); font-size:13.5px; margin-top:6px;}
/* "N personas" solo en desktop -en mobile el sub queda solo dirección · vista */
.hero-sub-personas{display:inline;}

/* botón de Tour 360°/Video, sobre la foto principal */
.media-badges{position:absolute; z-index:4; top:16px; left:16px; display:flex; gap:8px; flex-wrap:wrap;}
.tour360-btn, .video-btn{display:flex; align-items:center; gap:8px;
  background:linear-gradient(120deg, rgba(31,42,92,0.55), rgba(47,143,204,0.55)); backdrop-filter:blur(4px); color:#fff; font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:100px; box-shadow:0 10px 22px -8px rgba(31,42,92,0.5); cursor:pointer; border:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; font-family:var(--body, 'Inter', sans-serif);}
.tour360-btn:hover, .video-btn:hover{background:linear-gradient(120deg, rgba(31,42,92,0.82), rgba(47,143,204,0.82)); transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(31,42,92,0.6);}
.tour360-btn:active, .video-btn:active{transform:translateY(0) scale(0.96); box-shadow:0 6px 14px -6px rgba(31,42,92,0.5);}

.g-verfotos{position:absolute; bottom:14px; right:14px; z-index:4; background:rgba(255,255,255,0.72); backdrop-filter:blur(4px); color:var(--navy, #1F2A5C); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:10px; box-shadow:0 6px 16px rgba(20,27,61,0.25); display:flex; align-items:center; gap:6px; cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease; border:none; font-family:var(--body, 'Inter', sans-serif);}
.g-verfotos:hover{background:rgba(255,255,255,0.92); transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,27,61,0.35);}

/* íconos flotantes en la esquina superior derecha: favorito (localStorage,
   ver JS) y whatsapp (wa.me directo, no depende de la fila de abajo) */
.float-icon{position:absolute; top:16px; z-index:4; width:42px; height:42px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.2); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; transition:transform .2s ease, background .2s ease;}
.float-icon:hover{transform:scale(1.08); background:rgba(255,255,255,0.32);}
.float-icon.fav{right:16px;}
.float-icon.fav:hover{color:#E0475C;}
.float-icon.fav.act{background:#E0475C; color:#fff;}
.float-icon.fav.act svg{fill:currentColor;}
.float-icon.whats{right:68px;}
.float-icon.whats:hover, .float-icon.whats:active{background:#25D366;}

/* zoom suave en hover */
.collage-grid img{transition:transform .5s cubic-bezier(.2,.8,.2,1); cursor:pointer;}
.collage-grid .c-item:hover img, .collage-grid .c-main:hover img{transform:scale(1.08);}

/* ============ LIGHTBOX / GALERÍA POP-UP ============ */
.lightbox-overlay{position:fixed; inset:0; z-index:999; background:rgba(8,11,26,0.94);
  display:none; align-items:center; justify-content:center; flex-direction:column; padding:24px;
  opacity:0; transition:opacity .25s ease;}
.lightbox-overlay.active{display:flex; opacity:1;}
.lightbox-stage{position:relative; max-width:min(1100px,92vw); max-height:80vh; width:100%;
  display:flex; align-items:center; justify-content:center;}
.lightbox-img{max-width:100%; max-height:80vh; border-radius:14px; box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
  object-fit:contain; animation:lightboxIn .3s ease;}
@keyframes lightboxIn{from{opacity:0; transform:scale(0.96);} to{opacity:1; transform:scale(1);}}
.lightbox-media{width:min(1000px,90vw); height:min(640px,74vh); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.6); animation:lightboxIn .3s ease; background:#000;}
.lightbox-media iframe{width:100%; height:100%; border:0; display:block;}
/* X de cerrar DENTRO del wrap que entra en fullscreen (hermana del iframe,
   no dentro de él) -fondo sólido fijo, sin depender de hover, y con z-index
   propio: al ser el propio contenedor el que está en fullscreen (real o por
   CSS, ver .lightbox-media--tour más abajo -ahora ocupa toda la pantalla en
   los dos casos por igual), esta X queda siempre arriba de todo sin
   pelearse con el titleBar interno de Marzipano (que vive DENTRO del
   iframe, en otro documento/capa).

   top:8px: superpuesta a la propia barra translúcida de Marzipano (misma
   altura que #titleBar) en vez de esquivarla -el círculo sólido de la X se
   ve bien encima del fondo glass de la barra, es un solape intencional. Ya
   no hace falta un valor distinto para el estado "todavía no está en
   fullscreen real" -.lightbox-media--tour ocupa toda la pantalla desde el
   arranque, no solo cuando el navegador entra en fullscreen real- así que
   es un solo valor para los dos casos, no dos reglas separadas. */
.tour-fs-close{position:absolute; top:8px; right:16px; z-index:10; width:44px; height:44px; border-radius:50%;
  background:rgba(13,17,38,0.9); border:1.5px solid rgba(255,255,255,0.2); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,0.5); transition:background .2s ease, transform .2s ease;}
.tour-fs-close:hover{background:rgba(13,17,38,1); transform:rotate(90deg);}
.lightbox-close{position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(13,17,38,0.88); border:1.5px solid rgba(255,255,255,0.18); backdrop-filter:blur(4px); color:#fff; display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:background .2s ease, transform .2s ease; z-index:5; box-shadow:0 6px 18px -6px rgba(0,0,0,0.5);}
.lightbox-close:hover{background:rgba(13,17,38,0.98); transform:rotate(90deg);}
/* en modo tour .lightbox-media--tour pasa a ocupar toda la pantalla (ver más
   abajo), así que esta X genérica de afuera queda pisada/superpuesta con la
   propia del tour (.tour-fs-close, que además sabe salir de fullscreen real
   antes de cerrar) -se esconde en ese modo, no hace falta duplicarla. La
   clase la pone el JS de cada ficha (fichaRenderLightbox) según lbMode. */
.lightbox-overlay--tour .lightbox-close{display:none;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,0.12); backdrop-filter:blur(4px); color:#fff; display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:background .2s ease, transform .2s ease; z-index:2; border:none;}
.lightbox-nav:hover{background:rgba(255,255,255,0.28);}
.lightbox-nav.prev{left:8px;}
.lightbox-nav.next{right:8px;}
.lightbox-counter{margin-top:14px; color:rgba(255,255,255,0.7); font-size:13px; font-weight:600; letter-spacing:0.5px; font-family:var(--body, 'Inter', sans-serif);}
.lightbox-img, .lightbox-stage{user-select:none;}
.lightbox-stage.dragging{cursor:grabbing;}
.lightbox-stage:not(.dragging){cursor:grab;}

.lightbox-thumbs{display:none; gap:10px; margin-top:18px; width:100%; max-width:min(1100px,92vw);
  overflow-x:auto; padding:4px 2px 8px; cursor:grab; user-select:none; scrollbar-width:none; -ms-overflow-style:none;}
.lightbox-thumbs::-webkit-scrollbar{display:none;}
.lightbox-thumbs.dragging{cursor:grabbing;}
.lightbox-thumb{flex-shrink:0; width:76px; height:56px; border-radius:9px; overflow:hidden;
  opacity:0.5; border:2px solid transparent; transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer; background:none; padding:0;}
.lightbox-thumb img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none;}
.lightbox-thumb:hover{opacity:0.85;}
.lightbox-thumb.active{opacity:1; border-color:var(--blue, #2F8FCC); transform:translateY(-2px);}

@media(max-width:900px){
  .collage-grid{grid-template-columns:1fr; grid-template-rows:none; height:280px; border-radius:0;}
  .collage-grid .c-item{display:none;}
  .collage-grid .c-main{grid-row:auto;}
  .hero-text h1{font-size:19px;}
  .hero-sub-personas{display:none;}
  .tour360-btn, .video-btn{font-size:12px; padding:8px 14px;}
  .lightbox-nav{width:40px; height:40px;}
  .lightbox-media{width:94vw; height:56vw; max-height:60vh;}
}

/* Tour 360°: pide fullscreen REAL del navegador sobre #fichaTourFsWrap (ver
   JS, fichaOpenMedia) -no un simple resize por CSS. iOS Safari no soporta
   fullscreen real sobre elementos genéricos (solo <video> vía otra API), así
   que ahí SIEMPRE se queda en este estado -no es "antes de que entre en
   efecto el real", en iPhone ES el estado final, para siempre. Por eso deja
   de tratarse como una tarjeta centrada con margen (como era antes, con
   backdrop visible alrededor) y directamente se pone a pantalla completa
   por CSS -position:fixed;inset:0-, calcado del tamaño que tomaría el
   fullscreen real, en vez de vivir adentro del flex de .lightbox-stage
   (.lightbox-stage--media igual se relaja por si algo más depende de su
   tamaño, pero .lightbox-media--tour ya no lo necesita para su propio
   tamaño al escapar del flujo con position:fixed). height:100dvh además de
   100vh: en iOS con la barra de Safari visible, 100vh mide más que lo que
   realmente se ve en pantalla (incluye el área tapada por la barra) y deja
   corte/espacio en algún borde; 100dvh mide el viewport visible real. Los
   navegadores que no entienden dvh ignoran esa línea y se quedan con el
   100vh de arriba (fallback normal de CSS, no rompe nada). La X
   (.tour-fs-close) ya no flota arriba en el backdrop (no queda backdrop
   visible): se mete DENTRO del box con el mismo top:8px que ya usaba el
   modo :fullscreen real, que ahora es prácticamente el mismo caso.

   BUG encontrado y arreglado (Android ocultaba esto, iPhone lo mostró):
   este bloque vivía ANTES del @media(max-width:900px) de arriba, que
   redefine .lightbox-media{width:94vw; height:56vw; max-height:60vh} para
   mobile. .lightbox-media--tour tiene la MISMA especificidad que
   .lightbox-media (una sola clase, 0-1-0) y el div del tour lleva AMBAS
   clases a la vez (class="lightbox-media lightbox-media--tour", ver JS) -en
   un empate de especificidad CSS desempata por orden de aparición en el
   archivo, no por dónde está el media query, así que en pantallas chicas
   la regla mobile de .lightbox-media (declarada después) le ganaba a esta
   -el tour quedaba con el tamaño de la FOTO (94vw x 56vw, chico) en vez de
   maximizado. En Android no se notaba porque ahí el navegador SÍ soporta
   requestFullscreen() sobre un <div>: el modo :fullscreen de abajo entra en
   efecto de verdad y esa regla (con pseudo-clase, más específica: 0-2-0)
   gana sin importar el orden. Mismo patrón de bug que el de .content-wrap
   más abajo en este archivo (ver ese comment): se soluciona moviendo el
   bloque después de TODO lo que tiene que ganarle, no cambiando ningún
   valor -la posición en el archivo se mantiene igual en este cambio. */
.lightbox-stage.lightbox-stage--media{max-width:none; max-height:none; width:100%; height:100%; align-items:flex-start;}
.lightbox-media--tour{position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; margin:0; max-width:none; max-height:none; border-radius:0;}
.lightbox-media--tour:fullscreen{margin:0; width:100vw; height:100vh; border-radius:0;}
.lightbox-media--tour:-webkit-full-screen{margin:0; width:100%; height:100%; border-radius:0;}

/* ============ DESKTOP (>900px) — overrides de tipografía/ancho ============
   BUG encontrado y arreglado: este bloque vivía arriba de todo, antes de
   las reglas base (.caract-item, .descripcion-txt, etc, más abajo en el
   archivo). Con la misma especificidad (una sola clase, 0-1-0) y el media
   query cumpliéndose en desktop, CSS desempata por orden de aparición en
   el archivo -no por dónde está el media query- así que la regla base
   (declarada DESPUÉS) le ganaba siempre a esta, incluso en desktop. Por
   eso se veía "al revés": en mobile no pasaba nada raro (esta regla ni
   aplica ahí), pero en desktop el tamaño chico de mobile terminaba
   ganando igual. Se mueve el bloque entero acá abajo -después de TODAS las
   reglas base que pisa- para que gane la cascada como corresponde. Mobile
   sigue sin tocarse (esto no aplica bajo 901px). */
@media(min-width:901px){
  .content-wrap{max-width:none; width:80%; margin:0 auto;}
  .content-wrap .kicker{font-size:15px;}
  .caract-item{font-size:18px;}
  .caract-item b{font-size:19px;}
  .adic-chip{font-size:16px; padding:10px 18px;}
  .descripcion-txt{font-size:17px; line-height:1.7;}
  .reservar-box p{font-size:16px;}
  .mapa-link{font-size:15px;}
  .caract-grid{gap:14px 32px;}
  .reservar-box{padding:24px 26px;}
  .calendario-full{max-width:none; width:80%; margin:0 auto; padding:0 0 60px;}
}