/* espacios.css */
@import url('interna.css');

.espacio-detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.espacio-detalle-grid--invertido .espacio-detalle-img { order: 2; }
.espacio-detalle-img img { border-radius: var(--radio-xl); box-shadow: var(--sombra-lg); aspect-ratio: 4/3; object-fit: cover; }

.etiqueta--naranja { color: var(--naranja) !important; }

.lista-features { display: flex; flex-direction: column; gap: 0.85rem; }
.lista-features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.lista-features i { color: var(--turquesa); font-size: 1.2rem; flex-shrink: 0; }

@media (max-width: 900px) {
    .espacio-detalle-grid,
    .espacio-detalle-grid--invertido {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .espacio-detalle-grid--invertido .espacio-detalle-img { order: 0; }
}

/* ─── Galería y tarifas (conectado a BD) ─────────────────── */
.espacio-img-placeholder {
    aspect-ratio: 4/3; border-radius: var(--radio-xl);
    background: var(--gris-10); display: flex; align-items: center; justify-content: center;
    color: var(--gris-50); font-size: 3rem;
}
.espacio-galeria-thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem; flex-wrap: wrap; }
.espacio-galeria-thumbs img { width: 64px; height: 64px; border-radius: var(--radio); object-fit: cover; }

.espacio-tarifas-publico { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.espacio-tarifas-publico span {
    font-size: 1.1rem; font-weight: 700; color: var(--azul);
    background: var(--gris-10); padding: 0.5rem 1rem; border-radius: var(--radio);
}
.espacio-tarifas-publico small { font-size: 0.75rem; font-weight: 500; color: var(--gris-50); }

/* ─── Navegación rápida por categorías ───────────────────── */
.categorias-nav-wrap {
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 1.5rem;
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-20);
}
.categorias-nav { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.categorias-nav a {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem; font-size: 0.88rem; font-weight: 600;
    color: var(--azul); background: var(--gris-10);
    border-radius: 100px; transition: all var(--transicion);
}
.categorias-nav a:hover { background: var(--turquesa); color: var(--blanco); }
.categorias-nav a i { font-size: 1.1rem; }

/* Ajuste: el hero ya no necesita el padding extra que tenía categorias-nav-wrap */
.hero-interna { padding-bottom: 2.5rem; }