/* ==========================================================================
   Amenidades - Carrusel
   ========================================================================== */
:root{
    --primary:#0044a5;
    --background:#F2F2F2;
    --card:#ffffff;
    --border:#ececec;
    --text:#6b7280;

    --shadow-sm:0 2px 8px rgba(0,0,0,.06);
    --shadow-lg:0 12px 30px rgba(0,0,0,.12);

    --radius:16px;
    --gap:1.5rem;
}

/* ==========================================================================
   Sección
   ========================================================================== */

.amenities-section{
    background:var(--background);
    padding:5rem 0;
}

.amenities-container{
    width:min(1280px,calc(100% - 2rem));
    margin:auto;
}

@media(min-width:640px){

.amenities-container{
    width:min(1280px,calc(100% - 3rem));
}

}

/* ==========================================================================
   Encabezado
   ========================================================================== */

.amenities-header{
    text-align:center;
    margin-bottom:4rem;
}

.amenities-subtitle{
    display:block;
    margin-bottom:.5rem;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.75rem;
    font-weight:600;
}

.amenities-title{
    margin:0;
    font-size:2rem;
}

@media(min-width:768px){

.amenities-title{
    font-size:2.5rem;
}

}

.amenities-divider{
    width:60px;
    height:2px;
    background:var(--primary);
    margin:1rem auto 0;
}

/* ==========================================================================
   Wrapper
   ========================================================================== */

.carousel-wrapper{
    position:relative;
    display:flex;
    align-items:center;
}

@media(min-width:768px){

.carousel-wrapper{
    padding-inline:4.5rem;
}

}

/* ==========================================================================
   Botones
   ========================================================================== */

.carousel-btn{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:52px;
    height:52px;

    border:none;
    border-radius:50%;

    background:#fff;
    color:var(--primary);

    display:none;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    box-shadow:var(--shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;

    z-index:20;
}

@media(min-width:768px){

.carousel-btn{
    display:flex;
}

}

.carousel-btn-prev{
    left:0;
}

.carousel-btn-next{
    right:0;
}

.carousel-btn:hover{

    transform:
        translateY(-50%)
        scale(1.06);

    box-shadow:var(--shadow-lg);
}

.carousel-btn:active{

    transform:
        translateY(-50%)
        scale(.94);

}

.carousel-btn:focus-visible{

    outline:3px solid var(--primary);
    outline-offset:4px;

}

.carousel-icon{

    width:24px;
    height:24px;

}

/* ==========================================================================
   Carrusel
   ========================================================================== */

.carousel-container{

    display:flex;
    align-items:stretch;

    gap:var(--gap);

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;

    scroll-padding-inline:1rem;

    padding:1rem;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
    -ms-overflow-style:none;

}

.carousel-container::-webkit-scrollbar{

    display:none;

}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.carousel-item{

    flex:0 0 88%;

    scroll-snap-align:center;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    display:flex;
    flex-direction:column;

    box-shadow:var(--shadow-sm);

    cursor:pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

@media(min-width:640px){

.carousel-item{

    flex:0 0 calc((100% - var(--gap))/2);

}

}

@media(min-width:1024px){

.carousel-item{

    flex:0 0 calc((100% - (var(--gap) * 2))/3);

}

}

.carousel-item:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

/* ==========================================================================
   Imagen
   ========================================================================== */

.carousel-img-wrapper{

    position:relative;

    width:100%;

    aspect-ratio:16/10;

    overflow:hidden;

}

.carousel-img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.main-img{

    opacity:1;

}

.hover-img{

    opacity:0;

}

.carousel-item:hover .main-img{

    opacity:0;

    transform:scale(1.08);

}

.carousel-item:hover .hover-img{

    opacity:1;

    transform:scale(1.08);

}

/* ==========================================================================
   Contenido
   ========================================================================== */

.carousel-content{

    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;

    text-align:center;

    padding:2rem;

}

.carousel-icon-star{

    font-size:1.5rem;
    color:var(--primary);

    margin-bottom:.75rem;

}

.carousel-item-title{

    margin:0 0 .75rem;

    font-size:1.35rem;

    font-weight:600;

}

.carousel-item-desc{

    margin:0;

    color:var(--text);

    line-height:1.7;

    font-size:.95rem;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    overflow:hidden;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:767px){

.carousel-wrapper{
    padding-inline:0;
}

.carousel-content{
    padding:1.5rem;
}

.carousel-item-title{
    font-size:1.2rem;
}
}
/* ==========================================================================
   Sección Áreas Comunes
   ========================================================================== */

.common-areas-section {
    background-color: #ffffff;
    overflow: hidden;
    padding-bottom: 6rem; /* pb-24 */
}

/* Encabezado */
.common-header-container {
    max-width: 80rem; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 6rem; /* pt-24 */
    padding-bottom: 3rem; /* pb-12 */
}

@media (min-width: 640px) { /* sm */
    .common-header-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.common-header-text {
    text-align: center;
}

.common-subtitle {
    color: #0044a5;
    font-size: 0.75rem; /* text-xs */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
}

.common-title {
    font-size: 1.875rem; /* text-3xl */
    color: #111827; /* text-gray-900 */
    margin: 0;
}

@media (min-width: 768px) { /* md */
    .common-title {
        font-size: 2.25rem; /* text-4xl */
    }
}

.common-divider {
    width: 3rem; /* w-12 */
    height: 1px;
    background-color: #0044a5;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

.common-desc {
    margin-top: 1.5rem;
    color: #6b7280; /* text-gray-500 */
    font-weight: 300;
    max-width: 42rem; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    font-size: 0.875rem; /* text-sm */
}

@media (min-width: 768px) {
    .common-desc {
        font-size: 1rem; /* md:text-base */
    }
}

/* Envoltura del Carrusel */
.common-carousel-wrapper {
    max-width: 64rem; /* max-w-5xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
}

@media (min-width: 640px) { /* sm */
    .common-carousel-wrapper {
        padding-left: 3rem; /* sm:px-12 */
        padding-right: 3rem;
    }
}

@media (min-width: 768px) { /* md */
    .common-carousel-wrapper {
        padding-left: 4rem; /* md:px-16 */
        padding-right: 4rem;
    }
}

/* Botones del Carrusel */
.common-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: #0044a5;
    padding: 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: none; /* hidden en móvil */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

@media (min-width: 640px) {
    .common-btn {
        display: flex; /* sm:flex */
    }
}

.common-btn-prev { left: 0; }
.common-btn-next { right: 0; }

.common-btn:hover {
    background-color: #f9fafb;
    transform: translateY(-50%) scale(1.05);
}

.common-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.common-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Máscara (El contenedor negro redondeado) */
.common-carousel-mask {
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    background-color: #111827; /* bg-gray-900 */
}

/* Pista del carrusel */
.common-carousel-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    
    /* Ocultar barra de desplazamiento */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.common-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Slide individual */
.common-slide {
    min-width: 100%;
    width: 100%;
    flex: none;
    scroll-snap-align: center; /* snap-center */
    position: relative;
    height: 400px;
}

@media (min-width: 768px) {
    .common-slide {
        height: 500px;
    }
}

/* Imagen de fondo */
.common-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay Degradado (from-black/80 via-black/20 to-transparent) */
.common-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    pointer-events: none;
}

/* Contenido / Texto sobre la imagen */
.common-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem; /* p-8 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

@media (min-width: 768px) {
    .common-content {
        padding: 2.5rem; /* md:p-10 */
    }
}

.common-slide-title {
    color: #ffffff;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 300; /* font-light */
    letter-spacing: 0.025em; /* tracking-wide */
    text-align: center;
    margin: 0;
}

@media (min-width: 768px) {
    .common-slide-title {
        font-size: 2.25rem; /* md:text-4xl */
    }
}