/* =====================================================================
   FICHA DE NEGOCIO (includes/ficha.php). Solo el maquetado de la ficha:
   colores, botones, chips y tarjetas vienen de base.css.
   ===================================================================== */

.principal:has(.ficha) { padding-top: 0; }

/* ----- Cabecera: banner a sangre con el titular encima ----- */
.ficha__cabecera {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding-block: 40px 32px;
    border-bottom: 1px solid var(--borde);
    isolation: isolate; /* Banner y degradado (z-index negativos) quedan dentro de la cabecera. */
}
.ficha__cabecera--con-imagen { min-height: min(72vh, 620px); }

.ficha__banner {
    position: absolute;
    inset: 0;
    z-index: -2; /* Por debajo del degradado (::before, -1). */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Degradado hacia el fondo para que el texto se lea sobre cualquier foto. */
.ficha__cabecera--con-imagen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, var(--fondo) 8%, color-mix(in srgb, var(--fondo) 55%, transparent) 55%, color-mix(in srgb, var(--fondo) 20%, transparent));
}
.ficha__titular h1 { margin-bottom: 16px; font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem); letter-spacing: -0.03em; }

/* Logo entero, sin recortar: la baldosa toma su proporción (cuadrado o apaisado)
   y el fondo cubre los logos con transparencia y los muy alargados. */
.ficha__logo {
    width: auto;
    height: 88px;
    min-width: 88px;
    max-width: 240px;
    margin-bottom: 20px;
    object-fit: contain;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
@media (min-width: 720px) {
    .ficha__logo { height: 112px; min-width: 112px; max-width: 300px; }
}

.migas ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    color: var(--texto-tenue);
    font-size: .8125rem;
    list-style: none;
}
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--borde-fuerte); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--texto); }

.ficha__claves {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0 0 18px;
    padding: 0;
    color: var(--texto-suave);
    list-style: none;
}

.ficha__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* "Ver mapa 3D": solo cuando el lateral va debajo del contenido (móvil y
   tableta); desde 960 px el plano ya está a la vista en el lateral fijo. */
@media (min-width: 960px) {
    .ficha__ver-plano { display: none; }
}

/* Local cerrado (cierreNegocio()): aviso bajo el nombre, opaco para leerse sobre el banner. */
.ficha__cierre {
    max-width: 640px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--atencion) 45%, transparent);
    border-left-width: 4px;
    border-radius: var(--radio-pequeno);
    background: color-mix(in srgb, var(--atencion) 12%, var(--fondo-elevado));
}
.ficha__cierre--definitivo {
    border-color: color-mix(in srgb, var(--error) 45%, transparent);
    background: color-mix(in srgb, var(--error) 12%, var(--fondo-elevado));
}
.ficha__cierre p { margin: 0 0 6px; color: var(--texto); }
.ficha__cierre strong { color: var(--atencion); }
.ficha__cierre--definitivo strong { color: var(--error); }
.ficha__cierre a { color: var(--texto-suave); font-size: .875rem; }
.ficha__cierre a:hover { color: var(--texto); }

/* ----- Cuerpo: contenido + lateral ----- */
.ficha__cuerpo {
    display: grid;
    gap: 40px;
    padding-top: 40px;
}
.ficha__principal { min-width: 0; }
.ficha__lateral { display: grid; gap: 16px; align-content: start; }

/* Las preguntas frecuentes van en el HTML después del lateral (en móvil, al
   final de la ficha). En ordenador vuelven a la columna del contenido, debajo
   de él; el lateral ocupa las dos filas y el sobrante va a la segunda (1fr),
   para que no quede hueco entre el contenido y las preguntas. */
@media (min-width: 960px) {
    .ficha__cuerpo { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 48px; padding-top: 56px; }
    .ficha__principal { grid-column: 1; grid-row: 1; }
    /* Fijo al hacer scroll: align-self start, porque estirado a toda su área
       el sticky no tendría recorrido. Si es más alto que la pantalla (plano,
       mapa y datos), hace scroll propio para que se llegue a la ubicación. */
    .ficha__lateral {
        grid-column: 2; grid-row: 1 / span 2; align-self: start;
        position: sticky; top: 88px;
        max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .ficha__preguntas { grid-column: 1; grid-row: 2; align-self: start; }
}

.ficha__seccion + .ficha__seccion { margin-top: 48px; }
.ficha__seccion p { max-width: 68ch; color: var(--texto-suave); }

/* Texto largo con formato (negocios_textos, limpiarHtml()): solo h2, h3, p,
   listas, negritas, cursivas y enlaces. Sus h2 abren apartados dentro de «Sobre». */
.ficha__texto { max-width: 68ch; }
.ficha__texto h2 { margin: 1.6em 0 .5em; font-size: 1.25rem; }
.ficha__texto h3 { margin: 1.4em 0 .4em; font-size: 1.0625rem; }
.ficha__texto ul,
.ficha__texto ol { margin: 0 0 1em; padding-left: 1.3em; color: var(--texto-suave); }
.ficha__texto li + li { margin-top: .35em; }
.ficha__texto strong { color: var(--texto); }
.ficha__texto a { color: var(--acento); }

/* Fichas sin Fourvenues: entradas, listas y reservados por WhatsApp (whatsappNegocio()),
   o el teléfono de reservas de la web en los shisha lounges (telefonoReservas()). */
.ficha__whatsapp,
.ficha__reservar {
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--acento) 30%, var(--borde));
    border-radius: var(--radio);
    background: color-mix(in srgb, var(--acento) 8%, var(--fondo-elevado));
}
.ficha__whatsapp h2,
.ficha__reservar h2 { margin-top: 0; }

/* ----- Preguntas frecuentes plegables (preguntasPlegables(): fichas y guía) ----- */
.preguntas__cabecera { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.preguntas__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio);
    background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #000));
    color: #fff;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--acento) 30%, transparent);
}
.preguntas__icono svg, .pregunta__flecha svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.preguntas__icono svg { width: 24px; height: 24px; }
.preguntas .preguntas__cabecera h2 { margin: 0; line-height: 1.2; }
.preguntas .preguntas__cabecera p { margin: 4px 0 0; color: var(--texto-tenue); font-size: .9375rem; }

.preguntas__lista { display: grid; gap: 12px; }
.pregunta {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-elevado);
    transition: border-color var(--transicion), background-color var(--transicion);
}
.pregunta:hover { border-color: var(--borde-fuerte); }
.pregunta[open] {
    border-color: color-mix(in srgb, var(--acento) 45%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 9%, var(--fondo-elevado)), var(--fondo-elevado) 70%);
}
.pregunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radio);
    list-style: none;
    cursor: pointer;
}
.pregunta summary::-webkit-details-marker { display: none; }
.preguntas .pregunta__titulo { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.pregunta__flecha {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto-suave);
    transition: transform var(--transicion), background-color var(--transicion), color var(--transicion);
}
.pregunta__flecha svg { width: 18px; height: 18px; }
.pregunta summary:hover .pregunta__flecha { background: var(--borde-fuerte); color: var(--texto); }
.pregunta[open] .pregunta__flecha { transform: rotate(180deg); background: color-mix(in srgb, var(--acento) 22%, transparent); color: var(--acento); }
.preguntas .pregunta__respuesta { max-width: none; margin: 0; padding: 0 16px 18px; color: var(--texto-suave); }

@media (min-width: 720px) {
    .pregunta summary { padding: 18px 20px; }
    .preguntas .pregunta__respuesta { padding: 0 20px 20px; }
}
/* Abrir y cerrar con animación donde el navegador sabe animar hasta height: auto. */
@media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
        .pregunta { interpolate-size: allow-keywords; }
        .pregunta::details-content { height: 0; overflow: clip; transition: height 220ms ease, content-visibility 220ms allow-discrete; }
        .pregunta[open]::details-content { height: auto; }
    }
}

/* ----- Textos plegables en el móvil (controlLeerMas(): fichas y fiestas) -----
   Un texto que en el móvil ocuparía demasiado no se quita ni se oculta con
   display: none: Google indexa la versión móvil, y lo que no se ve puede
   contar menos. Bajo 720 px se corta a dos líneas y "Leer más" lo abre. El
   texto lleva .plegable y justo detrás va el <details> vacío de
   controlLeerMas(); sin :has() el texto se ve entero y el control no sale. */
.plegable__mas { display: none; }
@supports selector(:has(*)) {
    @media (max-width: 719px) {
        .plegable:has(+ .plegable__mas) { margin-bottom: 2px; }
        .plegable:has(+ .plegable__mas:not([open])) {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }
        .plegable + .plegable__mas { display: block; margin-bottom: 1rem; }
    }
}
.plegable__mas summary {
    display: inline-block;
    padding: 4px 0;
    color: var(--acento);
    font-size: .875rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.plegable__mas summary::-webkit-details-marker { display: none; }
.plegable__mas summary:hover { text-decoration: underline; }
.plegable__mas[open] .plegable__abrir,
.plegable__mas:not([open]) .plegable__cerrar { display: none; }

/* ----- Galerías ----- */
.galeria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.galeria img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio-pequeno);
    background: var(--superficie);
}
@media (min-width: 720px) {
    .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ----- Plano 3D (includes/planos.php, js/plano-ficha.js) ----- */

.ficha__plano {
    display: block;
    width: 100%;
    height: min(80vh, 680px);
    min-height: 420px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: #0a0910;
}
/* Móvil: el visor pone su panel debajo de la sala; necesita más alto. */
@media (max-width: 760px) {
    .ficha__plano { height: 85vh; }
}
.ficha__plano--aplazado {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 16px;
    background:
        radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 70%),
        var(--fondo-elevado);
    text-align: center;
}

/* Ficha de la sala: el hueco del plano como vista previa (suelo en
   perspectiva y mesas de colores, sin cargar nada) y el botón llamativo.
   Los colores de las mesas son los de la paleta común de los planos. */
.ficha__plano--vista { position: relative; overflow: hidden; isolation: isolate; border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%), #0a0910; }
.ficha__plano--vista::before {
    content: "";
    position: absolute;
    inset: -10% -25% -20%;
    z-index: -1;
    background:
        radial-gradient(circle at 22% 38%, #f0c75e 0 6px, transparent 11px),
        radial-gradient(circle at 34% 30%, #ff4d5e 0 6px, transparent 11px),
        radial-gradient(circle at 48% 26%, #ff9f43 0 6px, transparent 11px),
        radial-gradient(circle at 62% 30%, #4a82ff 0 6px, transparent 11px),
        radial-gradient(circle at 76% 40%, #3fd0f0 0 6px, transparent 11px),
        radial-gradient(circle at 70% 70%, #4cd37b 0 6px, transparent 11px),
        radial-gradient(circle at 28% 72%, #a35bff 0 6px, transparent 11px),
        radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--acento) 30%, transparent), transparent 55%),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--acento) 22%, transparent) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--acento) 22%, transparent) 0 1px, transparent 1px 26px),
        #0d0b16;
    transform: perspective(420px) rotateX(52deg);
    transform-origin: 50% 60%;
    opacity: .75;
}
.ficha__plano--vista p { color: var(--texto-suave); text-shadow: 0 1px 6px #000; }
.boton--plano {
    padding: 13px 22px;
    background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 45%, #ff3d8b));
    border-color: transparent;
    color: var(--fondo);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 60%, transparent), 0 8px 26px color-mix(in srgb, var(--acento) 45%, transparent);
    animation: brillo-plano 2.8s ease-in-out infinite;
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.boton--plano:hover {
    background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 45%, #ff3d8b));
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--acento), 0 12px 34px color-mix(in srgb, var(--acento) 60%, transparent);
}
@keyframes brillo-plano {
    50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 60%, transparent), 0 8px 34px color-mix(in srgb, var(--acento) 70%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .boton--plano { animation: none; }
    .boton--plano:hover { transform: none; }
}
.ficha__plano--aplazado p { margin: 0; color: var(--texto-tenue); font-size: .8rem; }
.ficha__plano-enlace { margin: 10px 0 0; font-size: .85rem; }
/* En el lateral de la ficha (340 px): el visor usa su diseño de móvil, la
   sala arriba y las mesas debajo. Más bajo que en la página de la fiesta para
   que el lateral fijo (sticky) no tape la ubicación. */
.ficha__plano-tarjeta .ficha__plano { height: 520px; min-height: 0; }
.ficha__plano-tarjeta .ficha__plano--aplazado { height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
    .ficha__plano-tarjeta .ficha__plano { height: 75vh; }
    .ficha__plano-tarjeta .ficha__plano--aplazado { height: auto; }
}

/* "Abrir en grande", junto al título de la tarjeta (y en móvil, en la fiesta). */
.ficha__plano-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ficha__plano-titulo h2 { margin: 0; }
.ficha__plano-grande {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--acento) 55%, var(--borde));
    border-radius: 999px;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    color: var(--texto);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transicion), border-color var(--transicion);
}
.ficha__plano-grande:hover { background: color-mix(in srgb, var(--acento) 24%, transparent); border-color: var(--acento); color: var(--texto); }

/* El plano en grande (js/plano-grande.js, ficha y fiesta): el marco del iframe, fijo a toda la
   pantalla, con una barra arriba para cerrar que no tapa nada del plano. Con
   la API de pantalla completa además oculta las barras del navegador. */
.ficha__plano-barra { display: none; }
.ficha__plano-marco--grande {
    position: fixed;
    inset: 0;
    z-index: 75; /* sobre la cabecera (50) y los avisos fijos; bajo el aviso de cookies (80) */
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    background: #0a0910;
}
.ficha__plano-marco--grande .ficha__plano-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(8px, env(safe-area-inset-top)) var(--margen) 8px;
    border-bottom: 1px solid var(--borde);
    color: var(--texto-suave);
    font-size: .875rem;
}
.ficha__plano-barra span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha__plano-barra .boton { flex: none; padding: 8px 14px; }
/* Doble clase: gana a los altos y márgenes del iframe en la ficha y en la fiesta. */
.ficha__plano-marco.ficha__plano-marco--grande .ficha__plano { flex: 1; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.plano-en-grande { overflow: hidden; }
/* El lateral fijo (sticky, en ordenador) apila aparte: sin esto la cabecera
   de la web quedaría encima del plano cuando no hay pantalla completa. */
.plano-en-grande .ficha__lateral { z-index: 75; }

/* ----- Lateral ----- */

.ficha__mapa {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 12px;
    border: 0;
    border-radius: var(--radio-pequeno);
    /* Mapa de Google oscurecido para que no deslumbre en la ficha nocturna. */
    filter: invert(.9) hue-rotate(180deg) saturate(.6);
}
/* Hueco del mapa hasta pulsar "Ver mapa" (js/mapa-ficha.js): unas calles
   dibujadas con degradados, sin imágenes ni nada de Google. */
.ficha__mapa--aplazado {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--borde);
    background:
        linear-gradient(115deg, transparent 46%, color-mix(in srgb, var(--borde) 70%, transparent) 46% 49%, transparent 49%),
        linear-gradient(20deg, transparent 58%, color-mix(in srgb, var(--borde) 55%, transparent) 58% 60%, transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb, var(--borde) 45%, transparent) 38px 39px),
        repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--borde) 45%, transparent) 46px 47px),
        var(--fondo-elevado);
    filter: none;
    text-align: center;
}
.ficha__mapa--aplazado .boton { display: inline-flex; align-items: center; gap: 8px; }
.ficha__mapa--aplazado p { margin: 0; color: var(--texto-tenue); font-size: .75rem; }
.ficha__mapa--aplazado a { color: inherit; }

/* "Más discotecas en…", al final: no se pinta hasta que se acerca al scroll. */
.ficha__relacionados { content-visibility: auto; contain-intrinsic-size: auto 520px; }
/* Móvil y tableta (hasta que caben las tres en fila: 3 × 260 + huecos y
   márgenes = 860 px): solo dos, en una fila de dos columnas, con la tarjeta
   más compacta y la descripción cortada a tres líneas. */
@media (max-width: 859px) {
    .ficha__relacionados .rejilla-negocios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ficha__relacionados .tarjeta-negocio:nth-child(n+3) { display: none; }
    .ficha__relacionados .tarjeta-negocio__texto { padding: 12px 12px 14px; }
    .ficha__relacionados .tarjeta-negocio h3 { font-size: 1rem; overflow-wrap: anywhere; }
    .ficha__relacionados .tarjeta-negocio__descripcion {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: .8125rem;
    }
}