/* 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 "home".
   Editar los archivos originales y volver a correr el script. */

/* ===== css/base/fonts-home.css ===== */
/* Tipografías de Inicio, 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: 700;
    font-display: swap;
    src: url('/fonts/montserrat/montserrat-700-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-700-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-300-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-300-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) ----
   Inicio ya descarga la Raleway 300 para el texto, así que el header no suma ningún archivo. */

/* latin-ext */
@font-face {
    font-family: 'Raleway Header';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/raleway/raleway-300-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-300-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/home.css ===== */
/* Vista Inicio (/): hero, "Descubre Raiza", servicios y sus modales, destacadas y contacto.
   Parte 1 = estilos originales del sitio (antes css/stylesInicio.css).
   Parte 2 = capa de diseño actual (antes css/home.css), que pisa a la parte 1.
   Colores y sombras base: css/base/tokens.css · cards y detalle comunes: css/components/. */

/* ======================== Parte 1: estilos originales ======================== */
/* •----------------Hero Section----------------• */

/* Hero Section */
#hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.swiper-container {
    width: 100%;

}

#seconImgHero{
    filter: brightness(0.6);
}

.main-slider .swiper-slide img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.9);
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    width: 80%;
}

.hero-content .hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.2;
    font-family: 'nunito', sans-serif;
    font-weight: 700;
    text-shadow: #000000 5px 3px 10px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-top: 1rem;
    text-shadow: #000000 5px 3px 10px;
}

.hero-content a {
    color: #3b3030;
    font-size: 1rem;
    font-weight: bold;
    background-color: #FEC406;
    border-color: transparent;
    transition: 0.3s ease;
}

.hero-content a:hover {
    color: #3b3030;
    background-color: #ffcc80;
    border-color: transparent;
    text-shadow: 2px 5px 8px #00000000;

}

.swiper-pagination-bullet {
    background: #FEC406;
}

.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(0, 0, 0, 0.6);
    color: #FEC406;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 3;

}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 2.5rem !important;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 2.5rem !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.1);
}

.swiper-button-next {
    right: -5px;
    top: 50%;
}

.swiper-button-prev {
    left: -5px;
    top: 50%;

}

.swiper-button-next,
.swiper-button-prev {
    z-index: 10;
    position: absolute;
}

/* Responsive Design */
@media screen and (max-width: 576px) {

    /* Mobile Small */
    #hero {
        height: auto;
    }

    .hero-content {
        width: 90%;
    }

    .hero-content .hero-title {
        font-size: 1.5rem;
    }

    .hero-content p {
        font-size: 1rem;
        padding: 1rem;
    }

    .hero-content a {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    /* Elimina posibles márgenes o padding extra de Swiper */
    .swiper-container {
        margin: 0;
        padding: 0;
    }

    .swiper-wrapper {
        margin: 0;
        padding: 0;
    }

    .swiper-slide {
        margin: 0;
        padding: 0;
    }

    .swiper-pagination {
        margin-top: 0;
        padding: 0;
        bottom: 10px;
        /* Ajusta la posición si necesario */
    }
}

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

    /* Mobile Regular */
    #hero {
        height: auto;
    }

    .hero-content .hero-title {
        font-size: 1.8rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }
}

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

    /* Tablet */
    #hero {
        height: 90vh;
    }

    .hero-content .hero-title {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {

    /* Notebook */
    .hero-content .hero-title {
        font-size: 2.2rem;
    }

    .hero-content p {
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 1200px) {

    /* Large Screens */
    .hero-content .hero-title {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.5rem;
    }
}

/* •----------------Vision Section----------------• */

#sobre-raiza h2 {
    font-family: 'nunito', sans-serif;
    color: #FEC406;
}

#iconosColor i {
    color: #FEC406 !important;
}

.historiaHome a {
    color: #3b3030;
    font-size: 1rem;
    font-weight: bold;
    background-color: #FEC406;
    border-color: transparent;
    transition: transform 0.3s ease;
    transition: 0.3s ease;
}

.imgHistoriaHome {
    display: flex;
}

.historiaHome a:hover {
    color: #3b3030;
    text-shadow: none;
    background-color: #ffcc80;
    border-color: transparent;
    transform: scale(1.1);
}

/* Logo vertical Raiza: tiene texto blanco, necesita panel oscuro (#f8f9fa daba 1.05:1) */
.imgHistoriaHome img {
    width: 60%;
    height: auto;
    padding: 2rem;
    background-color: #5A4E4E;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(90, 78, 78, .12);
}

/* Tablet en dos columnas: el 60% de media columna dejaba el lema ilegible */
@media (min-width: 769px) and (max-width: 991px) {
    .imgHistoriaHome img {
        width: 85%;
        padding: 1.5rem;
    }
}

@media screen and (max-width: 576px) {
    .imgHistoriaHome img {
        width: 80%;
        margin-top: 2rem;
        padding: 1.25rem !important;
    }

    #visionText {
        padding: 1rem !important;
    }

}

@media (min-width: 577px) and (max-width: 768px) {
    .imgHistoriaHome img {
        width: 70%;
        margin-top: 3rem;
    }

}

/* •----------------Servicio Section----------------• */

#servicios {
    position: relative;
    background-color: #5A4E4E !important; /* Fondo base */
    padding: 100px 20px;
    text-align: center;
    overflow: hidden; /* Evita que las formas sobresalgan */
}

#servicios::after {
    content: "";
    position: absolute;
    bottom: -40%;
    top: 30%;
    left: 0;
    width:100%;
    height: 30%;
    background: #FEC406;
    transform: skewY(15deg);
    z-index: -1;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

#servicios h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 2.5rem;
    color: #FEC406;
}

#servicios p {
    color: #3b3030;
    font-size: 1.1rem !important;
}

#servicios i {
    color: #FEC406 !important;
    transition: transform 0.3s ease;
}

#servicios i:hover {
    transform: scale(1.2);
}

#servicios .btn {
    background-color: #FEC406;
    border-color: transparent;
    color: #3b3030;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-weight: bold;
    transition: 0.3s ease;
}

#servicios .btn:hover {
    text-shadow: none;
    color: #3b3030;
    background-color: #ffcc80;
    transform: translateY(-3px);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.servicio-card {
    background-color: white;
    border: 1px solid #887878;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.servicio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.admPropiedades button,
.admPropiedades a {
    background-color: #FEC406;
    color: #3b3030;
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
    transition: 0.3s ease;
    font-weight: bold;
}

.admPropiedades button:hover,
.admPropiedades a:hover {
    text-shadow: none;
    background-color: #ffcc80;
    transform: translateY(-3px);
    color: #3b3030 !important;
}

/* Responsiveness */
@media (max-width: 576px) {
    #servicios h2 {
        font-size: 1.8rem;
    }

    #servicios p {
        font-size: 1rem;
    }

    #servicios i {
        font-size: 2rem;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    #servicios h2 {
        font-size: 2rem;
    }

    #servicios p {
        font-size: 1.1rem;
    }

    #servicios i {
        font-size: 2.5rem;
    }
}

@media (min-width: 992px) {
    #servicios h2 {
        font-size: 2.5rem;
    }

    #servicios p {
        font-size: 1.2rem;
    }

    #servicios i {
        font-size: 3rem;
    }

    .espacioCardServ {
        min-height: 110px;
    }
}

@media (min-width: 1440px) {
    .espacioCardServ {
        min-height: auto;
    }
}

/* hr divider props y serv  */

.hr-with-text {
    background-color: #5A4E4E;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hr-with-text hr {
    flex-grow: 1;
    border: none;
    height: 2px;
    background: #ffffff;
}

.hr-with-text span {
    font-weight: bold;
    color: #ffffff;
}

/* •-------------------------Estilos específicos para la sección de propiedades -------------------------•*/

#propiedades {
    position: relative;
    background-color: #5A4E4E !important; /* Fondo base */
    padding: 100px 20px;
    overflow: hidden;
}

#propiedades::after {
    content: "";
    position: absolute;
    bottom: -40%;
    top: 30%;
    right: 0;
    width:100%;
    height: 30%;
    background: #FEC406;
    transform: skewY(15deg);
    z-index: -1;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

#propiedades h2 {
    font-size: 2.5rem;
    color: #FEC406;
    font-family: 'nunito', sans-serif;
    margin-bottom: 2rem;
}

#propiedades .swiper-slide img {
    width: 100%;
    height: 350px;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
}

#propiedades .btn {
    background-color: #FEC406;
    color: #3b3030;
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
    transition: 0.3s ease;
    font-weight: bold;
}

#propiedades .btn:hover {
    text-shadow: none;
    color: #3b3030;
    background-color: #ffcc80;
    transform: translateY(-3px);
}

/* El botón de WhatsApp de las cards es .btn: sin esto la regla de arriba lo pintaba de amarillo */
#propiedades .btn.btn-wa {
    background-color: #25D366;
    color: #fff;
}

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

/* Responsive Design */
@media (max-width: 576px) {

    #propiedades h2 {
        font-size: 1.8rem;
    }

    #propiedades .btn {
        font-size: 0.9rem;
    }
}

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

    #propiedades h2 {
        font-size: 2rem;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
}

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

    #propiedades h2 {
        font-size: 2.2rem;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

}

@media (min-width: 992px) {

    #propiedades h2 {
        font-size: 2.5rem;
    }
}

.swiper-pagination-bullet {
    background-color: #FEC406 !important;
}

/* General Styles for Modal */
.modal-content {
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header {
    background-color: #FEC406;
    color: #fff;
    border-bottom: none;
    text-align: center;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
}

.modal-body {
    padding: 2rem;
    background-color: #f9f9f9;
}

/* •----------------Swiper: estilos globales de Inicio----------------•
   Venían del bloque de la sección de testimonios (ya eliminada), pero aplican a todos los
   carruseles de Inicio (hero y destacadas). No borrar sin revisar. */
.swiper-container {
    min-height: 300px;
}

.swiper-wrapper {
    display: flex;
    align-items: center;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-pagination-bullet {
    background: #000000;
}

.swiper-pagination-bullet-active {
    background: #FEC406;
}

/* •----------------Contacto Section----------------• */

#contacto {
    background-color: #f9f9f9;
}

#contacto h2 {
    font-family: 'nunito', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #FEC406;
}

#contacto p {
    font-size: 1.2rem !important;
    color: #606060;
}

form .form-label {
    font-weight: bold;
    color: #3b3030;
    font-size: 1.2rem !important;
}

form input,
form textarea {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

form input:focus,
form textarea:focus {
    border-color: #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}

form button {
    background-color: #FEC406 !important;
    color: #3b3030 !important;
    border-color: transparent !important;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    transition: 0.3s ease;
}

form button:hover {
    text-shadow: none;
    background-color: #ffcc80 !important;

}

/* Redes Sociales */
#contacto .fab {
    color: #FEC406;
    transition: transform 0.3s ease, color 0.3s ease;
}

#contacto .fab:hover {
    color: #ffcc80 !important;
    transform: scale(1.2);
}

/* Responsive */
@media screen and (max-width: 768px) {
    #contacto h2 {
        font-size: 2rem;
    }

    #contacto p {
        font-size: 1rem;
    }

    #contacto .fab {
        font-size: 1.5rem;
    }

}

/* ======================== Parte 2: capa de diseño actual ======================== */

:root {
    /* Inicio usa sombras un poco más marcadas que el resto (valores base en css/base/tokens.css) */
    --shadow: 0 10px 30px rgba(90, 78, 78, .12);
    --shadow-lg: 0 18px 50px rgba(90, 78, 78, .20);
}

.up-eyebrow {
    display: block;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: .4rem;
}

/* Variante de eyebrow en tono brand-dark (antes inline color:var(--brand-dark)) */
.up-eyebrow--dark {
    color: var(--brand-dark);
}

/* Realce de marca para texto suelto — p. ej. spans del hero (antes inline color:#FEC406) */
.txt-brand {
    color: #FEC406;
}

/* ============ SERVICIOS: mismas cards + modales, mejor presentación ============ */
#servicios .servicio-card {
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
    transition: transform .28s ease, box-shadow .28s ease;
    height: 100%;
}

#servicios .servicio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .26);
}

#servicios .servicio-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#servicios .servicio-card img {
    width: 100%;
    /* Con width/height en el <img> (que evitan el salto de layout), el alto hay que dejarlo
       en auto: si no, el atributo height se aplica como alto fijo y deforma la card. */
    height: auto;
    border-radius: 10px;
    transition: transform .5s ease;
}

#servicios .servicio-card:hover img {
    transform: scale(1.045);
}

#servicios .servicio-card h4 {
    position: relative;
}

/* las llamadas a la acción se alinean abajo para cards parejas */
#servicios .servicio-card .d-flex {
    margin-top: auto;
}

#servicios .servicio-card .btn {
    border-radius: 10px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease;
}

#servicios .servicio-card .btn:hover {
    transform: translateY(-2px);
}

/* ============ DESTACADAS (lo común de la card está en css/components/property-cards.css) ============ */
.prop-media {
    height: 220px;
    /* altura fija: idéntico en grilla y carrusel, sin franjas */
    flex: 0 0 auto;
    /* no se estira ni encoge dentro del flex del card */
}

.prop-media img {
    display: block;
}

/* Anula SOLO la regla de producción "#propiedades .swiper-slide img { height:350px; object-fit:contain }"
   dentro de mi carrusel (clase única .dest-carousel + alta especificidad). No afecta al resto. */
#propiedades .dest-carousel .prop-media img {
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* Carrusel de destacadas (clases propias, se activa con >3) */
.dest-carousel {
    position: relative;
    padding: 6px 0 8px;
}

.dest-swiper {
    overflow: hidden;
}

.dest-swiper .swiper-wrapper {
    align-items: stretch;
}

.dest-swiper .swiper-slide {
    height: auto;
}

.dest-swiper .swiper-slide>.prop-card {
    width: 100%;
    height: 100%;
}

.dest-nav {
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: 6;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--brown);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}

.dest-nav:hover {
    background: var(--brand);
    color: #3b3030;
    transform: translateY(-50%) scale(1.06);
}

.dest-prev {
    left: -8px;
}

.dest-next {
    right: -8px;
}

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

.dest-pagination {
    text-align: center;
    margin-top: 18px;
}

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

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

/* Antes de que Swiper se inicialice (el HTML ya viene del servidor): mismo ancho y separación
   que aplica Swiper en cada breakpoint + alto reservado para la paginación. Evita saltos (CLS). */
.dest-swiper:not(.swiper-initialized) .swiper-slide {
    width: 100%;
    margin-right: 24px;
}

.dest-swiper:not(.swiper-initialized)~.dest-pagination {
    min-height: 24px;
}

@media (min-width: 576px) {
    .dest-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 18px) / 2);
        margin-right: 18px;
    }
}

@media (min-width: 992px) {
    .dest-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 44px) / 3);
        margin-right: 22px;
    }
}

@media (min-width: 1200px) {
    .dest-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 72px) / 4);
        margin-right: 24px;
    }
}

@media (max-width: 991.98px) {

    .dest-prev,
    .dest-next {
        top: auto;
        bottom: -6px;
        transform: none;
    }

    .dest-prev {
        left: calc(50% - 60px);
    }

    .dest-next {
        right: calc(50% - 60px);
    }

    .dest-nav:hover {
        transform: scale(1.06);
    }

    .dest-pagination {
        margin-top: 8px;
    }
}

/* Ícono de WhatsApp del panel de contacto en blanco (mayor contraste) */
#contacto .wa-cta i {
    color: #ffffff !important;
}

/* ============ CONTACTO: mismo form, mejor jerarquía y confianza ============ */
#contacto .form-control,
#contacto .form-select {
    border-radius: 12px;
    padding: .65rem .85rem;
}

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

/* Contacto: shell unificado (imagen + formulario) */
.contact-shell {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.contact-aside {
    position: relative;
    padding: 2.6rem 2.2rem;
    color: #fff;
    background: url('/images/home/imagenContacto-1600.webp') center/cover no-repeat;
    display: flex;
    align-items: center;
}

/* Imagen del contacto más chica en pantallas angostas (1600px: 74 KB · 960px: 38 KB) */
@media (max-width: 767.98px) {
    .contact-aside {
        background-image: url('/images/home/imagenContacto-960.webp');
    }
}

.contact-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(43, 36, 36, .88);
}

.contact-aside-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Alta especificidad para vencer a #contacto p / h del CSS del sitio */
#contacto .contact-aside-inner,
#contacto .contact-aside-inner h3,
#contacto .contact-aside-inner p,
#contacto .contact-aside-inner .contact-channels li {
    color: #ffffff !important;
}

#contacto .contact-aside-inner h3 {
    font-weight: 800;
    font-size: 1.6rem;
}

#contacto .contact-aside-inner p {
    font-weight: 400;
    opacity: .92;
}

.wa-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #25D366;
    color: #fff !important;
    font-weight: 700;
    border-radius: 12px;
    padding: .8rem 1.4rem;
    margin: 1.2rem 0 1.5rem;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(37, 211, 102, .38);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.wa-cta i {
    font-size: 1.25rem;
}

.wa-cta:hover {
    background: #1da851;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(37, 211, 102, .48);
}

#contacto .contact-social a {
    text-decoration: none;
}

.contact-channels {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-channels li {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .7rem;
    font-size: .92rem;
}

.contact-channels li i {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
}

.contact-social {
    margin-top: 1.2rem;
}

/* Instagram con el mismo formato que .contact-channels li: círculo translúcido + texto,
   pero con el ícono en el color de la marca Instagram. */
.contact-social a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
}

/* Ícono blanco como el resto de los canales (el color de Instagram sobre el círculo
   translúcido quedaba con poco contraste). Con #contacto delante para vencer a
   "#contacto .fab" de la Parte 1 (amarillo) y a su :hover con !important. */
#contacto .contact-social a i {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #ffffff;
    transition: background .2s ease, transform .2s ease;
}

#contacto .contact-social a:hover {
    color: #fff;
}

#contacto .contact-social a:hover i,
#contacto .contact-social a i:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .28);
    transform: translateY(-2px) scale(1);
}

.contact-form-col {
    padding: 2.4rem;
}

@media (max-width: 767.98px) {
    .contact-shell {
        grid-template-columns: 1fr;
    }

    .contact-form-col {
        padding: 1.6rem;
    }
}

/* ===== Modales de servicios: presentación premium (contenido intacto) ===== */
.modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(43, 36, 36, .35);
}

.modal-header {
    background: var(--brown);
    color: #fff;
    border-bottom: none;
    padding: 1.15rem 1.4rem;
}

.modal-header .modal-title {
    font-weight: 700;
    color: #fff;
}

/* La X viene con background:white inline → la volvemos blanca sobre el header marrón */
.modal-header .btn-close {
    background-color: transparent !important;
    filter: invert(1) grayscale(1) brightness(2.2);
    opacity: .9;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 1.5rem;
    color: #000000;
}

/* Íconos de las listas de los modales de servicios (antes inline color:#FEC406) */
.modal-body i {
    color: var(--brand);
}

.modal-body ul {
    padding-left: 0;
    list-style: none;
}

.modal-body ul li {
    margin-bottom: .55rem;
    line-height: 1.5;
}

.modal-footer {
    border-top: 1px solid var(--line);
    padding: 1rem 1.4rem;
}

/* Acento sutil bajo el título de cada card de servicio */
#servicios .servicio-card h4::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand);
    margin-top: .5rem;
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-top: 1rem;
}

.trust-badges span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(254, 196, 6, .14);
    color: var(--brown);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .82rem;
    font-weight: 600;
}

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

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