/*=============================
   ARENA LIBRE — CABAÑAS
   Estilo: tropical elegante
   (arena · mar profundo · turquesa · dorado)
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Outfit:wght@400;500;600;700&display=swap');

:root{

    --arena-50:#FDFAF4;
    --arena-100:#FBF5E9;
    --arena-200:#F1E3C6;
    --arena-300:#E4CDA0;

    --mar-900:#0D3B4A;
    --mar-700:#125067;
    --mar-600:#166B84;

    --turquesa-500:#1FA6A0;
    --turquesa-400:#3FBFB4;
    --turquesa-100:#DEF3EF;

    --dorado-500:#C9A24B;
    --dorado-300:#E3C783;

    --texto-900:#17282C;
    --texto-600:#4C6066;

}

.cabanas{

    width:90%;
    margin:auto;
    padding:80px 0;
    font-family:'Outfit',sans-serif;

}

/* ---------- TÍTULO ---------- */

.titulo{

    text-align:center;
    margin-bottom:50px;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;

}

.titulo h2{

    font-family:'Fraunces',serif;
    font-size:44px;
    line-height:1.25;
    color:var(--dorado-300);
    letter-spacing:.3px;
    font-weight:600;
    text-shadow:0 4px 18px rgba(0,0,0,.55);

}

.titulo p{

    color:var(--arena-100);
    font-size:17px;
    line-height:1.6;
    margin-top:14px;
    text-shadow:0 2px 10px rgba(0,0,0,.5);

}

/* ---------- GRID Y TARJETAS ---------- */

.grid-cabanas{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:stretch;
    gap:35px;

}

@media(max-width:980px){

    .grid-cabanas{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:640px){

    .grid-cabanas{

        grid-template-columns:1fr;

    }

}

.card{

    background:var(--arena-50);
    border:1px solid var(--arena-200);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 40px -12px rgba(13,59,74,.22);
    transition:.4s;
    display:flex;
    flex-direction:column;
    height:100%;

}

.card:hover{

    transform:translateY(-10px);
    box-shadow:0 26px 50px -14px rgba(13,59,74,.32);
    border-color:var(--turquesa-400);

}

/* ---------- MARCO DE IMAGEN CON FONDO DESENFOCADO ---------- */
/* Cada foto se ve COMPLETA (nunca se recorta), y el espacio sobrante
   (cuando la foto es vertical u horizontal distinta al marco) se rellena
   con la misma foto ampliada y desenfocada de fondo, en vez de una franja
   vacía o un color plano. El HTML trae la imagen dos veces: una en el
   background-image del .img-frame (para el blur) y otra normal en <img>
   (para verse completa y nítida encima). */

.card .img-frame{

    position:relative;
    width:100%;
    height:260px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    flex-shrink:0;

}

.card .img-frame::before{

    content:"";
    position:absolute;
    inset:0;
    background-image:inherit;
    background-size:cover;
    background-position:center;
    filter:blur(22px) brightness(.65) saturate(1.15);
    transform:scale(1.2);

}

.card .img-frame img,
.card .img-frame video{

    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    transition:.5s;

}

/* Videos: ahora reciben el MISMO tratamiento que las fotos. El HTML/JS
   duplica el video: uno de fondo (.video-bg, desenfocado y ampliado) y
   otro normal encima (nítido, con controles, completo gracias a
   object-fit:contain que ya heredan de la regla ".card .img-frame video").
   El degradado queda como respaldo mientras el video de fondo carga o si
   el navegador no llega a pintarlo. */
.card .img-frame.video-frame{

    background:linear-gradient(160deg,var(--mar-900),var(--mar-700) 60%,var(--turquesa-500) 130%);

}

.card .img-frame.video-frame .video-bg{

    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:blur(22px) brightness(.65) saturate(1.15);
    transform:scale(1.2);
    pointer-events:none;

}

/* ---------- CARRUSEL / FLECHAS ---------- */

/* El .img-frame es el punto de referencia para las flechas, para que
   queden centradas sobre la FOTO y no sobre toda la tarjeta (incluyendo
   el bloque de texto de abajo). */
.card .carousel-item,
.card .carousel-inner,
.card .carousel{

    position:relative;
    overflow:hidden;

}

.card .carousel-control-prev,
.card .carousel-control-next{

    position:absolute;
    top:0;
    bottom:auto;
    height:260px;
    width:15%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
    z-index:2;

}

.card .carousel-control-prev-icon,
.card .carousel-control-next-icon{

    width:34px;
    height:34px;
    background-color:rgba(13,59,74,.55);
    border-radius:50%;
    background-size:55%;
    background-repeat:no-repeat;
    background-position:center;
    transition:.3s;

}

.card .carousel-control-prev-icon:hover,
.card .carousel-control-next-icon:hover{

    background-color:var(--turquesa-500);

}

/* Ya no se aplica zoom a la foto al pasar el mouse: con object-fit:contain
   agrandarla la sacaría del marco y taparía las flechas. El efecto hover
   de la tarjeta (elevación + sombra) es suficiente. */

/* ---------- CONTENIDO ---------- */

.contenido{

    padding:26px 25px 28px;
    display:flex;
    flex-direction:column;
    flex:1;

}

.contenido h3{

    font-family:'Fraunces',serif;
    color:var(--mar-900);
    font-size:26px;
    font-weight:600;

}

.precio{

    display:inline-block;
    margin:15px 0;
    color:var(--mar-900);
    background:linear-gradient(100deg,var(--dorado-300),var(--dorado-500) 120%);
    font-size:23px;
    font-weight:700;
    padding:6px 18px;
    border-radius:30px;

}

.precio small{

    font-size:13px;
    font-weight:600;
    color:var(--mar-900);
    opacity:.75;

}

.contenido p{

    color:var(--texto-600);
    line-height:1.8;
    margin-bottom:25px;
    flex:1;

}

.contenido button{

    width:100%;
    padding:15px;
    border:none;
    border-radius:13px;
    background:linear-gradient(100deg,var(--turquesa-500),var(--mar-700) 130%);
    color:#fff;
    font-family:'Outfit',sans-serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:.2px;
    cursor:pointer;
    box-shadow:0 12px 26px -6px rgba(18,80,103,.5);
    transition:.4s;
    margin-top:auto;

}

.contenido button:hover{

    transform:scale(1.03);
    background:linear-gradient(100deg,var(--turquesa-400),var(--mar-900) 130%);
    box-shadow:0 16px 30px -6px rgba(18,80,103,.6);

}