/*==================================================
FINCA EL CAPRICHO
Versión 2.0
4Publicidad
==================================================*/


/*==================================================
GOOGLE FONTS
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700;800&display=swap');


/*==================================================
VARIABLES
==================================================*/

:root{

    --black:#101010;
    --black-soft:#1B1B1B;

    --white:#FFFFFF;

    --ivory:#F7F5F1;

    --gold:#C9A45C;
    --gold-light:#D7B16A;

    --gray:#777777;

    --container:1400px;

    --radius:22px;

    --transition:.35s ease;

}


/*==================================================
RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--black);

    color:var(--white);

    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

ul{

    list-style:none;

}

a{

    text-decoration:none;

}


/*==================================================
CONTAINER
==================================================*/

.container{

    width:min(var(--container),92%);

    margin:auto;

}

/*==================================================
HEADER
==================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:28px 0;

    transition:var(--transition);

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*=========================================
LOGO
=========================================*/

.logo{

    display:flex;

    flex-direction:column;

    color:var(--white);

}

.logo-top{

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:5px;

    color:var(--gold);

}

.logo-title{

    font-size:3rem;

    font-family:"Playfair Display",serif;

    font-weight:700;

}

.logo-top{

    letter-spacing:8px;

    font-size:.80rem;

}

.logo-bottom{

    font-size:1rem;

}

/*=========================================
MENU
=========================================*/

.nav ul{

    display:flex;

    gap:60px;

}

.nav a{

    color:var(--white);

    font-size:.95rem;

    font-weight:500;

    transition:var(--transition);

}

.nav a:hover{

    color:var(--gold);

}

/*==================================
BOTÓN HEADER
==================================*/

.btn-header{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:15px 34px;

    background:#cfa64d;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    border:2px solid #cfa64d;

    transition:all .35s ease;

}

.btn-header:hover{

    background:#b98e32;

    border-color:#b98e32;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,0,0,.18);

}

.btn-header:visited{

    color:#fff;

}

.btn-header:focus{

    color:#fff;

}

.btn-header:active{

    color:#fff;

}
/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:900px;

    overflow:hidden;

}

/*=========================================
SLIDER
=========================================*/

.hero-slider{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0;

    transition:opacity 1.8s ease;

}

.hero-slide.active{

    opacity:1;

    animation:kenburns 18s linear infinite;

}

/*=========================================
IMÁGENES
=========================================*/

.hero-slide:nth-child(1){

    background-image:url("../images/hero-01.jpg");

}

.hero-slide:nth-child(2){

    background-image:url("../images/hero-02.jpg");

}

.hero-slide:nth-child(3){

    background-image:url("../images/hero-03.jpg");

}

.hero-slide:nth-child(4){

    background-image:url("../images/hero-04.jpg");

}

.hero-slide:nth-child(5){

    background-image:url("../images/hero-05.jpg");

}

/*=========================================
OVERLAY
=========================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.12) 100%
    );

    z-index:2;

}

/*=========================================
CONTENEDOR
=========================================*/

.hero .container{

    position:relative;

    z-index:5;

    height:100%;

    display:flex;

    align-items:center;

}

/*=========================================
CONTENIDO
=========================================*/

.hero-content{

    max-width:760px;

    margin-top:80px;

}

/*==================================================
HERO LABEL
==================================================*/

.hero-label{

    display:inline-flex;
    align-items:center;

    padding:12px 26px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:50px;

    backdrop-filter:blur(12px);

    color:var(--white);

    font-size:.85rem;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:35px;

}

/*==================================================
HERO TITLE
==================================================*/

.hero-title{

    font-family:"Playfair Display", serif;

    font-size:6.5rem;

    line-height:.90;

    font-weight:700;

    letter-spacing:-3px;

    color:var(--white);

    margin-bottom:35px;

}

.hero-title span{

    display:block;

    color:var(--gold);

}

/*==================================================
DESCRIPTION
==================================================*/

.hero-description{

    max-width:650px;

    font-size:1.35rem;

    line-height:1.8;

    color:rgba(255,255,255,.92);

    margin-bottom:55px;

}

/*==================================================
INFO
==================================================*/

.hero-info{

    display:flex;

    gap:60px;

    margin-bottom:55px;

    flex-wrap:wrap;

}

.hero-info div{

    display:flex;

    flex-direction:column;

}

.hero-info strong{

    font-family:"Playfair Display",serif;

    font-size:2.2rem;

    color:var(--gold);

    font-weight:700;

}

.hero-info span{

    color:rgba(255,255,255,.85);

    font-size:.95rem;

    margin-top:8px;

    letter-spacing:.5px;

}

/*==================================================
BUTTONS
==================================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/*==================================
BOTÓN PRINCIPAL
==================================*/

.btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:16px 34px;

    background:#cfa64d;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    font-size:16px;

    border:2px solid #cfa64d;

    cursor:pointer;

    transition:all .35s ease;

}

.btn-primary i{

    transition:.35s;

}

.btn-primary:hover{

    background:#b98e32;

    border-color:#b98e32;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,0,0,.18);

}

.btn-primary:hover i{

    transform:translateX(3px);

}

.btn-primary:visited{

    color:#fff;

}

.btn-primary:focus{

    color:#fff;

    outline:none;

}

.btn-primary:active{

    color:#fff;

    transform:translateY(-1px);

}

/*==================================================
PROPERTY
==================================================*/

.property{

    padding:140px 0;

    background:#F7F5F1;

}

.property-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

}

/*=========================================
IMAGEN
=========================================*/

.property-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.18);

}

.property-image img{

    width:100%;

    display:block;

    transition:.8s ease;

}

.property-image:hover img{

    transform:scale(1.05);

}

/*=========================================
CONTENIDO
=========================================*/

.property-content{

    color:#222;

}

.section-label{

    display:inline-block;

    margin-bottom:20px;

    color:var(--gold);

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:700;

}

.property-content h2{

    font-family:"Playfair Display",serif;

    font-size:3.8rem;

    line-height:1.15;

    margin-bottom:35px;

    color:#111;

}

.property-content p{

    color:#666;

    font-size:1.15rem;

    line-height:2;

    margin-bottom:25px;

}

.property-content .btn-primary{

    margin-top:20px;

}

/*==================================================
PROPERTY
==================================================*/

.property{

    background:#f8f7f4;
    padding:140px 0;

}

.section-heading{

    max-width:900px;
    margin:auto;
    text-align:center;
    margin-bottom:80px;

}

.section-tag{

    display:inline-block;
    color:#b89146;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:20px;

}

.section-heading h2{

    font-family:"Playfair Display",serif;
    font-size:3.2rem;
    line-height:1.2;
    color:#1d1d1d;
    margin-bottom:25px;

}

.section-heading p{

    font-size:1.1rem;
    color:#666;
    line-height:1.9;

}

.property-grid{

    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:70px;
    align-items:center;

}

.property-image{

    overflow:hidden;
    border-radius:18px;

    box-shadow:0 35px 80px rgba(0,0,0,.18);

}

.property-image img{

    width:100%;
    display:block;

    transition:.6s;

}

.property-image:hover img{

    transform:scale(1.05);

}

.property-content{

    display:grid;
    gap:22px;

}

.feature{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:24px;

    background:#fff;

    border-radius:16px;

    transition:.35s;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.feature:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.feature i{

    width:62px;

    height:62px;

    background:#b89146;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.feature h3{

    font-family:"Playfair Display",serif;

    font-size:1.45rem;

    margin-bottom:6px;

    color:#1d1d1d;

}

.feature p{

    color:#666;

    line-height:1.7;

}
/*==================================
BOTÓN SECUNDARIO
==================================*/

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:50px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#fff;

    font-weight:600;

    text-decoration:none;

    transition:all .35s ease;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.18);

    border-color:#fff;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.btn-secondary:visited{

    color:#fff;

}

.btn-secondary:focus{

    color:#fff;

}

.btn-secondary:active{

    color:#fff;

}

/*==================================
WHATSAPP
==================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    z-index:9999;

    transition:.35s;

}

.whatsapp-float:hover{

    transform:scale(1.08);

    color:#fff;

}

@media(max-width:768px){

.whatsapp-float{

    width:58px;

    height:58px;

    right:18px;

    bottom:18px;

}

}