/* Marca global (2026-10-08): tokens, base tipográfica, logo y cabecera del
   sitio (templates/partials/nav.html) con la línea visual del inicio nuevo
   (referencias/FreelanClick_PORTADA_CORREGIDA). Una sola fuente: la cargan
   partials/base.html y el inicio (documento propio, sin Bootstrap), así que
   nada de aquí depende de Bootstrap ni de style.css. */

/* El footer se queda abajo cuando la página trae poco contenido (2026-10-24).
   Pasaba en cualquier página corta —una especialidad sin profesionales, por
   ejemplo—: el footer terminaba antes del borde de la ventana y debajo quedaba
   una franja blanca, de 175 px a 1440 × 1080. El fondo azul no la tapaba porque
   lo pinta .fc-footer::before con clip-path:inset(0 -100vmax), que se extiende
   a lo ancho pero no por debajo del footer.

   Se resuelve en el layout global y no página por página. Las tres plantillas
   base dejan en el <body> la misma secuencia —header, main, footer—, así que el
   body es la columna y el <main> es lo que crece. Nada de position:fixed: el
   footer sigue en el flujo y en una página larga va detrás del contenido, sin
   taparlo.

   Va aquí porque css/marca.css es la única hoja que cargan a la vez
   partials/base.html y el inicio, que es un documento propio.

   dvh con vh de respaldo: en el móvil 100vh cuenta la barra del navegador y
   dejaría la página más alta que la pantalla. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
/* El contenido se estira y empuja el footer; con contenido de sobra, flex-grow
   no tiene espacio que repartir y todo queda como estaba. flex-basis auto y
   shrink 0 para que un main alto nunca se comprima. */
body>main{flex:1 0 auto;}

:root{
    --fc-marca-fuente:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --fc-marca-azul:#0066ff;
    --fc-marca-azul-hover:#0055d6;
    --fc-marca-marino:#070c48;
    --fc-marca-suave:#5b67a0;
    --fc-marca-fondo-cabecera:#f5faff;
    --fc-marca-linea:#e3ecfa;
    --fc-marca-alto-cabecera:72px;
    /* Escala de encabezados (2026-10-14). Tres niveles, de mayor a menor:
       hero principal (inicio, ~540 px de alto), hero de página (Nosotros,
       Categorías, Membresías, Guías: 260-460 px) y mini hero o panel (Contacto,
       documentos legales, resultados, ventanas: hasta 280 px). El título de cada
       nivel sale de aquí para que un mismo tipo de bloque se lea igual en todo el sitio. */
    --fc-titulo-hero-principal:clamp(30px,2.55vw,40px);
    --fc-titulo-hero-pagina:clamp(28px,2.45vw,38px);
    --fc-titulo-mini-hero:clamp(25px,2.1vw,32px);
    --fc-titulo-panel:26px;
    /* Eje de contenido del sitio (2026-10-15). Un solo ancho para la cabecera, el
       cuerpo y los hero: antes cada hero salía de su propia lámina (1672, 1929,
       1448, 935 px) anclada al viewport, y el texto quedaba a distinta altura del
       eje según el ancho de la ventana. --fc-margen-sitio es la distancia desde el
       borde de un bloque a todo ancho hasta ese eje: se usa como padding-inline y
       deja el contenido donde lo pone la cabecera. El % se resuelve en el elemento
       que lo usa, así que no depende de vw (en Windows vw suma la barra de scroll
       y por eso el mismo hero se veía corrido en unos equipos y en otros no). */
    --fc-ancho-sitio:1280px;
    --fc-gutter-sitio:32px;
    --fc-margen-sitio:calc(max(0px,(100% - var(--fc-ancho-sitio)))/2 + var(--fc-gutter-sitio));
}
/* El sangrado sigue al de la cabecera en cada corte, así que lo que cuelga de
   --fc-margen-sitio se mueve con ella y no hay que repetir los valores. */
@media (max-width:1279.98px){:root{--fc-gutter-sitio:24px;}}
@media (max-width:1179.98px){:root{--fc-gutter-sitio:20px;}}

/* Base tipográfica: Inter suavizada. Solo el render; tamaños y pesos los
   pone cada página (formularios, tablas, chat y contratos no cambian). */
:where(body){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}

/* Barra de desplazamiento de la página (2026-10-14): una sola para todo el sitio, inicio
   incluido (este archivo lo cargan partials/base.html y el inicio). Discreta, azul de marca,
   redondeada y más intensa al pasar el mouse. Solo la de la página (html): las listas y
   carruseles con barra propia siguen con la suya. Chrome y Edge usan ::-webkit-scrollbar;
   Firefox, scrollbar-color, que va solo para él porque en Chrome anularía este estilo. */
html::-webkit-scrollbar{width:10px;height:10px;}
html::-webkit-scrollbar-track{background:#eef3fb;}
html::-webkit-scrollbar-thumb{background:rgba(0,102,255,.42);border:2px solid #eef3fb;border-radius:10px;}
html::-webkit-scrollbar-thumb:hover{background:rgba(0,102,255,.7);}
html::-webkit-scrollbar-thumb:active{background:var(--fc-marca-azul);}
html::-webkit-scrollbar-corner{background:#eef3fb;}
@supports (-moz-appearance:none){
    html{scrollbar-width:thin;scrollbar-color:rgba(0,102,255,.5) #eef3fb;}
}

/* Logo de texto (cabecera y footer). */
.fc-logo{display:inline-flex;align-items:baseline;font-family:var(--fc-marca-fuente);font-size:24px;font-weight:900;
    line-height:1;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;}
.fc-logo__freelan{color:var(--fc-marca-marino);letter-spacing:.04em;}
.fc-logo__click{color:var(--fc-marca-azul);}
.fc-logo--claro .fc-logo__freelan{color:#fff;}
.fc-logo:focus-visible{outline:2px solid var(--fc-marca-azul);outline-offset:4px;border-radius:4px;}
/* Logo como imagen (admin: Imágenes del sitio > Marca): ocupa la misma caja que el de texto,
   1em de alto, y sigue su tamaño en cada ancho; el ancho sale de la proporción de la imagen. */
.fc-logo__imagen{display:block;width:auto;height:1em;max-width:min(60vw,260px);object-fit:contain;}
/* Marca de la cabecera (2026-10-26), si el admin no subió un «Logo del header»: el
   colibrí y el logotipo de static/img/branding/ (colibri-cabecera.webp y
   logotipo-cabecera.webp, recortados y a 3x). Alto fijo y ancho por su proporción:
   no se deforman. El nombre va más bajo que el colibrí para que sus letras midan
   como el menú y el ave marque la marca. */
.fc-logo--marca{align-items:center;gap:10px;}
.fc-logo__colibri{display:block;flex:none;width:auto;height:44px;}
.fc-logo__nombre{display:block;flex:none;width:auto;height:28px;}

/* ---------- El colibrí vivo (2026-10-26) ----------
   Solo se anima el colibrí; el logotipo no se mueve. Todo es transform y opacity
   (sin layout ni repintado de la cabecera): ocupa siempre su caja de 51 × 44 px,
   así que el menú y el logotipo no saltan.
   - Entrada (1,2 s): llega desde la izquierda en curva, girando en 3D y creciendo,
     se pasa un poco y se asienta junto al logotipo.
   - Vuelo (5,6 s, sin fin): sube y baja ~8 px, se corre ~3 px a los lados y se
     inclina en los tres ejes; la sombra de abajo se achica cuando sube.
   - Brillo: un halo azul y naranja detrás, que late con el vuelo.
   - Hover: crece, se inclina en 3D con un rebote y brilla más.
   Capas: __ave (perspectiva, halo y sombra) > __vuelo (entrada y vuelo) > img
   (hover), para que cada transform no pise al otro. --ave-a es la amplitud. */
.fc-logo__ave{--ave-a:8px;position:relative;display:block;flex:none;perspective:320px;}
.fc-logo__vuelo{display:block;transform-style:preserve-3d;will-change:transform;
    animation:fc-ave-entrada 1.2s cubic-bezier(.22,.9,.3,1) both,fc-ave-vuelo 5.6s ease-in-out 1.2s infinite;}
.fc-logo__ave .fc-logo__colibri{position:relative;z-index:1;
    transition:transform .55s cubic-bezier(.34,1.56,.64,1),filter .35s ease;
    filter:drop-shadow(0 2px 3px rgba(4,30,90,.18));}
/* Halo: detrás del ave, late con el vuelo. */
.fc-logo__ave::before{content:"";position:absolute;inset:-5px -4px;z-index:0;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle at 42% 45%,rgba(0,102,255,.32),rgba(255,138,43,.18) 46%,rgba(255,138,43,0) 70%);
    animation:fc-ave-halo-entrada 1.2s ease-out both,fc-ave-halo 5.6s ease-in-out 1.2s infinite;}
/* Sombra en el «piso»: más chica y tenue cuando el ave sube. */
.fc-logo__ave::after{content:"";position:absolute;left:18%;right:18%;bottom:-7px;height:6px;border-radius:50%;
    pointer-events:none;background:radial-gradient(ellipse at center,rgba(4,30,90,.38),rgba(4,30,90,0) 70%);
    animation:fc-ave-sombra-entrada 1.2s ease-out both,fc-ave-sombra 5.6s ease-in-out 1.2s infinite;}

.fc-logo--marca:hover .fc-logo__colibri,.fc-logo--marca:focus-visible .fc-logo__colibri{
    transform:translateY(-3px) scale(1.16) rotateX(12deg) rotateY(-24deg) rotateZ(-9deg);
    filter:drop-shadow(0 7px 9px rgba(4,30,90,.32)) drop-shadow(0 0 7px rgba(255,150,40,.55));}
.fc-logo--marca:hover .fc-logo__ave::before,.fc-logo--marca:focus-visible .fc-logo__ave::before{
    animation:fc-ave-halo-hover 1.4s ease-in-out infinite alternate;}

@keyframes fc-ave-entrada{
    0%{opacity:0;transform:translate3d(calc(var(--ave-a)*-3),calc(var(--ave-a)*1.2),0) scale(.4) rotateY(-75deg) rotateZ(-20deg);}
    45%{opacity:1;transform:translate3d(calc(var(--ave-a)*-1),calc(var(--ave-a)*-.6),0) scale(1.06) rotateY(18deg) rotateZ(9deg);}
    72%{transform:translate3d(calc(var(--ave-a)*.4),calc(var(--ave-a)*.3),0) scale(.96) rotateY(-8deg) rotateZ(-3deg);}
    100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotateY(0) rotateZ(0);}
}
@keyframes fc-ave-vuelo{
    0%,100%{transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0);}
    25%{transform:translate3d(calc(var(--ave-a)*.4),calc(var(--ave-a)*-1),0) rotateX(9deg) rotateY(-18deg) rotateZ(-6deg);}
    50%{transform:translate3d(0,calc(var(--ave-a)*-.35),0) rotateX(0) rotateY(4deg) rotateZ(3deg);}
    75%{transform:translate3d(calc(var(--ave-a)*-.4),calc(var(--ave-a)*-.95),0) rotateX(-7deg) rotateY(18deg) rotateZ(6deg);}
}
@keyframes fc-ave-halo-entrada{0%{opacity:0;transform:scale(.3);}100%{opacity:.7;transform:scale(.9);}}
@keyframes fc-ave-halo{0%,100%{opacity:.7;transform:scale(.9);}25%,75%{opacity:1;transform:scale(1.08);}}
@keyframes fc-ave-halo-hover{0%{opacity:.95;transform:scale(1.15);}100%{opacity:1;transform:scale(1.35);}}
@keyframes fc-ave-sombra-entrada{0%{opacity:0;transform:scaleX(.3);}100%{opacity:1;transform:scaleX(1);}}
@keyframes fc-ave-sombra{0%,100%{opacity:1;transform:scaleX(1);}25%,75%{opacity:.45;transform:scaleX(.68);}}

/* Quien pide menos movimiento ve el colibrí quieto, con su halo y su sombra. */
@media (prefers-reduced-motion:reduce){
    .fc-logo__vuelo,.fc-logo__ave::before,.fc-logo__ave::after{animation:none;}
    .fc-logo__ave::before{opacity:.75;}
    .fc-logo__ave .fc-logo__colibri{transition:none;}
    .fc-logo--marca:hover .fc-logo__colibri,.fc-logo--marca:focus-visible .fc-logo__colibri{transform:none;}
}

/* ---------------------------------------------------------------------------
   Cabecera. Casi todas las páginas la incluyen dentro de su .container: el
   fondo y la línea inferior se extienden a lo ancho con una sombra recortada
   (no 100vw, que en Windows suma la barra de scroll y desborda).
   --------------------------------------------------------------------------- */
.fc-nav{position:sticky;top:0;z-index:1020;font-family:var(--fc-marca-fuente);color:var(--fc-marca-marino);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fc-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fc-marca-fondo-cabecera);
    box-shadow:0 0 0 100vmax var(--fc-marca-fondo-cabecera),0 1px 0 100vmax var(--fc-marca-linea);
    clip-path:inset(0 -100vmax -1px -100vmax);}
.fc-nav :where(a){text-decoration:none;}
.fc-nav :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
.fc-nav :where(p){margin:0;}
.fc-nav :where(form){margin:0;}
.fc-nav__marco{position:relative;display:flex;align-items:center;gap:28px;width:min(100%,var(--fc-ancho-sitio));
    height:var(--fc-marca-alto-cabecera);margin:0 auto;padding:0 var(--fc-gutter-sitio);}
/* Varias páginas (perfil público, calificaciones, contactos) incluyen la cabecera dentro
   de su .container. Su sangrado se sumaba al del marco y el logo quedaba corrido hacia
   adentro respecto del contenido de la propia página. Se descuenta para que el marco
   arranque donde arrancaría a todo ancho: el logo cae en el eje en los dos casos. */
.container>.fc-nav{margin-inline:-15px;}
@media (min-width:1200px){.container>.fc-nav{margin-inline:calc(-1*var(--fc-gutter-sitio));}}
.fc-nav__logo{flex:none;}
.fc-nav__menu{display:none;}
.fc-nav__panel{display:flex;flex:1;align-items:center;gap:24px;min-width:0;}

.fc-nav__enlaces{display:flex;align-items:center;gap:8px;margin:0 auto;}
.fc-nav__grupo{position:relative;}
.fc-nav__enlace{position:relative;display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border-radius:9px;
    color:var(--fc-marca-marino);font-size:16px;font-weight:400;line-height:1.3;letter-spacing:0;white-space:nowrap;
    transition:background-color .15s ease,color .15s ease;}
.fc-nav__enlace:hover,.fc-nav__desplegar[aria-expanded="true"]{background:#e2efff;color:var(--fc-marca-azul);}
/* Como la referencia: el activo solo cambia de color y lleva su línea. */
.fc-nav__enlace.is-activo{color:var(--fc-marca-azul);}
.fc-nav__enlace.is-activo::after{content:"";position:absolute;left:14px;right:14px;bottom:1px;height:2px;
    border-radius:999px;background:var(--fc-marca-azul);}
.fc-nav__desplegar.is-activo::after{right:32px;}
.fc-nav__desplegar>i{font-size:18px;line-height:1;transition:transform .15s ease;}
.fc-nav__desplegar[aria-expanded="true"]>i{transform:rotate(180deg);}
.fc-nav__enlace:focus-visible,.fc-nav__icono:focus-visible,.fc-nav__usuario:focus-visible,
.fc-nav__ingresar:focus-visible,.fc-nav__registrate:focus-visible,.fc-nav__menu:focus-visible,
.fc-nav__submenu :is(a,button):focus-visible{outline:2px solid var(--fc-marca-azul);outline-offset:2px;}

.fc-nav__submenu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:236px;padding:8px;
    border:1px solid var(--fc-marca-linea);border-radius:12px;background:#fff;
    box-shadow:0 14px 34px -10px rgba(0,30,68,.28);}
.fc-nav__submenu[hidden]{display:none;}
.fc-nav__submenu--cuenta{left:auto;right:0;}
.fc-nav__submenu>a,.fc-nav__submenu>button,.fc-nav__submenu form>button{display:flex;align-items:center;gap:10px;width:100%;
    padding:9px 12px;border-radius:8px;color:var(--fc-marca-marino);font-size:14px;font-weight:500;line-height:1.3;text-align:left;}
.fc-nav__submenu>a:hover,.fc-nav__submenu>button:hover,.fc-nav__submenu form>button:hover,
.fc-nav__submenu>a[aria-current="page"]{background:#f1f6ff;color:var(--fc-marca-azul);}
.fc-nav__submenu i{font-size:17px;color:var(--fc-marca-suave);}
.fc-nav__saludo{padding:6px 12px 8px;color:var(--fc-marca-suave);font-size:12px;font-weight:600;letter-spacing:.02em;}

.fc-nav__acciones{display:flex;flex:none;align-items:center;gap:8px;}
.fc-nav__icono{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:10px;color:#3a4675;font-size:20px;line-height:1;transition:background-color .15s ease,color .15s ease;}
.fc-nav__icono:hover{background:#e2efff;color:var(--fc-marca-azul);}
/* Icono de contactos y mensajes: el dibujo de referencias/iconocontactos. Es una
   imagen, así que no cambia de color con el cursor —su referencia quitó
   expresamente las ampliaciones y los filtros—; lo que responde es el fondo del
   botón, igual que en el de notificaciones. El 22 px es el tamaño óptico del
   glifo al que sustituye (20 px de letra). */
.fc-nav__icono--contactos .fc-nav__dibujo{display:block;width:22px;height:auto;aspect-ratio:709/689}
/* Insignia de no leídos (también la que crea notifications.js). */
.fc-nav .fc-nav__insignia{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:#e5243b;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;
    box-shadow:0 0 0 2px var(--fc-marca-fondo-cabecera);transform:translate(35%,-20%);}
.fc-nav .fc-nav__insignia[hidden]{display:none;}
.fc-nav__usuario{display:flex;align-items:center;gap:10px;margin-left:4px;padding:4px 10px 4px 4px;border-radius:12px;
    text-align:left;transition:background-color .15s ease;}
.fc-nav__usuario:hover,.fc-nav__usuario[aria-expanded="true"]{background:#e2efff;}
.fc-nav__avatar{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;background:#e6eaf3;}
.fc-nav__usuario-texto{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.fc-nav__usuario .user-name-text{max-width:110px;overflow:hidden;color:var(--fc-marca-marino);font-size:14px;font-weight:600;
    text-overflow:ellipsis;white-space:nowrap;}
.fc-nav__usuario .user-name-sub-text{color:var(--fc-marca-suave);font-size:12px;font-weight:500;}
.fc-nav__usuario>i{font-size:18px;color:var(--fc-marca-suave);}
.fc-nav__ingresar{padding:9px 12px;border-radius:10px;color:var(--fc-marca-marino);font-size:16px;font-weight:700;white-space:nowrap;}
.fc-nav__ingresar:hover{color:var(--fc-marca-azul);}
.fc-nav__registrate{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:1px solid #deedff;
    border-radius:12px;background:var(--fc-marca-azul);box-shadow:0 2px 6px rgba(0,102,255,.18);color:#fff;
    font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap;transition:background-color .15s ease;}
.fc-nav__registrate:hover{background:var(--fc-marca-azul-hover);color:#fff;}

/* Entre 1180 y 1280 px: los mismos enlaces en una línea, un poco más juntos (seis enlaces desde que
   volvió Membresías; más angosto no caben y van en el menú). */
@media (max-width:1279.98px){
    .fc-nav__marco{gap:20px;padding:0 var(--fc-gutter-sitio);}
    .fc-nav__panel{gap:16px;}
    .fc-nav__enlace{padding:8px 10px;}
    .fc-nav__enlaces{gap:2px;}
    .fc-nav__enlace.is-activo::after{left:10px;right:10px;}
    .fc-nav__desplegar.is-activo::after{right:28px;}
}

/* Celular, tablet y escritorio angosto (bajo 1180 px): menú desplegable bajo la cabecera. */
@media (max-width:1179.98px){
    :root{--fc-marca-alto-cabecera:64px;}
    .fc-nav__marco{gap:12px;padding:0 var(--fc-gutter-sitio);}
    .fc-logo{font-size:21px;}
    .fc-logo--marca{gap:8px;}
    .fc-logo__colibri{height:38px;}
    .fc-logo__ave{--ave-a:6px;}
    .fc-logo__nombre{height:24px;}
    .fc-nav__menu{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-left:auto;
        border-radius:10px;color:var(--fc-marca-marino);font-size:26px;line-height:1;}
    .fc-nav__menu[aria-expanded="true"]{background:#e2efff;color:var(--fc-marca-azul);}
    .fc-nav__panel{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:12px;
        max-height:calc(100vh - var(--fc-marca-alto-cabecera));overflow-y:auto;padding:10px 20px 18px;
        background:var(--fc-marca-fondo-cabecera);box-shadow:0 14px 24px -18px rgba(0,30,68,.45);}
    .fc-nav.is-abierto .fc-nav__panel{display:flex;}
    .fc-nav__enlaces{flex-direction:column;align-items:stretch;gap:2px;margin:0;}
    .fc-nav__enlace{width:100%;padding:12px 8px;font-size:16px;}
    .fc-nav__enlace.is-activo::after{left:8px;right:auto;width:24px;bottom:6px;}
    .fc-nav__desplegar.is-activo::after{right:auto;}
    .fc-nav__desplegar>i{margin-left:auto;}
    .fc-nav__submenu{position:static;min-width:0;margin:2px 0 6px;border:0;box-shadow:none;background:#fff;}
    .fc-nav__acciones{flex-wrap:wrap;gap:10px;padding-top:12px;border-top:1px solid var(--fc-marca-linea);}
    .fc-nav__cuenta{flex:1 1 100%;}
    .fc-nav__usuario{width:100%;margin:0;}
    .fc-nav__usuario>i{margin-left:auto;}
    .fc-nav__usuario .user-name-text{max-width:none;}
    .fc-nav__ingresar,.fc-nav__registrate{flex:1;justify-content:center;text-align:center;}
    .fc-nav__ingresar{border:1px solid #cfe0fb;background:#fff;}
}
@media print{.fc-nav{display:none!important;}}