/* CSS de la pagina galery (Galeria) */

/* =========================================================
       GALERÍA — estilos locales
    ========================================================= */
    :root {
        --c-teal:      #348e83;
        --c-teal-dark: #276561;
        --c-blush:     #f9ebe0;
        --c-peach:     #f4c6a8;
        --c-sage:      #a8c5a0;
        --c-cream:     #fdf6f0;
        --c-warm:      #8a7f78;
        --c-dark:      #3d2c28;
    }

    body { font-family: 'Nunito', sans-serif; }
    h1,h2,h3 { font-family: 'Lora', Georgia, serif; }

    /* ── HERO ── */
    .galeria-hero {
        background: linear-gradient(135deg, #f9ebe0 0%, #eaf4f0 100%);
        padding: 100px 0 70px;
        position: relative;
        overflow: hidden;
    }
    .galeria-hero::before {
        content:''; position:absolute;
        top:-80px; right:-80px;
        width:300px; height:300px;
        border-radius:50%;
        background:rgba(52,142,131,.08);
    }
    .galeria-hero::after {
        content:''; position:absolute;
        bottom:-60px; left:-60px;
        width:200px; height:200px;
        border-radius:50%;
        background:rgba(249,235,224,.6);
    }
    .galeria-hero h1 {
        color: var(--c-dark);
        font-size: 3rem;
        letter-spacing: -1px;
        line-height: 1.2;
    }
    .galeria-hero p { color: var(--c-warm); font-size: 1.05rem; }

    .section-label {
        background: var(--c-blush);
        border-radius: 50px;
        color: var(--c-teal);
        display: inline-block;
        font-family: 'Nunito', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.5px;
        padding: 6px 18px;
        text-transform: uppercase;
    }

    /* ── NAVEGACIÓN DE ÁLBUMES ── */
    .albums-nav-section { background: #fff; }

    .album-nav-card {
        background: var(--c-cream);
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        transition: transform .35s ease, box-shadow .35s ease;
        border: 2px solid transparent;
        position: relative;
    }
    .album-nav-card:hover,
    .album-nav-card.activo {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(52,142,131,.18);
        border-color: var(--c-teal);
    }
    .album-nav-card.activo::after {
        content: '✓ Viendo';
        position: absolute;
        top: 10px; right: 10px;
        background: var(--c-teal);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 50px;
        font-family: 'Nunito', sans-serif;
    }
    .album-thumb-wrap {
        height: 160px;
        overflow: hidden;
        position: relative;
        background: #ede5de;
    }
    .album-thumb-wrap img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }
    .album-nav-card:hover .album-thumb-wrap img { transform: scale(1.06); }
    .album-thumb-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(to bottom, transparent 40%, rgba(52,142,131,.55));
        display: flex; align-items: flex-end; padding: 12px;
    }
    .album-thumb-count {
        background: rgba(255,255,255,.9);
        border-radius: 50px;
        color: var(--c-teal);
        font-size: 12px;
        font-weight: 700;
        padding: 3px 12px;
        font-family: 'Nunito', sans-serif;
    }
    .album-thumb-placeholder {
        width:100%; height:100%;
        display:flex; align-items:center; justify-content:center;
        font-size:2.5rem; color:#c8bfb9;
    }
    .album-nav-info {
        padding: 14px 16px;
    }
    .album-nav-info h6 {
        font-family: 'Lora', Georgia, serif;
        color: var(--c-dark);
        font-size: .95rem;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Opción "Todas" */
    .album-nav-card.todas-card .album-thumb-wrap {
        background: linear-gradient(135deg, var(--c-blush), #d4eee9);
    }

    /* ── CONTENIDO GALERÍA ── */
    .galeria-content-section { background: var(--c-cream); }

    /* Breadcrumb dentro de la galería */
    .galeria-breadcrumb {
        display: flex; align-items: center; gap: 8px;
        font-size: .9rem; color: var(--c-warm);
        margin-bottom: 28px;
        font-family: 'Nunito', sans-serif;
    }
    .galeria-breadcrumb a {
        color: var(--c-teal); text-decoration: none; font-weight: 700;
    }
    .galeria-breadcrumb a:hover { text-decoration: underline; }
    .galeria-breadcrumb .sep { color: #c8bfb9; }

    /* Grid de imágenes */
    .galeria-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
    }
    @media (max-width: 576px) {
        .galeria-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    }

    .galeria-item {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 12px;
        cursor: pointer;
        position: relative;
        background: #ede5de;
        transition: transform .3s ease, box-shadow .3s ease;
    }
    .galeria-item:hover {
        transform: scale(1.03);
        box-shadow: 0 12px 32px rgba(52,142,131,.22);
        z-index: 2;
    }
    .galeria-item img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
    }
    .galeria-item:hover img { transform: scale(1.06); }
    .galeria-item-overlay {
        position: absolute; inset: 0;
        background: rgba(52,142,131,0);
        display: flex; align-items: center; justify-content: center;
        transition: background .3s ease;
    }
    .galeria-item:hover .galeria-item-overlay {
        background: rgba(52,142,131,.35);
    }
    .galeria-item-overlay i {
        color: #fff;
        font-size: 2rem;
        opacity: 0;
        transform: scale(.7);
        transition: opacity .3s, transform .3s;
    }
    .galeria-item:hover .galeria-item-overlay i {
        opacity: 1; transform: scale(1);
    }

    /* Skeleton loader */
    .galeria-skeleton {
        aspect-ratio: 1/1;
        border-radius: 12px;
        background: linear-gradient(90deg, #ede5de 25%, #f9ebe0 50%, #ede5de 75%);
        background-size: 200% 100%;
        animation: shimmer 1.4s infinite;
    }
    @keyframes shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Estado vacío / error */
    .galeria-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--c-warm);
    }
    .galeria-empty i { font-size: 3rem; color: #c8bfb9; margin-bottom: 16px; display: block; }

    /* ── LIGHTBOX ── */
    .lightbox-overlay {
        position: fixed; inset: 0; z-index: 9999;
        background: rgba(30,20,18,.96);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        opacity: 0; visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .lightbox-overlay.open { opacity: 1; visibility: visible; }

    .lightbox-img-wrap {
        position: relative;
        max-width: 92vw;
        max-height: 80vh;
        display: flex; align-items: center; justify-content: center;
    }
    .lightbox-img-wrap img {
        max-width: 92vw;
        max-height: 80vh;
        border-radius: 10px;
        box-shadow: 0 24px 80px rgba(0,0,0,.6);
        transition: opacity .25s ease;
        object-fit: contain;
    }
    .lightbox-img-wrap img.loading { opacity: 0; }

    .lightbox-btn {
        position: fixed;
        top: 50%; transform: translateY(-50%);
        background: rgba(255,255,255,.12);
        border: none; color: #fff;
        width: 52px; height: 52px;
        border-radius: 50%;
        font-size: 1.4rem;
        cursor: pointer;
        transition: background .25s, transform .25s;
        display: flex; align-items: center; justify-content: center;
        z-index: 10001;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    .lightbox-btn:hover { background: rgba(52,142,131,.55); transform: translateY(-50%) scale(1.08); }
    .lightbox-prev { left: 16px; }
    .lightbox-next { right: 16px; }

    .lightbox-close {
        position: fixed; top: 18px; right: 18px;
        background: rgba(255,255,255,.12);
        border: none; color: #fff;
        width: 44px; height: 44px;
        border-radius: 50%;
        font-size: 1.3rem;
        cursor: pointer;
        transition: background .25s;
        display: flex; align-items: center; justify-content: center;
        z-index: 10001;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    .lightbox-close:hover { background: rgba(200,80,80,.6); }

    .lightbox-info {
        margin-top: 18px;
        text-align: center;
        color: rgba(255,255,255,.75);
        font-family: 'Nunito', sans-serif;
        font-size: .9rem;
    }
    .lightbox-info strong { color: #fff; }
    .lightbox-counter {
        display: inline-block;
        background: rgba(255,255,255,.12);
        border-radius: 50px;
        padding: 4px 14px;
        font-size: .8rem;
        margin-top: 6px;
    }

    /* ── TESTIMONIOS ── */
    .testimonio-card {
        background: #fff;
        border-radius: 18px;
        padding: 32px 28px;
        position: relative;
        height: 100%;
        transition: transform .35s, box-shadow .35s;
    }
    .testimonio-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 36px rgba(52,142,131,.13);
    }
    .testimonio-quote {
        font-size: 4rem;
        color: var(--c-blush);
        line-height: .7;
        font-family: 'Lora', Georgia, serif;
        margin-bottom: 12px;
    }
    .testimonio-texto {
        color: var(--c-dark);
        font-size: .95rem;
        line-height: 1.75;
        font-style: italic;
        margin-bottom: 20px;
    }
    .testimonio-autor {
        display: flex; align-items: center; gap: 14px;
    }
    .testimonio-avatar {
        width: 48px; height: 48px; border-radius: 50%;
        background: linear-gradient(135deg, var(--c-blush), var(--c-peach));
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem; color: var(--c-teal); flex-shrink: 0;
    }
    .testimonio-nombre {
        font-weight: 700; font-size: .9rem; color: var(--c-dark); margin: 0;
    }
    .testimonio-rol {
        font-size: .8rem; color: var(--c-warm); margin: 0;
    }
    .testimonio-estrellas { color: #f4c430; font-size: .85rem; margin-bottom: 4px; }

    /* ── CTA FINAL ── */
    .galeria-cta {
        background: linear-gradient(135deg, var(--c-teal), var(--c-teal-dark));
        padding: 80px 0;
        text-align: center;
    }
    .galeria-cta h2 { color: #fff; font-size: 2rem; margin-bottom: 12px; }
    .galeria-cta p  { color: rgba(255,255,255,.8); margin-bottom: 28px; }

    /* ── ANIMACIONES ── */
    .fade-in-up   { opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease; }
    .fade-in-left { opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease; }
    .fade-in-right{ opacity:0; transform:translateX(40px);  transition:opacity .7s ease, transform .7s ease; }
    .fade-in-up.visible,.fade-in-left.visible,.fade-in-right.visible { opacity:1; transform:translate(0,0); }
    .delay-1{transition-delay:.1s} .delay-2{transition-delay:.25s}
    .delay-3{transition-delay:.40s} .delay-4{transition-delay:.55s}

    /* ── RESPONSIVE ── */
    @media(max-width:991px){ .galeria-hero h1{font-size:2.2rem;} }
    @media(max-width:576px){
        .galeria-hero{padding:70px 0 50px;}
        .galeria-hero h1{font-size:1.8rem;}
        .lightbox-btn{width:40px;height:40px;font-size:1.1rem;}
        .lightbox-prev{left:6px;} .lightbox-next{right:6px;}
    }