/* tourism.css */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0d0d0d;
    font-family:'Inter', sans-serif;
    color:#f5f1eb;
}

/* =========================
   SECCIÓN CULTURAL
========================= */

.cultura-section{
    position:relative;
    width:100%;
    padding:120px 7%;
    background:
    linear-gradient(
        to bottom,
        #0b0b0b 0%,
        #121212 35%,
        #0b0b0b 100%
    );
    overflow:hidden;
}

/* Luces elegantes */

.cultura-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top left,
    rgba(201,164,92,0.08),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(201,164,92,0.05),
    transparent 45%);
    pointer-events:none;
}

/* Línea superior */

.cultura-top-line{
    width:120px;
    height:1px;
    background:#c9a45c;
    margin-bottom:35px;
    opacity:0.8;
}

/* Header */

.cultura-header{
    max-width:900px;
    margin-bottom:90px;
}

.cultura-subtitle{
    font-size:12px;
    letter-spacing:6px;
    text-transform:uppercase;
    color:#c9a45c;
    margin-bottom:25px;
    font-weight:400;
}

.cultura-title{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(3rem,6vw,6rem);
    font-weight:500;
    line-height:1;
    margin-bottom:30px;
    color:#f8f5f0;
}

.cultura-description{
    font-size:1rem;
    line-height:1.9;
    color:rgba(255,255,255,0.68);
    max-width:700px;
    font-weight:300;
}

/* Grid */

.cultura-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:28px;
}

/* Cards */

.cultura-card{
    position:relative;
    overflow:hidden;
    min-height:650px;
    background:#111;
    border-radius:28px;
    cursor:pointer;
    isolation:isolate;
    text-decoration:none;
    color:inherit;
    display:block;
    transition:
    transform .5s ease,
    box-shadow .5s ease;
}

.cultura-card.large{
    grid-column:span 7;
}

.cultura-card.small{
    grid-column:span 5;
}

/* Hover */

.cultura-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 30px 80px rgba(0,0,0,0.45);
}

.cultura-card:hover .cultura-image{
    transform:scale(1.08);
}

/* Imagen */

.cultura-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1.4s ease;
    filter:brightness(0.82);
}

/* Overlay */

.cultura-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.18) 45%,
        rgba(0,0,0,0.12) 100%
    );
    z-index:1;
}

/* Contenido */

.cultura-content{
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    padding:50px;
    width:100%;
}

.cultura-location{
    font-size:11px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#d5b172;
    margin-bottom:18px;
}

.cultura-place{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(2.2rem,4vw,4rem);
    font-weight:500;
    line-height:1;
    margin-bottom:20px;
    color:#fff;
}

.cultura-text{
    font-size:0.95rem;
    line-height:1.8;
    color:rgba(255,255,255,0.72);
    max-width:520px;
    font-weight:300;
}

/* Detalle elegante */

.cultura-detail{
    position:absolute;
    top:35px;
    right:35px;
    width:70px;
    height:70px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
    backdrop-filter:blur(10px);
}

.cultura-detail span{
    color:#e0c183;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* Línea inferior */

.cultura-bottom-line{
    width:100%;
    height:1px;
    background:
    linear-gradient(
        to right,
        transparent,
        rgba(201,164,92,0.6),
        transparent
    );
    margin-top:90px;
}

/* Responsive */

@media(max-width:1100px){

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

    .cultura-card.large,
    .cultura-card.small{
        grid-column:span 1;
    }

}

@media(max-width:768px){

    .cultura-section{
        padding:90px 6%;
    }

    .cultura-content{
        padding:35px;
    }

    .cultura-card{
        min-height:540px;
    }

    .cultura-detail{
        width:58px;
        height:58px;
        top:25px;
        right:25px;
    }

}