/* ================================================================
   DETALLES.CSS — Constructora Almonacid
   Estilos para páginas de detalle (detalle-obra-X / detalle-proyecto-X).
   Requiere style.css cargado primero (depende de sus variables).
   ================================================================

   ÍNDICE
   0. Header compacto (título + badge, sin imagen de fondo)
   1. Portada con imagen (mantenida para otros usos futuros)
   2. Barra de specs técnicos (versión standalone)
   3. Galería de imágenes asimétrica (mantenida para otros usos)
   4. Descripción y características
   5. CTA inferior
   6. Visor de imágenes con navegación manual
   ================================================================ */


/* ----------------------------------------------------------------
   0. HEADER COMPACTO
   Reemplaza a la portada cuando se quiere mostrar el visor
   de imágenes al tope, sin imagen de fondo.
   Fondo oscuro con padding para la navbar fija.
   ---------------------------------------------------------------- */
.detalle-header {
    background-color: var(--color-fondo);
    padding-top: calc(var(--navbar-h) + 1.25rem);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-borde);
}

/* Contenedor interno: back link arriba, título + badge abajo */
.detalle-header-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* H1 — en Bebas Neue, tamaño grande pero sin ocupar toda la pantalla */
.detalle-header-titulo {
    font-family: var(--fuente-titulo);
    font-size: 2.8rem;
    line-height: 0.95;
    color: var(--color-texto);
    letter-spacing: 0.025em;
    margin: 0;
}

@media (min-width: 992px) {
    .detalle-header {
        padding-top: calc(var(--navbar-h-desk) + 1.5rem);
        padding-bottom: 2rem;
    }

    .detalle-header-titulo {
        font-size: 4rem;
    }
}


/* ----------------------------------------------------------------
   1. PORTADA CON IMAGEN (mantenida para otros usos)
   ---------------------------------------------------------------- */
.detalle-portada {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 300px;
    overflow: hidden;
    background-color: var(--color-fondo);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.detalle-portada-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.detalle-portada-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.1)  40%,
        rgba(10, 10, 10, 0.88) 100%
    );
    z-index: 1;
}

.detalle-portada-top {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--navbar-h) + 1rem);
}

.detalle-portada-bottom {
    position: relative;
    z-index: 2;
    padding-bottom: 1.5rem;
}

.detalle-portada-eyebrow {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.3rem;
}

.detalle-portada-titulo {
    font-family: var(--fuente-titulo);
    font-size: 2.8rem;
    line-height: 0.92;
    color: #ffffff;
    letter-spacing: 0.025em;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .detalle-portada-titulo { font-size: 4.5rem; }
}

@media (min-width: 992px) {
    .detalle-portada         { height: 65vh; }
    .detalle-portada-top     { padding-top: calc(var(--navbar-h-desk) + 1.25rem); }
    .detalle-portada-bottom  { padding-bottom: 2.5rem; }
    .detalle-portada-titulo  { font-size: 6.5rem; }
}


/* ── Badge de estado — compartido entre portada y header compacto ── */
.detalle-portada-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--fuente-cuerpo);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    padding: 0.22rem 0.8rem;
}

.detalle-portada-estado i {
    font-size: 0.8rem;
}

/* En el header compacto el badge va sin óvalo — solo texto con ícono */
.detalle-header .detalle-portada-estado {
    border: none;
    border-radius: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.55);
}


/* ── Back link — compartido entre portada y header compacto ── */
.detalle-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--fuente-cuerpo);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--trans-rapida);
}

.detalle-back:hover,
.detalle-back:focus {
    color: #ffffff;
    outline: none;
}

.detalle-back i {
    font-size: 0.85rem;
}


/* ----------------------------------------------------------------
   2. BARRA DE SPECS — versión standalone (entre portada y main)
   ---------------------------------------------------------------- */
.detalle-specs {
    background-color: var(--color-seccion);
    border-bottom: 1px solid var(--color-borde);
    padding: 1.5rem 0;
}

.detalle-specs-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 0;
}

.detalle-spec-item {
    padding: 0 1.25rem;
    border-right: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Mobile 2 col: sin borde en el segundo de cada fila */
.detalle-spec-item:nth-child(even) {
    border-right: none;
}

.detalle-spec-label {
    font-family: var(--fuente-cuerpo);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-eyebrow);
}

.detalle-spec-valor {
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--color-texto);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.detalle-spec-valor i {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 992px) {
    .detalle-specs-inner {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .detalle-spec-item:nth-child(even) {
        border-right: 1px solid var(--color-borde);
    }

    .detalle-spec-item:last-child {
        border-right: none;
    }
}


/* ----------------------------------------------------------------
   3. GALERÍA ASIMÉTRICA (mantenida para otros usos)
   ---------------------------------------------------------------- */
.detalle-galeria {
    padding: var(--padding-sec-y) 0;
    background-color: var(--color-fondo);
}

.detalle-galeria-titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.4rem;
    color: var(--color-texto);
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

.galeria-img-wrapper {
    overflow: hidden;
    border-radius: var(--radio-card);
    border: 1px solid var(--color-borde);
    background-color: var(--color-seccion);
    height: 240px;
}

.galeria-img-wrapper.galeria-destacada {
    height: 280px;
}

.galeria-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--trans-suave);
}

.galeria-img-wrapper:hover img {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .galeria-img-wrapper            { height: 260px; }
    .galeria-img-wrapper.galeria-destacada { height: 100%; min-height: 320px; }
}

@media (min-width: 992px) {
    .galeria-img-wrapper { height: 220px; }
}


/* ----------------------------------------------------------------
   4. DESCRIPCIÓN Y CARACTERÍSTICAS
   ---------------------------------------------------------------- */
.detalle-descripcion {
    padding: var(--padding-sec-y) 0;
    background-color: var(--color-seccion);
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
}

.detalle-descripcion-label {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-eyebrow);
    margin-bottom: 0.5rem;
}

.detalle-descripcion-titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.6rem;
    color: var(--color-texto);
    letter-spacing: 0.03em;
    line-height: 1.05;
    margin-bottom: 1rem;
}

.detalle-descripcion-texto {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-cuerpo);
    font-weight: 300;
    color: var(--color-texto-suave);
    line-height: 1.75;
    margin-bottom: 0;
}

.detalle-caracteristicas-titulo {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-eyebrow);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.detalle-caracteristicas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.detalle-caracteristicas li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-datos);
    color: var(--color-texto-suave);
    line-height: 1.5;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-borde-suave);
}

.detalle-caracteristicas li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detalle-caracteristicas li i {
    color: #ffffff;
    font-size: 0.9rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .detalle-caracteristicas-titulo { margin-top: 0; }
    .detalle-descripcion-titulo     { font-size: 2rem; }
}


/* ----------------------------------------------------------------
   5. CTA INFERIOR
   ---------------------------------------------------------------- */
.cta-interior {
    padding: var(--padding-sec-y) 0;
    background-color: var(--color-fondo);
    border-top: 1px solid var(--color-borde);
}

.cta-interior-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
}

.cta-interior-titulo {
    font-family: var(--fuente-titulo);
    font-size: 2.5rem;
    color: var(--color-texto);
    letter-spacing: 0.03em;
    line-height: 0.95;
    margin-bottom: 0.6rem;
}

.cta-interior-desc {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-subtitulo);
    font-weight: 300;
    color: var(--color-texto-suave);
    line-height: 1.65;
    max-width: 380px;
    margin-bottom: 0;
}

.cta-interior-texto { flex: 1; }

.cta-interior .btn-ca {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .cta-interior-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
    }
}

@media (min-width: 992px) {
    .cta-interior-titulo { font-size: 3.5rem; }
}


/* ----------------------------------------------------------------
   6. VISOR DE IMÁGENES CON NAVEGACIÓN MANUAL
   - Mobile: ancho completo, alto máximo = pantalla (100svh).
   - Desktop: alto máximo 80vh.
   - touch-action: pan-y pinch-zoom →
       swipe de 1 dedo: manejado por JS (cambia imagen).
       zoom de 2 dedos: nativo del navegador (no se bloquea).
   ---------------------------------------------------------------- */
.detalle-visor {
    padding: var(--padding-sec-y) 0;
    background-color: var(--color-fondo);
}

/* Imagen principal */
.detalle-visor-wrap {
    position: relative;
    background-color: #000;
    border-radius: var(--radio-card);
    overflow: hidden;
    line-height: 0;
    touch-action: pan-y pinch-zoom;
}

.detalle-visor-img {
    width: 100%;
    height: auto;
    max-height: 100svh;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Botones prev / next */
.detalle-visor-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    transition: background var(--trans-rapida), border-color var(--trans-rapida);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.detalle-visor-btn:hover,
.detalle-visor-btn:focus {
    background: rgba(0, 0, 0, 0.78);
    border-color: rgba(255, 255, 255, 0.55);
    outline: none;
}

.detalle-visor-btn--prev { left:  0.75rem; }
.detalle-visor-btn--next { right: 0.75rem; }

/* Contador "1 / 4" */
.detalle-visor-counter {
    position: absolute;
    bottom: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--fuente-cuerpo);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.2rem 0.7rem;
    border-radius: 50px;
    pointer-events: none;
    white-space: nowrap;
}

/* Miniaturas */
.detalle-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.detalle-thumbs::-webkit-scrollbar { display: none; }

.detalle-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.4;
    transition: border-color var(--trans-rapida), opacity var(--trans-rapida);
}

.detalle-thumb.activa,
.detalle-thumb:hover,
.detalle-thumb:focus {
    border-color: #ffffff;
    opacity: 1;
    outline: none;
}

.detalle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Specs debajo de las miniaturas — reutiliza .detalle-specs-inner y .detalle-spec-item */
.detalle-specs-bajo {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-borde);
}

/* ── Responsive visor ── */
@media (min-width: 768px) {
    .detalle-thumb {
        width: 88px;
        height: 62px;
    }
}

@media (min-width: 992px) {
    .detalle-visor-img {
        max-height: 80vh;
    }

    .detalle-visor-btn {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .detalle-visor-btn--prev { left:  1rem; }
    .detalle-visor-btn--next { right: 1rem; }

    .detalle-thumb {
        width: 96px;
        height: 68px;
    }
}