:root {
    --fondo: #12100e;
    --fondo-profundo: #0c0a09;
    --superficie: #1a1714;
    --superficie-alta: #211d19;
    --linea: rgb(238 224 200 / 0.16);
    --linea-fuerte: rgb(238 224 200 / 0.28);
    --texto: #f4eadb;
    --texto-suave: #c8bcaa;
    --texto-tenue: #8f8578;
    --acento: #d89a3f;
    --acento-claro: #edb65d;
    --acento-oscuro: #9c6224;
    --exito: #9db483;
    --sombra: 0 24px 80px rgb(0 0 0 / 0.34);
    --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    color-scheme: dark;
    scroll-behavior: smooth;
    scrollbar-color: var(--acento) var(--fondo-profundo);
}

/* Fase 5.4B — catálogo público multiproducto */

.tienda.catalogo-publico {
    display: block;
    width: min(100% - 40px, 1360px);
    margin-inline: auto;
    padding: clamp(72px, 9vw, 132px) 0 80px;
}

.catalogo-publico__cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px 40px;
    padding-bottom: clamp(28px, 5vw, 58px);
    border-bottom: 1px solid rgba(244, 235, 219, 0.16);
}

.catalogo-publico__cabecera > span {
    grid-column: 1;
    color: var(--acento, #d99a2b);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.catalogo-publico__cabecera h1 {
    grid-column: 1;
    margin: 0;
    color: #f4ebdb;
    font-family: var(--fuente-titulo, Georgia, serif);
    font-size: clamp(3rem, 7.5vw, 7.4rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.9;
}

.catalogo-publico__cabecera > p {
    grid-column: 1;
    max-width: 720px;
    margin: 10px 0 0;
    color: rgba(244, 235, 219, 0.68);
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    line-height: 1.7;
}

.catalogo-publico__cabecera > div {
    display: grid;
    grid-column: 2;
    grid-row: 1 / 4;
    justify-items: end;
    padding-bottom: 6px;
}

.catalogo-publico__cabecera > div strong {
    color: #f4ebdb;
    font-family: var(--fuente-titulo, Georgia, serif);
    font-size: clamp(3.4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.8;
}

.catalogo-publico__cabecera > div span {
    margin-top: 14px;
    color: rgba(244, 235, 219, 0.52);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.catalogo-publico__rejilla {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
    padding: clamp(34px, 6vw, 76px) 0;
}

.catalogo-publico__producto {
    display: grid;
    grid-column: span 4;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(244, 235, 219, 0.16);
    border-radius: 4px;
    background: #191613;
}

.catalogo-publico__producto--principal {
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto;
}

.catalogo-publico__imagen {
    min-height: 310px;
    background: #0d0c0a;
}

.catalogo-publico__producto--principal .catalogo-publico__imagen {
    min-height: 520px;
}

.catalogo-publico__imagen img,
.catalogo-publico__imagen-vacia {
    width: 100%;
    height: 100%;
}

.catalogo-publico__imagen img {
    display: block;
    object-fit: cover;
}

.catalogo-publico__imagen-vacia {
    display: flex;
    min-height: inherit;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 28px;
    background:
        radial-gradient(circle at 25% 20%, rgba(217, 154, 43, 0.28), transparent 38%),
        linear-gradient(145deg, #20180f, #0d0c0a 70%);
}

.catalogo-publico__imagen-vacia span {
    align-self: flex-start;
    color: rgba(244, 235, 219, 0.58);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.catalogo-publico__imagen-vacia strong {
    align-self: flex-end;
    color: rgba(244, 235, 219, 0.16);
    font-family: var(--fuente-titulo, Georgia, serif);
    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 400;
    line-height: 0.8;
}

.catalogo-publico__contenido {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: clamp(22px, 3vw, 38px);
}

.catalogo-publico__tipo {
    color: #d99a2b;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.catalogo-publico__contenido h2 {
    margin: 18px 0 14px;
    overflow-wrap: anywhere;
    color: #f4ebdb;
    font-family: var(--fuente-titulo, Georgia, serif);
    font-size: clamp(1.65rem, 3.2vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
}

.catalogo-publico__producto:not(.catalogo-publico__producto--principal)
    .catalogo-publico__contenido h2 {
    font-size: clamp(1.5rem, 2.2vw, 2.25rem);
}

.catalogo-publico__contenido > p {
    margin: 0;
    color: rgba(244, 235, 219, 0.62);
    font-size: 0.95rem;
    line-height: 1.65;
}

.catalogo-publico__contenido footer {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 34px;
}

.catalogo-publico__contenido footer > div {
    display: grid;
    gap: 5px;
}

.catalogo-publico__contenido footer small {
    color: rgba(244, 235, 219, 0.48);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.catalogo-publico__contenido footer strong {
    color: #f4ebdb;
    font-size: 1rem;
}

.catalogo-publico__contenido footer > span {
    padding: 8px 11px;
    border: 1px solid rgba(217, 154, 43, 0.46);
    color: #e4ae4e;
    font-size: 0.64rem;
    font-weight: 740;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.catalogo-publico__informacion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(244, 235, 219, 0.16);
    border-bottom: 1px solid rgba(244, 235, 219, 0.16);
}

.catalogo-publico__informacion article {
    min-height: 230px;
    padding: clamp(26px, 4vw, 48px);
}

.catalogo-publico__informacion article + article {
    border-left: 1px solid rgba(244, 235, 219, 0.16);
}

.catalogo-publico__informacion article > span {
    color: #d99a2b;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.catalogo-publico__informacion h2 {
    margin: 16px 0 12px;
    color: #f4ebdb;
    font-family: var(--fuente-titulo, Georgia, serif);
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 500;
}

.catalogo-publico__informacion p {
    max-width: 500px;
    margin: 0;
    color: rgba(244, 235, 219, 0.62);
    line-height: 1.7;
}

.catalogo-publico__informacion .tienda__acceso {
    grid-column: 1 / -1;
    margin: 0;
    border-top: 1px solid rgba(244, 235, 219, 0.16);
}

.catalogo-publico__nota {
    max-width: 780px;
    margin: 28px auto 0;
    color: rgba(244, 235, 219, 0.48);
    font-size: 0.78rem;
    line-height: 1.7;
    text-align: center;
}

.catalogo-publico__vacio {
    display: grid;
    min-height: 420px;
    place-content: center;
    padding: 50px 20px;
    text-align: center;
}

.catalogo-publico__vacio span {
    color: #d99a2b;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.catalogo-publico__vacio h2 {
    margin: 12px 0;
    color: #f4ebdb;
    font-family: var(--fuente-titulo, Georgia, serif);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 500;
}

.catalogo-publico__vacio p {
    color: rgba(244, 235, 219, 0.62);
}

@media (max-width: 900px) {
    .catalogo-publico__cabecera {
        grid-template-columns: 1fr;
    }

    .catalogo-publico__cabecera > div {
        grid-column: 1;
        grid-row: auto;
        justify-items: start;
        margin-top: 22px;
    }

    .catalogo-publico__rejilla {
        grid-template-columns: 1fr 1fr;
    }

    .catalogo-publico__producto,
    .catalogo-publico__producto--principal {
        grid-column: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .catalogo-publico__producto--principal .catalogo-publico__imagen {
        min-height: 430px;
    }
}

@media (max-width: 620px) {
    .tienda.catalogo-publico {
        width: min(100% - 28px, 1360px);
        padding-top: 54px;
    }

    .catalogo-publico__rejilla,
    .catalogo-publico__informacion {
        grid-template-columns: 1fr;
    }

    .catalogo-publico__producto--principal .catalogo-publico__imagen,
    .catalogo-publico__imagen {
        min-height: 390px;
    }

    .catalogo-publico__informacion article + article {
        border-top: 1px solid rgba(244, 235, 219, 0.16);
        border-left: 0;
    }

    .catalogo-publico__contenido footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.cat-petroglifos,
.cat-arqueologia {
    --acento: #c7784c;
    --acento-claro: #e49a68;
    --acento-oscuro: #86462c;
}

.cat-playas {
    --acento: #6696a5;
    --acento-claro: #8fbcca;
    --acento-oscuro: #3b6370;
}

.cat-dunas {
    --acento: #d7a55f;
    --acento-claro: #edc37e;
    --acento-oscuro: #99692f;
}

.cat-reservas {
    --acento: #8d9f6e;
    --acento-claro: #b4c395;
    --acento-oscuro: #5d7043;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--fondo-profundo);
    scroll-padding-top: 5rem;
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 82% 18%, rgb(216 154 63 / 0.07), transparent 32rem),
        var(--fondo);
    color: var(--texto);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

img,
svg {
    display: block;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--acento-claro);
    outline-offset: 4px;
}

.aviso-demo {
    display: flex;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.45rem 1.25rem;
    border-bottom: 1px solid rgb(216 154 63 / 0.28);
    background: #302211;
    color: #f7e4c2;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.aviso-demo span {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.aviso-demo p {
    margin: 0;
}

.cabecera-publica {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 50%;
    display: flex;
    width: min(100% - 3rem, 1280px);
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
}

.aviso-demo + .cabecera-publica {
    top: 2.45rem;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--texto);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.marca img {
    width: 2rem;
    height: 2rem;
}

.cabecera-publica nav {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.8rem);
}

.cabecera-publica nav a {
    position: relative;
    color: rgb(255 250 242 / 0.86);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.cabecera-publica nav a::after {
    position: absolute;
    right: 0;
    bottom: -0.45rem;
    left: 0;
    height: 1px;
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    background: var(--acento);
    transition: transform 180ms ease;
}

.cabecera-publica nav a:hover::after,
.cabecera-publica nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.portada {
    position: relative;
    display: grid;
    min-height: clamp(680px, 92vh, 920px);
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(120deg, #100e0c 10%, #21170f 100%);
}

.portada--sin-imagen::before,
.portada--sin-imagen::after {
    position: absolute;
    z-index: -2;
    border: 1px solid rgb(216 154 63 / 0.16);
    border-radius: 50%;
    content: "";
}

.portada--sin-imagen::before {
    top: 12%;
    right: -15%;
    width: min(60vw, 800px);
    aspect-ratio: 1;
}

.portada--sin-imagen::after {
    top: 29%;
    right: 2%;
    width: min(30vw, 420px);
    aspect-ratio: 1;
}

.portada__imagen {
    position: absolute;
    z-index: -3;
    inset: 0;
    overflow: hidden;
}

.portada__imagen img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    object-position: 50% 50%;
}

.portada__velo {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, #0d0b09 0%, rgb(13 11 9 / 0.96) 28%, rgb(13 11 9 / 0.54) 58%, transparent 82%),
        linear-gradient(0deg, #0d0b09 0%, transparent 32%),
        linear-gradient(180deg, rgb(0 0 0 / 0.34), transparent 20%);
}

.portada__contenido {
    width: min(100% - 3rem, 1280px);
    margin: 0 auto;
    padding: 10rem 0 clamp(7rem, 12vh, 9rem);
}

.portada__categoria,
.sobrelinea {
    margin: 0 0 1.1rem;
    color: var(--acento-claro);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.portada h1 {
    max-width: 760px;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(3.3rem, 7.1vw, 7.2rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.89;
    text-wrap: balance;
}

.portada__resumen {
    max-width: 590px;
    margin: clamp(1.8rem, 4vh, 3rem) 0 0;
    color: rgb(244 234 219 / 0.88);
    font-size: clamp(1.05rem, 1.55vw, 1.3rem);
    line-height: 1.65;
    text-wrap: pretty;
}

.grupo-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    margin-top: 2.2rem;
}

.boton,
.boton-texto,
.boton-ruta,
.accion-movil {
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    font-weight: 760;
    text-decoration: none;
}

.boton {
    display: inline-flex;
    gap: 0.7rem;
    padding: 0.85rem 1.4rem;
    border: 1px solid var(--linea-fuerte);
}

.boton svg,
.boton-ruta svg,
.accion-movil svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.boton--primario {
    border-color: var(--acento);
    background: var(--acento);
    color: #17110b;
}

.boton--primario:hover {
    background: var(--acento-claro);
}

.boton--secundario {
    background: rgb(18 16 14 / 0.68);
    backdrop-filter: blur(8px);
}

.boton-texto {
    display: inline-flex;
    gap: 0.55rem;
    min-width: 10rem;
    color: var(--texto-suave);
}

.boton-texto span {
    color: var(--acento);
    font-size: 1.2rem;
}

.indicador-scroll {
    position: absolute;
    right: max(1.5rem, calc((100vw - 1280px) / 2));
    bottom: 3rem;
    display: grid;
    width: 2.8rem;
    height: 4.4rem;
    place-items: start center;
    border: 1px solid var(--linea-fuerte);
    border-radius: 2rem;
}

.indicador-scroll span {
    width: 3px;
    height: 0.7rem;
    margin-top: 0.75rem;
    border-radius: 1rem;
    background: var(--acento);
    animation: indicar-scroll 1.8s ease-in-out infinite;
}

@keyframes indicar-scroll {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    50% {
        transform: translateY(1.5rem);
        opacity: 1;
    }
}

.seccion {
    width: min(100% - 3rem, 1200px);
    margin: 0 auto;
    padding: clamp(5.5rem, 10vw, 9rem) 0;
}

.encabezado-seccion {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.2rem;
    margin-bottom: clamp(2rem, 5vw, 3.7rem);
}

.numero-seccion {
    align-self: start;
    margin: 0.2rem 0 0;
    color: var(--acento);
    font-family: var(--serif);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.encabezado-seccion .sobrelinea {
    margin-bottom: 0.35rem;
}

.encabezado-seccion h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4.7rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    text-wrap: balance;
}

.mapa-composicion {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    min-height: 520px;
    border: 1px solid var(--linea);
    background: var(--superficie);
    box-shadow: var(--sombra);
}

.mapa-marco {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 35%, rgb(216 154 63 / 0.12), transparent 18rem),
        #171511;
}

.mapa-marco::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid rgb(255 255 255 / 0.07);
    content: "";
    pointer-events: none;
}

.mapa-marco iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: 0;
}

.mapa-vacio {
    display: grid;
    min-height: 500px;
    place-content: center;
    justify-items: center;
    padding: 2rem;
    color: var(--texto-suave);
    text-align: center;
}

.mapa-vacio svg {
    width: 4rem;
    margin-bottom: 1rem;
    fill: none;
    stroke: var(--acento);
    stroke-width: 1.1;
}

.panel-ruta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4.5vw, 4.5rem);
    border-left: 1px solid var(--linea);
}

.estado-destino {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.4rem;
    color: var(--acento-claro);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.estado-destino span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgb(216 154 63 / 0.12);
}

.estado-destino--listo {
    color: var(--exito);
}

.panel-ruta h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2rem, 3vw, 3.1rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.06;
}

.panel-ruta > p:not(.estado-destino) {
    margin: 1.25rem 0 0;
    color: var(--texto-suave);
}

.boton-ruta {
    display: flex;
    width: 100%;
    min-height: 5rem;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: var(--acento);
    color: #17110b;
}

.boton-ruta span {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.boton-ruta b {
    font-size: 1.4rem;
}

.boton-ruta:hover {
    background: var(--acento-claro);
}

.enlace-externo {
    display: inline-flex;
    align-self: flex-start;
    gap: 0.45rem;
    margin-top: 1.25rem;
    color: var(--acento-claro);
    font-weight: 700;
    text-underline-offset: 0.28em;
}

.instrucciones-ruta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea);
}

.instrucciones-ruta h4 {
    margin: 0 0 0.7rem;
}

.instrucciones-ruta p {
    margin: 0;
    color: var(--texto-suave);
}

.seccion--galeria {
    width: min(100% - 3rem, 1280px);
    border-top: 1px solid var(--linea);
}

.conteo-galeria {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 0.85rem;
}

.galeria {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.8vw, 1.5rem);
}

.galeria__foto {
    position: relative;
    grid-column: span 4;
    min-height: 360px;
    margin: 0;
    overflow: hidden;
    background: var(--superficie);
}

.galeria__foto:first-child {
    grid-column: span 8;
}

.galeria__foto:nth-child(4n) {
    grid-column: span 8;
}

.galeria__foto img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.galeria__foto:hover img {
    transform: scale(1.025);
}

.galeria__foto figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.5rem 1rem 1rem;
    background: linear-gradient(transparent, rgb(0 0 0 / 0.8));
    color: var(--texto);
    font-size: 0.82rem;
}

.seccion--informacion {
    border-top: 1px solid var(--linea);
}

.informacion-composicion {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.texto-editorial {
    color: #ddd2c2;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1.72;
}

.texto-editorial > :first-child {
    margin-top: 0;
}

.texto-editorial > :last-child {
    margin-bottom: 0;
}

.datos-practicos {
    align-self: start;
    margin: 0;
    border-top: 1px solid var(--linea-fuerte);
}

.datos-practicos div {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--linea);
}

.datos-practicos dt {
    margin-bottom: 0.35rem;
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.datos-practicos dd {
    margin: 0;
    color: var(--texto);
}

.seccion--multimedia,
.seccion--youtube {
    width: min(100% - 3rem, 1280px);
    border-top: 1px solid var(--linea);
}

.galeria-mp4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
}

.video-propio {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--linea);
    background: var(--superficie);
}

.video-propio:only-child {
    grid-column: 1 / -1;
}

.video-propio video {
    display: block;
    width: 100%;
    max-height: min(72vh, 760px);
    aspect-ratio: 16 / 9;
    border: 0;
    background: #070605;
    object-fit: contain;
}

.video-propio__texto {
    padding: 1.3rem 1.4rem 1.5rem;
    border-top: 1px solid var(--linea);
}

.video-propio__texto h3,
.video-youtube__texto h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.video-propio__texto p,
.video-youtube__texto > p:not(.video-youtube__tipo) {
    margin: 0.8rem 0 0;
    color: var(--texto-suave);
}

.galeria-youtube {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--linea-fuerte);
}

.video-youtube {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border-right: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    background: rgb(26 23 20 / 0.52);
}

.video-youtube:only-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.video-youtube:only-child .video-youtube__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem clamp(1rem, 2vw, 2rem) 1rem 0;
}

.video-youtube__marco {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(circle at 50% 45%, rgb(216 154 63 / 0.18), transparent 10rem),
        #080706;
}

.video-youtube__marco iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    border: 0;
}

.video-youtube__texto {
    padding: 1.25rem 0 0.25rem;
}

.video-youtube__tipo {
    margin: 0 0 0.55rem;
    color: var(--acento-claro);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.video-youtube__texto a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    color: var(--acento-claro);
    font-weight: 750;
    text-underline-offset: 0.28em;
}

.bloque-publico[data-parallax-bloque]:not([data-parallax-bloque="0"]) {
    translate: 0 var(--parallax-bloque-y, 0);
}

.pie-publico {
    display: flex;
    width: min(100% - 3rem, 1280px);
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin: 0 auto;
    padding: 4rem 0;
    border-top: 1px solid var(--linea);
}

.pie-publico p {
    max-width: 490px;
    margin: 1rem 0 0;
    color: var(--texto-tenue);
}

.pie-publico > a {
    color: var(--acento-claro);
    font-weight: 700;
    text-underline-offset: 0.3em;
}

.accion-movil {
    display: none;
}

.con-animaciones [data-revelar] {
    opacity: 0;
    transition:
        transform var(--duracion-animacion, 700ms)
            cubic-bezier(0.2, 0.7, 0.2, 1)
            var(--retardo-animacion, 0ms),
        opacity var(--duracion-animacion, 700ms) ease
            var(--retardo-animacion, 0ms),
        clip-path var(--duracion-animacion, 700ms)
            cubic-bezier(0.2, 0.7, 0.2, 1)
            var(--retardo-animacion, 0ms);
}

.con-animaciones [data-revelar][data-anim="subir"] {
    transform: translateY(24px);
}

.con-animaciones [data-revelar][data-anim="lateral"] {
    transform: translateX(34px);
}

.con-animaciones [data-revelar][data-anim="zoom"] {
    transform: scale(0.965);
}

.con-animaciones [data-revelar][data-anim="mascara"] {
    /*
     * No recortar el bloque al 100 %: algunos navegadores calculan su
     * intersección sobre el área recortada y la sección nunca se revela.
     */
    transform: translateY(18px);
    clip-path: inset(0 0 12% 0);
}

.con-animaciones [data-revelar].visible {
    transform: translateY(0);
    opacity: 1;
    clip-path: inset(0);
}

.con-animaciones [data-revelar][data-anim="lateral"].visible {
    transform: translateX(0);
}

.con-animaciones [data-revelar][data-anim="zoom"].visible {
    transform: scale(1);
}

.con-animaciones [data-hijo-animado] {
    transform: translateY(16px);
    opacity: 0;
    transition:
        transform var(--duracion-animacion, 700ms)
            cubic-bezier(0.2, 0.7, 0.2, 1)
            var(--retardo-hijo, 0ms),
        opacity var(--duracion-animacion, 700ms) ease
            var(--retardo-hijo, 0ms);
}

.con-animaciones [data-revelar].visible [data-hijo-animado] {
    transform: translateY(0);
    opacity: 1;
}

.cabecera-publica--flujo {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
    transform: none;
    border-bottom-color: var(--linea);
}

.aviso-demo + .cabecera-publica--flujo {
    top: auto;
}

.cabecera-publica nav a[aria-current="page"] {
    color: var(--acento-claro);
}

.cabecera-publica nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.cabecera__buscar {
    padding: 0.5rem 1rem;
    border: 1px solid rgb(216 154 63 / 0.56);
}

.cabecera__buscar::after {
    display: none;
}

.portada--video-scroll {
    display: block;
    height: 100vh;
    min-height: 100vh;
    overflow: clip;
}

.portada--video-scroll.video-scroll-activo {
    height: calc(var(--altura-portada-vh, 500) * 1vh);
}

.portada__escena {
    position: sticky;
    top: 0;
    display: grid;
    height: 100vh;
    min-height: 680px;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    background: var(--fondo-profundo);
}

.portada__video {
    position: absolute;
    z-index: -3;
    inset: 0;
    overflow: hidden;
    background: #080706;
}

.portada__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.progreso-video {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgb(255 255 255 / 0.14);
}

.progreso-video span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--acento-claro);
}

.pagina-publica {
    background:
        radial-gradient(circle at 80% 12%, rgb(216 154 63 / 0.06), transparent 34rem),
        var(--fondo);
}

.hero-inicio {
    position: relative;
    display: grid;
    min-height: clamp(650px, 75vh, 780px);
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background: var(--fondo-profundo);
}

.hero-inicio__media {
    position: absolute;
    z-index: -3;
    inset: 0;
    overflow: hidden;
}

.hero-inicio__media[data-parallax],
.portada__imagen[data-parallax] {
    top: -80px;
    bottom: -80px;
}

.hero-inicio__media img {
    width: 100%;
    height: 110%;
    object-fit: cover;
}

.hero-inicio__velo {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, #0d0b09 0%, rgb(13 11 9 / 0.98) 32%, rgb(13 11 9 / 0.48) 67%, transparent 88%),
        linear-gradient(0deg, #0d0b09 0%, transparent 26%),
        linear-gradient(180deg, rgb(0 0 0 / 0.35), transparent 24%);
}

.hero-inicio__contenido {
    width: min(100% - 3rem, 1280px);
    margin: 0 auto;
    padding: 10rem 0 6rem;
}

.hero-inicio h1,
.cabecera-indice h1,
.hero-ruta h1 {
    max-width: 800px;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(3.5rem, 7.3vw, 7rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.93;
}

.hero-inicio h1 {
    font-size: clamp(3.5rem, 6vw, 6rem);
}

.hero-inicio__contenido > p {
    max-width: 500px;
    margin: 2rem 0 0;
    color: var(--texto-suave);
    font-size: clamp(1rem, 1.5vw, 1.22rem);
    line-height: 1.55;
}

.cabecera-editorial {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.cabecera-editorial h2 {
    max-width: 760px;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.8rem, 5.5vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--acento-claro);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.enlace-flecha span {
    font-size: 1.3rem;
    transition: transform 180ms ease;
}

.enlace-flecha:hover span {
    transform: translateX(0.25rem);
}

.seccion--descubrimiento {
    padding-top: clamp(4rem, 6vw, 6rem);
}

.catalogo-destacado,
.catalogo-publico {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.tarjeta-lugar {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.05fr) minmax(250px, 0.95fr);
    border-top: 1px solid var(--linea-fuerte);
    background: var(--superficie);
}

.tarjeta-lugar__media {
    position: relative;
    min-height: 290px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgb(216 154 63 / 0.16), transparent),
        var(--fondo-profundo);
    text-decoration: none;
}

.tarjeta-lugar__media img {
    width: 100%;
    height: 100%;
    transition: transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
    object-fit: cover;
}

.tarjeta-lugar:hover .tarjeta-lugar__media img {
    transform: scale(1.025);
}

.tarjeta-lugar__media--vacia {
    display: grid;
    place-items: center;
}

.tarjeta-lugar__media--vacia span {
    color: rgb(244 234 219 / 0.14);
    font-family: var(--serif);
    font-size: clamp(3rem, 8vw, 7rem);
}

.tarjeta-lugar__contenido {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.tarjeta-lugar__codigo {
    margin: 0 0 1rem;
    color: var(--acento-claro);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tarjeta-lugar h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.tarjeta-lugar h2 a {
    text-decoration: none;
}

.tarjeta-lugar__meta {
    margin: 1rem 0 0;
    color: var(--texto-tenue);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tarjeta-lugar__resumen {
    display: -webkit-box;
    margin: 1rem 0 1.5rem;
    overflow: hidden;
    color: var(--texto-suave);
    font-size: 0.92rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.tarjeta-lugar .enlace-flecha {
    margin-top: auto;
}

.catalogo-destacado .tarjeta-lugar:first-child {
    grid-column: 1 / -1;
    min-height: 590px;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
}

.catalogo-destacado .tarjeta-lugar:first-child .tarjeta-lugar__media {
    min-height: 590px;
}

.catalogo-destacado .tarjeta-lugar:not(:first-child) {
    display: block;
}

.catalogo-destacado .tarjeta-lugar:not(:first-child) .tarjeta-lugar__media {
    display: block;
    min-height: 360px;
    aspect-ratio: 16 / 10;
}

.seccion--distritos {
    padding-top: clamp(5rem, 9vw, 9rem);
    padding-bottom: clamp(5rem, 8vw, 8rem);
}

.lista-distritos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--linea-fuerte);
}

.lista-distritos a {
    display: flex;
    min-height: 8rem;
    align-items: end;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    border-right: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    font-family: var(--serif);
    font-size: clamp(1.45rem, 2.6vw, 2.45rem);
    line-height: 1;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.lista-distritos a:hover {
    background: var(--superficie-alta);
    color: var(--acento-claro);
}

.lista-distritos span {
    color: var(--acento);
    font-family: var(--sans);
    font-size: 1rem;
}

.seccion--categorias {
    width: 100%;
    max-width: none;
    padding: clamp(5rem, 8vw, 8rem) max(1.5rem, calc((100vw - 1280px) / 2));
    background: var(--superficie);
}

.lista-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--linea-fuerte);
}

.lista-categorias a {
    padding: 1rem 1.4rem;
    border-right: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    color: var(--texto-suave);
    text-decoration: none;
}

.lista-categorias a:hover {
    color: var(--acento-claro);
}

.contenido-indice {
    width: min(100% - 3rem, 1280px);
    min-height: 70vh;
    margin: 0 auto;
    padding: clamp(3.5rem, 5vw, 6rem) 0;
}

.cabecera-indice {
    padding-bottom: 2.4rem;
    border-bottom: 1px solid var(--linea-fuerte);
}

.cabecera-indice h1 {
    font-size: clamp(3.3rem, 5vw, 5.2rem);
}

.cabecera-indice > p {
    max-width: 720px;
    margin: 1.5rem 0 0;
    color: var(--texto-suave);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
}

.navegacion-grupos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 2.5rem 0;
    border-top: 1px solid var(--linea);
}

.navegacion-grupos a {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    font-family: var(--serif);
    font-size: 1.4rem;
    text-decoration: none;
}

.navegacion-grupos span {
    color: var(--acento);
    font-family: var(--sans);
}

.filtros-publicos {
    display: grid;
    grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(150px, 1fr)) auto;
    gap: 1rem;
    margin: 1.5rem 0 0;
}

.filtros-publicos label {
    min-width: 0;
}

.filtros-publicos label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.filtros-publicos input,
.filtros-publicos select,
.filtros-publicos button {
    width: 100%;
    min-height: 3.55rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: 0;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
}

.filtros-publicos input,
.filtros-publicos select {
    padding: 0 1rem;
}

.filtros-publicos input::placeholder {
    color: var(--texto-tenue);
}

.filtros-publicos button {
    min-width: 8rem;
    padding: 0 1.7rem;
    border-color: var(--acento);
    background: var(--acento);
    color: #17110b;
    font-weight: 800;
    cursor: pointer;
}

.barra-resultados {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.barra-resultados p {
    margin: 0;
}

.barra-resultados a {
    color: var(--acento-claro);
    text-underline-offset: 0.25em;
}

.catalogo-publico .tarjeta-lugar:first-child {
    grid-column: 1 / -1;
    min-height: 400px;
}

.catalogo-publico .tarjeta-lugar:not(:first-child) {
    display: block;
}

.catalogo-publico .tarjeta-lugar:not(:first-child) .tarjeta-lugar__media {
    display: block;
    min-height: 280px;
    aspect-ratio: 16 / 9;
}

.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linea);
}

.paginacion a {
    color: var(--acento-claro);
    font-weight: 750;
}

.paginacion span {
    color: var(--texto-tenue);
}

.estado-vacio {
    max-width: 820px;
    margin: 4rem 0;
    padding: clamp(2.5rem, 6vw, 5rem);
    border: 1px solid var(--linea);
    background: var(--superficie);
}

.estado-vacio h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1;
}

.estado-vacio > p:not(.sobrelinea) {
    color: var(--texto-suave);
}

.estado-vacio .boton {
    margin-top: 1rem;
}

.lista-rutas {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}

.tarjeta-ruta {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    border-top: 1px solid var(--linea-fuerte);
    background: var(--superficie);
}

.tarjeta-ruta > img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
}

.tarjeta-ruta > div {
    padding: clamp(2rem, 5vw, 4rem);
}

.tarjeta-ruta h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4.6rem);
    font-weight: 500;
    line-height: 1;
}

.tarjeta-ruta h2 a {
    text-decoration: none;
}

.tarjeta-ruta__datos,
.hero-ruta__datos {
    color: var(--texto-tenue);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-ruta {
    position: relative;
    display: grid;
    min-height: 78vh;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    background: var(--fondo-profundo);
}

.hero-ruta > img {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-ruta::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(0deg, rgb(12 10 9 / 0.95), transparent 70%),
        linear-gradient(90deg, rgb(12 10 9 / 0.82), transparent 65%);
    content: "";
}

.hero-ruta > div {
    width: min(100% - 3rem, 1280px);
    margin: 0 auto;
    padding: 10rem 0 6rem;
}

.hero-ruta > div > p:not(.sobrelinea, .hero-ruta__datos) {
    max-width: 650px;
    color: var(--texto-suave);
}

.hero-ruta--sin-imagen {
    min-height: 560px;
}

.texto-editorial--ruta {
    max-width: 820px;
}

.seccion--ruta-lugares {
    padding-bottom: 7rem;
}

.pie-publico--global {
    align-items: start;
}

.pie-publico--global nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.8rem 2rem;
}

.pie-publico--global nav a {
    color: var(--texto-suave);
    text-decoration: none;
}

.pie-publico--global nav a:hover {
    color: var(--acento-claro);
}

.seccion--publicidad,
.seccion--relacionados {
    width: min(100% - 3rem, 1280px);
    border-top: 1px solid var(--linea);
}

.publicidad-composicion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
}

.anuncio-publico {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--linea);
    background:
        linear-gradient(135deg, rgb(216 154 63 / 0.09), transparent 45%),
        var(--superficie);
}

.anuncio-publico--barra,
.anuncio-publico--integrado,
.anuncio-publico--pie {
    width: min(100% - 3rem, 1280px);
    margin-right: auto;
    margin-left: auto;
}

.anuncio-publico--barra {
    margin-top: 5.8rem;
    margin-bottom: 1rem;
}

.modo-demo .anuncio-publico--barra {
    margin-top: 8.2rem;
}

.anuncio-publico--integrado {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.anuncio-publico--pie {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.anuncio-publico__etiqueta {
    position: absolute;
    z-index: 2;
    top: 0.8rem;
    left: 0.8rem;
    margin: 0;
    padding: 0.22rem 0.55rem;
    border: 1px solid rgb(244 234 219 / 0.22);
    background: rgb(12 10 9 / 0.8);
    color: var(--texto-suave);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.anuncio-publico__contenido {
    display: grid;
    min-height: 150px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.anuncio-publico--tarjeta .anuncio-publico__contenido,
.anuncio-publico--intersticial .anuncio-publico__contenido {
    display: block;
}

.anuncio-publico img,
.anuncio-publico video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 430px;
    object-fit: cover;
}

.anuncio-publico__texto {
    padding: clamp(2.4rem, 5vw, 4rem);
    color: var(--texto);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.4vw, 2.25rem);
    line-height: 1.25;
}

.anuncio-publico__texto p {
    margin: 0;
}

.anuncio-publico__cta {
    margin: 1.5rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--linea-fuerte);
    color: var(--acento-claro);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.anuncio-publico__cta:hover {
    border-color: var(--acento);
    background: rgb(216 154 63 / 0.1);
}

.carrusel-relacionados {
    display: grid;
    grid-auto-columns: minmax(280px, 31%);
    grid-auto-flow: column;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 0 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--acento) var(--superficie);
}

.tarjeta-relacionada {
    min-width: 0;
    scroll-snap-align: start;
    border: 1px solid var(--linea);
    background: var(--superficie);
}

.tarjeta-relacionada > a {
    display: grid;
    height: 100%;
    grid-template-rows: 240px 1fr;
    text-decoration: none;
}

.tarjeta-relacionada__media {
    display: grid;
    overflow: hidden;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgb(216 154 63 / 0.22), transparent 10rem),
        var(--fondo-profundo);
    color: var(--acento);
    font-family: var(--serif);
    font-size: 4rem;
}

.tarjeta-relacionada__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 450ms ease;
}

.tarjeta-relacionada:hover .tarjeta-relacionada__media img {
    transform: scale(1.035);
}

.tarjeta-relacionada__texto {
    padding: 1.35rem;
}

.tarjeta-relacionada__texto p {
    margin: 0 0 0.55rem;
    color: var(--acento-claro);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tarjeta-relacionada__texto h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.05;
}

.tarjeta-relacionada__texto span {
    display: -webkit-box;
    margin-top: 0.8rem;
    overflow: hidden;
    color: var(--texto-suave);
    font-size: 0.88rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.modal-difusion[hidden] {
    display: none;
}

.modal-difusion {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.modal-difusion__velo {
    position: absolute;
    inset: 0;
    background: rgb(7 6 5 / 0.82);
    backdrop-filter: blur(12px);
}

.modal-difusion__panel {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 780px);
    max-height: calc(100svh - 3rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
    overflow: auto;
    border: 1px solid var(--linea-fuerte);
    background: var(--superficie-alta);
    box-shadow: var(--sombra);
}

.modal-difusion--pequeno .modal-difusion__panel {
    width: min(100%, 520px);
    grid-template-columns: 1fr;
}

.modal-difusion--sin-media .modal-difusion__panel {
    width: min(100%, 640px);
    grid-template-columns: 1fr;
}

.modal-difusion--sin-media .modal-difusion__media {
    display: none;
}

.modal-difusion--grande .modal-difusion__panel {
    width: min(100%, 1080px);
}

.modal-difusion--pantalla_completa .modal-difusion__panel {
    width: calc(100vw - 3rem);
    height: calc(100svh - 3rem);
}

.modal-difusion--intersticial .modal-difusion__panel {
    display: block;
    width: min(100%, 900px);
}

.modal-difusion__cerrar {
    position: absolute;
    z-index: 4;
    top: 0.7rem;
    right: 0.7rem;
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border: 1px solid var(--linea-fuerte);
    border-radius: 50%;
    background: rgb(12 10 9 / 0.82);
    color: var(--texto);
    font-size: 1.6rem;
    cursor: pointer;
}

.modal-difusion__media {
    position: relative;
    min-height: 280px;
    background: var(--fondo-profundo);
}

.modal-difusion__media:empty {
    display: none;
}

.modal-difusion__media img,
.modal-difusion__media video,
.modal-difusion__media iframe {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: 0;
    object-fit: cover;
}

.modal-difusion__media [data-activar-sonido] {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--linea-fuerte);
    background: rgb(12 10 9 / 0.82);
    color: var(--texto);
    font-weight: 750;
    cursor: pointer;
}

.modal-difusion__contenido {
    align-self: center;
    padding: clamp(2.3rem, 5vw, 4.5rem);
}

.modal-difusion__contenido h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 0.95;
}

.modal-difusion__texto {
    margin: 1.3rem 0 0;
    color: var(--texto-suave);
}

.modal-difusion__contenido .boton {
    display: inline-flex;
    margin-top: 1.5rem;
    padding: 0.9rem 1.2rem;
    background: var(--acento);
    color: #17110a;
    font-weight: 800;
    text-decoration: none;
}

body.modal-difusion-abierto {
    overflow: hidden;
}

@media (max-width: 960px) {
    .mapa-composicion {
        grid-template-columns: 1fr;
    }

    .panel-ruta {
        border-top: 1px solid var(--linea);
        border-left: 0;
    }

    .informacion-composicion {
        grid-template-columns: 1fr;
    }

    .publicidad-composicion {
        grid-template-columns: 1fr;
    }

    .carrusel-relacionados {
        grid-auto-columns: minmax(280px, 48%);
    }

    .datos-practicos {
        max-width: 620px;
    }

    .galeria-mp4,
    .galeria-youtube {
        grid-template-columns: 1fr;
    }

    .video-youtube:only-child {
        display: block;
    }

    .video-youtube:only-child .video-youtube__texto {
        display: block;
        padding: 1.25rem 0 0.25rem;
    }

    .video-youtube {
        border-right: 0;
    }

    .filtros-publicos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filtros-publicos button {
        min-width: 0;
    }

    .tarjeta-lugar,
    .catalogo-destacado .tarjeta-lugar:first-child {
        grid-template-columns: 1fr;
    }

    .catalogo-destacado .tarjeta-lugar:first-child {
        min-height: 0;
    }

    .catalogo-destacado .tarjeta-lugar:first-child .tarjeta-lugar__media {
        min-height: 450px;
    }

    .lista-distritos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    html {
        scroll-padding-top: 1rem;
    }

    body {
        padding-bottom: 5.2rem;
    }

    .aviso-demo {
        display: block;
        min-height: 0;
        padding: 0.55rem 1rem;
        text-align: center;
    }

    .aviso-demo p {
        display: none;
    }

    .cabecera-publica {
        top: 0;
        width: calc(100% - 2rem);
        min-height: 4.3rem;
    }

    .modo-demo .cabecera-publica {
        top: 2.2rem;
    }

    .cabecera-publica nav {
        display: none;
    }

    .cabecera-publica--flujo {
        top: auto;
    }

    .marca {
        font-size: 1.35rem;
    }

    .portada {
        min-height: max(680px, 90svh);
    }

    .portada__imagen {
        inset: 0;
    }

    .portada__imagen img {
        height: 105%;
    }

    .portada__velo {
        background:
            linear-gradient(0deg, #0d0b09 2%, rgb(13 11 9 / 0.92) 39%, rgb(13 11 9 / 0.16) 78%),
            linear-gradient(180deg, rgb(0 0 0 / 0.38), transparent 27%);
    }

    .portada__contenido {
        width: calc(100% - 2rem);
        padding: 9rem 0 5.5rem;
    }

    .portada h1 {
        font-size: clamp(3.2rem, 16vw, 5.4rem);
    }

    .portada__resumen {
        font-size: 1rem;
        line-height: 1.55;
    }

    .grupo-acciones .boton--primario {
        display: none;
    }

    .indicador-scroll {
        display: none;
    }

    .seccion,
    .seccion--galeria,
    .seccion--publicidad,
    .seccion--relacionados,
    .pie-publico {
        width: calc(100% - 2rem);
    }

    .anuncio-publico--barra,
    .anuncio-publico--integrado,
    .anuncio-publico--pie {
        width: calc(100% - 2rem);
    }

    .encabezado-seccion {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .encabezado-seccion h2 {
        font-size: clamp(2.45rem, 12vw, 3.5rem);
    }

    .conteo-galeria {
        grid-column: 2;
    }

    .mapa-composicion {
        min-height: 0;
    }

    .mapa-marco,
    .mapa-marco iframe,
    .mapa-vacio {
        min-height: 390px;
    }

    .panel-ruta {
        padding: 1.65rem;
    }

    .panel-ruta h3 {
        font-size: 2rem;
    }

    .galeria {
        display: block;
    }

    .galeria__foto,
    .galeria__foto:first-child,
    .galeria__foto:nth-child(4n) {
        min-height: 0;
        margin-bottom: 1rem;
    }

    .galeria__foto img {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    .seccion--multimedia,
    .seccion--youtube {
        width: calc(100% - 2rem);
    }

    .video-propio__texto,
    .video-youtube {
        padding: 1rem;
    }

    .video-propio video,
    .video-youtube__marco {
        aspect-ratio: 16 / 10;
    }

    .carrusel-relacionados {
        grid-auto-columns: minmax(260px, 86%);
    }

    .modal-difusion {
        padding: 0.75rem;
    }

    .modal-difusion__panel,
    .modal-difusion--pantalla_completa .modal-difusion__panel {
        display: block;
        width: 100%;
        height: auto;
        max-height: calc(100svh - 1.5rem);
    }

    .modal-difusion__media {
        min-height: 220px;
    }

    .modal-difusion__media img,
    .modal-difusion__media video,
    .modal-difusion__media iframe {
        min-height: 220px;
        aspect-ratio: 16 / 10;
    }

    .modal-difusion__contenido {
        padding: 2rem 1.35rem;
    }

    .pie-publico {
        display: block;
    }

    .pie-publico > a {
        display: inline-block;
        margin-top: 2rem;
    }

    .accion-movil {
        position: fixed;
        z-index: 50;
        right: 0.85rem;
        bottom: max(0.85rem, env(safe-area-inset-bottom));
        left: 0.85rem;
        display: flex;
        gap: 0.65rem;
        min-height: 3.85rem;
        border: 1px solid rgb(255 255 255 / 0.16);
        background: var(--acento);
        box-shadow: 0 12px 35px rgb(0 0 0 / 0.48);
        color: #17110b;
    }

    .pagina-publica {
        padding-bottom: 0;
    }

    .hero-inicio {
        min-height: max(680px, 92svh);
        align-items: end;
    }

    .hero-inicio__media {
        inset: 0;
    }

    .hero-inicio__media img {
        height: 104%;
    }

    .hero-inicio__velo {
        background:
            linear-gradient(0deg, #0d0b09 2%, rgb(13 11 9 / 0.94) 44%, rgb(13 11 9 / 0.12) 82%),
            linear-gradient(180deg, rgb(0 0 0 / 0.42), transparent 30%);
    }

    .hero-inicio__contenido {
        width: calc(100% - 2rem);
        padding: 9rem 0 5.5rem;
    }

    .hero-inicio h1 {
        font-size: clamp(3.25rem, 15vw, 5.2rem);
    }

    .hero-inicio__contenido > p {
        margin-top: 1.4rem;
    }

    .hero-inicio .grupo-acciones .boton--primario {
        display: inline-flex;
    }

    .cabecera-editorial {
        display: block;
    }

    .cabecera-editorial > .enlace-flecha {
        margin-top: 1.5rem;
    }

    .cabecera-editorial h2 {
        font-size: clamp(2.8rem, 13vw, 4.2rem);
    }

    .catalogo-destacado,
    .catalogo-publico {
        display: block;
    }

    .tarjeta-lugar,
    .catalogo-destacado .tarjeta-lugar:first-child,
    .catalogo-destacado .tarjeta-lugar:not(:first-child),
    .catalogo-publico .tarjeta-lugar:first-child,
    .catalogo-publico .tarjeta-lugar:not(:first-child) {
        display: block;
        min-height: 0;
        margin-bottom: 1.25rem;
    }

    .tarjeta-lugar__media,
    .catalogo-destacado .tarjeta-lugar:first-child .tarjeta-lugar__media,
    .catalogo-destacado .tarjeta-lugar:not(:first-child) .tarjeta-lugar__media,
    .catalogo-publico .tarjeta-lugar:not(:first-child) .tarjeta-lugar__media {
        display: block;
        min-height: 260px;
        aspect-ratio: 4 / 3;
    }

    .tarjeta-lugar__contenido {
        padding: 1.5rem;
    }

    .lista-distritos,
    .navegacion-grupos {
        grid-template-columns: 1fr;
    }

    .lista-distritos a {
        min-height: 5rem;
    }

    .seccion--categorias {
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .contenido-indice {
        width: calc(100% - 2rem);
        padding: 3.5rem 0 5rem;
    }

    .cabecera-indice h1 {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    .filtros-publicos {
        grid-template-columns: 1fr;
    }

    .barra-resultados {
        align-items: start;
    }

    .paginacion {
        gap: 1rem;
        justify-content: space-between;
    }

    .tarjeta-ruta {
        display: block;
    }

    .tarjeta-ruta > img {
        min-height: 260px;
        aspect-ratio: 4 / 3;
    }

    .hero-ruta {
        min-height: 680px;
    }

    .hero-ruta > div {
        width: calc(100% - 2rem);
        padding: 9rem 0 4rem;
    }

    .hero-ruta h1 {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    .pie-publico--global nav {
        margin-top: 2rem;
    }

    .portada--video-scroll,
    .portada--video-scroll.video-scroll-activo,
    .portada__escena {
        height: max(680px, 100svh);
        min-height: max(680px, 100svh);
    }

    .portada--video-scroll .portada__escena {
        position: relative;
    }

    .progreso-video {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .con-animaciones [data-revelar] {
        transform: none;
        opacity: 1;
    }

    .portada--video-scroll,
    .portada--video-scroll.video-scroll-activo,
    .portada__escena {
        height: max(680px, 100svh);
        min-height: max(680px, 100svh);
    }

    .portada--video-scroll .portada__escena {
        position: relative;
    }

    .progreso-video {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   Fase 5 — tienda y área privada
   ------------------------------------------------------------------------- */

.pagina-tienda,
.pagina-cuenta {
    background:
        radial-gradient(circle at 76% 18%, rgb(216 154 63 / 0.055), transparent 30rem),
        var(--fondo-profundo);
}

.tienda {
    width: min(100% - 3rem, 1280px);
    margin: 0 auto;
    padding: 10rem 0 0;
}

.tienda__presentacion {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.tienda__imagen {
    min-height: 650px;
    overflow: hidden;
    border: 1px solid var(--linea);
    background: var(--superficie);
}

.tienda__imagen img {
    width: 100%;
    height: 100%;
    min-height: 650px;
    object-fit: cover;
    object-position: center 42%;
}

.tienda__imagen-vacia {
    display: grid;
    min-height: 650px;
    align-content: center;
    padding: 3rem;
    background:
        linear-gradient(155deg, rgb(216 154 63 / 0.17), transparent 55%),
        var(--superficie);
    color: var(--acento);
    font-family: var(--serif);
}

.tienda__imagen-vacia span {
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: 0.8;
}

.tienda__imagen-vacia strong {
    color: var(--texto);
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 400;
}

.tienda__introduccion h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(3.4rem, 6.1vw, 6.3rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.91;
    text-wrap: balance;
}

.tienda__introduccion > p {
    max-width: 590px;
    margin: 2rem 0 0;
    color: var(--texto-suave);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.tienda__estado {
    max-width: 590px;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding-top: 2.4rem;
    border-top: 1px solid var(--acento-oscuro);
}

.tienda__estado h2 {
    margin: 0;
    color: var(--acento);
    font-family: var(--serif);
    font-size: clamp(2.1rem, 3.6vw, 3.5rem);
    font-weight: 500;
    line-height: 1;
}

.tienda__estado > span {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--texto-atenuado);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tienda__estado p {
    max-width: 500px;
    margin: 1rem 0 0;
    color: var(--texto-suave);
}

.tienda__formatos {
    margin-top: 2rem;
    border-top: 1px solid var(--linea-fuerte);
}

.tienda__formatos article {
    display: grid;
    min-height: 8rem;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--linea);
}

.tienda__formatos article > span {
    color: var(--acento);
    font-family: var(--serif);
    font-size: 2.1rem;
}

.tienda__formatos h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    font-weight: 500;
}

.tienda__formatos p {
    margin: 0.2rem 0 0;
    color: var(--texto-suave);
}

.tienda__formatos article > strong {
    min-width: 11rem;
    padding-left: 2rem;
    border-left: 1px solid var(--linea);
    color: var(--acento);
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
}

.tienda__acceso {
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.25rem 1rem;
    text-decoration: none;
}

.tienda__acceso span {
    display: grid;
}

.tienda__acceso strong {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 500;
}

.tienda__acceso small {
    color: var(--texto-suave);
    font-size: 0.95rem;
}

.tienda__acceso svg {
    width: 2.1rem;
    fill: none;
    stroke: var(--acento);
    stroke-width: 1.5;
    transition: transform 180ms ease;
}

.tienda__acceso:hover svg {
    transform: translateX(0.35rem);
}

.cuenta-cabecera {
    display: flex;
    width: min(100% - 3rem, 1360px);
    min-height: 6rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 0 auto;
    border-bottom: 1px solid var(--linea-fuerte);
}

.cuenta-cabecera > a:not(.marca),
.cuenta-cabecera form button {
    border: 0;
    background: transparent;
    color: var(--acento);
    font: 700 0.88rem/1 var(--sans);
    text-decoration: none;
    cursor: pointer;
}

.cuenta-cabecera--privada {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
}

.cuenta-cabecera--privada > a:not(.marca) {
    padding-left: 2rem;
    border-left: 1px solid var(--linea-fuerte);
}

.cuenta-cabecera--privada > strong {
    color: var(--texto);
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 500;
}

.cuenta-login {
    display: grid;
    width: min(100% - 3rem, 1120px);
    min-height: calc(100svh - 6rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    align-items: center;
    gap: clamp(4rem, 9vw, 9rem);
    margin: 0 auto;
    padding: 5rem 0;
}

.cuenta-login > section h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(4rem, 7.5vw, 7.2rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.9;
}

.cuenta-login > section p {
    max-width: 520px;
    color: var(--texto-suave);
    font-size: 1.08rem;
}

.cuenta-login form {
    padding: clamp(2.2rem, 4.5vw, 4rem);
    border: 1px solid var(--linea-fuerte);
    background: var(--superficie);
    box-shadow: var(--sombra);
}

.cuenta-login form h2 {
    margin: 0 0 2rem;
    font-family: var(--serif);
    font-size: 2.7rem;
    font-weight: 500;
}

.cuenta-login label {
    display: grid;
    gap: 0.55rem;
    margin-top: 1.25rem;
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 750;
}

.cuenta-login input {
    width: 100%;
    min-height: 3.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: 0;
    background: var(--fondo-profundo);
    color: var(--texto);
    font: 500 1rem/1.4 var(--sans);
}

.cuenta-login button {
    width: 100%;
    min-height: 3.7rem;
    margin-top: 1.6rem;
    border: 1px solid var(--acento);
    border-radius: 0;
    background: var(--acento);
    color: #17110b;
    font: 800 0.95rem/1 var(--sans);
    cursor: pointer;
}

.cuenta-login__ayuda {
    margin: 1.2rem 0 0;
    color: var(--texto-tenue);
    font-size: 0.83rem;
}

.cuenta-login__opciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: 1.3rem;
}

.cuenta-login__opciones a,
.cuenta-login__enlace-principal {
    color: var(--acento);
    font-size: 0.84rem;
    font-weight: 750;
}

.cuenta-login__enlace-principal {
    display: grid;
    min-height: 3.7rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.6rem;
    border: 1px solid var(--acento);
    text-align: center;
    text-decoration: none;
}

.cuenta-seguridad__etiqueta {
    margin-bottom: 1rem;
    color: var(--acento);
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cuenta-login button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.cuenta-error,
.cuenta-mensaje {
    padding: 0.8rem 1rem;
    border-left: 2px solid #bc766b;
    background: rgb(188 118 107 / 0.09);
    color: var(--texto-suave);
}

.cuenta-error p,
.cuenta-mensaje {
    margin-top: 0;
    margin-bottom: 0;
}

.cuenta-mensaje {
    border-left-color: var(--exito);
    background: rgb(157 180 131 / 0.09);
}

.biblioteca {
    display: grid;
    width: min(100% - 3rem, 1360px);
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0 4rem;
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 7rem) 0;
}

.biblioteca__principal > header h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(3.8rem, 6vw, 6.5rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.92;
}

.biblioteca__principal > header p {
    color: var(--texto-suave);
    font-size: 1.05rem;
}

.biblioteca__vacia {
    margin-top: 2rem;
    padding: clamp(2.5rem, 6vw, 5rem);
    border: 1px solid var(--linea-fuerte);
}

.biblioteca__vacia h2 {
    margin: 0;
    color: var(--acento);
    font-family: var(--serif);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 500;
    line-height: 1;
}

.biblioteca__vacia p {
    max-width: 520px;
    margin: 1.3rem 0 0;
    color: var(--texto-suave);
}

.biblioteca__grupo {
    margin-top: 2rem;
}

.biblioteca__grupo h2 {
    margin: 0 0 0.55rem;
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 500;
}

.biblioteca__grupo > p,
.biblioteca__grupo article {
    min-height: 4.2rem;
    margin: 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--linea);
    color: var(--texto-suave);
}

.biblioteca__grupo article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.biblioteca__grupo article strong {
    color: var(--texto);
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 500;
}

.biblioteca__grupo article span {
    color: var(--texto-tenue);
    font-size: 0.82rem;
}

.biblioteca__grupo article > div {
    display: grid;
    gap: 0.2rem;
}

.biblioteca__leer {
    display: inline-flex;
    min-height: 2.8rem;
    flex: 0 0 auto;
    align-items: center;
    padding: 0.65rem 1rem;
    border: 1px solid var(--acento);
    background: var(--acento);
    color: #17110b;
    font-size: 0.8rem;
    font-weight: 800;
}

.biblioteca__grupo .biblioteca__producto-recursos {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.biblioteca__producto-recursos > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.biblioteca__producto-recursos ul {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.biblioteca__producto-recursos li {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--linea);
}

.biblioteca__producto-recursos li > div {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.biblioteca__producto-recursos li > div strong {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 750;
}

.biblioteca__producto-recursos li small {
    color: var(--texto-tenue);
    font-size: 0.75rem;
    line-height: 1.45;
}

.biblioteca__recurso {
    display: grid;
    min-width: 9.5rem;
    min-height: 3rem;
    flex: 0 0 auto;
    align-content: center;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--acento);
    color: var(--acento-claro);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.biblioteca__recurso small {
    margin-top: 0.15rem;
    color: var(--texto-tenue);
    font-size: 0.62rem;
    font-weight: 600;
}

.biblioteca__cuenta {
    padding-left: 3rem;
    border-left: 1px solid var(--linea-fuerte);
}

.biblioteca__cuenta h2 {
    margin: 0 0 1rem;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 500;
}

.biblioteca__cuenta h2:not(:first-child) {
    margin-top: 3rem;
}

.biblioteca__cuenta dl {
    margin: 0;
}

.biblioteca__cuenta dl div {
    padding: 1rem 0;
    border-bottom: 1px solid var(--linea);
}

.biblioteca__cuenta dt {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.biblioteca__cuenta dd {
    margin: 0.35rem 0 0;
    overflow-wrap: anywhere;
}

.biblioteca__cuenta dl div:last-child dd,
.biblioteca__cuenta a {
    color: var(--acento);
}

.biblioteca__cuenta p {
    color: var(--texto-suave);
}

.biblioteca__imagen {
    grid-column: 1 / -1;
    height: 230px;
    margin-top: 3rem;
    overflow: hidden;
    border: 1px solid var(--linea);
}

.biblioteca__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 41%;
}

@media (max-width: 960px) {
    .tienda__presentacion {
        grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
        gap: 2.5rem;
    }

    .tienda__imagen,
    .tienda__imagen img,
    .tienda__imagen-vacia {
        min-height: 560px;
    }

    .biblioteca {
        grid-template-columns: 1fr;
    }

    .biblioteca__cuenta {
        margin-top: 3rem;
        padding: 2rem 0 0;
        border-top: 1px solid var(--linea-fuerte);
        border-left: 0;
    }
}

@media (max-width: 700px) {
    .pagina-tienda,
    .pagina-cuenta {
        padding-bottom: 0;
    }

    .tienda {
        width: calc(100% - 2rem);
        padding-top: 7rem;
    }

    .tienda__presentacion {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .tienda__imagen,
    .tienda__imagen img,
    .tienda__imagen-vacia {
        min-height: 480px;
    }

    .tienda__introduccion h1 {
        font-size: clamp(3.1rem, 15vw, 4.8rem);
    }

    .tienda__estado {
        margin-top: 2.5rem;
    }

    .tienda__formatos article {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 1rem;
        padding: 1.4rem 0;
    }

    .tienda__formatos article > strong {
        grid-column: 2;
        min-width: 0;
        padding-left: 0;
        border-left: 0;
    }

    .tienda__acceso {
        padding-right: 0;
        padding-left: 0;
    }

    .cuenta-cabecera {
        width: calc(100% - 2rem);
        min-height: 4.8rem;
    }

    .cuenta-cabecera--privada {
        grid-template-columns: 1fr auto;
    }

    .cuenta-cabecera--privada > a:not(.marca),
    .cuenta-cabecera--privada > strong {
        display: none;
    }

    .cuenta-login {
        width: calc(100% - 2rem);
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 4rem 0;
    }

    .cuenta-login > section h1 {
        font-size: clamp(3.6rem, 17vw, 5.4rem);
    }

    .cuenta-login form {
        padding: 1.5rem;
    }

    .biblioteca {
        width: calc(100% - 2rem);
        padding: 3.5rem 0;
    }

    .biblioteca__principal > header h1 {
        font-size: clamp(3.5rem, 16vw, 5.2rem);
    }

    .biblioteca__vacia {
        padding: 2rem 1.5rem;
    }

    .biblioteca__grupo article {
        display: grid;
    }

    .biblioteca__producto-recursos > header,
    .biblioteca__producto-recursos li {
        align-items: stretch;
        flex-direction: column;
    }

    .biblioteca__recurso {
        width: 100%;
    }

    .biblioteca__imagen {
        height: 180px;
    }
}

/* Fase 5.2 — lector digital protegido */

.pagina-lector {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -10%, rgba(196, 133, 48, 0.11), transparent 34rem),
        #100e0c;
    color: #f3eadc;
}

.lector-cabecera {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 4.5rem;
    padding: 0.7rem clamp(1rem, 3vw, 3rem);
    border-bottom: 1px solid rgba(243, 234, 220, 0.11);
    background: rgba(16, 14, 12, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.lector-cabecera > div {
    display: grid;
    gap: 0.15rem;
    text-align: center;
}

.lector-cabecera > div span,
.lector-cabecera > p,
.lector-volver {
    color: #bdb1a3;
    font-size: 0.78rem;
}

.lector-cabecera > p {
    justify-self: end;
    margin: 0;
}

.lector-volver {
    width: fit-content;
}

.lector {
    width: min(100%, 1040px);
    padding: clamp(1rem, 3vw, 2.25rem);
    margin: 0 auto;
}

.lector-aviso {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: 0.9rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(214, 148, 50, 0.28);
    border-radius: 0.65rem;
    background: rgba(214, 148, 50, 0.065);
    color: #c9bcad;
    font-size: 0.82rem;
}

.lector-aviso strong {
    flex: 0 0 auto;
    color: #e7b45f;
}

.lector-pagina {
    margin: 0 0 clamp(1.5rem, 4vw, 3rem);
}

.lector-pagina__marco {
    display: grid;
    min-height: min(118vw, 68rem);
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(243, 234, 220, 0.1);
    border-radius: 0.35rem;
    background:
        linear-gradient(110deg, #1b1815 25%, #25211c 42%, #1b1815 60%);
    background-size: 200% 100%;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
    color: #8f8377;
    animation: lector-cargando 1.8s ease-in-out infinite;
}

.lector-pagina.esta-lista .lector-pagina__marco {
    min-height: 0;
    animation: none;
}

.lector-pagina img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
}

.lector-pagina figcaption {
    padding-top: 0.55rem;
    color: #83786e;
    font-size: 0.72rem;
    text-align: center;
}

.lector-sin-js {
    position: fixed;
    z-index: 30;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 1rem;
    border: 1px solid #d69432;
    background: #1d1a17;
    color: #f3eadc;
    text-align: center;
}

@keyframes lector-cargando {
    0% { background-position: 160% 0; }
    100% { background-position: -80% 0; }
}

@media (max-width: 680px) {
    .lector-cabecera {
        grid-template-columns: auto 1fr;
        min-height: 4rem;
    }

    .lector-cabecera > p {
        display: none;
    }

    .lector-cabecera > div {
        justify-self: end;
        text-align: right;
    }

    .lector-cabecera > div strong {
        max-width: 13rem;
        overflow: hidden;
        font-size: 0.8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lector {
        padding: 0.75rem;
    }

    .lector-aviso {
        display: grid;
    }

    .lector-pagina__marco {
        min-height: 126vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lector-pagina__marco {
        animation: none;
    }
}