:root{
    --bg:#131a22;
    --bg-soft:#19222c;
    --bg-card:#ffffff;
    --bg-light:#f5f7fa;
    --text:#18202a;
    --text-soft:#5d6977;
    --white:#ffffff;
    --border:#e4e8ee;

    --gold:#cfaf74;
    --gold-2:#e6cc9d;

    --dark:#10161d;
    --dark-2:#182029;

    --shadow:0 14px 35px rgba(0,0,0,.12);
    --shadow-2:0 10px 24px rgba(0,0,0,.16);

    --footer-card:rgba(255,255,255,.04);
    --footer-border:rgba(255,255,255,.08);

    --radius:22px;
    --radius-sm:16px;
    --contenedor:min(1180px, calc(100% - 2rem));
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg-light);
    color:var(--text);
    line-height:1.6;
    padding-top:92px;
}

body.sin-scroll{
    overflow:hidden;
}

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

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

.seccion,
header,
footer,
section{
    scroll-margin-top:110px;
}

.contenedor{
    width:var(--contenedor);
    margin:0 auto;
}

/* =========================================
   HEADER FIJO
========================================= */
.header-fijo{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(16,22,29,.88);
    backdrop-filter:blur(10px);
    box-shadow:0 6px 18px rgba(0,0,0,.14);
}

.header-barra-color{
    width:100%;
    height:4px;
    background:linear-gradient(90deg, var(--gold), #a8864d, var(--gold-2));
}

.nav-contenedor{
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.logo-marca{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
}

.logo-marca img{
    width:56px;
    height:56px;
    object-fit:contain;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    padding:.25rem;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.logo-texto{
    display:flex;
    flex-direction:column;
    line-height:1.2;
    color:var(--white);
}

.logo-texto strong{
    font-size:1rem;
    letter-spacing:.2px;
}

.logo-texto span{
    color:rgba(255,255,255,.74);
    font-size:.84rem;
}

.menu-escritorio{
    display:flex;
    align-items:center;
    gap:.4rem;
    flex-wrap:wrap;
}

.menu-escritorio a{
    position:relative;
    color:rgba(255,255,255,.90);
    font-weight:600;
    padding:.85rem 1rem;
    border-radius:999px;
    transition:.28s ease;
}

.menu-escritorio a::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:8px;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:center;
    transition:.28s ease;
}

.menu-escritorio a:hover{
    color:var(--white);
    background:rgba(255,255,255,.07);
}

.menu-escritorio a:hover::after{
    transform:scaleX(1);
}

.btn-menu-movil{
    display:none;
    width:48px;
    height:48px;
    border:none;
    border-radius:14px;
    background:rgba(91, 91, 91, 0.443);
    color:var(--white);
    font-size:1.2rem;
    cursor:pointer;
    transition:.25s ease;
}

.btn-menu-movil:hover,
.btn-menu-movil:active{
    background:rgba(255, 255, 255, 0.596);
    transform:translateY(-2px);
}

/* =========================================
   MENU MOVIL
========================================= */
.overlay-menu{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
    z-index:1100;
}

.overlay-menu.activo{
    opacity:1;
    visibility:visible;
}

.menu-movil{
    position:fixed;
    top:0;
    right:-330px;
    width:min(88vw, 330px);
    height:100vh;
    background:rgba(16,22,29,.98);
    color:var(--white);
    z-index:1200;
    transition:.30s ease;
    padding:1rem;
    box-shadow:-18px 0 40px rgba(0,0,0,.24);
    border-left:1px solid rgba(255,255,255,.08);
}

.menu-movil.activo{
    right:0;
}

.menu-movil-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:1rem;
}

.menu-movil-top span{
    font-size:1.05rem;
    font-weight:700;
}

.menu-movil-top button{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    color:var(--white);
    cursor:pointer;
    transition:.25s ease;
}

.menu-movil-top button:hover,
.menu-movil-top button:active{
    background:rgba(255,255,255,.14);
}

.menu-movil-links{
    display:flex;
    flex-direction:column;
    gap:.55rem;
}

.menu-movil-links a{
    position:relative;
    color:rgba(255,255,255,.92);
    font-weight:600;
    padding:1rem;
    border-radius:16px;
    transition:.25s ease;
    background:transparent;
    border:1px solid transparent;
}

.menu-movil-links a::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:10px;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:center;
    transition:.28s ease;
}

.menu-movil-links a:hover,
.menu-movil-links a:active{
    color:var(--white);
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.08);
}

.menu-movil-links a:hover::after,
.menu-movil-links a:active::after{
    transform:scaleX(1);
}

/* =========================================
   HERO
========================================= */
.hero{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    background:url("../imagenes-sitio/condominio_cuerna.jpeg") center/cover no-repeat;
    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(14,18,24,.78) 0%, rgba(14,18,24,.58) 45%, rgba(14,18,24,.48) 100%);
}

.hero-contenido{
    position:relative;
    z-index:2;
    max-width:760px;
    color:var(--white);
    padding:4rem 0;
}

.etiqueta-seccion{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.7rem 1.1rem;
    border-radius:999px;
    background:rgba(22,30,40,.88);
    color:var(--gold-2);
    border:1px solid rgba(207,175,116,.24);
    font-weight:700;
    letter-spacing:.2px;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
    margin-bottom:1rem;
}

.etiqueta-hero{
    background:rgba(255,255,255,.08);
    color:#f5e4bd;
    border-color:rgba(255,255,255,.12);
}

.hero h1{
    font-size:clamp(2.1rem, 5vw, 4.3rem);
    line-height:1.08;
    margin-bottom:1rem;
}

.hero p{
    font-size:1.08rem;
    color:rgba(255,255,255,.88);
    max-width:650px;
}

.hero-botones{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:1.8rem;
}

.btn-principal,
.btn-secundario{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 1.35rem;
    border-radius:15px;
    font-weight:700;
    transition:.28s ease;
}

.btn-principal{
    background:linear-gradient(135deg, var(--gold), #b89252);
    color:#111;
    box-shadow:0 12px 22px rgba(207,175,116,.24);
}

.btn-principal:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 28px rgba(207,175,116,.32);
}

.btn-secundario{
    background:rgba(255,255,255,.08);
    color:var(--white);
    border:1px solid rgba(255,255,255,.12);
}

.btn-secundario:hover{
    background:rgba(255,255,255,.14);
    transform:translateY(-2px);
}

.btn-full{
    width:100%;
    border:none;
    cursor:pointer;
}

/* =========================================
   SECCIONES
========================================= */
.seccion{
    padding:5rem 0;
}

.seccion-clara{
    background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.encabezado-seccion{
    margin-bottom:2rem;
}

.encabezado-seccion.centrado{
    text-align:center;
    max-width:760px;
    margin:0 auto 2rem;
}

.encabezado-seccion h2{
    font-size:clamp(1.8rem, 3.4vw, 2.7rem);
    line-height:1.18;
    margin-bottom:.7rem;
    color:#111827;
}

.encabezado-seccion p{
    color:var(--text-soft);
}

/* =========================================
   NOSOTROS
========================================= */
.grid-nosotros{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:1.5rem;
    align-items:stretch;
}

.card-texto,
.card-imagen{
    background:var(--bg-card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}

.card-texto{
    padding:1.6rem;
}

.card-texto p{
    color:#4b5563;
    margin-bottom:1rem;
}

.card-imagen{
    overflow:hidden;
    min-height:360px;
}

.card-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.card-imagen:hover img{
    transform:scale(1.04);
}

/* =========================================
   CARDS SERVICIOS
========================================= */
.grid-cards-servicios{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.2rem;
}

.card-servicio,
.card-filosofia{
    position:relative;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.4rem;
    box-shadow:var(--shadow);
    transition:.28s ease;
    overflow:hidden;
}

.card-servicio::before,
.card-filosofia::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, var(--gold), #a8864d, var(--gold-2));
}

.card-servicio:hover,
.card-filosofia:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 36px rgba(0,0,0,.12);
}

.icono-card{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(207,175,116,.18), rgba(207,175,116,.08));
    color:#9d7b46;
    font-size:1.4rem;
    margin-bottom:1rem;
    border:1px solid rgba(207,175,116,.18);
}

.card-servicio h3,
.card-filosofia h3{
    margin-bottom:.9rem;
    color:#111827;
}

.card-servicio ul,
.card-filosofia ul{
    display:grid;
    gap:.65rem;
}

.card-servicio li,
.card-filosofia li{
    position:relative;
    padding-left:1rem;
    color:#4b5563;
}

.card-servicio li::before,
.card-filosofia li::before{
    content:"•";
    position:absolute;
    left:0;
    color:#9d7b46;
    font-weight:700;
}

/* =========================================
   AREAS
========================================= */
.grid-areas{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.15rem;
}

.card-area{
    position:relative;
    min-height:250px;
    overflow:hidden;
    border-radius:22px;
    box-shadow:var(--shadow);
}

.card-area img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}

.card-area::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.08));
}

.overlay-area{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:1rem;
}

.overlay-area span{
    display:inline-block;
    color:var(--white);
    font-weight:700;
    font-size:1rem;
    padding:.55rem .9rem;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
}

.card-area:hover img{
    transform:scale(1.07);
}

/* =========================================
   MENSAJES
========================================= */
.mensaje{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:1rem 1.1rem;
    border-radius:16px;
    font-weight:600;
    margin-bottom:1.2rem;
    box-shadow:var(--shadow);
    border:1px solid transparent;
}

.mensaje i{
    font-size:1.15rem;
}

.mensaje-exito{
    background:#ecfdf3;
    color:#166534;
    border-color:#b7efc8;
}

.mensaje-error{
    background:#fef2f2;
    color:#991b1b;
    border-color:#f4b7b7;
}

.mensaje-aviso{
    background:#fff9ec;
    color:#8a6415;
    border-color:#efd9a4;
}

/* =========================================
   COMENTARIOS
========================================= */
.comentarios-layout{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:1.3rem;
    align-items:start;
}

.comentarios-panel,
.formulario-panel{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.comentarios-panel{
    padding:1rem;
    position:relative;
    overflow:hidden;
}

.comentarios-panel::before,
.formulario-panel::before{
    content:"";
    display:block;
    width:100%;
    height:4px;
    margin:-1rem -1rem 1rem;
    background:linear-gradient(90deg, var(--gold), #a8864d, var(--gold-2));
}

.formulario-panel::before{
    margin:-1.4rem -1.4rem 1rem;
}

.comentarios-scroll{
    max-height:560px;
    overflow:auto;
    padding-right:.4rem;
    scroll-behavior:smooth;
}

.comentarios-scroll::-webkit-scrollbar{
    width:9px;
}

.comentarios-scroll::-webkit-scrollbar-track{
    background:#eef2f6;
    border-radius:999px;
}

.comentarios-scroll::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, #d5dbe3, #bfc8d4);
    border-radius:999px;
    border:2px solid #eef2f6;
}

.card-comentario{
    display:flex;
    gap:1rem;
    padding:1rem;
    border:1px solid #edf0f4;
    border-radius:20px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    margin-bottom:1rem;
    transition:.25s ease;
    box-shadow:0 6px 18px rgba(15, 23, 42, .04);
}

.card-comentario:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(0,0,0,.08);
    border-color:#e4d1ad;
}

.avatar-comentario{
    width:54px;
    height:54px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:var(--white);
    background:linear-gradient(135deg, #1f2937, #4b5563);
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.contenido-comentario{
    flex:1;
}

.top-comentario{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.55rem;
}

.top-comentario h4{
    font-size:1rem;
    color:#111827;
    margin-bottom:.15rem;
}

.top-comentario small{
    color:#6b7280;
}

.estrellas-vista{
    display:flex;
    gap:.16rem;
    color:#d1a85a;
    font-size:.95rem;
    flex-shrink:0;
    padding:.4rem .65rem;
    background:#fff8ec;
    border:1px solid #f2e2be;
    border-radius:999px;
}

.contenido-comentario p{
    color:#4b5563;
    word-break:break-word;
    line-height:1.65;
}

.sin-comentarios{
    padding:1rem;
    border-radius:16px;
    background:#f8fafc;
    color:#64748b;
    border:1px dashed #cbd5e1;
}

.formulario-panel{
    padding:1.4rem;
    position:relative;
    overflow:hidden;
}

.formulario-panel h3{
    margin-bottom:1rem;
    color:#111827;
}

.usuario-actual{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:1rem;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e8edf3;
    margin-bottom:1rem;
    color:#374151;
}

.form-comentario{
    display:grid;
    gap:1rem;
}

.form-comentario input,
.form-comentario textarea{
    width:100%;
    border:1px solid #dbe2ea;
    border-radius:16px;
    padding:1rem;
    font:inherit;
    outline:none;
    transition:.25s ease;
    background:#fff;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.02);
}

.form-comentario input:focus,
.form-comentario textarea:focus{
    border-color:#b08a4d;
    box-shadow:0 0 0 4px rgba(207,175,116,.14);
}

.form-comentario textarea{
    min-height:180px;
    resize:vertical;
}

.grupo-estrellas{
    display:grid;
    gap:.55rem;
}

.grupo-estrellas label{
    font-weight:700;
    color:#111827;
}

.rating{
    direction:rtl;
    display:inline-flex;
    gap:.25rem;
    width:max-content;
    padding:.7rem .9rem;
    border-radius:14px;
    background:#fffaf0;
    border:1px solid #f0dfb9;
}

.rating input{
    display:none;
}

.rating label{
    cursor:pointer;
    font-size:1.6rem;
    color:#cfd6de;
    transition:.2s ease;
}

.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label{
    color:#d1a85a;
}

/* =========================================
   FILOSOFIA
========================================= */
.grid-filosofia{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.2rem;
}

.card-filosofia p{
    color:#4b5563;
}

/* =========================================
   FOOTER NORMAL Y MAS COMPACTO
========================================= */
.footer{
    background:linear-gradient(180deg, #22303d 0%, #1a2530 100%);
    color:#dbe4ec;
    margin-top:1.5rem;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr .9fr 1.1fr;
    gap:1.4rem;
    padding:2rem 0 1.4rem;
    align-items:start;
}

.footer-col{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    backdrop-filter:none;
    box-shadow:none;
    min-width:0;
}

.footer-col:hover{
    transform:none;
    border:none;
    box-shadow:none;
}

.footer h3,
.footer-col h3{
    color:#ffffff;
    margin-bottom:.8rem;
    font-size:1.02rem;
    font-weight:700;
}

.footer p,
.footer li,
.footer a{
    color:#c7d2dd;
    font-size:.98rem;
    line-height:1.7;
}

.footer-col ul{
    display:grid;
    gap:.45rem;
}

.footer a{
    transition:.22s ease;
}

.footer a:hover{
    color:#ffffff;
}

.mapa-footer{
    margin-top:.8rem;
    overflow:hidden;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.mapa-footer iframe{
    width:100%;
    height:170px;
    border:0;
    display:block;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    padding:.95rem 1rem;
    color:#b8c4cf;
    font-size:.93rem;
    background:rgba(255,255,255,.03);
}


/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1024px){
    .grid-cards-servicios,
    .grid-filosofia{
        grid-template-columns:repeat(2, 1fr);
    }

    .grid-areas{
        grid-template-columns:repeat(2, 1fr);
    }

    .grid-nosotros,
    .comentarios-layout,
    .footer-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 860px){
    body{
        padding-top:84px;
    }

    .nav-contenedor{
        min-height:80px;
    }

    .menu-escritorio{
        display:none;
    }

    .btn-menu-movil{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .hero{
        min-height:76vh;
    }

    .hero-contenido{
        padding:3rem 0;
    }
}

@media (max-width: 640px){
    .contenedor{
        width:min(1180px, calc(100% - 1rem));
    }

    .logo-marca img{
        width:48px;
        height:48px;
    }

    .logo-texto strong{
        font-size:.95rem;
    }

    .logo-texto span{
        font-size:.78rem;
    }

    .hero{
        min-height:72vh;
    }

    .hero-botones{
        flex-direction:column;
    }

    .btn-principal,
    .btn-secundario{
        width:100%;
    }

    .seccion{
        padding:4rem 0;
    }

    .grid-cards-servicios,
    .grid-filosofia,
    .grid-areas{
        grid-template-columns:1fr;
    }

    .card-comentario{
        flex-direction:column;
    }

    .top-comentario{
        flex-direction:column;
        align-items:flex-start;
    }

    .comentarios-scroll{
        max-height:470px;
    }

    .footer-col{
        padding:1rem;
    }
}

@media (max-width: 380px){
    .menu-movil{
        width:92vw;
    }

    .etiqueta-seccion{
        font-size:.9rem;
        padding:.65rem .95rem;
    }

    .hero h1{
        font-size:1.95rem;
    }

    .card-texto,
    .card-servicio,
    .card-filosofia,
    .formulario-panel{
        padding:1.1rem;
    }
}

/* RESPONSIVE FOOTER */
@media (max-width: 1024px){
    .footer-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:1.2rem;
    }
}

@media (max-width: 640px){
    .footer-grid{
        grid-template-columns:1fr;
        gap:1rem;
        padding:1.5rem 0 1.2rem;
    }

    .footer h3,
    .footer-col h3{
        margin-bottom:.55rem;
    }

    .footer p,
    .footer li,
    .footer a{
        font-size:.95rem;
        line-height:1.6;
    }

    .mapa-footer iframe{
        height:150px;
    }

    .footer-bottom{
        font-size:.88rem;
        padding:.85rem .8rem;
    }
}