/* Theme Redesign — Rounded, Elegant, Professional */
:root{
  --brand:#66EEAA; --brand-2:#66cc77; --accent:#2288aa; --ink:#221122; --paper:#fff; --muted:#ddeeee;
  --radius-lg:20px; --radius-xl:28px; --radius-xxl:36px;
  --shadow-1:0 8px 24px rgba(0,0,0,.10); --shadow-2:0 16px 40px rgba(0,0,0,.14);
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@400;500;600&display=swap');
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:#222}
h1,h2,h3,h4,.display-4,.display-5{font-family:Playfair Display,Georgia,serif;color:var(--ink);letter-spacing:.2px}
.lead{color:#444}
.rounded-xxl{border-radius:var(--radius-xxl)!important}
.btn-pill{border-radius:999px!important;padding:.6rem 1.1rem}
.text-ink{color:var(--ink)!important}
.bg-paper{background:var(--paper)!important}
.icon{width:18px;height:18px;vertical-align:-3px}
.site-header{background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid rgba(0,0,0,.06)}
.logo-type{font-family:Playfair Display,Georgia,serif;font-weight:700;letter-spacing:.3px;color:#111}
.btn-brand{background:var(--brand);color:#043;border:none}
.btn-brand:hover{filter:brightness(.95);color:#021}
.btn-accent{background:var(--accent);color:#fff;border:none}
.btn-accent:hover{filter:brightness(.96);color:#fff}
.hero-owl{position:relative;overflow:hidden;box-shadow:var(--shadow-2)}
.hero-img{height:72vh;object-fit:cover;display:block}
@media (max-width:767.98px){.hero-img{height:56vh}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.35),rgba(0,0,0,.15))}
.hero-caption{position:absolute;left:0;right:0;bottom:7%;color:#fff;padding:0 1rem}
.hero-caption>*{background:rgba(0,0,0,.35);backdrop-filter:blur(3px);display:inline-block;border-radius:18px;padding:.5rem .75rem;margin:.12rem 0}
.services-triple.section-rounded{background:#0d2a3f;color:#fff;border-radius:var(--radius-xxl);box-shadow:var(--shadow-2);overflow:hidden}
.services-triple .img-box{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-1)}
.services-triple .img-box img{width:100%;height:100%;object-fit:cover}
.services-triple .center-copy .kicker{color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.services-triple .center-copy h3{color:#fff}
.services-triple .center-copy p{color:rgba(255,255,255,.86)}
.property-card{border:none;border-radius:20px;box-shadow:var(--shadow-1);overflow:hidden;transition:.25s;background:#fff}
.property-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.property-card .ratio>img{object-fit:cover}
.badge-accent{background:var(--accent);color:#fff}
.badge-brand{background:var(--brand);color:#042}

/* Botones sociales estilo minimal */
.btn-outline-dark.btn-pill {
    border-radius: 999px;
    border-width: 1px;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(6px);
}

    .btn-outline-dark.btn-pill:hover {
        filter: brightness(.98);
    }

/* ======= Caption apilado izquierda, vidrio borroso sin fondo sólido ======= */
.hero-caption.hero-left {
    position: absolute;
    left: 2rem;
    bottom: 10%;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-width: min(520px, 70vw);
    z-index: 3;
}

.cap {
    /* “sin fondo”, solo contraste borroso */
    background: rgba(16,16,16,.06); /* casi transparente, solo para que aplique el blur */
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 18px;
    padding: .55rem .85rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    display: inline-block;
}

.cap-title {
    font: 700 1.9rem/1.1 "Playfair Display", Georgia, serif;
    letter-spacing: .2px;
}

.cap-sub {
    font: 500 .95rem/1.2 Inter, system-ui, sans-serif;
    color: rgba(255,255,255,.9);
}

.cap-price {
    font: 600 .95rem/1.2 Inter, system-ui, sans-serif;
}

/* ======= Dots de Owl: circulares, ocultos hasta hover ======= */
.hero-owl #home-hero .owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    opacity: 0;
    transition: opacity .2s ease;
}

.hero-owl:hover #home-hero .owl-dots {
    opacity: 1;
}

.hero-owl #home-hero .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.35);
    margin: 3px;
    transition: transform .15s ease, background-color .15s ease;
}

.hero-owl #home-hero .owl-dot.active span {
    background: #fff;
    transform: scale(1.12);
}

/* ===== Iconos outline (mejorados) ===== */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 14px
}

    .nav-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        text-decoration: none;
        color: currentColor
    }

        .nav-icons a .ico {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round
        }

.icons--dark {
    color: #111
}
/* en fondos claros */
.icons--light {
    color: #fff
}
/* en fondos oscuros */

/* Hover a azul (usa tu color de acento del header) */
:root {
    --link-accent: var(--accent, #2288aa);
}

.nav-icons a:hover {
    color: var(--link-accent);
}

/* ===== Tarjetas redondeadas "rounded-xxl" unificadas ===== */
.card-box-a,
.property-card {
    border: 0;
    border-radius: var(--radius-xxl); /* 36px por defecto */
    overflow: hidden;
    box-shadow: var(--shadow-1);
    background: #f6fbff;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .card-box-a:hover,
    .property-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-2);
    }

    /* Asegura que imagen y overlay respeten el radio */
    .card-box-a .img-box-a,
    .card-box-a .img-box-a img,
    .card-box-a .card-overlay {
        border-radius: inherit;
    }

    /* Texto y botones sobre la imagen con look limpio */
    .card-box-a .card-overlay-a-content .price-box .price-a {
        border-radius: 999px;
        padding: .45rem .9rem;
        border: 1px solid rgba(255,255,255,.6);
        background: rgba(0,0,0,.08);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* Espaciado interior y pies de tarjeta */
    .card-box-a .card-body-a {
        padding-top: .75rem;
    }

    .card-box-a .card-footer-a {
        border-top: 0;
        padding-top: .5rem;
    }

/* Header completamente plano y parte del fondo */
.site-header,
.navbar.navbar-trans {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

/* Marca más limpia y compacta */
.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.navbar-logo img {
    height: 56px;
}

.logo-type {
    font-weight: 700;
    line-height: 1;
}

    .logo-type .line-1 {
        display: block;
        font-size: 1.15rem;
    }

    .logo-type .line-2 {
        display: block;
        font-size: 1.15rem;
    }

/* Menú alineado a la derecha */
.navbar-nav.main-nav {
    margin-left: auto;
    gap: 1.6rem;
}

@media (max-width: 991.98px) {
    .navbar-nav.main-nav {
        margin-left: 0;
    }
}

/* Íconos a la derecha del todo */
.nav-icons {
    margin-left: 1rem;
}

/* oculta flecha de volver arriba y cualquier franja que deja */
.back-to-top {
    display: none !important;
}

/* elimina completamente dots/nav del hero */
.hero-owl #home-hero .owl-dots,
.hero-owl #home-hero .owl-nav {
    display: none !important;
}

/* evita espacio inferior por overflow */
.hero-owl {
    overflow: hidden;
}

.navbar-logo img {
    height: 56px;
}

.logo-type .line-1, .logo-type .line-2 {
    font-size: 1.15rem;
}
.navbar-logo img {
    height: 52px;
}

.logo-type {
    letter-spacing: .2px;
}


/* === NAVBAR: más hacia adentro y simétrico === */
:root {
    /* ↑ Aumenta el padding lateral; si aún lo ves pegado, súbelo más */
    --header-hpad: clamp(100px, 9vw, 220px);
    --header-max: 1440px; /* puedes subir a 1500–1560 si tu layout lo permite */
}

.site-header .container,
.site-header .container-fluid {
    max-width: var(--header-max);
    margin-inline: auto;
    padding-inline: var(--header-hpad);
    /* Menú centrado real y redes a la orilla */
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* izq | centro | der */
    align-items: center;
    column-gap: clamp(14px, 3vw, 36px);
}

.navbar-brand-container {
    grid-column: 1;
    justify-self: start;
}

.navbar-collapse {
    grid-column: 2;
    justify-self: center;
}

.site-header .nav-icons {
    grid-column: 3;
    justify-self: end;
}

/* Menú centrado */
.navbar-nav.main-nav {
    margin: 0 !important;
    justify-content: center;
    gap: clamp(5px, 4vw, 64px);
}

/* Redes: más separación y un pelín de aire al borde derecho */
.site-header .nav-icons {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 10px); /* ← más separados */
    padding-left: 10rem; /* aire sutil al borde */
}

/* Branding (logo + texto) pegados y proporcionados */
.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: 0;
    padding-left: 3rem; /* aire sutil al borde */
}

.navbar-logo img {
    display: block; /* quita el espacio de línea del <img> */
}

.logo-type {
    margin-left: -0.55rem;
    line-height: .92; /* compacta las dos líneas */
}

    .logo-type .line-1, .logo-type .line-2 {
        font-weight: 900;
        font-size: clamp(1.35rem, 1.7vw, 1.35rem);
        line-height: .92;
    }

/* === CARRUSEL: más largo (más alto) === */
.hero-owl .hero-img {
    height: clamp(640px, 78vh, 1080px); /* ← SOLO largo; sube/baja estos valores si quieres */
    width: 100%;
    object-fit: cover;
    object-position: center;
}



/* Quita el “espacio fantasma” de las imágenes inline */
.navbar-logo img {
    display: block;
    height: 74px !important; /* unifica la altura; ajusta si quieres */
}

/* Empuja el texto ligeramente encima del borde del logo */
.logo-type {
    margin-left: -0.65rem !important; /* ↑ hazlo -0.7 / -0.8 si aún ves hueco */
    line-height: .92;
}

/* ===== Servicios zig-zag (estilo referencia) ===== */
.svc-rows {
    background: #f6fbff;
    padding-block: clamp(48px, 10vw, 120px);
}

.svc-row {
    max-width: 1200px;
    margin: 0 auto clamp(40px, 7vw, 88px);
    padding-inline: clamp(16px, 4vw, 32px);
    display: grid;
    grid-template-columns: 1fr 1fr; /* imagen | texto */
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

    /* Alterna: filas pares invierten orden (imagen derecha / texto izquierda) */
    .svc-row:nth-child(even) {
        grid-template-columns: 1fr 1fr;
    }

        .svc-row:nth-child(even) .svc-media {
            order: 2;
        }

        .svc-row:nth-child(even) .svc-copy {
            order: 1;
            text-align: left;
        }

/* Imagen */
.svc-media {
    display: grid;
    place-items: center;
}

    .svc-media img {
        display: block;
        width: min(540px, 100%);
        height: min(460px, 58vh);
        object-fit: cover;
        border-radius: 28px;
        box-shadow: 0 18px 50px rgba(0,0,0,.18);
    }

/* Copys */
.svc-copy {
    max-width: 560px;
}

.svc-kicker {
    display: inline-block;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .16em;
    font: 600 .78rem/1 Inter, system-ui, sans-serif;
    margin-bottom: .8rem;
}

.svc-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4.6vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: .012em;
    color: #111;
    margin: 0 0 .7rem;
}

    .svc-title em {
        font-style: italic;
    }

.svc-text {
    font: 500 clamp(.95rem, 1.3vw, 1.05rem)/1.7 Inter, system-ui, sans-serif;
    color: #374151;
    margin: 0 0 1.2rem;
}

/* Botón negro minimal, hover usa tu azul del sitio si existe */
.svc-btn {
    display: inline-block;
    background: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    padding: .7rem 1.15rem;
    font: 600 .95rem/1 Inter, system-ui, sans-serif;
    border: 1px solid #111;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .svc-btn:hover {
        background: var(--link-accent, #2288aa);
        border-color: var(--link-accent, #2288aa);
        transform: translateY(-1px);
    }

/* Responsivo: apilar imagen sobre texto */
@media (max-width: 992px) {
    .svc-row {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .svc-media img {
        width: 100%;
        height: min(360px, 50vh);
    }

    .svc-row:nth-child(even) .svc-media {
        order: 1;
    }

    .svc-row:nth-child(even) .svc-copy {
        order: 2;
    }
}
