Individual Pages

<section class="page-hero">
    <span class="page-hero__label">Disfruta</span>
    <h1>Cultura y ocio</h1>
    <p>El nuevo Neptuno reúne las mejores propuestas de entretenimiento de Granada bajo un mismo techo renovado.</p>
</section>

<section class="ocio-bloque">
    <div class="ocio-bloque__imagen">
        <img src="./img/cine-megarama.jpg" alt="Megarama Cines Granada — entrada exterior">
        <div class="ocio-bloque__imagen-detalle">
            <img src="./img/cine-megarama-interior.jpg" alt="Sala interior Megarama Granada">
        </div>
    </div>

    <div class="ocio-bloque__texto">
        <span class="seccion-label">Cine</span>
        <h2>Megarama Cines</h2>
        <p>El cine de referencia en Granada sigue en Neptuno...</p>
        <ul class="ocio-lista">
            <li>8 salas de proyección</li>
            <li>Sonido Dolby Digital</li>
            <li>Programación nacional e internacional</li>
            <li>Acceso directo desde el aparcamiento</li>
        </ul>
    </div>
</section>

<section class="gastro-intro">
    <div class="gastro-intro__inner">
        <p>El bulevar interior de 3.000 m² se convierte en el eje gastronómico del centro...</p>
    </div>
</section>

<section class="gastro-categorias">
    <div class="gastro-grid">
        <article class="gastro-card">
            <div class="gastro-card__numero" aria-hidden="true">01</div>
            <div class="gastro-card__contenido">
                <h2>Tapas y bares</h2>
                <p>La esencia de la gastronomía granadina en el corazón del nuevo Neptuno...</p>
                <ul class="gastro-lista">
                    <li>Tapas tradicionales granadinas</li>
                    <li>Producto local y de temporada</li>
                    <li>Terraza en el bulevar interior</li>
                </ul>
            </div>
        </article>
        <!-- More cards -->
    </div>
</section>

<section class="proyecto-seccion">
    <div class="proyecto-intro">
        <span class="seccion-label">El proceso</span>
        <h2>De lo que fue a lo que será</h2>
        <p>La transformación del Neptuno parte de un análisis exhaustivo...</p>
    </div>

    <div class="render-grid render-grid--two">
        <figure class="render-item">
            <img src="./img/Secuencia-08.webp" alt="Fase de desmontaje y demolición">
            <figcaption>Fase de desmontaje y demolición</figcaption>
        </figure>
        <figure class="render-item">
            <img src="./img/Secuencia-07.webp" alt="Fase de remodelación y ampliación">
            <figcaption>Fase de remodelación y ampliación</figcaption>
        </figure>
    </div>
</section>

<figure class="render-item render-item--full">
    <img src="./img/Secuencia-09.webp" alt="Vista exterior nocturna del nuevo Neptuno">
    <figcaption>Vista exterior — Una nueva imagen para Granada</figcaption>
</figure>

<!-- Hidden radio inputs control tab state -->
<input type="radio" id="p-inversor" name="perfil" value="inversor" class="radio-perfil">
<input type="radio" id="p-marca" name="perfil" value="marca" class="radio-perfil">
<input type="radio" id="p-prensa" name="perfil" value="prensa" class="radio-perfil">
<input type="radio" id="p-ciudadano" name="perfil" value="ciudadano" class="radio-perfil">

<!-- Tab labels -->
<div class="profile-tabs">
    <label for="p-inversor" class="tab">Inversor</label>
    <label for="p-marca" class="tab">Marca</label>
    <label for="p-prensa" class="tab">Prensa</label>
    <label for="p-ciudadano" class="tab">Ciudadano</label>
</div>

<!-- Fields shown when p-inversor is checked -->
<div id="fields-inversor" class="profile-fields">
    <div class="form-row form-row--two">
        <div class="form-group">
            <label for="inv-empresa">Empresa u organización</label>
            <input type="text" id="inv-empresa" name="inv_empresa">
        </div>
        <div class="form-group">
            <label for="inv-cargo">Cargo</label>
            <input type="text" id="inv-cargo" name="inv_cargo">
        </div>
    </div>
    <!-- More fields -->
</div>

/* Hide all field groups by default */
.profile-fields { display: none; }

/* Show specific group when radio is checked */
#p-inversor:checked ~ #fields-inversor { display: block; }
#p-marca:checked ~ #fields-marca { display: block; }
#p-prensa:checked ~ #fields-prensa { display: block; }
#p-ciudadano:checked ~ #fields-ciudadano { display: block; }

/* Style active tab */
#p-inversor:checked ~ .profile-tabs label[for="p-inversor"] {
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
}