/* Generado por tools/build-css.mjs — NO editar a mano.
   Es la unión, en el mismo orden, de los CSS propios de la vista "nosotros".
   Editar los archivos originales y volver a correr el script. */

/* ===== css/base/fonts-pages.css ===== */
/* Tipografías de Propiedades y Nosotros, servidas desde el propio hosting (antes venían de Google Fonts).
   Son los mismos archivos y los mismos pesos que servía Google, así que el texto se ve igual.
   Subsets latin y latin-ext. Generado con scratchpad/qa/build-fonts.mjs. */

/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tipografía del header (misma en las 3 vistas) ----
   Propiedades y Nosotros usan la Raleway variable, que ya descargan y contiene el peso 300:
   así el header no agrega los 21,9 KB de la versión estática (se ve igual, es la misma tipografía). */

/* latin-ext */
@font-face {
    font-family: 'Raleway Header';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Raleway Header';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/raleway/raleway-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== css/base/fonts-fallback.css ===== */
/* Respaldo tipográfico con métricas ajustadas.
   -------------------------------------------------------------------------------------------
   GENERADO por tools/build-font-fallback.mjs — no editar a mano.

   Mientras Raleway y Montserrat se descargan, el navegador dibuja el texto con la fuente del
   sistema. Si esa fuente ocupa distinto espacio, al llegar la tipografía real el texto reacomoda
   las líneas y la página salta (CLS). Pasaba en Propiedades: el h1 del hero ocupaba 2 líneas con
   el respaldo y 1 con Montserrat, y todo lo de abajo subía 61 px de golpe.

   Estas familias son la fuente del sistema con el tamaño y las métricas corregidas para que ocupe
   exactamente el mismo espacio que la tipografía real. No se descarga nada: src es local().

   Dos detalles que importan:
   · Al declarar la cara con font-weight: N, el navegador NO engorda la Arial (la toma como si ya
     fuera de ese peso), así que cada porcentaje se mide contra la Arial normal.
   · Los porcentajes salen de medir la página real, no un canvas: así entran también los pesos que
     el navegador sintetiza (Raleway 600/700/800 se dibujan engordando el 500).

   Se usan siempre después de la familia real:
       font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
   ------------------------------------------------------------------------------------------- */

/* ---- Raleway (texto del sitio y del header) ---- */
@font-face {
    font-family: 'Raleway Fallback';
    font-style: normal;
    font-weight: 300;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 101.4%;
    ascent-override: 94%;
    descent-override: 23%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Raleway Fallback';
    font-style: normal;
    font-weight: 400;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 102.7%;
    ascent-override: 94%;
    descent-override: 23%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Raleway Fallback';
    font-style: normal;
    font-weight: 500;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 103.9%;
    ascent-override: 94%;
    descent-override: 23%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Raleway Fallback';
    font-style: normal;
    font-weight: 600;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 103.9%;
    ascent-override: 94%;
    descent-override: 23%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Raleway Fallback';
    font-style: normal;
    font-weight: 700;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 103.9%;
    ascent-override: 94%;
    descent-override: 23%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Raleway Fallback';
    font-style: normal;
    font-weight: 800;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 103.9%;
    ascent-override: 94%;
    descent-override: 23%;
    line-gap-override: 0%;
}

/* ---- Montserrat (titulares) ---- */
@font-face {
    font-family: 'Montserrat Fallback';
    font-style: normal;
    font-weight: 500;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 114.5%;
    ascent-override: 97%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Montserrat Fallback';
    font-style: normal;
    font-weight: 600;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 114.5%;
    ascent-override: 97%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Montserrat Fallback';
    font-style: normal;
    font-weight: 700;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 116.4%;
    ascent-override: 97%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Montserrat Fallback';
    font-style: normal;
    font-weight: 800;
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 118.5%;
    ascent-override: 97%;
    descent-override: 25%;
    line-gap-override: 0%;
}

/* ===== css/components/motion.css ===== */
/* Animaciones del sitio. Reemplaza a Animate.css (antes se cargaban ~70 KB desde cdnjs para 2 efectos)
   y define el sistema "reveal": el contenido aparece al entrar en pantalla, bloque por bloque.
   Lo carga head-assets.php ANTES de css/layout/header.css: ese orden importa (ver nota en fadeInDown). */

/* ---- Subset de Animate.css 4.1.1 (MIT): solo las clases que usa el markup ---- */
.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animate__fadeInUp {
    animation-name: fadeInUp;
}

.animate__fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* fadeInDown NO se define acá a propósito: la versión que usa el sitio es la de
   css/layout/header.css (baja 10 px, no el 100 % de Animate.css). Como ese archivo se carga
   después, su @keyframes es el que gana. Si se define acá, el h1 del hero cambia de animación. */

/* ---- Reveal: aparición al entrar en pantalla (lo maneja js/core/reveal.js) ----
   Solo se oculta cuando el JS ya está corriendo (html.reveal-ready). Sin JS, o si el JS falla,
   todo el contenido queda visible: nunca una página en blanco. */
.reveal {
    transition: opacity .7s ease-out, transform .7s ease-out;
}

.reveal-ready .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(40px);
}

/* Escalonado de los bloques de una misma sección */
.reveal-d1 {
    transition-delay: .08s;
}

.reveal-d2 {
    transition-delay: .16s;
}

.reveal-d3 {
    transition-delay: .24s;
}

.reveal-d4 {
    transition-delay: .32s;
}

/* ---- Accesibilidad: sin movimiento si el sistema lo pide ---- */
@media (prefers-reduced-motion: reduce) {

    .animate__animated {
        animation: none !important;
    }

    .reveal,
    .reveal-ready .reveal:not(.is-visible) {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== css/base/tokens.css ===== */
/* Tokens de diseño compartidos por las 3 vistas: paleta, sombras y radios.
   Única fuente de verdad de los colores de marca. Inicio ajusta --shadow y --shadow-lg en css/pages/home.css. */

:root {
    --brand: #FEC406;
    /* amarillo oficial (branding nuevo) */
    --brand-dark: #D9A300;
    /* amarillo oscuro: íconos y hover */
    --brand-deep: #A67C00;
    /* amarillo profundo: títulos sobre blanco (legible) */
    --brand-soft: #FFF6D6;
    /* amarillo muy suave: fondos de detalles */
    --brown: #5A4E4E;
    /* marrón oficial */
    --brown-2: #887878;
    /* marrón claro (navbar/footer) */
    --warm: #ffcc80;
    /* melón (acento cálido de marca) */
    --cream: #F6E6C9;
    --bg: #faf7f3;
    /* fondo cálido muy claro */
    --card: #ffffff;
    --ink: #3f3838;
    /* texto cálido oscuro */
    --muted: #8a7f7f;
    /* gris cálido */
    --line: #ece5dd;
    --shadow: 0 10px 30px rgba(90, 78, 78, .10);
    --shadow-lg: 0 18px 50px rgba(90, 78, 78, .18);
    --radius: 18px;
}

/* ===== css/base/base.css ===== */
/* Base global de las 3 vistas: documento, secciones, utilidades y scrollbar.
   Antes en css/stylesGen.css. Se carga después de css/base/tokens.css. */

html {
    scroll-padding-top: 50px;
    scroll-behavior: smooth;
    /* Para un desplazamiento suave */
}

body {
    font-family: 'Raleway', 'Raleway Fallback', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fdfdfd;
}

main {
    padding-top: 3rem;
}

/* Las secciones ya NO arrancan ocultas: antes todas tenían opacity:0 y el JS las mostraba al
   entrar en pantalla, lo que retrasaba el hero (y dejaba la página en blanco si el JS fallaba).
   La aparición ahora es por bloque, con la clase .reveal (css/components/motion.css). */

/* Oculto inicial de alertas de formulario (antes inline style="display:none";
   sin !important para que el JS pueda mostrarlas con style.display si corresponde) */
.is-hidden {
    display: none;
}

/* El reCAPTCHA ahora se carga recién cuando el visitante llega al formulario
   (js/core/recaptcha-lazy.js): se reserva su alto para que no empuje el contenido al aparecer. */
.g-recaptcha {
    min-height: 78px;
}

/* •----------------Scrollbar----------------• */

::-webkit-scrollbar {
    width: 10px;
    /* Ancho de la barra de desplazamiento */
    height: 10px;
    /* Alto para la barra horizontal */
}

/* Track (Fondo de la barra) */
::-webkit-scrollbar-track {
    background: #f4f4f4;
    /* Color claro para el fondo */
    border-radius: 10px;
    /* Bordes redondeados para un diseño limpio */
}

/* Thumb (la parte que se mueve) */
::-webkit-scrollbar-thumb {
    background: #FEC406;
    /* Color cálido (amarillo) para destacar */
    border-radius: 10px;
    /* Bordes redondeados */
    border: 2px solid #f4f4f4;
    /* Un borde que combine con el fondo */
}

/* Thumb al pasar el ratón (hover) */
::-webkit-scrollbar-thumb:hover {
    background: #FEC406;
    /* Color ligeramente más oscuro para interacción */
}

/* Thumb al estar activo (clic) */
::-webkit-scrollbar-thumb:active {
    background: #FEC406;
    /* Color aún más oscuro al hacer clic */
}

/* Horizontal scrollbar track */
::-webkit-scrollbar-track:horizontal {
    background: #eaeaea;
    /* Color diferente para barras horizontales */
}

/* For Firefox - General Scrollbar Styling */
html {
    scrollbar-color: #FEC406 #f4f4f4;
    /* Thumb y fondo */
    scrollbar-width: thin;
    /* Barra más delgada */
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: #FEC406;
    }

    html {
        scrollbar-width: none;
        /* Ocultar la barra de desplazamiento en Firefox */
    }
}

/* ===== css/layout/header.css ===== */
/* Header común a las 3 vistas.
   La tipografía 'Raleway Header' se declara en css/base/fonts-home.css y fonts-pages.css:
   cada vista la sirve desde el archivo que ya descarga igual (ver esos archivos). */

header {
    font-family: 'Raleway Header', 'Raleway Fallback', sans-serif;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1020;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #887878 !important;
}

.navbar-brand img {
    width: 200px;
    height: auto;
    transition: width 0.5s ease;
}

/* Logo más chico al bajar. La clase la pone js/core/navbar.js cuando el sentinel sale de
   pantalla (antes lo hacía un listener de scroll que cambiaba el width en cada evento). */
.navbar.is-scrolled .navbar-brand img {
    width: 150px;
}

/* Marca invisible a 50 px del tope: sirve para detectar el scroll sin escuchar el evento. */
.scroll-sentinel {
    position: absolute;
    top: 50px;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.nav-link {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    transition: color 0.3s;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.nav-link.active {
    color: #FEC406 !important;
}

.nav-link:hover {
    color: #FEC406;
    transform: translateY(-3px);
}

.navbar-toggler {
    border: none;
    background-color: #FEC406;
    padding: 0.2rem;
    font-size: 1rem;
    border: 1px solid whitesmoke;
}

.navbar-toggler-icon {
    color: #FEC406 !important;
}

.dropdown-menu {
    display: none;
    background-color: #887878;
    border: 1px solid #ccc;
}

.dropdown-menu.show {
    display: block !important;
    animation: fadeInDown 0.3s ease-in-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    color: #fff !important;
    font-weight: bold !important;
}

.dropdown-item:hover {
    background-color: #FEC406;    
}

.nav-link.show {
    color: #FEC406 !important;
}

/* ===== css/layout/footer.css ===== */
/* Footer común a las 3 vistas (app/partials/footer.php). Antes en css/stylesGen.css. */

footer {
    font-size: 0.9rem;
    background-color: #887878 !important;
    padding: 2rem 1rem;
}

footer h5 {
    color: #FEC406;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

footer p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

footer a {
    transition: color 0.3s ease-in-out;
    text-decoration: none;
    color: #FEC406;
    font-weight: 500;
}

footer a:hover {
    color: #ffcc80
}

.social-icons i {
    font-size: 1.2rem;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.social-icons i:hover {
    transform: translateY(-3px);
    color: #ffcc80
}

#telefonoFooter a {
    color: white;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

#telefonoFooter a:hover {
    color: #ffcc80
}

.linkSenestrariDev {
    text-decoration: none;
    color: aqua;
    font-weight: 600;
}

/* Utilidades del footer (antes atributos style="..." inline en las 3 vistas) */
/* Logo vertical Raiza en el footer (sin panel, directo sobre #887878) */
.footer-logo {
    width: 180px;
    max-width: 180px;
    height: auto;
}

.footer-cpi {
    border-radius: 50%;
    width: 50px;
    /* height auto por los atributos width/height del <img> (ver nota en css/pages/home.css) */
    height: auto;
}

.footer-legal-title {
    color: #FEC406;
}

/* Powered by Senestrari Dev (logo en footer) */
.powered-by-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    vertical-align: middle;
}

.powered-by-link .logo-senestrari {
    height: 30px;
    width: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 576px) {
    .powered-by-link .logo-senestrari {
        height: 24px;
    }
}

/* Línea de copyright: más discreta que el resto del footer (vence a los footer p responsive) */
footer p.footer-copy {
    font-size: 0.78rem;
    opacity: 0.85;
}

footer .footer-copy .logo-senestrari {
    height: 18px;
}

@media (max-width: 576px) {
    footer .footer-copy .logo-senestrari {
        height: 16px;
    }
}

@media (max-width: 576px) {
    footer {
        font-size: 0.8rem;
        padding: 1.5rem 0.5rem;
    }

    footer h5 {
        font-size: 1rem;
    }

    footer p {
        font-size: 0.85rem;
    }

    .social-icons i {
        font-size: 1rem;
    }

    .linkSenestrariDev {
        font-size: 0.85rem;
    }

    #espacioFotoMobile {
        margin-bottom: 2rem;

    }

    #espacioFotoMobile img {
        display: none;
    }

}

@media (min-width: 577px) and (max-width: 991px) {

    #espacioFotoMobile img {
        display: block;
        margin-bottom: 2rem;

    }

    .ocultarMobile {
        display: none;
    }

    footer {
        font-size: 0.85rem;
        padding: 2rem 1rem;
    }

    footer h5 {
        font-size: 1.1rem;
    }

    footer p {
        font-size: 0.9rem;
    }

    .social-icons i {
        font-size: 1.1rem;
    }

    .linkSenestrariDev {
        font-size: 0.9rem;
    }
}

@media (min-width: 992px) and (max-width: 1439px) {
    footer {
        font-size: 0.95rem;
        padding: 2.5rem 1.5rem;
    }

    footer h5 {
        font-size: 1.3rem;
    }

    footer p {
        font-size: 1rem;
    }

    .social-icons i {
        font-size: 1.3rem;
    }

    .linkSenestrariDev {
        font-size: 1rem;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    footer {
        font-size: 1rem;
        padding: 3rem 2rem;
    }

    footer h5 {
        font-size: 1.4rem;
    }

    footer p {
        font-size: 1.1rem;
    }

    .social-icons i {
        font-size: 1.4rem;
    }

    .linkSenestrariDev {
        font-size: 1.1rem;
    }
}

@media (min-width: 1920px) {
    footer {
        font-size: 1.1rem;
        padding: 3.5rem 2.5rem;
    }

    footer h5 {
        font-size: 1.5rem;
    }

    footer p {
        font-size: 1.2rem;
    }

    .social-icons i {
        font-size: 1.5rem;
    }

    .linkSenestrariDev {
        font-size: 1.2rem;
    }
}

/* ===== css/layout/whatsapp-float.css ===== */
/* Botón flotante de WhatsApp (app/partials/whatsapp-float.php). Antes en css/stylesGen.css. */

.whatsapp-button {
    position: fixed;
    bottom: 20px;
    /* Ajusta la distancia desde el borde inferior */
    right: 20px;
    /* Ajusta la distancia desde el borde derecho */
    z-index: 1000;
    /* Asegura que esté por encima de otros elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    /* Tamaño del contenedor */
    height: 60px;
    background-color: #25D366;
    /* Color de fondo de WhatsApp */
    border-radius: 50%;
    /* Forma circular */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    /* Efecto de zoom al pasar el cursor */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    /* Sombra más intensa */
}

.whatsapp-icon {
    width: 45px;
    /* Tamaño del icono */
    height: 45px;
    /*filter: invert(1) !important;  */
}

/* ===== css/pages/nosotros.css ===== */
/* ============================================================================
   css/nosotros.css — Estilos de la vista Nosotros (diseño aprobado).
   Migrado desde el <style> inline de la propuesta (Etapa 3: sin CSS inline).
   Auto-contenido bajo .nos-scope; header/footer/navbar en css/layout/, paleta en css/base/tokens.css.
   ============================================================================ */

        /* La propuesta se auto-contiene bajo .nos-scope para no afectar header/footer del sitio */
        .nos-scope {
            /* Colores, sombras y radios: css/base/tokens.css */
            background: var(--bg);
            color: var(--ink);
        }

        .nos-scope h1,
        .nos-scope h2,
        .nos-scope h3,
        .nos-scope .font-head {
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
        }

        .nos-scope .container-xxl {
            max-width: 1320px;
        }

        /* ---- Encabezados de sección (mismo lenguaje que Home/Propiedades) ---- */
        .nos-eyebrow {
            display: block;
            letter-spacing: .26em;
            text-transform: uppercase;
            font-size: .75rem;
            font-weight: 600;
            color: var(--brand-dark);
            margin-bottom: .5rem;
        }

        .nos-h2 {
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-weight: 800;
            color: var(--brown);
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            line-height: 1.12;
            margin: 0;
        }

        .nos-lead {
            color: var(--muted);
            font-weight: 300;
            font-size: 1.08rem;
            max-width: 640px;
        }

        .nos-section {
            padding: clamp(3.2rem, 7vw, 5.5rem) 0;
        }

        /* ---- Botones (coherentes con .btn-enviar de las otras vistas) ---- */
        .nos-btn {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            padding: .8rem 1.5rem;
            cursor: pointer;
            text-decoration: none;
            line-height: 1;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
        }

        .nos-btn--brand {
            background: var(--brand);
            color: #3b3030;
            box-shadow: 0 10px 24px rgba(254, 196, 6, .35);
        }

        .nos-btn--brand:hover {
            background: var(--brand-dark);
            color: #fff;
            transform: translateY(-2px);
        }

        .nos-btn--warm {
            background: var(--warm);
            color: #5a4e4e;
            box-shadow: 0 10px 24px rgba(255, 204, 128, .38);
        }

        .nos-btn--warm:hover {
            background: #f4b95f;
            color: #4a3f3f;
            transform: translateY(-2px);
        }

        .nos-btn--ghost {
            background: rgba(255, 255, 255, .06);
            border: 1.5px solid rgba(255, 255, 255, .55);
            color: #fff;
        }

        .nos-btn--ghost:hover {
            background: #fff;
            color: var(--brown);
            transform: translateY(-2px);
        }

        /* =====================================================================
           HERO
        ===================================================================== */
        .nos-hero {
            position: relative;
            color: #fff;
            padding: clamp(140px, 18vh, 190px) 0 clamp(3.5rem, 8vw, 6rem);
            background:
                linear-gradient(180deg, rgba(90, 78, 78, .62), rgba(43, 36, 36, .90)),
                url('/images/vistaNosotros/pruebaPortadaNosotros-1600.webp') center/cover no-repeat;
            overflow: hidden;
        }

        /* En pantallas grandes, la versión de 1920 px para que no se estire */
        @media (min-width: 1601px) {
            .nos-hero {
                background-image:
                    linear-gradient(180deg, rgba(90, 78, 78, .62), rgba(43, 36, 36, .90)),
                    url('/images/vistaNosotros/pruebaPortadaNosotros-1920.webp');
            }
        }

        /* Fondo del hero más chico en celulares (1600px: 264 KB · 720px: 52 KB, con más compresión:
           la capa oscura de encima tapa cualquier artefacto) */
        @media (max-width: 767.98px) {
            .nos-hero {
                background-image:
                    linear-gradient(180deg, rgba(90, 78, 78, .62), rgba(43, 36, 36, .90)),
                    url('/images/vistaNosotros/pruebaPortadaNosotros-720.webp');
            }
        }

        .nos-hero .eyebrow {
            letter-spacing: .28em;
            text-transform: uppercase;
            font-size: .78rem;
            color: var(--brand);
            font-weight: 600;
        }

        .nos-hero h1 {
            font-weight: 800;
            font-size: clamp(2.2rem, 5.2vw, 3.8rem);
            line-height: 1.05;
            margin: .6rem 0 1rem;
            max-width: 15ch;
        }

        .nos-hero h1 .text-brand {
            color: var(--brand);
        }

        .nos-hero p.lead {
            color: #efe6dd;
            max-width: 620px;
            font-weight: 300;
            font-size: 1.12rem;
        }

        .nos-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            margin-top: 1.6rem;
        }

        /* Chips de confianza (datos reales: ubicación, servicios, matrícula) */
        .nos-trust {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
            margin-top: 2.2rem;
        }

        .nos-trust span {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            border: 1px solid rgba(255, 255, 255, .32);
            background: rgba(255, 255, 255, .08);
            color: #fbf4ec;
            padding: .45rem 1rem;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 500;
            backdrop-filter: blur(2px);
        }

        .nos-trust span i {
            color: var(--brand);
        }

        /* =====================================================================
           QUIÉNES SOMOS
        ===================================================================== */
        .nos-about-img {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            aspect-ratio: 4 / 3;
        }

        .nos-about-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Placa flotante sobre la imagen (respaldo profesional real) */
        .nos-about-badge {
            position: absolute;
            left: 1rem;
            bottom: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, .95);
            border-radius: 14px;
            padding: .9rem 1.1rem;
            display: flex;
            align-items: center;
            gap: .8rem;
            box-shadow: var(--shadow);
        }

        .nos-about-badge img {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            flex: 0 0 auto;
        }

        .nos-about-badge strong {
            display: block;
            color: var(--brown);
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-size: .95rem;
            line-height: 1.2;
        }

        .nos-about-badge small {
            color: var(--muted);
            font-size: .78rem;
        }

        .nos-about p {
            color: #5f5757;
            line-height: 1.75;
        }

        /* =====================================================================
           MISIÓN / VISIÓN
        ===================================================================== */
        .nos-mv-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: clamp(1.6rem, 3vw, 2.4rem);
            height: 100%;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .nos-mv-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .nos-mv-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            font-size: 1.4rem;
            margin-bottom: 1rem;
            background: rgba(254, 196, 6, .16);
            color: var(--brand-dark);
        }

        .nos-mv-card h3 {
            font-weight: 800;
            color: var(--brown);
            font-size: 1.35rem;
            margin-bottom: .6rem;
        }

        .nos-mv-card p {
            color: #5f5757;
            line-height: 1.7;
            margin: 0;
        }

        /* =====================================================================
           FORMA DE TRABAJAR / OBJETIVOS (roadmap)
        ===================================================================== */
        .nos-roadmap {
            background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
        }

        .nos-step {
            position: relative;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: clamp(1.6rem, 3vw, 2.2rem);
            height: 100%;
        }

        .nos-step-tag {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-weight: 700;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--brand-dark);
            background: rgba(254, 196, 6, .14);
            padding: .35rem .9rem;
            border-radius: 999px;
            margin-bottom: 1rem;
        }

        .nos-step h3 {
            font-weight: 800;
            color: var(--brown);
            font-size: 1.3rem;
            margin-bottom: .7rem;
        }

        .nos-step p {
            color: #5f5757;
            line-height: 1.72;
            margin: 0;
        }

        /* =====================================================================
           VALORES (carrusel Swiper premium)
        ===================================================================== */
        .nos-values {
            position: relative;
        }

        .nos-values .swiper {
            padding: 8px 4px 12px;
        }

        .nos-values .swiper-slide {
            height: auto;
        }

        .nos-value {
            position: relative;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 2rem 1.6rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        /* Acento superior que aparece en hover/activo */
        .nos-value::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--brand), var(--warm));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease;
        }

        .nos-value:hover,
        .swiper-slide-active .nos-value {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(254, 196, 6, .55);
        }

        .nos-value:hover::before,
        .swiper-slide-active .nos-value::before {
            transform: scaleX(1);
        }

        .nos-value-ic {
            flex: 0 0 auto;
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: rgba(254, 196, 6, .16);
            color: var(--brand-dark);
            font-size: 1.35rem;
            margin-bottom: 1.1rem;
            transition: background .25s ease, color .25s ease;
        }

        .nos-value:hover .nos-value-ic,
        .swiper-slide-active .nos-value-ic {
            background: var(--brand);
            color: #3b3030;
        }

        .nos-value h4 {
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-weight: 700;
            color: var(--brown);
            font-size: 1.15rem;
            margin: 0 0 .5rem;
        }

        .nos-value p {
            color: var(--muted);
            font-size: .92rem;
            line-height: 1.6;
            margin: 0;
        }

        /* Controles del carrusel (mismo lenguaje que el carrusel de destacadas del Home) */
        .nos-val-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
            margin-top: 1.6rem;
        }

        .nos-val-nav {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            background: var(--card);
            color: var(--brown);
            box-shadow: var(--shadow);
            display: grid;
            place-items: center;
            font-size: 1.05rem;
            cursor: pointer;
            transition: background .2s ease, color .2s ease, transform .2s ease;
        }

        .nos-val-nav:hover {
            background: var(--brand);
            color: #3b3030;
            transform: scale(1.06);
        }

        .nos-val-nav.swiper-button-disabled {
            opacity: .35;
            pointer-events: none;
        }

        .nos-val-pagination {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .nos-val-pagination .swiper-pagination-bullet {
            background: var(--brown-2);
            opacity: .4;
            width: 9px;
            height: 9px;
            transition: .2s;
        }

        .nos-val-pagination .swiper-pagination-bullet-active {
            background: var(--brand-dark);
            opacity: 1;
            width: 26px;
            border-radius: 6px;
        }

        /* =====================================================================
           POR QUÉ ELEGIR RAIZA
        ===================================================================== */
        .nos-why {
            background: var(--card);
        }

        .nos-reason {
            display: flex;
            gap: 1.1rem;
            align-items: flex-start;
            padding: 1.1rem 1rem;
            border-radius: 14px;
            border: 1px solid transparent;
            transition: background .25s ease, border-color .25s ease, transform .25s ease;
        }

        .nos-reason + .nos-reason {
            margin-top: .2rem;
        }

        .nos-reason:hover {
            background: var(--bg);
            border-color: var(--line);
            transform: translateX(4px);
        }

        /* Índice numerado (01–05) para dar ritmo y jerarquía */
        .nos-reason-ic {
            flex: 0 0 auto;
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: rgba(254, 196, 6, .16);
            color: var(--brand-dark);
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            transition: background .25s ease, color .25s ease;
        }

        .nos-reason:hover .nos-reason-ic {
            background: var(--brand);
            color: #3b3030;
        }

        .nos-reason h4 {
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-weight: 700;
            color: var(--brown);
            font-size: 1.05rem;
            margin: .1rem 0 .25rem;
        }

        .nos-reason p {
            color: var(--muted);
            font-size: .92rem;
            line-height: 1.6;
            margin: 0;
        }

        /* Aside con estadística cualitativa (sin inventar números) */
        .nos-why-aside {
            position: relative;
            background: linear-gradient(160deg, var(--brown) 0%, #4a3f3f 100%);
            border-radius: var(--radius);
            color: #fff;
            padding: clamp(1.8rem, 3.5vw, 2.6rem);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

        /* Detalle decorativo sutil */
        .nos-why-aside::after {
            content: "";
            position: absolute;
            right: -60px;
            top: -60px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(254, 196, 6, .30), transparent 70%);
        }

        .nos-why-aside-badge {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: rgba(254, 196, 6, .22);
            color: var(--brand);
            font-size: 1.5rem;
            margin-bottom: 1.3rem;
        }

        .nos-why-aside h3 {
            position: relative;
            font-weight: 800;
            font-size: 1.5rem;
            margin-bottom: .8rem;
        }

        .nos-why-aside p {
            color: #e9ded6;
            line-height: 1.7;
            margin-bottom: 1.4rem;
        }

        .nos-cover {
            display: flex;
            align-items: center;
            gap: .7rem;
            color: #f3ece5;
            font-size: .95rem;
            margin-top: auto;
        }

        .nos-cover i {
            color: var(--brand);
            font-size: 1.15rem;
        }

        /* =====================================================================
           COMPROMISO (banda con video de fondo, reutiliza asset existente)
        ===================================================================== */
        /* El fondo era un video de 6,3 MB con autoplay que el degradado de ::before tapaba casi por
           completo. Ahora es un fotograma de ese video en WebP (53 KB). */
        .nos-commit {
            position: relative;
            overflow: hidden;
            color: #fff;
            padding: clamp(4rem, 9vw, 7rem) 0;
            background: url('/images/vistaNosotros/compromiso.webp') center/cover no-repeat;
        }

        .nos-commit::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(43, 36, 36, .82), rgba(43, 36, 36, .9));
            z-index: 1;
        }

        .nos-commit .container-xxl {
            position: relative;
            z-index: 2;
        }

        .nos-commit .nos-eyebrow {
            color: var(--brand);
        }

        .nos-commit blockquote {
            font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
            font-weight: 700;
            font-size: clamp(1.4rem, 3vw, 2.1rem);
            line-height: 1.3;
            max-width: 20ch;
            margin: 0 0 1rem;
        }

        .nos-commit p {
            color: #e9ded6;
            max-width: 640px;
            line-height: 1.75;
            font-weight: 300;
        }

        /* =====================================================================
           CONTACTO / CTA (banda premium igual que Propiedades)
        ===================================================================== */
        .nos-contact {
            position: relative;
            overflow: hidden;
            padding: clamp(4rem, 8vw, 6.5rem) 0;
            /* Sin foto: base marrón oscura de marca */
            background: linear-gradient(160deg, #3b3030 0%, #241d1d 62%, #1b1515 100%);
        }

        /* Capa 1 (::before): "mesh gradient" de blobs de marca (amarillo, brand-dark, melón, crema),
           difuminados y en deriva lenta para un fondo vivo pero elegante */
        .nos-contact::before {
            content: "";
            position: absolute;
            inset: -25%;
            z-index: 0;
            background:
                radial-gradient(38% 42% at 15% 20%, rgba(254, 196, 6, .55), transparent 70%),
                radial-gradient(34% 40% at 85% 22%, rgba(217, 163, 0, .48), transparent 70%),
                radial-gradient(42% 46% at 80% 88%, rgba(255, 204, 128, .40), transparent 72%),
                radial-gradient(36% 42% at 22% 92%, rgba(246, 230, 201, .22), transparent 72%);
            filter: blur(14px);
            animation: nosMeshDrift 20s ease-in-out infinite alternate;
        }

        @keyframes nosMeshDrift {
            from { transform: translate3d(0, 0, 0) scale(1); }
            to   { transform: translate3d(0, -2.5%, 0) scale(1.07); }
        }

        /* Capa 2 (::after): textura de puntos + viñeta para profundidad y contraste con la card */
        .nos-contact::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 22px 22px,
                radial-gradient(circle at 50% 45%, transparent 52%, rgba(14, 10, 10, .62) 100%);
        }

        .nos-contact > .container-xxl {
            position: relative;
            z-index: 1;
        }

        .nos-contact-card {
            position: relative;
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--line);
            overflow: hidden;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            max-width: 1000px;
        }

        /* Barra de acento superior de marca */
        .nos-contact-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--brand), var(--warm));
            z-index: 2;
        }

        .nos-contact-info {
            padding: clamp(1.8rem, 4vw, 2.8rem);
        }

        .nos-contact-info h2 {
            font-weight: 800;
            color: var(--brown);
            font-size: clamp(1.5rem, 3vw, 2rem);
            margin-bottom: .6rem;
        }

        .nos-contact-info > p {
            color: var(--muted);
            line-height: 1.65;
            margin-bottom: 1.5rem;
        }

        .nos-channels {
            list-style: none;
            padding: 0;
            margin: 0 0 1.8rem;
        }

        .nos-channels li {
            display: flex;
            align-items: center;
            gap: .9rem;
            padding: .55rem 0;
            color: var(--ink);
            font-size: .95rem;
        }

        .nos-channels li i {
            flex: 0 0 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(254, 196, 6, .16);
            color: var(--brand-dark);
            font-size: 1.05rem;
        }

        .nos-channels li a {
            color: var(--brown);
            font-weight: 600;
            text-decoration: none;
        }

        .nos-channels li a:hover {
            color: var(--brand-dark);
            text-decoration: underline;
        }

        .nos-contact-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
        }

        .nos-btn--wa {
            background: #25D366;
            color: #fff;
            box-shadow: 0 10px 24px rgba(37, 211, 102, .35);
        }

        .nos-btn--wa:hover {
            background: #1da851;
            color: #fff;
            transform: translateY(-2px);
        }

        .nos-contact-visual {
            position: relative;
            background: url('/images/vistaNosotros/img2-1280.webp') center/cover no-repeat;
            min-height: 260px;
            display: flex;
            align-items: flex-end;
        }

        /* En celulares este bloque mide unos 360 px: alcanza la versión de 960
           (39 KB en vez de 68 KB, sigue siendo el doble de la densidad de pantalla) */
        @media (max-width: 767.98px) {
            .nos-contact-visual {
                background-image: url('/images/vistaNosotros/img2-960.webp');
            }
        }

        .nos-contact-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(43, 36, 36, .10) 40%, rgba(43, 36, 36, .82) 100%);
        }

        .nos-contact-caption {
            position: relative;
            z-index: 1;
            padding: 1.6rem;
            color: #fff;
        }

        /* Logo horizontal Raiza (1165x353): más alto que el anterior para que "INMOBILIARIA" sea legible */
        .nos-contact-caption img {
            height: 60px;
            width: auto;
            max-width: 100%;
            object-fit: contain;
            margin-bottom: .7rem;
        }

        .nos-contact-caption p {
            margin: 0;
            font-weight: 300;
            font-size: .95rem;
            line-height: 1.5;
            color: #f3ece5;
            max-width: 30ch;
        }

        /* =====================================================================
           RESPONSIVE
        ===================================================================== */
        @media (max-width: 991.98px) {
            .nos-contact-card {
                grid-template-columns: 1fr;
            }

            .nos-contact-visual {
                order: -1;
                min-height: 200px;
            }
        }

        @media (max-width: 575.98px) {
            .nos-hero-actions .nos-btn,
            .nos-contact-actions .nos-btn {
                width: 100%;
                justify-content: center;
            }

            .nos-contact-caption img {
                height: 50px;
            }

            .nos-about-badge {
                position: static;
                margin-top: -1px;
                border-radius: 0 0 var(--radius) var(--radius);
            }
        }

        /* Accesibilidad: respetar reduce-motion */
        @media (prefers-reduced-motion: reduce) {
            .nos-scope *,
            .nos-scope *::before {
                transition: none !important;
                animation: none !important;
            }
        }

        /* Foco visible coherente en toda la propuesta */
        .nos-scope a:focus-visible,
        .nos-scope button:focus-visible {
            outline: 3px solid var(--brand);
            outline-offset: 3px;
            border-radius: 6px;
        }

        /* ===== Utilidades que reemplazan atributos style="..." inline (mismo render) ===== */
        #nos-about {
            scroll-margin-top: 80px;
        }

        .nos-bg-card {
            background: var(--card);
        }

        .nos-eyebrow--brand {
            color: var(--brand);
        }

        .nos-h2--light {
            color: #fff;
        }

/* ===== css/components/icons.css ===== */
/* Íconos del sitio: Font Awesome Free 6.7.2 servida desde el propio hosting, recortada a los
   67 íconos que realmente se usan. Reemplaza al kit (kit.fontawesome.com), que era un
   <script> bloqueante y además provocaba saltos de layout al llegar la fuente.
   Generado con tools/build-icons.mjs — no editar a mano: regenerar si se agregan íconos. */

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('/fonts/fontawesome/fa-solid-900-subset.woff2?v=d3db61da') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/fontawesome/fa-brands-400-subset.woff2?v=efcd73a4') format('woff2');
}

.fas,
.fa-solid,
.fa {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.fab,
.fa-brands {
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;
}

.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900); }

.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.fa {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto; }

.fas::before,
.far::before,
.fab::before,
.fa-solid::before,
.fa-regular::before,
.fa-brands::before,
.fa::before {
  content: var(--fa); }

.fa-classic,
.fas,
.fa-solid,
.far,
.fa-regular {
  font-family: 'Font Awesome 6 Free'; }

.fa-brands,
.fab {
  font-family: 'Font Awesome 6 Brands'; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-2xs {
  font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em; }

.fa-xs {
  font-size: 0.75em;
  line-height: 0.08333em;
  vertical-align: 0.125em; }

.fa-sm {
  font-size: 0.875em;
  line-height: 0.07143em;
  vertical-align: 0.05357em; }

.fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; }

.fa-xl {
  font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em; }

.fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: var(--fa-li-margin, 2.5em);
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: calc(-1 * var(--fa-li-width, 2em));
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit; }

.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.08em);
  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }

.fa-pull-left {
  float: left;
  margin-right: var(--fa-pull-margin, 0.3em); }

.fa-pull-right {
  float: right;
  margin-left: var(--fa-pull-margin, 0.3em); }

.fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }

.fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin-reverse {
  --fa-animation-direction: reverse; }

.fa-pulse,
.fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8)); }

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    animation-delay: -1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-delay: 0s;
    transition-duration: 0s; } }

@keyframes fa-beat {
  0%, 90% {
    transform: scale(1); }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25)); } }

@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0); }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    transform: scale(1, 1) translateY(0); }
  100% {
    transform: scale(1, 1) translateY(0); } }

@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }

@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1); }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125)); } }

@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }

@keyframes fa-shake {
  0% {
    transform: rotate(-15deg); }
  4% {
    transform: rotate(15deg); }
  8%, 24% {
    transform: rotate(-18deg); }
  12%, 28% {
    transform: rotate(18deg); }
  16% {
    transform: rotate(-22deg); }
  20% {
    transform: rotate(22deg); }
  32% {
    transform: rotate(-12deg); }
  36% {
    transform: rotate(12deg); }
  40%, 100% {
    transform: rotate(0deg); } }

@keyframes fa-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.fa-rotate-90 {
  transform: rotate(90deg); }

.fa-rotate-180 {
  transform: rotate(180deg); }

.fa-rotate-270 {
  transform: rotate(270deg); }

.fa-flip-horizontal {
  transform: scale(-1, 1); }

.fa-flip-vertical {
  transform: scale(1, -1); }

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1); }

.fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0)); }

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em; }

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: var(--fa-stack-z-index, auto); }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: var(--fa-inverse, #fff); }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */

.fa-file-alt {
  --fa: "\f15c"; }

.fa-smile-beam {
  --fa: "\f5b8"; }

.fa-comments {
  --fa: "\f086"; }

.fa-user-check {
  --fa: "\f4fc"; }

.fa-paw {
  --fa: "\f1b0"; }

.fa-gavel {
  --fa: "\f0e3"; }

.fa-lightbulb {
  --fa: "\f0eb"; }

.fa-lock {
  --fa: "\f023"; }

.fa-share-nodes {
  --fa: "\f1e0"; }

.fa-users {
  --fa: "\f0c0"; }

.fa-umbrella-beach {
  --fa: "\f5ca"; }

.fa-star {
  --fa: "\f005"; }

.fa-bath {
  --fa: "\f2cd"; }

.fa-map-location-dot {
  --fa: "\f5a0"; }

.fa-rotate-left {
  --fa: "\f2ea"; }

.fa-handshake {
  --fa: "\f2b5"; }

.fa-check-circle {
  --fa: "\f058"; }

.fa-seedling {
  --fa: "\f4d8"; }

.fa-shield-halved {
  --fa: "\f3ed"; }

.fa-shield-alt {
  --fa: "\f3ed"; }

.fa-layer-group {
  --fa: "\f5fd"; }

.fa-vector-square {
  --fa: "\f5cb"; }

.fa-star-half-alt {
  --fa: "\f5c0"; }

.fa-leaf {
  --fa: "\f06c"; }

.fa-file-contract {
  --fa: "\f56c"; }

.fa-chart-line {
  --fa: "\f201"; }

.fa-tools {
  --fa: "\f7d9"; }

.fa-heart {
  --fa: "\f004"; }

.fa-phone-alt {
  --fa: "\f879"; }

.fa-tags {
  --fa: "\f02c"; }

.fa-eye {
  --fa: "\f06e"; }

.fa-hand-holding-usd {
  --fa: "\f4c0"; }

.fa-phone {
  --fa: "\f095"; }

.fa-user-cog {
  --fa: "\f4fe"; }

.fa-arrow-left {
  --fa: "\f060"; }

.fa-envelope {
  --fa: "\f0e0"; }

.fa-clock {
  --fa: "\f017"; }

.fa-piggy-bank {
  --fa: "\f4d3"; }

.fa-images {
  --fa: "\f302"; }

.fa-house {
  --fa: "\f015"; }

.fa-home {
  --fa: "\f015"; }

.fa-bolt {
  --fa: "\f0e7"; }

.fa-bed {
  --fa: "\f236"; }

.fa-handshake-angle {
  --fa: "\f4c4"; }

.fa-location-dot {
  --fa: "\f3c5"; }

.fa-map-marker-alt {
  --fa: "\f3c5"; }

.fa-link {
  --fa: "\f0c1"; }

.fa-magnifying-glass {
  --fa: "\f002"; }

.fa-search {
  --fa: "\f002"; }

.fa-expand {
  --fa: "\f065"; }

.fa-ruler-combined {
  --fa: "\f546"; }

.fa-rocket {
  --fa: "\f135"; }

.fa-arrow-trend-up {
  --fa: "\e098"; }

.fa-chevron-left {
  --fa: "\f053"; }

.fa-chevron-right {
  --fa: "\f054"; }

.fa-smile {
  --fa: "\f118"; }

.fa-award {
  --fa: "\f559"; }

.fa-building {
  --fa: "\f1ad"; }

.fa-calendar {
  --fa: "\f133"; }

.fa-balance-scale {
  --fa: "\f24e"; }

.fa-check {
  --fa: "\f00c"; }

.fa-briefcase {
  --fa: "\f0b1"; }

.fa-triangle-exclamation {
  --fa: "\f071"; }

.fa-paper-plane {
  --fa: "\f1d8"; }

.fa-thumbs-up {
  --fa: "\f164"; }

.sr-only,
.fa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }

.sr-only-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }


/* Íconos de marca (brands.css) */
.fa-instagram {
  --fa: "\f16d";
}

.fa-whatsapp {
  --fa: "\f232";
}