/* 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 "propiedades".
   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/components/property-cards.css ===== */
/* Componente compartido: card de propiedad (app/components/property-card.php).
   La usan Inicio (destacadas), Propiedades (catálogo) y las fichas ("Otras propiedades").
   La foto, el título y "Ver detalle" son enlaces a la ficha. Acá va lo común;
   las diferencias de cada vista (alto de la imagen, tipografía del precio, etc.)
   están en css/pages/home.css y css/pages/propiedades.css. */

.prop-card {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}

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

.prop-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: #efe9e2;
}

.prop-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.prop-card:hover .prop-media img {
    transform: scale(1.06);
}

.badge-op {
    position: absolute;
    top: .8rem;
    left: .8rem;
    background: rgba(90, 78, 78, .88);
    color: #fdf6ee;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    text-transform: capitalize;
}

.badge-fav {
    position: absolute;
    top: .8rem;
    right: .8rem;
    background: var(--warm);
    color: #6b4a15;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.badge-count {
    position: absolute;
    bottom: .8rem;
    right: .8rem;
    background: rgba(63, 56, 56, .72);
    color: #fff;
    padding: .2rem .6rem;
    border-radius: 8px;
    font-size: .74rem;
}

.prop-body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.prop-price {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--brown);
}

.prop-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prop-title a {
    color: inherit;
    text-decoration: none;
}

.prop-title a:hover {
    color: var(--brand-deep);
}

.prop-title a:focus-visible,
.btn-detalle:focus-visible,
.btn-wa:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.prop-loc {
    color: var(--muted);
    font-size: .88rem;
}

.prop-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    padding-top: .5rem;
    margin-top: auto;
    border-top: 1px dashed var(--line);
    color: var(--brown);
    font-size: .85rem;
}

.prop-metrics .m {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.prop-loc i,
.prop-metrics i {
    color: var(--brand-dark);
}

.prop-actions {
    display: flex;
    gap: .5rem;
    margin-top: .4rem;
}

.btn-detalle {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    background: var(--brown);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    padding: .55rem;
    text-decoration: none;
    transition: .2s;
}

.btn-detalle:hover {
    background: var(--brown-2);
    color: #fff;
}

.btn-wa {
    border-radius: 12px;
    border: none;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    padding: .55rem .8rem;
}

.btn-wa:hover {
    background: #1da851;
    color: #fff;
}

/* ===== css/components/notify.css ===== */
/* Aviso de los formularios (reemplaza a SweetAlert2, 79 KB).
   -------------------------------------------------------------------------------------------
   Es un <dialog> nativo: el navegador ya resuelve la modalidad, el foco atrapado, la tecla
   Escape, el fondo oscurecido y devolver el foco al elemento que lo abrió. Acá va solo el
   diseño de marca y las animaciones. Lo maneja js/core/notify.js.

   Estados: ok (mensaje enviado), error (falló el envío) y aviso (faltan datos).
   ------------------------------------------------------------------------------------------- */

.aviso {
    /* el <dialog> es solo el contenedor: el panel de adentro es lo que se ve */
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    max-width: min(420px, calc(100vw - 2rem));
    width: 100%;
    overflow: visible;
}

.aviso::backdrop {
    background: rgba(63, 56, 56, .55);
    backdrop-filter: blur(2px);
}

.aviso-panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
    border-top: 4px solid var(--aviso-color);
}

/* ---- Ícono ---- */
.aviso-icono {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--aviso-suave);
}

.aviso-icono svg {
    width: 46px;
    height: 46px;
    overflow: visible;
}

.aviso-icono circle,
.aviso-icono path {
    fill: none;
    stroke: var(--aviso-color);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Texto ---- */
.aviso-titulo {
    font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--brown);
    margin: 0 0 .5rem;
}

.aviso-texto {
    font-size: .98rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 1.5rem;
}

/* ---- Botón ---- */
.aviso-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background: var(--aviso-btn);
    border: 0;
    border-radius: 999px;
    padding: .7rem 2.4rem;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.aviso-btn:hover {
    filter: brightness(.9);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px var(--aviso-suave);
}

.aviso-btn:focus-visible {
    outline: 3px solid var(--aviso-btn);
    outline-offset: 3px;
}

/* ---- Colores por estado ---- */
.aviso--ok {
    --aviso-color: #2f9e6b;
    --aviso-suave: rgba(47, 158, 107, .12);
    --aviso-btn: #23835a;
}

.aviso--error {
    --aviso-color: #cf5b52;
    --aviso-suave: rgba(207, 91, 82, .12);
    --aviso-btn: #b8483f;
}

.aviso--aviso {
    --aviso-color: #d99a3c;
    --aviso-suave: rgba(217, 154, 60, .14);
    --aviso-btn: var(--brown);
}

/* ---- Animaciones ----
   Entrada: el fondo se funde, el panel sube con un pequeño rebote y el ícono se dibuja solo
   (el círculo primero y el trazo después). Salida: al revés y más rápido. */
@keyframes aviso-fondo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes aviso-entra {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.94);
    }

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

@keyframes aviso-sale {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(10px) scale(.97);
    }
}

@keyframes aviso-dibuja {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes aviso-late {

    0%,
    100% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.06);
    }
}

.aviso[open] .aviso-panel {
    animation: aviso-entra .34s cubic-bezier(.21, 1.02, .38, 1.22) both;
}

.aviso[open]::backdrop {
    animation: aviso-fondo .25s ease both;
}

.aviso.cerrando .aviso-panel {
    animation: aviso-sale .18s ease-in both;
}

.aviso.cerrando::backdrop {
    animation: aviso-fondo .18s ease reverse both;
}

/* El ícono se dibuja: círculo (0,45 s) y después el trazo de adentro */
.aviso[open] .aviso-icono circle {
    stroke-dasharray: 152;
    stroke-dashoffset: 152;
    animation: aviso-dibuja .5s cubic-bezier(.65, 0, .45, 1) .1s forwards;
}

.aviso[open] .aviso-icono path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: aviso-dibuja .32s cubic-bezier(.65, 0, .45, 1) .45s forwards;
}

/* El tilde de "enviado" cierra con un latido: es el momento que queremos celebrar */
.aviso--ok[open] .aviso-icono {
    animation: aviso-late .5s ease .62s;
}

/* ---- Accesibilidad: sin animaciones si el sistema las tiene desactivadas ---- */
@media (prefers-reduced-motion: reduce) {

    .aviso[open] .aviso-panel,
    .aviso[open]::backdrop,
    .aviso.cerrando .aviso-panel,
    .aviso.cerrando::backdrop,
    .aviso--ok[open] .aviso-icono {
        animation: none;
    }

    .aviso[open] .aviso-icono circle,
    .aviso[open] .aviso-icono path {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }

    .aviso-btn {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .aviso-panel {
        padding: 1.75rem 1.25rem 1.25rem;
    }

    .aviso-icono {
        width: 66px;
        height: 66px;
    }

    .aviso-icono svg {
        width: 40px;
        height: 40px;
    }

    .aviso-titulo {
        font-size: 1.2rem;
    }
}

/* ===== css/pages/propiedades.css ===== */
/* Vista Propiedades (/propiedades/): hero, filtros, estados, contacto y lo propio de sus cards.
   La ficha de cada propiedad también carga este archivo (formulario de contacto y cards): ver css/pages/ficha.css.
   Colores y sombras: css/base/tokens.css · cards y detalle comunes: css/components/. */

/* La innovación arranca debajo del header: solo estilo el contenido propio */
body {
    background: var(--bg);
    color: var(--ink);
}

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

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

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

/* La navbar del sitio es position:fixed → damos aire al hero */
.hero {
    position: relative;
    color: #fff;
    padding: 130px 0 clamp(4rem, 9vw, 7rem);
    background:
        linear-gradient(180deg, rgba(90, 78, 78, .74), rgba(52, 45, 45, .90)),
        url('/images/home/heroBienvenida/heroFrist-1600.webp') center/cover no-repeat;
}

/* En pantallas grandes, la versión de 2000 px para que no se estire (como servía antes el JPG) */
@media (min-width: 1601px) {
    .hero {
        background-image:
            linear-gradient(180deg, rgba(90, 78, 78, .74), rgba(52, 45, 45, .90)),
            url('/images/home/heroBienvenida/heroFrist-2000.webp');
    }
}

/* Fondo del hero más chico en pantallas angostas (1600px: 89 KB · 1024px: 40 KB) */
@media (max-width: 767.98px) {
    .hero {
        background-image:
            linear-gradient(180deg, rgba(90, 78, 78, .74), rgba(52, 45, 45, .90)),
            url('/images/home/heroBienvenida/heroFrist-1024.webp');
    }
}

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

.hero h1 {
    font-weight: 800;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.06;
    margin: .5rem 0;
}

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

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.2rem;
}

.chip {
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fbf4ec;
    background: rgba(255, 255, 255, .08);
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--brand);
    color: #fff;
}

.chip.active {
    background: var(--brand);
    color: #3b3030;
    border-color: var(--brand);
    font-weight: 700;
}

/* ---- Barra de filtros flotante ---- */
/* Ancla del navbar (?tipo=...#filtros): despeja el header fijo sin afectar el layout */
#filtros {
    scroll-margin-top: 90px;
}

.filterbar {
    margin-top: 1.8rem;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
}

.filterbar label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: .25rem;
}

.filterbar .form-control,
.filterbar .form-select {
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: .6rem .8rem;
    color: var(--ink);
}

.filterbar .form-control:focus,
.filterbar .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(254, 196, 6, .25);
}

/* Limpiar filtros: mismo alto que los campos */
.filter-clear {
    border-radius: 12px;
    padding: .6rem .8rem;
    border-color: var(--line);
    color: var(--muted);
}

.filter-clear:hover {
    background: var(--bg);
    border-color: var(--brand);
    color: var(--ink);
}

.chip:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.counter-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(254, 196, 6, .16);
    color: var(--brown);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-weight: 600;
    font-size: .9rem;
}

/* ---- Grid + Cards (lo común está en css/components/property-cards.css) ---- */
.section-props {
    padding: 2.5rem 0 4rem;
}

.prop-media {
    aspect-ratio: 4 / 3;
}

.badge-op {
    letter-spacing: .02em;
}

.prop-price {
    font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
}

/* ---- Estados ---- */
.state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--muted);
}

/* ---- Sección de contacto (premium, con imagen + capas) ---- */
#contacto {
    position: relative;
    scroll-margin-top: 90px;
    /* Ancla despejada del navbar fijo */
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: url('/images/vistaPropiedades/portadaPropiedaes-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) {
    #contacto {
        background-image: url('/images/vistaPropiedades/portadaPropiedaes-1920.webp');
    }
}

/* Fondo del contacto más chico en pantallas angostas (1600px: 128 KB · 960px: 58 KB) */
@media (max-width: 767.98px) {
    #contacto {
        background-image: url('/images/vistaPropiedades/portadaPropiedaes-960.webp');
    }
}

/* Capa 1: oscurecido cálido uniforme (legibilidad) */
#contacto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 31, 31, .78);
    z-index: 0;
}

#contacto>.container-xxl {
    position: relative;
    z-index: 1;
}

#contacto .contact-head .eyebrow {
    color: var(--brand);
}

#contacto .contact-head h2 {
    color: #fff;
}

#contacto .contact-head p {
    color: #efe6dd;
}

.contact-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    padding: clamp(1.5rem, 4vw, 2.6rem);
    max-width: 820px;
}

.contact-card .form-label {
    font-weight: 600;
    color: var(--brown);
    font-size: .85rem;
}

.contact-card .form-control {
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: .65rem .85rem;
}

.contact-card .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(254, 196, 6, .25);
}

.btn-enviar {
    background: var(--brand);
    color: #3b3030;
    border: none;
    border-radius: 8px;
    padding: .8rem 1rem;
    transition: background .2s;
}

.btn-enviar:hover:not(:disabled) {
    background: var(--brand-dark);
    color: #3b3030;
}

.btn-enviar:disabled {
    opacity: .85;
    cursor: not-allowed;
}

.wa-alt {
    color: var(--muted);
    font-size: .9rem;
}

.wa-alt a {
    color: #1da851;
    font-weight: 700;
}

.wa-alt a:hover {
    text-decoration: underline;
}

/* ===== 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";
}