/*
Theme Name:        ProLaFer
Theme URI:         https://kromatix.cl
Description:       Tema oficial de ProLaFer Corretaje de Propiedades. Desarrollado sobre CDPEngine por KROMATIX CHILE.
Version:           1.0.0
Requires at least: 6.0
Requires PHP:      8.0
Author:            KROMATIX CHILE
Author URI:        https://kromatix.cl
Text Domain:       prolafer
License:           Private
Tags:              real-estate, cdpengine, prolafer

CDPEngine Theme — KROMATIX CHILE
*/

/* ============================================================
   PROLAFER THEME VARIABLES
   Override CDPEngine base variables with ProLaFer brand colors.
   ============================================================ */
:root {
    /* ── Brand Colors ── */
    --cdpe-primary:         #1565C0;
    --cdpe-primary-hover:   #0D47A1;
    --cdpe-secondary:       #00BCD4;
    --cdpe-secondary-hover: #0097A7;
    --cdpe-accent:          #00BCD4;
    --cdpe-dark:            #1A237E;

    /* ── Theme specific ── */
    --pf-primary:           #1565C0;
    --pf-primary-hover:     #0D47A1;
    --pf-cyan:              #00BCD4;
    --pf-cyan-hover:        #0097A7;
    --pf-dark:              #1A237E;
    --pf-text:              #333333;
    --pf-text-muted:        #666666;
    --pf-bg:                #F5F7FA;
    --pf-bg-card:           #FFFFFF;
    --pf-border:            #E0E7EF;
    --pf-shadow-sm:         0 1px 4px rgba(21,101,192,0.08);
    --pf-shadow-md:         0 4px 16px rgba(21,101,192,0.12);
    --pf-shadow-lg:         0 8px 32px rgba(21,101,192,0.16);
    --pf-shadow-hover:      0 12px 40px rgba(21,101,192,0.22);
    --pf-radius-sm:         6px;
    --pf-radius-md:         12px;
    --pf-radius-lg:         20px;
    --pf-radius-full:       9999px;
    --pf-transition:        all 0.25s ease;
    --pf-transition-fast:   all 0.15s ease;
    --pf-font:              'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --pf-header-height:     96px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family:            var(--pf-font);
    color:                  var(--pf-text);
    background-color:       var(--pf-bg);
    line-height:            1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--pf-primary); text-decoration: none; transition: var(--pf-transition-fast); }
a:hover { color: var(--pf-primary-hover); }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pf-font);
    color:       var(--pf-dark);
    line-height: 1.2;
    font-weight: 700;
}

p { color: var(--pf-text-muted); line-height: 1.7; margin-bottom: 16px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.pf-container {
    width:      100%;
    max-width:  1200px;
    margin:     0 auto;
    padding:    0 24px;
}

.pf-main { margin-top: var(--pf-header-height); min-height: calc(100vh - var(--pf-header-height)); }

/* Admin bar compensation */
body.admin-bar .pf-header     { top: 32px; }
body.admin-bar .pf-main       { margin-top: calc(var(--pf-header-height) + 32px); }
body.admin-bar .pf-page-hero  { padding-top: calc(var(--pf-header-height) + 40px + 48px); }

@media screen and (max-width: 782px) {
    body.admin-bar .pf-header  { top: 46px; }
    body.admin-bar .pf-main    { margin-top: calc(var(--pf-header-height) + 46px); }
}

/* ============================================================
   HEADER
   ============================================================ */
.pf-header {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    z-index:       1000;
    height:        var(--pf-header-height);
    background:    #FFFFFF;
    border-bottom: 2px solid var(--pf-border);
    box-shadow:    var(--pf-shadow-sm);
    transition:    var(--pf-transition);
}

.pf-header.scrolled {
    box-shadow:    var(--pf-shadow-md);
    border-bottom-color: var(--pf-primary);
}

.pf-header-inner {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    height:      100%;
}

/* Logo */
.pf-logo {
    display:     flex;
    align-items: center;
    gap:         10px;
    text-decoration: none;
}

.pf-logo img { height: 64px; width: auto; }

/* Nudge the header logo down so it isn't pinned to the very top
   (footer logo keeps its default position). */
.pf-header .pf-logo { transform: translateY(10px); }

.pf-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.pf-logo-text span:first-child { font-size: 23px; font-weight: 800; color: var(--pf-dark); }
.pf-logo-text span:last-child  { font-size: 11px; color: var(--pf-cyan); font-weight: 500; letter-spacing: 0.5px; }

/* Navigation */
.pf-nav { display: flex; align-items: center; gap: 4px; }

.pf-nav a {
    padding:        8px 16px;
    font-size:      13px;
    font-weight:    600;
    color:          var(--pf-text);
    border-radius:  var(--pf-radius-full);
    transition:     var(--pf-transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-nav a:hover,
.pf-nav a.pf-active { color: var(--pf-primary); background: rgba(21,101,192,0.08); }

.pf-nav .pf-nav-cta {
    background: var(--pf-primary);
    color:      #FFFFFF !important;
    margin-left: 8px;
}

.pf-nav .pf-nav-cta:hover {
    background: var(--pf-primary-hover) !important;
    transform:  translateY(-1px);
}

/* CTA on its own page: keep it solid but in a deeper corporate blue
   (instead of the washed-out generic active state) so it stays legible. */
.pf-nav .pf-nav-cta.pf-active,
.pf-nav .pf-nav-cta.pf-active:hover {
    background: var(--pf-dark) !important;
    color:      #FFFFFF !important;
}

/* Hamburger */
.pf-menu-toggle {
    display:        none;
    flex-direction: column;
    gap:            5px;
    cursor:         pointer;
    padding:        8px;
    background:     none;
    border:         none;
}

.pf-menu-toggle span {
    display:       block;
    width:         24px;
    height:        2px;
    background:    var(--pf-dark);
    border-radius: 2px;
    transition:    var(--pf-transition);
}

/* ============================================================
   PAGE HERO — Interior pages banner
   ============================================================ */
.pf-page-hero {
    background:  linear-gradient(135deg, var(--pf-dark) 0%, var(--pf-primary) 100%);
    /* Pull up so the banner sits flush under the fixed header (its padding-top
       already reserves room for the header), removing the grey gap. */
    margin-top:  calc(-1 * var(--pf-header-height));
    padding:     calc(var(--pf-header-height) + 48px) 0 48px;
    text-align:  center;
}

.pf-page-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
.pf-page-hero p  { color: rgba(255,255,255,0.8); margin: 0; font-size: 17px; }

/* Breadcrumb */
.pf-breadcrumb {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-top:      16px;
    font-size:       13px;
}

.pf-breadcrumb a           { color: var(--pf-cyan); }
.pf-breadcrumb span        { color: rgba(255,255,255,0.5); }
.pf-breadcrumb .pf-current { color: rgba(255,255,255,0.8); font-weight: 600; }

/* ============================================================
   SECTIONS
   ============================================================ */
.pf-section       { padding: 80px 0; }
.pf-section-white { background: #FFFFFF; }
.pf-section-gray  { background: var(--pf-bg); }
.pf-section-dark  {
    background: linear-gradient(135deg, var(--pf-dark) 0%, var(--pf-primary) 100%);
    color: #fff;
}

.pf-section-dark h2,
.pf-section-dark h3,
.pf-section-dark p { color: #fff; }

.pf-section-header { text-align: center; margin-bottom: 56px; }
.pf-section-header h2 { font-size: 32px; margin-bottom: 12px; }
.pf-section-header p  { font-size: 18px; max-width: 600px; margin: 0 auto; }

.pf-section-header h2::after {
    content:       '';
    display:       block;
    width:         60px;
    height:        4px;
    background:    linear-gradient(90deg, var(--pf-primary), var(--pf-cyan));
    border-radius: var(--pf-radius-full);
    margin:        16px auto 0;
}

/* ============================================================
   BUTTONS — ProLaFer brand override
   ============================================================ */
.cdpe-btn-primary   { background: var(--pf-primary);   border-color: var(--pf-primary); }
.cdpe-btn-secondary { background: var(--pf-cyan);       border-color: var(--pf-cyan); }
.cdpe-btn-outline   { color: var(--pf-primary); border-color: var(--pf-primary); }

.cdpe-btn-primary:hover   { background: var(--pf-primary-hover); border-color: var(--pf-primary-hover); color: #fff; }
.cdpe-btn-secondary:hover { background: var(--pf-cyan-hover); border-color: var(--pf-cyan-hover); color: #fff; }
.cdpe-btn-outline:hover   { background: var(--pf-primary); color: #fff; }

.pf-btn-white {
    background:   #fff;
    color:        var(--pf-primary);
    border:       2px solid #fff;
    border-radius: var(--pf-radius-full);
    padding:      12px 28px;
    font-size:    14px;
    font-weight:  600;
    cursor:       pointer;
    transition:   var(--pf-transition);
    text-decoration: none;
    display:      inline-flex;
    align-items:  center;
    gap:          8px;
}

.pf-btn-white:hover { background: transparent; color: #fff; }

/* ============================================================
   STATS BAR
   ============================================================ */
.pf-stats { background: var(--pf-primary); padding: 28px 0; }

.pf-stats-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   24px;
    text-align:            center;
}

.pf-stat-item {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        16px;
    border-right:   1px solid rgba(255,255,255,0.2);
}

.pf-stat-item:last-child { border-right: none; }
.pf-stat-number { font-size: 28px; font-weight: 800; color: #FFFFFF; line-height: 1; }
.pf-stat-label  { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500; }

/* ============================================================
   FOOTER
   ============================================================ */
.pf-footer {
    background: var(--pf-dark);
    color:      #FFFFFF;
    padding:    64px 0 24px;
}

.pf-footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   48px;
    margin-bottom:         48px;
}

.pf-footer h4 {
    color:          var(--pf-cyan);
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom:  16px;
}

.pf-footer p,
.pf-footer a {
    color:       rgba(255,255,255,0.7);
    font-size:   13px;
    line-height: 1.8;
}

.pf-footer a:hover { color: var(--pf-cyan); }
.pf-footer ul li   { margin-bottom: 8px; }

.pf-footer-bottom {
    border-top:      1px solid rgba(255,255,255,0.1);
    padding-top:     24px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       12px;
    color:           rgba(255,255,255,0.4);
    flex-wrap:       wrap;
    gap:             12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .pf-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .pf-stats-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .pf-nav {
        display:        none;
        position:       fixed;
        top:            var(--pf-header-height);
        left:           0;
        right:          0;
        background:     #FFFFFF;
        flex-direction: column;
        padding:        16px;
        box-shadow:     var(--pf-shadow-lg);
        gap:            4px;
        border-top:     2px solid var(--pf-border);
    }

    .pf-nav.pf-open { display: flex; }
    .pf-nav a       { width: 100%; text-align: center; padding: 14px; border-radius: var(--pf-radius-md); }
    .pf-menu-toggle { display: flex; }
    .pf-footer-grid { grid-template-columns: 1fr; }
    .pf-footer-bottom { flex-direction: column; text-align: center; }
    .pf-section     { padding: 56px 0; }
}

@media (max-width: 480px) {
    .pf-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   HERO
   ============================================================ */
.pf-hero {
    position:   relative;
    min-height: 100vh;
    display:    flex;
    align-items: center;
    background: linear-gradient(135deg, var(--pf-dark) 0%, var(--pf-primary) 60%, var(--pf-cyan) 100%);
    overflow:   hidden;
    /* Sit flush under the fixed header (hero content padding clears it). */
    margin-top: calc(-1 * var(--pf-header-height));
}

.pf-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="40" fill="rgba(255,255,255,0.03)"/><circle cx="80" cy="80" r="60" fill="rgba(255,255,255,0.02)"/></svg>');
    background-size: cover;
}

.pf-hero-overlay {
    position: absolute;
    inset:    0;
    background: rgba(0,0,0,0.15);
}

.pf-hero-content {
    position:   relative;
    z-index:    2;
    max-width:  800px;
    padding:    120px 0 80px;
}

.pf-hero-badge {
    display:       inline-block;
    background:    rgba(255,255,255,0.15);
    color:         #fff;
    padding:       6px 16px;
    border-radius: var(--pf-radius-full);
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
    border:        1px solid rgba(255,255,255,0.2);
}

.pf-hero-title {
    color:         #FFFFFF;
    font-size:     clamp(32px, 6vw, 64px);
    line-height:   1.1;
    margin-bottom: 24px;
}

.pf-hero-title-accent { color: var(--pf-cyan); }

.pf-hero-subtitle {
    color:         rgba(255,255,255,0.85);
    font-size:     18px;
    margin-bottom: 32px;
    max-width:     600px;
}

/* Hero search */
.pf-hero-search {
    background:    rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--pf-radius-lg);
    padding:       20px;
    margin-bottom: 32px;
    box-shadow:    var(--pf-shadow-lg);
    max-width:     700px;
}

.pf-hero-search-tabs {
    display:       flex;
    gap:           8px;
    margin-bottom: 16px;
}

.pf-tab-btn {
    padding:       8px 20px;
    border:        2px solid var(--pf-border);
    background:    transparent;
    border-radius: var(--pf-radius-full);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--pf-transition);
    color:         var(--pf-text-muted);
    font-family:   var(--pf-font);
}

.pf-tab-btn.pf-tab-active {
    background:   var(--pf-primary);
    border-color: var(--pf-primary);
    color:        #fff;
}

.pf-hero-form-fields {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap:                   10px;
    align-items:           end;
}

.pf-hero-field {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.pf-hero-field label {
    font-size:      12.5px;
    font-weight:    700;
    color:          var(--pf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-hero-field select {
    padding:       10px 12px;
    border:        1px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    font-size:     14px;
    color:         var(--pf-text);
    background:    #fff;
    font-family:   var(--pf-font);
}

.pf-hero-ctas {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
}

.pf-hero-scroll {
    position:  absolute;
    bottom:    32px;
    left:      50%;
    transform: translateX(-50%);
}

.pf-hero-scroll span {
    display:    block;
    width:      2px;
    height:     40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
    margin:     0 auto;
    animation:  pf-scroll 1.5s ease infinite;
}

@keyframes pf-scroll {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

/* ============================================================
   PROPERTY TYPES GRID
   ============================================================ */
.pf-types-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
}

.pf-type-card {
    background:     #fff;
    border-radius:  var(--pf-radius-md);
    padding:        32px 24px;
    text-align:     center;
    text-decoration: none;
    border:         2px solid var(--pf-border);
    transition:     var(--pf-transition);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
}

.pf-type-card:hover {
    border-color: var(--pf-primary);
    transform:    translateY(-4px);
    box-shadow:   var(--pf-shadow-md);
}

.pf-type-icon   { font-size: 44px; line-height: 1; }
.pf-type-card h3 { font-size: 18px; color: var(--pf-dark); margin: 0; }
.pf-type-card p  { color: var(--pf-text-muted); font-size: 13px; margin: 0; }
.pf-type-link    { color: var(--pf-primary); font-size: 13px; font-weight: 700; margin-top: 4px; }

/* ============================================================
   CREDITS CTA
   ============================================================ */
.pf-credits-cta {
    display:     grid;
    grid-template-columns: 1fr auto;
    gap:         64px;
    align-items: center;
}

.pf-cta-tag {
    display:        inline-block;
    background:     rgba(255,255,255,0.15);
    color:          #fff;
    padding:        4px 14px;
    border-radius:  var(--pf-radius-full);
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  16px;
}

.pf-credits-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px 32px;
    margin-top: 16px;
}

.pf-credits-list li {
    color:     rgba(255,255,255,0.9);
    font-size: 14px;
    font-weight: 500;
}

.pf-credits-cta-actions {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    min-width:      220px;
}

/* ============================================================
   BENEFITS GRID
   ============================================================ */
.pf-benefits-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
}

.pf-benefit-card {
    text-align:    center;
    padding:       32px 24px;
    border-radius: var(--pf-radius-md);
    background:    var(--pf-bg);
    border:        1px solid var(--pf-border);
    transition:    var(--pf-transition);
}

.pf-benefit-card:hover {
    border-color: var(--pf-cyan);
    box-shadow:   var(--pf-shadow-md);
    transform:    translateY(-4px);
}

.pf-benefit-icon { font-size: 40px; margin-bottom: 16px; }
.pf-benefit-card h4 { margin-bottom: 8px; color: var(--pf-dark); }
.pf-benefit-card p  { font-size: 14px; margin: 0; }

/* ============================================================
   RESPONSIVE — HOME
   ============================================================ */
@media (max-width: 1024px) {
    .pf-types-grid    { grid-template-columns: repeat(2, 1fr); }
    .pf-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .pf-credits-cta   { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    .pf-hero-form-fields { grid-template-columns: 1fr 1fr; }
    .pf-types-grid       { grid-template-columns: 1fr 1fr; }
    .pf-hero-ctas        { flex-direction: column; }
    .pf-credits-cta-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .pf-hero-form-fields { grid-template-columns: 1fr; }
    .pf-types-grid       { grid-template-columns: 1fr; }
    .pf-benefits-grid    { grid-template-columns: 1fr; }
}

/* ============================================================
   CREDITS PAGE
   ============================================================ */
.pf-credit-cards-grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 380px));
    justify-content:       center;
    gap:                   24px;
    margin-bottom:         64px;
}

.pf-credit-info-card {
    background:     #fff;
    border-radius:  var(--pf-radius-md);
    padding:        32px 24px;
    border:         2px solid var(--pf-border);
    transition:     var(--pf-transition);
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.pf-credit-info-card:hover      { border-color: var(--pf-primary); box-shadow: var(--pf-shadow-md); transform: translateY(-4px); }
.pf-credit-info-card.pf-credit-info-featured { border-color: var(--pf-cyan); box-shadow: var(--pf-shadow-md); }

.pf-credit-info-badge {
    position:      absolute;
    top:           -14px;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--pf-cyan);
    color:         #fff;
    padding:       4px 16px;
    border-radius: var(--pf-radius-full);
    font-size:     12px;
    font-weight:   700;
    white-space:   nowrap;
}

.pf-credit-info-icon { font-size: 48px; line-height: 1; }
.pf-credit-info-card h3 { font-size: 20px; color: var(--pf-dark); margin: 0; }
.pf-credit-info-card p  { color: var(--pf-text-muted); font-size: 14px; margin: 0; flex: 1; }

.pf-credit-info-list { display: flex; flex-direction: column; gap: 8px; }
.pf-credit-info-list li { font-size: 13px; color: var(--pf-text); }

/* Process steps */
.pf-process-grid {
    display:         flex;
    align-items:     center;
    gap:             16px;
    justify-content: center;
    flex-wrap:       wrap;
}

.pf-process-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            12px;
    max-width:      180px;
}

.pf-process-number {
    width:           56px;
    height:          56px;
    background:      var(--pf-primary);
    color:           #fff;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    font-weight:     800;
    box-shadow:      var(--pf-shadow-md);
    flex-shrink:     0;
}

.pf-process-step h4 { color: var(--pf-dark); font-size: 15px; margin: 0; }
.pf-process-step p  { font-size: 13px; margin: 0; }
.pf-process-arrow   { font-size: 28px; color: var(--pf-cyan); font-weight: 800; flex-shrink: 0; }

/* Credits layout */
.pf-credits-layout {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   48px;
    align-items:           start;
}

.pf-credits-contact-card {
    background:    var(--pf-dark);
    border-radius: var(--pf-radius-md);
    padding:       24px;
    margin-bottom: 20px;
}

.pf-credits-contact-card h3 { color: #fff; margin-bottom: 8px; font-size: 16px; }
.pf-credits-contact-card p  { color: rgba(255,255,255,0.75); font-size: 14px; margin-bottom: 16px; }

/* FAQ */
.pf-faq-wrap {
    background:    #fff;
    border-radius: var(--pf-radius-md);
    border:        1px solid var(--pf-border);
    overflow:      hidden;
}

.pf-faq-wrap h3 {
    padding:     16px 20px;
    margin:      0;
    font-size:   16px;
    color:       var(--pf-dark);
    border-bottom: 1px solid var(--pf-border);
    background:  var(--pf-bg);
}

.pf-faq-item        { border-bottom: 1px solid var(--pf-border); }
.pf-faq-item:last-child { border-bottom: none; }

.pf-faq-question {
    width:           100%;
    text-align:      left;
    padding:         14px 20px;
    background:      none;
    border:          none;
    cursor:          pointer;
    font-size:       14px;
    font-weight:     600;
    color:           var(--pf-text);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             12px;
    transition:      var(--pf-transition-fast);
    font-family:     var(--pf-font);
}

.pf-faq-question:hover { background: rgba(21,101,192,0.04); color: var(--pf-primary); }
.pf-faq-icon           { font-size: 20px; font-weight: 800; color: var(--pf-primary); flex-shrink: 0; }

.pf-faq-answer         { display: none; padding: 0 20px 14px; }
.pf-faq-item.pf-faq-open .pf-faq-answer { display: block; }
.pf-faq-answer p       { font-size: 14px; margin: 0; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.pf-about-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   64px;
    align-items:           start;
}

.pf-about-tag {
    display:        inline-block;
    background:     rgba(21,101,192,0.1);
    color:          var(--pf-primary);
    padding:        4px 14px;
    border-radius:  var(--pf-radius-full);
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  16px;
}

.pf-about-text h2 { font-size: 28px; margin-bottom: 20px; }

.pf-about-values { display: flex; flex-direction: column; gap: 16px; }

.pf-value-card {
    display:       flex;
    gap:           16px;
    align-items:   flex-start;
    padding:       20px;
    background:    var(--pf-bg);
    border-radius: var(--pf-radius-md);
    border:        1px solid var(--pf-border);
    transition:    var(--pf-transition);
}

.pf-value-card:hover { border-color: var(--pf-primary); background: #fff; box-shadow: var(--pf-shadow-sm); }
.pf-value-icon       { font-size: 32px; flex-shrink: 0; }
.pf-value-card h4    { color: var(--pf-dark); margin-bottom: 4px; font-size: 16px; }
.pf-value-card p     { font-size: 13px; margin: 0; }

.pf-diff-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
}

.pf-diff-card {
    background:    #fff;
    border-radius: var(--pf-radius-md);
    padding:       28px 20px;
    border:        1px solid var(--pf-border);
    text-align:    center;
    transition:    var(--pf-transition);
}

.pf-diff-card:hover { border-color: var(--pf-cyan); box-shadow: var(--pf-shadow-md); transform: translateY(-4px); }
.pf-diff-icon       { font-size: 36px; display: block; margin-bottom: 12px; }
.pf-diff-card h4    { color: var(--pf-dark); margin-bottom: 8px; }
.pf-diff-card p     { font-size: 13px; margin: 0; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.pf-contact-cards {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
    margin-bottom:         48px;
}

.pf-contact-card {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     20px;
    background:  #fff;
    border:      2px solid var(--pf-border);
    border-radius: var(--pf-radius-md);
    text-decoration: none;
    transition:  var(--pf-transition);
}

.pf-contact-card:hover          { border-color: var(--pf-primary); transform: translateY(-3px); box-shadow: var(--pf-shadow-md); }
.pf-contact-card-wa             { border-color: #25d366; }
.pf-contact-card-wa:hover       { background: rgba(37,211,102,0.04); }
.pf-contact-card-icon           { font-size: 32px; flex-shrink: 0; }

.pf-contact-card div            { display: flex; flex-direction: column; gap: 2px; }
.pf-contact-card-type           { font-size: 11px; font-weight: 700; color: var(--pf-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.pf-contact-card-value          { font-size: 14px; font-weight: 700; color: var(--pf-dark); }
.pf-contact-card-action         { font-size: 12px; color: var(--pf-primary); font-weight: 600; }

.pf-contact-layout {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   48px;
    align-items:           start;
}

.pf-contact-info-block {
    background:    #fff;
    border:        1px solid var(--pf-border);
    border-radius: var(--pf-radius-md);
    padding:       20px;
    margin-bottom: 16px;
}

.pf-contact-info-block h3     { font-size: 16px; color: var(--pf-dark); margin-bottom: 8px; }
.pf-contact-info-block p      { font-size: 14px; margin: 0; }
.pf-contact-cta-props         { border-left: 4px solid var(--pf-primary); }
.pf-contact-cta-credits       { border-left: 4px solid var(--pf-cyan); }

.pf-social-links              { display: flex; flex-direction: column; gap: 8px; }

.pf-social-link {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 14px;
    border-radius: var(--pf-radius-sm);
    font-size:     14px;
    font-weight:   600;
    text-decoration: none;
    transition:    var(--pf-transition-fast);
    color:         var(--pf-text);
}

.pf-social-link:hover  { background: var(--pf-bg); }
.pf-social-link span   { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; }
.pf-social-fb span     { background: #1877F2; }
.pf-social-ig span     { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.pf-social-li span     { background: #0A66C2; }

/* ============================================================
   RESPONSIVE — INNER PAGES
   ============================================================ */
@media (max-width: 1024px) {
    .pf-credit-cards-grid { grid-template-columns: 1fr; }
    .pf-credits-layout    { grid-template-columns: 1fr; }
    .pf-about-layout      { grid-template-columns: 1fr; }
    .pf-contact-layout    { grid-template-columns: 1fr; }
    .pf-diff-grid         { grid-template-columns: repeat(2, 1fr); }
    .pf-contact-cards     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .pf-process-grid  { flex-direction: column; }
    .pf-process-arrow { transform: rotate(90deg); }
    .pf-diff-grid     { grid-template-columns: 1fr; }
    .pf-contact-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   SINGLE PROPERTY
   ============================================================ */
.pf-single-breadcrumb {
    background: var(--pf-dark);
    padding:    12px 0;
}

.pf-single-breadcrumb .pf-breadcrumb { justify-content: flex-start; margin-top: 0; }

.pf-single-section { padding-top: 40px !important; }

.pf-single-layout {
    display:               grid;
    grid-template-columns: 1fr 340px;
    gap:                   48px;
    align-items:           start;
}

/* Title */
.pf-single-title-wrap  { margin-bottom: 24px; }
.pf-single-badges      { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-single-title       { font-size: clamp(22px, 3vw, 34px); color: var(--pf-dark); margin-bottom: 8px; line-height: 1.2; }
.pf-single-location    { color: var(--pf-text-muted); font-size: 16px; margin: 0 0 4px; }
.pf-single-address     { color: var(--pf-text-muted); font-size: 14px; margin: 0; }

/* Gallery */
.pf-gallery-wrap { margin-bottom: 40px; border-radius: var(--pf-radius-md); overflow: hidden; border: 1px solid var(--pf-border); }

.pf-gallery-main {
    position:   relative;
    overflow:   hidden;
    background: #000;
    height:     460px;
}

.pf-gallery-main-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
    display:    block;
}

.pf-gallery-overlay {
    position: absolute;
    bottom:   16px;
    right:    16px;
}

.pf-gallery-zoom {
    background:    rgba(0,0,0,0.6);
    color:         #fff;
    border:        none;
    width:         44px;
    height:        44px;
    border-radius: var(--pf-radius-sm);
    font-size:     20px;
    cursor:        pointer;
    transition:    var(--pf-transition-fast);
    backdrop-filter: blur(4px);
}

.pf-gallery-zoom:hover { background: var(--pf-primary); }

.pf-gallery-thumbs {
    display:    flex;
    gap:        4px;
    padding:    4px;
    background: #f5f7fa;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pf-gallery-thumb {
    flex-shrink: 0;
    width:       80px;
    height:      60px;
    overflow:    hidden;
    border-radius: 4px;
    cursor:      pointer;
    opacity:     0.6;
    transition:  var(--pf-transition-fast);
    border:      2px solid transparent;
}

.pf-gallery-thumb:hover,
.pf-gallery-thumb.pf-thumb-active { opacity: 1; border-color: var(--pf-primary); }

.pf-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   SINGLE PROPERTY — Columns
   ============================================================ */
.pf-single-main { min-width: 0; }

.pf-single-sidebar {
    position:        sticky;
    top:             calc(var(--pf-header-height) + 24px);
    display:         flex;
    flex-direction:  column;
    gap:             24px;
    min-width:       0;
}

body.admin-bar .pf-single-sidebar { top: calc(var(--pf-header-height) + 32px + 24px); }

.pf-single-section-block { margin-bottom: 40px; }
.pf-single-section-block h2 {
    font-size:      22px;
    margin-bottom:  20px;
    padding-bottom: 12px;
    border-bottom:  2px solid var(--pf-border);
}

.pf-single-content { color: var(--pf-text-muted); line-height: 1.8; }
.pf-single-content p { margin-bottom: 16px; }

/* Features grid */
.pf-features-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   16px;
}
.pf-feature-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 16px;
    background:    var(--pf-bg);
    border:        1px solid var(--pf-border);
    border-radius: var(--pf-radius-md);
}
.pf-feature-icon  { font-size: 22px; flex-shrink: 0; }
.pf-feature-info  { display: flex; flex-direction: column; min-width: 0; }
.pf-feature-label { font-size: 12px; color: var(--pf-text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.pf-feature-value { font-size: 15px; font-weight: 700; color: var(--pf-dark); }

/* Video / virtual tour (responsive 16:9) */
.pf-video-wrap {
    position:      relative;
    width:         100%;
    padding-top:   56.25%;
    border-radius: var(--pf-radius-md);
    overflow:      hidden;
    background:    #000;
}
.pf-video-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}

/* ============================================================
   SINGLE PROPERTY — Sidebar (price card / summary / share)
   ============================================================ */
.pf-price-card {
    background:    var(--pf-bg-card);
    border:        1px solid var(--pf-border);
    border-radius: var(--pf-radius-lg);
    box-shadow:    var(--pf-shadow-md);
    overflow:      hidden;
}
.pf-price-card-header {
    background:  linear-gradient(135deg, var(--pf-primary), var(--pf-dark));
    color:       #fff;
    padding:     16px 20px;
    font-weight: 600;
    font-size:   14px;
}
.pf-price-card-body {
    padding:       24px 20px;
    text-align:    center;
    border-bottom: 1px solid var(--pf-border);
}
.pf-price-main      { font-size: 30px; font-weight: 800; color: var(--pf-primary); line-height: 1.1; }
.pf-price-secondary { font-size: 15px; color: var(--pf-text-muted); margin-top: 6px; }
.pf-price-consult   { font-size: 20px; font-weight: 700; color: var(--pf-dark); }
.pf-price-card-ctas { display: flex; flex-direction: column; gap: 10px; padding: 20px; }

.pf-single-summary {
    background:    var(--pf-bg-card);
    border:        1px solid var(--pf-border);
    border-radius: var(--pf-radius-lg);
    box-shadow:    var(--pf-shadow-sm);
    padding:       20px;
}
.pf-single-summary h4 { font-size: 16px; margin-bottom: 14px; }
.pf-summary-list li {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 0;
    border-bottom:   1px solid var(--pf-border);
    font-size:       14px;
}
.pf-summary-list li:last-child { border-bottom: none; }
.pf-summary-list span   { color: var(--pf-text-muted); }
.pf-summary-list strong { color: var(--pf-dark); }

.pf-single-share {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.pf-single-share > span {
    font-size:      13px;
    font-weight:    700;
    color:          var(--pf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pf-single-share a {
    width:           38px;
    height:          38px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      var(--pf-bg);
    border:          1px solid var(--pf-border);
    font-weight:     800;
    transition:      var(--pf-transition-fast);
}
.pf-single-share a:hover { background: var(--pf-primary); color: #fff; border-color: var(--pf-primary); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.pf-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(0,0,0,0.92);
    display:         none;
    align-items:     center;
    justify-content: center;
}
.pf-lightbox.pf-lightbox-open { display: flex; }
.pf-lightbox-content { max-width: 90vw; max-height: 85vh; }
.pf-lightbox-content img {
    max-width:     90vw;
    max-height:    85vh;
    object-fit:    contain;
    border-radius: var(--pf-radius-sm);
}
.pf-lightbox-close,
.pf-lightbox-prev,
.pf-lightbox-next {
    position:        absolute;
    background:      rgba(255,255,255,0.12);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    width:           48px;
    height:          48px;
    border-radius:   50%;
    font-size:       24px;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--pf-transition-fast);
}
.pf-lightbox-close:hover,
.pf-lightbox-prev:hover,
.pf-lightbox-next:hover { background: var(--pf-primary); }
.pf-lightbox-close { top: 20px; right: 20px; }
.pf-lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.pf-lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* ============================================================
   FORMS — ProLaFer intro line above CDPEngine forms
   ============================================================ */
.pf-form-intro {
    margin:     -8px 0 24px;
    font-size:  15px;
    color:      var(--pf-text-muted);
    line-height: 1.6;
}

/* Disabled submit button (e.g. credit form before consent is given) */
.cdpe-btn:disabled,
.cdpe-btn[disabled] {
    opacity:   0.5;
    cursor:    not-allowed;
    transform: none !important;
}

/* Data-processing consent checkbox in the credit form */
.pf-credit-consent { margin-top: 4px; }
.pf-checkbox-label {
    display:        flex;
    align-items:    flex-start;
    gap:            10px;
    font-size:      13px;
    font-weight:    400;
    color:          var(--pf-text-muted);
    line-height:    1.5;
    cursor:         pointer;
    text-transform: none;
    letter-spacing: 0;
}
/* Reset the plugin's full-width text-input styling so the checkbox
   renders as a real, correctly sized checkbox (key on mobile). */
.pf-checkbox-label input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance:    checkbox;
    margin:        2px 0 0;
    padding:       0;
    width:         20px;
    height:        20px;
    min-width:     20px;
    flex-shrink:   0;
    border:        0;
    background:    none;
    box-shadow:    none;
    accent-color:  var(--pf-primary);
    cursor:        pointer;
}

/* ============================================================
   MISC — Hero form, card hover, page columns
   ============================================================ */
.pf-hero-form { width: 100%; }

.pf-property-card { transition: var(--pf-transition); }
.pf-property-card:hover { transform: translateY(-6px); box-shadow: var(--pf-shadow-hover); }

.pf-credits-form-col,
.pf-credits-aside-col,
.pf-contact-form-col,
.pf-contact-info-col,
.pf-credits-cta-text { min-width: 0; }

.pf-credits-aside-col,
.pf-contact-info-col { display: flex; flex-direction: column; gap: 24px; }

/* ============================================================
   SINGLE PROPERTY — Responsive
   ============================================================ */
@media screen and (max-width: 900px) {
    .pf-single-layout  { grid-template-columns: 1fr; }
    .pf-single-sidebar { position: static; }
    body.admin-bar .pf-single-sidebar { top: 0; }
}

/* ============================================================
   FLOATING "PUBLICA CON NOSOTROS" CTA
   Bottom-left so it never collides with the WhatsApp button
   (which the plugin pins bottom-right).
   ============================================================ */
.pf-publish-float {
    position:      fixed;
    bottom:        28px;
    left:          28px;
    z-index:       9998;
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       12px 20px;
    background:    linear-gradient(135deg, var(--pf-primary), var(--pf-dark));
    color:         #fff !important;
    font-weight:   700;
    font-size:     14px;
    line-height:   1;
    border-radius: var(--pf-radius-full);
    box-shadow:    0 4px 20px rgba(21,101,192,0.45);
    transition:    var(--pf-transition);
}

.pf-publish-float:hover {
    color:      #fff !important;
    transform:  translateY(-3px);
    box-shadow: 0 8px 30px rgba(21,101,192,0.55);
}

.pf-publish-float-icon { font-size: 18px; line-height: 1; }

body.admin-bar .pf-publish-float { /* unaffected; bar is at top */ }

@media (max-width: 600px) {
    /* Compact circular button (mirrors the WhatsApp float on the right). */
    .pf-publish-float {
        bottom:          16px;
        left:            16px;
        width:           52px;
        height:          52px;
        padding:         0;
        gap:             0;
        justify-content: center;
        border-radius:   50%;
    }
    .pf-publish-float-text { display: none; }
    .pf-publish-float-icon { font-size: 22px; }
}