/* ============================================================================
   Paola Herrera Inmobiliaria — estilos del sitio (BS5 + polish)
   ============================================================================
   B14a: color institucional centralizado vía CSS vars
   B14b: mobile padding 3 capas (container + row gutter + col padding)
   B11:  isolation en property cards para z-index seguro
   B20:  property-features sin background rojo legacy
   B24:  hero Ken Burns CSS-puro (sin backstretch)
   ========================================================================= */

:root {
    --ph-primary: #d8a75a;
    --ph-primary-dark: #b78c45;
    --ph-primary-light: #f4dfb6;
    --ph-dark: #0e1122;
    --ph-light: #f7f7f7;
    --ph-text: #1e1e1e;
    --ph-muted: #6c757d;
    --ph-success: #25d366;
    --bs-link-color-rgb: 216, 167, 90;
    --bs-link-hover-color-rgb: 183, 140, 69;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.ph-body {
    font-family: 'Exo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ph-text);
    background: #fff;
    overflow-x: hidden;
}

a { color: var(--ph-primary); }
a:hover { color: var(--ph-primary-dark); }

h1, h2, h3, h4, h5, h6 { color: var(--ph-dark); }

/* ============================================================================
   HEADER + NAVBAR
   ========================================================================= */
.ph-header { background: #fff; }
.ph-topbar { background: var(--ph-dark); color: #fff; }
.ph-topbar a { color: #fff !important; }

.navbar-brand .ph-logo { max-height: 60px; width: auto; }

.navbar-light .navbar-nav .nav-link {
    color: var(--ph-dark);
    font-weight: 500;
    letter-spacing: .5px;
    padding: .75rem 1rem;
    text-transform: uppercase;
    font-size: .85rem;
    position: relative;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--ph-primary);
}
.navbar-light .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 1rem; right: 1rem; bottom: .35rem;
    height: 2px;
    background: var(--ph-primary);
}

/* ============================================================================
   HERO + BUSCADOR (B24 — Ken Burns CSS puro)
   ========================================================================= */
.ph-hero {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    isolation: isolate;
    background-color: #1f1f1f;
    display: flex;
    align-items: center;
}
.ph-hero-bg {
    position: absolute;
    inset: -2%;
    z-index: 0;
    background: url('../images/bg-1.jpeg') center/cover no-repeat, url('../images/bg-2.jpeg') center/cover no-repeat;
    transform-origin: center;
    animation: ph-kenburns 24s ease-in-out infinite alternate;
    will-change: transform;
}
.ph-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(14,17,34,.65) 0%, rgba(14,17,34,.45) 60%, rgba(14,17,34,.85) 100%);
}
.ph-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 4rem 1rem 5rem;
    width: 100%;
}
.ph-hero-title {
    color: #fff;
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: .5rem;
}
.ph-hero-subtitle {
    color: rgba(255,255,255,.9);
    font-style: italic;
    margin-bottom: 2rem;
    font-size: clamp(.95rem, 2vw, 1.15rem);
}

@keyframes ph-kenburns {
    0%   { transform: scale(1)    translate(0, 0); }
    50%  { transform: scale(1.08) translate(-.5%, -.3%); }
    100% { transform: scale(1.12) translate(.3%, .2%); }
}

.ph-search {
    border: 0;
    border-radius: 8px;
    padding: 1.25rem;
    background: rgba(255,255,255,.98);
    max-width: 1100px;
    margin: 0 auto;
}
.ph-search .form-select { border-radius: 6px; }

/* ============================================================================
   BOTONES + UTILS
   ========================================================================= */
.ph-btn-primary {
    background: var(--ph-primary);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .5px;
    transition: background .2s, transform .2s;
}
.ph-btn-primary:hover {
    background: var(--ph-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}
.ph-btn-dark {
    background: var(--ph-dark);
    color: #fff;
    border: 0;
    border-radius: 4px;
}
.ph-btn-dark:hover { background: #000; color: #fff; }

.section-title-center {
    text-align: center;
    margin: 2rem 0 3rem;
}
.section-title-center h2 {
    display: inline-block;
    position: relative;
    padding-bottom: .75rem;
    font-weight: 600;
}
.section-title-center h2::after {
    content: "";
    position: absolute;
    left: 25%; right: 25%; bottom: 0;
    height: 3px;
    background: var(--ph-primary);
    border-radius: 2px;
}

/* ============================================================================
   PROPERTY CARDS (B11, B20)
   ========================================================================= */
.property-container, .ph-card { isolation: isolate; }

.ph-card {
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ph-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
.ph-card-imgwrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #eee;
}
.ph-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.ph-card:hover .ph-card-img { transform: scale(1.06); }
.ph-card-badge {
    position: absolute;
    top: .75rem; left: .75rem;
    background: var(--ph-primary);
    color: #fff;
    padding: .25rem .75rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    z-index: 2; /* B11: bajo el navbar (1020) */
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ph-card-badge-opera { background: var(--ph-dark); }

.ph-card-title { line-height: 1.3; min-height: 2.6em; }
.ph-card-title a { color: var(--ph-dark); }
.ph-card-title a:hover { color: var(--ph-primary); }

.ph-card-price {
    font-weight: 700;
    color: var(--ph-primary);
    font-size: 1.05rem;
}

/* B20: matar el background rojo legacy del .property-features */
.property-features {
    background: transparent !important;
    border-top: 1px solid #eee;
    padding: .5rem 1rem;
}
.property-features:empty { display: none !important; }

/* ============================================================================
   SERVICIOS (home)
   ========================================================================= */
.ph-service-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.ph-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: var(--ph-primary);
}
.ph-service-card i {
    font-size: 3rem;
    color: var(--ph-primary);
    display: block;
    margin-bottom: 1rem;
}
.ph-service-card a {
    text-decoration: none;
    color: var(--ph-dark);
    font-weight: 600;
}

/* ============================================================================
   DETALLE
   ========================================================================= */
.ph-detalle-hero { padding: 2rem 0 1.5rem; background: var(--ph-light); }
.ph-detalle-hero h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; }
.ph-detalle-hero .ph-price-tag {
    display: inline-block;
    background: var(--ph-primary);
    color: #fff;
    padding: .5rem 1.5rem;
    border-radius: 6px;
    font-size: 1.25rem;
    font-weight: 700;
}

.ph-feature-grid { gap: .5rem; }
.ph-feature-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1rem .5rem;
    text-align: center;
}
.ph-feature-item i {
    font-size: 1.5rem;
    color: var(--ph-primary);
    display: block;
    margin-bottom: .5rem;
}
.ph-feature-item strong { display: block; font-size: 1.05rem; }
.ph-feature-item small { color: var(--ph-muted); }

.ph-feature-check { padding: .35rem 0; }
.ph-feature-check i { color: var(--ph-primary); margin-right: .35rem; }

.ph-contact-sidebar { position: sticky; top: 100px; }

/* ============================================================================
   FOOTER
   ========================================================================= */
.ph-footer { background: var(--ph-dark); color: #ddd; }
.ph-footer a { color: #ddd; text-decoration: none; }
.ph-footer a:hover { color: var(--ph-primary); }
.ph-footer-title {
    color: #fff;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: .5rem;
}
.ph-footer-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 2px;
    background: var(--ph-primary);
}
.ph-footer ul li { margin-bottom: .35rem; }

/* ============================================================================
   WHATSAPP FAB
   ========================================================================= */
.ph-wa-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px; height: 60px;
    background: var(--ph-success);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    z-index: 1000;
    transition: transform .2s, box-shadow .2s;
}
.ph-wa-fab:hover {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(37,211,102,.45);
}
.ph-wa-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ph-success);
    z-index: -1;
    animation: ph-wa-pulse 2.5s ease-out infinite;
    opacity: .6;
}
@keyframes ph-wa-pulse {
    0%   { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ============================================================================
   FORM CONTACTO
   ========================================================================= */
.ph-contact-form-wrap {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.ph-contact-form .form-control:focus,
.ph-contact-form .form-select:focus {
    border-color: var(--ph-primary);
    box-shadow: 0 0 0 .2rem rgba(216,167,90,.18);
}
.ph-contact-feedback:not(:empty) {
    padding: .75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}
.ph-contact-feedback.ph-success { background: #d1f7d8; color: #1a7d3a; }
.ph-contact-feedback.ph-error   { background: #fde2e2; color: #8a1c1c; }

/* ============================================================================
   ANIMACIONES on-scroll (IntersectionObserver)
   ========================================================================= */
.ph-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}
.ph-fade-in.ph-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================================
   MOBILE (B14b — padding acumulado 3 capas)
   ========================================================================= */
@media (max-width: 768px) {
    .container,
    .container-fluid,
    section > .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }
    .row {
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .row > [class*="col-"],
    .row > .col,
    .row > .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .ph-feature-grid.row {
        --bs-gutter-x: .5rem !important;
        margin-left: -.25rem !important;
        margin-right: -.25rem !important;
    }
    .ph-feature-grid.row > [class*="col-"] {
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }

    .ph-contact-sidebar { position: static !important; top: auto !important; }

    .ph-hero { min-height: 480px; }
    .ph-hero-content { padding: 3rem 1rem; }
    .ph-search { padding: 1rem; }

    .ph-detalle-hero { padding: 1.5rem 0 1rem; }
    .navbar-brand .ph-logo { max-height: 45px; }

    .ph-wa-fab { width: 55px; height: 55px; right: 15px; bottom: 15px; font-size: 1.75rem; }

    .mb-4 { margin-bottom: 1rem !important; }
}