/* =========================================================================
   SCORT — Componentes compartidos
   ========================================================================= */

.scort-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--space-3) var(--space-4);

    /* El acento a secas, con texto blanco, daba 3,68:1. Este enlace es lo PRIMERO que
       encuentra quien navega con teclado, así que es el último sitio donde puede estar
       por debajo del umbral. Va con el mismo tono profundo del botón primario. */
    background: var(--scort-cta-de);
    color: var(--scort-accent-contrast);
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: var(--weight-semibold);
}

.scort-skip-link:focus { left: 0; color: var(--scort-accent-contrast); }

/* =========================================================================
   NAVBAR
   ========================================================================= */

.scort-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--navbar-height);

    /* El mismo cristal que la barra de garantías y la de filtros: los tres paneles
       flotantes de la portada salen del mismo token para que no haya tres opacidades
       distintas conviviendo en una pantalla. */
    background: var(--scort-glass-strong);
    backdrop-filter: blur(var(--scort-glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--scort-glass-blur)) saturate(140%);
    border-bottom: 1px solid var(--scort-border);

    /* Una línea de acento a media opacidad bajo el borde. Es lo que separa una barra
       oscura de una barra que parece parte de una plataforma: se nota sin verse. */
    box-shadow:
        0 1px 0 rgba(var(--scort-accent-rgb), 0.10),
        0 10px 34px rgba(0, 0, 0, 0.45);
}

.scort-navbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: 100%;
}

/* --- Marca -------------------------------------------------------------- */

.scort-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    color: var(--scort-text);
}

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

/* LA CORONA, CON SU NEÓN. Dos sombras y no una: la cerrada define el filo y la
   abierta es el resplandor que se derrama en el fondo, que es lo que hace que
   parezca encendida en vez de dibujada. Con una sola queda o dura o difusa. */
.scort-brand__mark {
    display: grid;
    place-items: center;
    filter:
        drop-shadow(0 0 3px rgba(var(--scort-accent-rgb), 0.95))
        drop-shadow(0 0 14px rgba(var(--scort-accent-rgb), 0.55));
}

.scort-brand__text { display: flex; flex-direction: column; line-height: 1; }

/* «KACHEROS», EN MAYÚSCULAS, como lo pidió el propietario.

   Por la hoja y no escribiéndolo así en la configuración: el nombre se usa también en
   frases —«Kacheros no interfiere…», el título de la pestaña, los correos— donde tiene
   que ir en su forma normal. Aquí es logotipo, y en un logotipo la mayúscula es diseño,
   no ortografía.

   OJO CON EL ANCHO. La mayúscula ocupa más que la minúscula, y este nombre ya rompió
   una vez la barra de 360 px al pasar de «SCORT» a «Kacheros» (lo cuenta la regla de
   440 más abajo). Se comprobó midiendo en esos anchos: cabe, porque a la vez salieron de
   la barra las tres pastillas de audiencia, que ocupaban bastante más. */
.scort-brand__name {
    font-size: 1.32rem;
    font-weight: var(--weight-black);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* «+ MI ANUNCIO», EN MAYÚSCULAS. Como la marca: por la hoja y no en el texto, para que un
   lector de pantalla lo lea como dos palabras y no lo deletree como si fueran siglas. */
.scort-navbar__cta-texto {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* «PREMIUM» CON SUS RAYAS A LOS LADOS, como en el logo. Son `::before` y
   `::after` y no dos <span>: es adorno puro, y metido en el marcado se lo
   leería un lector de pantalla como parte del nombre de la marca.

   `flex` con `gap` para que las rayas queden centradas con la palabra y crezcan
   hasta ocupar el ancho del nombre de encima — que es lo que las alinea con
   «Kacheros» sin fijar un ancho a mano. */
.scort-brand__tagline {
    display: flex;
    align-items: center;
    gap: 0.4em;

    /* 0,6rem eran 9,6px: por debajo del suelo de 12px del sistema. */
    font-size: var(--font-size-xs);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--scort-accent);
    margin-top: 3px;
}

.scort-brand__tagline::before,
.scort-brand__tagline::after {
    content: "";
    flex: 1 1 auto;
    block-size: 1px;

    /* Se desvanecen hacia fuera. Una raya sólida de punta a punta parece un
       subrayado partido; ésta parece un adorno. */
    background: linear-gradient(
        to right,
        transparent,
        rgba(var(--scort-accent-rgb), 0.9));
}

.scort-brand__tagline::after {
    background: linear-gradient(
        to left,
        transparent,
        rgba(var(--scort-accent-rgb), 0.9));
}

/* --- Enlaces ------------------------------------------------------------ */

.scort-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
}

.scort-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--scort-text-muted);
    font-size: var(--font-size-sm);

    /* Un punto más de peso y algo de separación entre letras: el menú es la primera
       lectura de la página y con el peso medio anterior se leía como texto de relleno.
       Se queda corto a propósito de las mayúsculas completas, que a este tamaño
       obligarían a subir el interletrado y romperían la línea en móvil. */
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition:
        color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

/* Los iconos heredan currentColor, así que el estado los tiñe sin reglas propias. */
.scort-nav__icon {
    width: 17px;
    height: 17px;
    flex: none;
    transition: transform var(--duration-fast) var(--ease-out);
}

.scort-nav__link:hover {
    color: var(--scort-text);
    background: var(--scort-accent-soft);
}

.scort-nav__link:hover .scort-nav__icon { transform: translateY(-1px); }

/* El activo va en ACENTO, no en blanco: es lo que hace que se lea de un vistazo dónde
   estás. El halo del icono lo separa del texto sin necesidad de un fondo sólido, que a
   este tamaño ensuciaría la barra. */
.scort-nav__link--active {
    color: var(--scort-accent);
    background: var(--scort-accent-soft);
}

.scort-nav__link--active .scort-nav__icon {
    filter: drop-shadow(0 0 6px rgba(var(--scort-accent-rgb), 0.55));
}

/* Subrayado de acento en el enlace activo, como en las referencias. */
.scort-nav__link--active::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: -0.55rem;
    height: 2px;
    border-radius: 2px;
    background: var(--scort-accent);
    box-shadow: 0 0 10px rgba(var(--scort-accent-rgb), 0.8);
}

/* El icono no debe saltar para quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .scort-nav__icon,
    .scort-nav__link:hover .scort-nav__icon { transition: none; transform: none; }
}

/* AQUÍ ESTABA LA CAJA DE BÚSQUEDA de la barra, `.scort-search`. Se fue el 21/09/2026: el
   propietario pidió también en PC la lupa del móvil (ver «LA LUPA Y SU BUSCADOR», más
   abajo), y la caja de texto va ahora dentro de su ventana. */

/* --- Acciones ----------------------------------------------------------- */

/* EL MARGEN AUTOMÁTICO LLEVA EL GRUPO A LA DERECHA, en todos los anchos.
   Antes lo hacía la caja de búsqueda, que crecía hasta llenar el hueco; sin ella, la
   lupa, «Mi anuncio» y el avatar se quedaban pegados a los enlaces con media barra
   vacía detrás. Va en el grupo y no en una de sus piezas, para que valga esté la que
   esté. */
.scort-navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    margin-inline-start: auto;
}

/* EL CONMUTADOR DE AUDIENCIA EN LA BARRA: SOLO EN PC.

   Escondido por defecto y encendido a partir de 1101px, que es el mismo corte en el que
   aparece la navegacion principal. Asi «PC» significa lo mismo en los dos sitios, y por
   debajo de ese ancho la barra queda exactamente como estaba: la lupa, «Mi anuncio» y el
   avatar, con todo el sitio para que el rotulo no se parta.

   Es lo contrario de lo que hubo hasta el 21/09 —el conmutador en TODOS los anchos—, que
   es justo lo que obligo a quitarlo. */
.scort-navbar__audiencia { display: none; }

@media (min-width: 1101px) {
    .scort-navbar__audiencia { display: inline-flex; }
}

/* Entre 1101 y 1280 la barra va justa: caben los tres enlaces, las tres pastillas, la
   lupa, «Mi anuncio» y el avatar, pero sin aire. Se recortan los relleno laterales de las
   pastillas —no su altura, que es lo que hace que se puedan pulsar— y el hueco del grupo. */
@media (min-width: 1101px) and (max-width: 1280px) {
    .scort-navbar__actions { gap: var(--space-2); }
    .scort-navbar__audiencia .scort-audience__option { padding-inline: 0.6rem; }
}

.scort-avatar-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--scort-surface);
    border: 1px solid var(--scort-border-strong);
    color: var(--scort-text-muted);
    flex: none;
    transition:
        border-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}

.scort-avatar-btn:hover {
    border-color: var(--scort-accent);
    color: var(--scort-accent);
}

.scort-avatar-btn__initial {
    font-weight: var(--weight-bold);
    font-size: var(--font-size-base);
    color: var(--scort-accent);
}

/* --- Conmutador de audiencia -------------------------------------------- */

.scort-audience {
    display: inline-flex;
    padding: 3px;
    background: var(--scort-bg-soft);
    border: 1px solid var(--scort-border);
    border-radius: var(--radius-pill);
    gap: 2px;
}

.scort-audience__option {
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--scort-text-dim);
    font-size: var(--font-size-xs);

    /* `semibold` y no `bold`: es el peso de todos los botones del sitio, y lo que
       pidio el propietario — «no tan grueso». El mismo que llevan ahora los tres
       grandes de la portada, para que el conmutador se lea igual en las dos
       pantallas. */
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}

/* La inicial solo aparece en el corte más estrecho; por defecto manda la palabra. */
.scort-audience__short { display: none; }

/* CADA OPCIÓN CON SU COLOR, siempre, esté elegida o no.

   Antes las tres eran del mismo gris y solo la activa se teñía —y del acento
   del tema, que ES el color de la activa—. O sea: el color nunca decía qué
   había detrás de cada botón, solo repetía lo ya elegido. Ahora el rosa, el
   azul y el violeta están a la vista desde el principio, que es lo que hace
   que se entienda qué hace el conmutador antes de tocarlo.

   Los colores salen de --scort-audiencia-*, no del acento: el acento es UNO
   —el activo— y con él las tres saldrían iguales. */
/* `--op` es el color de IDENTIDAD —el vivo, para texto y bordes sobre el fondo
   oscuro— y `--op-boton` el de BOTÓN, un tono más hondo, que es el que usan
   «Publicar anuncio» y «BUSCAR» cuando el tema está en esa audiencia.

   Los dos, porque este conmutador se pinta de las dos formas: aquí, en la barra,
   va como texto de color sobre el cristal; en la portada va como tres botones
   rellenos al lado de los CTA del sitio, y ahí tiene que ser el MISMO color que
   ellos o se nota — se notó. */
.scort-audience__option[data-audience="women"] { --op: var(--scort-audiencia-women); --op-rgb: var(--scort-audiencia-women-rgb); --op-boton: var(--scort-cta-women); --op-hondo: var(--scort-cta-women-a); }
.scort-audience__option[data-audience="men"]   { --op: var(--scort-audiencia-men);   --op-rgb: var(--scort-audiencia-men-rgb);   --op-boton: var(--scort-cta-men);   --op-hondo: var(--scort-cta-men-a); }
.scort-audience__option[data-audience="all"]   { --op: var(--scort-audiencia-all);   --op-rgb: var(--scort-audiencia-all-rgb);   --op-boton: var(--scort-cta-all);   --op-hondo: var(--scort-cta-all-a); }

/* RELLENOS TAMBIÉN AQUÍ, y del color de BOTÓN, igual que en la portada.

   Lo pidió el propietario para el escritorio después de verlo en el móvil: «que lleven el
   mismo color de los otros botones». Y es lo coherente — a dos dedos de esta barra está
   «Mi anuncio», y hasta ahora estos tres iban en texto de color mientras aquél iba relleno.

   Antes eran texto sobre el cristal de la barra, con `--op` (el color de identidad, el
   vivo). Ahora son `--op-boton` (el hondo) con tinta blanca, que es lo mismo que usa «Mi
   anuncio» y lo mismo que se hizo en la portada: un solo tratamiento para el conmutador,
   en las dos pantallas.

   EL BLANCO PASA AA sobre estos tres rellenos: 5,7:1 en el morado, 5,1 en el azul y 4,6 en
   el rosa, y aquí el texto es de 12px, así que la exigencia es la de texto normal —4,5— y
   no la de texto grande. Con el color de identidad, más claro, el blanco no habría
   llegado. */
.scort-audience__option {
    background: var(--op-boton);
    color: var(--scort-accent-contrast);
}

.scort-audience__option:hover,
.scort-audience__option:focus-visible {
    color: var(--scort-accent-contrast);
    background: var(--op-boton);
    box-shadow: 0 0 14px rgba(var(--op-rgb), 0.55);
}

/* Y LA ELEGIDA, HUNDIDA. El MISMO lenguaje que en la portada, para que el conmutador se
   lea igual en las dos pantallas.

   EL ARO ERA BLANCO Y AHORA ES DEL PROPIO BOTÓN, un tono más hondo — lo pidió el
   propietario: «como si estuviera en down el botón». Y funciona mejor de lo que parece:
   el blanco era un color ajeno pegado encima, mientras que el tono hondo ya existe en el
   sistema (es el final del degradado de ese mismo botón), así que el aro se lee como
   sombra del propio botón y no como un adorno.

   TRES SOMBRAS, y cada una hace algo:
     1. el aro hondo, que dibuja el filo hundido;
     2. una sombra interior desde ARRIBA, que es lo que de verdad da el efecto de
        hundido — la luz viene de arriba, así que un botón pulsado se oscurece por ahí;
     3. el halo hacia fuera, que lo separa de sus dos vecinos.

   Sigue siendo una diferencia de FORMA además de color —el relieve—, así que no depende
   de distinguir dos tonos parecidos. Y la opción elegida va marcada con `aria-pressed` en
   el marcado, de modo que un lector de pantalla no depende de nada de esto. */
.scort-audience__option--active {
    background: var(--op-boton);
    color: var(--scort-accent-contrast);
    box-shadow:
        inset 0 0 0 2px var(--op-hondo),
        inset 0 3px 6px -2px rgba(0, 0, 0, 0.55),
        0 0 16px rgba(var(--op-rgb), 0.55);
}

.scort-audience__option--active:hover {
    background: rgba(var(--op-rgb), 0.16);
}

/* =========================================================================
   FOOTER
   ========================================================================= */

/* El pie se apoya abajo, y a una distancia razonable de lo último que hay.
   Tenía 96px de margen superior FIJO, que sumados a los 48px de relleno inferior de la
   última sección dejaban casi 150px de negro en todas las pantallas: no se leía como aire,
   se leía como una página que se acaba antes de tiempo. Ahora son 48px, y `margin-top:
   auto` empuja el pie al fondo cuando el contenido no llena la ventana —que es cuando ese
   vacío se notaba más—. */
.scort-footer {
    position: relative;
    margin-top: auto;
    padding-top: var(--space-7);
    border-top: 1px solid var(--scort-border);
    background: var(--scort-bg-soft);
    padding-block: var(--space-6) var(--space-5);
}

/* Filete de marca cerrando la página, del mismo degradado que los botones pero al 55 %
   y de un píxel: se ve al llegar abajo y no compite con nada. Es el eco de la línea de
   acento que lleva la barra superior por debajo de su borde. */
.scort-footer::before {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--scort-degradado-de) 30%,
        var(--scort-degradado-a) 70%,
        transparent);
    opacity: 0.55;
}

.scort-trustbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--scort-border);
}

.scort-trustbar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.scort-trustbar__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--scort-accent-soft);
    border: 1px solid rgba(var(--scort-accent-rgb), 0.28);
    color: var(--scort-accent);
    flex: none;

    /* Halo hacia dentro y no hacia fuera: cuatro iconos con sombra exterior en fila
       ensucian el pie. Hacia dentro parece cristal iluminado por detrás. */
    box-shadow: inset 0 0 18px rgba(var(--scort-accent-rgb), 0.16);
}

.scort-trustbar__title {
    font-size: var(--font-size-base);
    font-weight: var(--weight-semibold);
}

.scort-trustbar__text {
    font-size: var(--font-size-sm);
    color: var(--scort-text-muted);
}

/* EN EL TELÉFONO, LA FRANJA SE ENCOGE.

   Cuatro apartados con icono de 44px, título y subtítulo, uno debajo de otro:
   unos 330px de pie antes de llegar a los enlaces. En una pantalla donde toda la
   ficha mide 800, eso es media pantalla para decir cuatro cosas que nadie ha
   venido a leer.

   Dos columnas, iconos de 34 y SOLO los titulares. El subtítulo es el que aporta
   menos —«Tu información está protegida» no añade nada a «Privacidad
   garantizada»— y es el que más ocupa. De 330px se queda en unos 110.

   Se encoge y no se borra: es lo que separa una plataforma de un tablón de
   anuncios, y quitarlo del móvil sería quitarlo del sitio donde se mira casi
   todo. */
@media (max-width: 767px) {
    .scort-trustbar {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        padding-bottom: var(--space-4);
    }

    .scort-trustbar__item {
        gap: var(--space-2);
    }

    .scort-trustbar__icon {
        width: 34px;
        height: 34px;
    }

    .scort-trustbar__icon svg {
        width: 17px;
        height: 17px;
    }

    .scort-trustbar__title {
        font-size: var(--font-size-xs);
        line-height: 1.25;
    }

    .scort-trustbar__text {
        display: none;
    }

    /* --- Y EL PIE DE ABAJO, EN TRES FILAS LIMPIAS ---------------------------

       Era un `flex` con `wrap` pensado para escritorio: marca, enlaces y
       copyright en una línea. En un teléfono no cabe, así que envolvía — pero
       envolvía mal, porque los enlaces envolvían a su vez y «Contacto» se
       quedaba solo en un cuarto renglón, descolgado y centrado bajo los otros
       tres.

       En columna y centrado: marca, los CUATRO enlaces en una sola línea, y el
       copyright. Tres filas en vez de cuatro desiguales. */
    .scort-footer__main {
        flex-direction: column;
        gap: var(--space-3);
        padding-block: var(--space-4);
        text-align: center;
    }

    .scort-footer__brand {
        justify-content: center;
    }

    /* `nowrap` es deliberado y NO es un riesgo de desborde: con «y Condiciones»
       escondido y el texto en `xs`, los cuatro más sus separadores piden unos
       282px de los 358 que hay a 390. Sobra sitio incluso a 360. */
    .scort-footer__links {
        flex-wrap: nowrap;
        gap: var(--space-2);
    }

    .scort-footer__links a {
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }

    .scort-footer__links a + a::before {
        margin-inline-end: var(--space-2);
    }

    .scort-footer__largo {
        display: none;
    }

    .scort-footer__copy {
        font-size: var(--font-size-xs);
    }
}

/* Pie de UNA fila: marca · enlaces · copyright.
   Es todo lo que un pie necesita. Antes eran dos bloques a los extremos con un hueco
   enorme en medio, más una segunda fila para el copyright: tres alturas de texto para
   decir cuatro cosas. */
.scort-footer__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-block: var(--space-5);
}

.scort-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--scort-accent);
}

.scort-footer__mark { display: grid; place-items: center; flex: none; }

.scort-footer__wordmark { display: grid; line-height: 1.15; }

.scort-footer__name {
    font-size: 1.05rem;
    font-weight: var(--weight-black);
    letter-spacing: 0.16em;
    color: var(--scort-text);
}

/* El «+18» vive aquí, junto a la marca. No es decoración: es la advertencia de
   restricción de edad, y sin ella la página se queda sin ninguna una vez pasada la
   puerta de entrada. Cabe en el bajo-título y no cuesta ni una línea extra. */
.scort-footer__tagline {
    font-size: 0.65rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--scort-accent);
}

.scort-footer__copy {
    font-size: var(--font-size-sm);
    color: var(--scort-text-dim);
    white-space: nowrap;
}

.scort-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.scort-footer__links a {
    color: var(--scort-text-muted);
    font-size: var(--font-size-sm);
}

.scort-footer__links a:hover { color: var(--scort-accent); }

/* Separador entre enlaces, puesto por CSS y no en el marcado: así no lo lee un lector
   de pantalla ni se copia al seleccionar el texto. El último no lleva. */
.scort-footer__links a + a::before {
    content: "|";
    margin-inline-end: var(--space-4);
    color: var(--scort-border-strong, var(--scort-border));
}

/* =========================================================================
   PÁGINAS DE ERROR
   =========================================================================
   Viven AQUÍ y no en una hoja propia porque las sirve el layout compartido:
   403, 404 y 500 no tienen sección `Styles` que enlazar, así que unos estilos en
   una hoja aparte serían unos estilos que nunca se cargan.

   Y eso es justo lo que pasaba: estaban en `site.css`, que no enlazaba ninguna
   vista. Quien recibía un «acceso denegado» veía texto suelto pegado al borde
   izquierdo de la ventana. Enlazar aquel archivo tampoco valía: redefinía en su
   propio `:root` la mitad de los tokens —incluido el acento— y fijaba
   `html { font-size: 14px }` en móvil, así que habría repintado la aplicación
   entera. Se reescribe con tokens y `site.css` se borra.
   ========================================================================= */

.scort-error {
    width: 100%;
    max-width: 34rem;
    margin: var(--space-8) auto;
    padding: var(--space-7) var(--space-6);
    background: var(--scort-surface);
    border: 1px solid var(--scort-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.scort-error__code {
    font-size: var(--font-size-3xl);
    font-weight: var(--weight-black);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--scort-accent);
}

.scort-error__title {
    margin-top: var(--space-3);
    font-size: var(--font-size-lg);
}

.scort-error__message {
    margin-top: var(--space-3);
    color: var(--scort-text-muted);
    text-wrap: pretty;
}

.scort-error__path,
.scort-error__correlation {
    margin-top: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--scort-text-dim);
}

/* La ruta y el identificador de incidencia se parten donde haga falta: son datos
   opacos y largos, y una URL larga desbordaba la caja. */
.scort-error code {
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--scort-bg-soft);
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

.scort-error__actions { margin-top: var(--space-6); }

.scort-error__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--space-5);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--scort-accent), var(--scort-accent-hover));
    color: var(--scort-accent-contrast);
    font-weight: var(--weight-semibold);
}

.scort-error__link:hover { color: var(--scort-accent-contrast); }

/* =========================================================================
   BARRA INFERIOR DE MÓVIL
   ========================================================================= */

.scort-tabbar { display: none; }

@media (max-width: 900px) {
    .scort-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 110;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: rgba(7, 7, 13, 0.94);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid var(--scort-border);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .scort-tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 0.55rem 0 0.45rem;
        color: var(--scort-text-dim);

        /* El suelo del sistema es --font-size-xs (12px). Estas cuatro etiquetas son la
           navegación PRINCIPAL del teléfono y estaban a 10,9px: por debajo del mínimo
           justo donde menos margen hay para forzar la vista. */
        font-size: var(--font-size-xs);
        font-weight: var(--weight-medium);

        /* Y transición para que el cambio de pestaña no sea un salto seco. */
        transition: color var(--duration-base) var(--ease-out);
    }

    /* -------------------------------------------------------------------
       LA PESTAÑA ACTIVA, CON SU PASTILLA DETRÁS

       Era solo un cambio de color de texto, y en una barra de cuatro iconos
       grises eso se ve poco — sobre todo con el pulgar encima. La pastilla
       translúcida detrás del icono la señala sin añadir nada más.

       NO ES SOLO COLOR: la pastilla es forma, y el `aria-current` del marcado
       es lo que lo dice a quien escucha. Quien no distingue el morado ve
       igualmente un fondo distinto en una de las cuatro.
       ------------------------------------------------------------------- */
    .scort-tabbar__item svg {
        padding: 0.22rem 0.85rem;
        border-radius: 999px;
        box-sizing: content-box;
        transition:
            background var(--duration-base) var(--ease-out),
            transform var(--duration-base) var(--ease-out);
    }

    .scort-tabbar__item--active {
        color: var(--scort-accent);
        font-weight: var(--weight-semibold);
    }

    .scort-tabbar__item--active svg {
        background: rgba(var(--scort-accent-rgb), 0.16);
    }

    /* El icono se hunde un pelo al pulsar: es la única respuesta táctil que da
       una barra sin JavaScript, y en un teléfono se nota. */
    .scort-tabbar__item:active svg {
        transform: scale(0.92);
    }

    @media (prefers-reduced-motion: reduce) {
        .scort-tabbar__item,
        .scort-tabbar__item svg {
            transition: none;
        }

        .scort-tabbar__item:active svg {
            transform: none;
        }
    }

    /* El contenido no puede quedar debajo de la barra.
       Condicionado a que la barra EXISTA: las pantallas de cuenta usan el layout
       desnudo y no la pintan, así que el relleno incondicional les añadía 68px de
       fondo vacío y una barra de desplazamiento sobre un formulario que cabía justo.
       Se notó al pasar el body a columna, que es cuando esos 68px dejaron de
       solaparse con el margen del pie. */
    body:has(.scort-tabbar) { padding-bottom: 68px; }
}

/* =========================================================================
   RESPONSIVE DE LA NAVBAR
   ========================================================================= */

@media (max-width: 1280px) {
    .scort-nav__link { padding-inline: 0.6rem; }
}

@media (max-width: 1100px) {
    .scort-nav { display: none; }
}

@media (max-width: 780px) {
    /* «PUBLICAR ANUNCIO» VUELVE A LEERSE EN EL TELÉFONO.

       Estaba en `display: none` y solo quedaba el «+»: un círculo que no dice qué
       hace, justo en el botón que más importa del sitio —es por donde entra
       quien va a publicar—. La referencia del cliente lo lleva con texto.

       Se encoge en vez de esconderse: letra `xs` y menos relleno. Medido a 360,
       que es el ancho más justo, con la barra en su caso PEOR —fuera de la
       portada, donde además está el conmutador de audiencia. */
    .scort-navbar__cta {
        padding-inline: 0.7rem;
        gap: 0.35rem;
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }

    .scort-navbar__cta svg {
        inline-size: 0.8rem;
        block-size: 0.8rem;
    }
}

/* --- Y por debajo de 440, el recorte fino -------------------------------------
   MEDIDO, no estimado: a 360px, cuando la barra llevaba además el conmutador de
   audiencia, hacían falta 430px para 360 disponibles.

   Aquí se escondían también la palabra «anuncio» y el «+» del botón para ganar esos
   píxeles. Ya no: el conmutador se fue de la barra y con él los cien píxeles que
   obligaban a recortar, así que «+ MI ANUNCIO» va entero en todos los anchos, que es
   como lo pidió el propietario. Quedan el hueco y el relleno apretados, que no
   quitan nada visible. */
@media (max-width: 440px) {
    .scort-navbar__inner {
        gap: var(--space-2);
    }

    /* Los últimos cinco píxeles. A 360 seguían faltando exactamente eso —medido,
       366 contra 360— y salen del relleno del propio botón. */
    .scort-navbar__cta {
        padding-inline: 0.55rem;
    }

    /* LA MARCA, MÁS PEQUEÑA. Y esto lo destapó una prueba, no el ojo.

       Al pasar de «SCORT» a «Kacheros» el logotipo creció de 118 a 147px —tres
       letras más, y con `letter-spacing`— y a 360 la barra pasó a pedir 390.
       `ResponsiveLayoutTests` falló en dos casos por desborde horizontal.

       Es el riesgo de un cambio de marca que parece cosmético: el nombre nuevo
       ocupa otro ancho, y el sitio estaba ajustado al viejo. Se reduce el cuerpo
       y el espaciado entre letras, que es de donde salían esos 29px. */
    .scort-brand__name {
        font-size: 1.05rem;
        letter-spacing: 0.04em;
    }

    .scort-brand__mark svg {
        inline-size: 20px;
        block-size: 20px;
    }

    /* El conmutador de audiencia NO se oculta: se encoge.
       Estaba en `display: none` por debajo de 780px, y el selector inicial promete —con
       esas palabras— que «puedes cambiarlo cuando quieras desde la barra superior». Quien
       elegía «Hombres» desde el teléfono se quedaba con esa elección sin ninguna vía de
       vuelta: ni en la barra, ni en la barra inferior, ni en el menú de usuario. Una
       promesa incumplida es peor que no hacerla. */
    .scort-audience__option { padding-inline: 0.6rem; }

    /* El margen automático del grupo de acciones vivía aquí, solo por debajo de 440.
       Pasó a la regla base de `.scort-navbar__actions`: sin la caja de búsqueda, en
       todos los anchos hace falta algo que lleve el grupo a la derecha. */
}

/* Y en lo más estrecho, el conmutador se queda con las iniciales.
   Tres palabras completas no caben junto a la marca y el avatar a 360px; una letra sí, y
   el nombre completo sigue estando para quien lee con voz.

   La palabra se esconde a la VISTA, no con `display: none`. Con display:none salía también
   del árbol de accesibilidad y el botón pasaba a anunciarse como «M» —que no dice nada—, y
   por eso antes hacía falta una segunda copia del texto... que a su vez se anunciaba dos
   veces en pantallas anchas. Ocultándola así, hay una sola etiqueta y siempre se lee. */
@media (max-width: 480px) {
    .scort-audience__option { padding-inline: 0.5rem; }
    .scort-audience__short { display: inline; }

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

@media (max-width: 560px) {
    /* «PREMIUM» SE QUEDA TAMBIÉN EN EL TELÉFONO.

       Se escondía aquí para ganar sitio en la barra, y ese sitio ya no hace
       falta: dentro de una ficha el conmutador de audiencia salió de la barra, y
       en el resto de pantallas la marca convive solo con el botón y el avatar.

       Es la mitad de la identidad —«Kacheros» a secas es un nombre; con
       «PREMIUM» debajo es una marca— y el teléfono es donde más gente la ve.

       Se aprieta el interletrado en vez de esconderla: 0,42em en 375px hacían
       que la palabra midiera casi lo mismo que el nombre de encima. */
    .scort-brand__tagline {
        font-size: 0.62rem;
        letter-spacing: 0.28em;
    }

    .scort-navbar__inner { gap: var(--space-3); }
}

/* --- De 360 a 400: LA LUPA TAMBIÉN TIENE QUE CABER --------------------------------
   Desde que la lupa entró en la barra, a 360px —el ancho más justo, y el de muchos
   Android— la barra pedía 395px: la marca, la lupa, «+ MI ANUNCIO» y el avatar con sus
   huecos. Lo cazó `ResponsiveLayoutTests`: el avatar se salía 19px por la derecha y la
   página entera se podía arrastrar de lado.

   Salen de los HUECOS y de un punto del nombre, que es lo que no se ve perder. No se
   tocan la lupa ni el avatar, que siguen en su tamaño para el dedo, ni «+ MI ANUNCIO»,
   que va entero como lo pidió el propietario. Medido a 360: sobran unos 4px.

   Va DESPUÉS de las reglas de 440 y 560 porque las dos tocan el hueco de la barra, y la
   de 560, que está más abajo en la hoja, ganaba a la de 440 aunque fuera la más ancha. */
@media (max-width: 400px) {
    .scort-navbar__inner { gap: var(--space-2); }
    .scort-navbar__actions { gap: 0.375rem; }
    .scort-brand { gap: 0.375rem; }
    .scort-brand__name { font-size: 0.92rem; }

    .scort-navbar__cta {
        padding-inline: 0.5rem;
        gap: 0.25rem;
    }

    .scort-navbar__cta-texto { letter-spacing: 0.02em; }
}

@media (max-width: 900px) {
    .scort-trustbar { grid-template-columns: repeat(2, 1fr); }
}

/* AQUÍ HABÍA UNA REGLA QUE FORZABA UNA SOLA COLUMNA por debajo de 560px, y tenía
   sentido mientras cada apartado llevaba título Y subtítulo: dos columnas de eso
   en 260px partían «Tu información está protegida» en cuatro renglones.

   Desde que el subtítulo se esconde en el teléfono, lo que queda es un icono de
   34px y dos palabras — entra de sobra en dos columnas, y en una sola la franja
   volvía a medir los 200px que se querían recortar. Se retira en vez de dejarla
   apagada: una regla que ya no aplica es una trampa para el siguiente. */

/* El menu de usuario --`.scort-usermenu`, su panel y sus once entradas-- vivia
   aqui. Se retiro entero: el avatar de la barra es ahora un enlace directo a la
   cuenta, y lo que desplegaba llevaba a sitios a los que el resumen ya lleva. Lo
   unico que no estaba en ninguna otra parte --administracion y cerrar sesion-- se
   mudo a ese resumen. */

/* =========================================================================
   Controles bloqueados por falta de verificación
   =========================================================================

   El botón sigue a la vista y sigue siendo un botón de verdad: enfocable,
   pulsable y anunciado. Lo que no hace es actuar. Un `disabled` real lo
   sacaría del orden de tabulación y con él se iría la única explicación de
   por qué no se puede usar.

   El aviso aparece con las TRES formas de interactuar —puntero, teclado y
   pulsación— porque en un móvil no hay hover y quedarse solo con él dejaría
   a la mitad de la gente sin saber qué falta. */

.scort-locked {
    position: relative;
    display: inline-block;
}

.scort-locked__control[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.scort-locked__icon {
    margin-inline-end: 0.35em;
}

.scort-locked__hint {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    /* Ancho acotado y con mínimo: sin él, el aviso se estira a una sola línea
       larguísima que se sale de la pantalla en móvil. */
    inline-size: max-content;
    max-inline-size: min(18rem, 90vw);

    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--scort-surface-strong, #1c1c22);
    color: var(--scort-text, #f4f4f5);
    border: 1px solid var(--scort-border, #333);
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: start;

    /* Oculto a la vista pero NO al árbol de accesibilidad: `display: none`
       rompería el aria-describedby que lo referencia. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease-in-out;
}

.scort-locked:hover .scort-locked__hint,
.scort-locked:focus-within .scort-locked__hint,
.scort-locked.is-open .scort-locked__hint {
    opacity: 1;
    visibility: visible;
}

.scort-locked__cta {
    display: block;
    margin-block-start: 0.35rem;
    color: var(--scort-accent);
    font-weight: var(--weight-semibold);
}

/* En pantallas estrechas el aviso se ancla al ancho del contenedor en lugar de
   centrarse sobre el botón: centrado, un botón pegado al borde lo empujaría
   fuera de la pantalla. */
@media (max-width: 480px) {
    .scort-locked__hint {
        left: 0;
        transform: none;
        max-inline-size: min(16rem, calc(100vw - 2rem));
    }
}


/* =======================================================================
   BOTONES DE CONTACTO
   =======================================================================

   Un aro de color por canal con la etiqueta debajo, no una pildora de texto.
   El color de cada canal entra por dos variables —el hex para el icono y el
   triple RGB para las transparencias— asi que anadir un canal nuevo es una
   linea, y ninguna regla de abajo repite un color.

   Viven aqui y no en scort-cards.css a proposito: el parcial se pinta en la
   tarjeta del listado Y en la ficha publica, y scort-cards.css se declara
   view a view. Una vista que olvidara declararla enseniaria los botones sin
   estilo — el fallo que ya costo dos veces. El layout carga esta hoja
   siempre. */

.scort-contacto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
}

.scort-contacto__btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);

    /* Ancho fijo para que los aros queden alineados aunque las etiquetas midan
       distinto: «Llamar» y «WhatsApp» centrados bajo circulos a distinta
       distancia se ven torcidos. */
    inline-size: 4.5rem;

    text-decoration: none;
    color: var(--scort-text-muted);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
}

.scort-contacto__aro {
    display: grid;
    place-items: center;

    inline-size: 2.9rem;
    block-size: 2.9rem;
    border-radius: 50%;

    /* EL ARO VA RELLENO DE SU COLOR, con el icono en blanco.

       Estaba tintado —un 30 % del color sobre la superficie— y el propietario lo
       vio muerto. Tenia razon: a ese nivel, cuatro circulos casi negros en fila
       no se distinguen entre si hasta que se lee la etiqueta de debajo, y el
       color del canal —el verde de WhatsApp, el rosa de llamar— es justo lo que
       se reconoce antes de leer.

       Sigue siendo un degradado y no un plano: la luz cae arriba, que es lo que
       le da volumen. Lo que cambia es la opacidad, de 0,30 a lleno. */
    color: #fff;

    background:
        radial-gradient(circle at 50% 22%,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(160deg,
            rgba(var(--canal-rgb), 1),
            rgba(var(--canal-rgb), 0.72));

    /* El aro se ve SIEMPRE, no solo al pasar por encima.

       Antes quedaba al 42 % y practicamente no se distinguia: el boton parecia
       ganar un borde al acercar el raton, cuando lo que se pretendia era que ya
       lo tuviera y solo se encendiera. */
    border: 2px solid rgba(var(--canal-rgb), 0.75);

    /* Dentro un filo claro, fuera un halo del propio color: es lo que hace que
       el boton parezca encendido en vez de pegado. En reposo el halo ya existe,
       apagado; al pasar por encima sube. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 2px rgba(var(--canal-rgb), 0.06),
        0 4px 14px -8px rgba(var(--canal-rgb), 0.55);

    /* ENCIENDE RAPIDO Y SE APAGA DESPACIO.

       Esta transicion es la del estado de REPOSO, asi que es la que gobierna la
       vuelta: 420 ms para que el halo se desvanezca en lugar de cortarse. La de
       ida, mas corta, esta en la regla de :hover. Con un solo tiempo para las dos
       direcciones no hay forma de conseguir el efecto de apagarse. */
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms ease-out,
        border-color 420ms ease-out,
        background 420ms ease-out;
}

.scort-contacto__btn:hover .scort-contacto__aro,
.scort-contacto__btn:focus-visible .scort-contacto__aro {
    transform: translateY(-2px) scale(1.06);
    border-color: rgba(var(--canal-rgb), 1);

    background:
        radial-gradient(circle at 50% 22%,
            rgba(255, 255, 255, 0.42),
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(160deg,
            rgba(var(--canal-rgb), 1),
            rgba(var(--canal-rgb), 0.85));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 4px rgba(var(--canal-rgb), 0.18),
        0 0 18px -2px rgba(var(--canal-rgb), 0.55),
        0 12px 26px -10px rgba(var(--canal-rgb), 1);

    /* La ida: rapida, para que responda al instante. */
    transition:
        transform 130ms ease-out,
        box-shadow 130ms ease-out,
        border-color 130ms ease-out,
        background 130ms ease-out;
}

.scort-contacto__btn:hover,
.scort-contacto__btn:focus-visible {
    color: var(--scort-text);
}

/* El foco NO se queda solo en la sombra del aro: en modo de alto contraste las
   sombras se descartan y el indicador desapareceria. */
.scort-contacto__btn:focus-visible {
    outline: 2px solid var(--scort-accent);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

.scort-contacto__texto {
    /* La etiqueta nunca parte en dos lineas: «WhatsApp» cortado descuadra la
       fila entera respecto a los demas aros. */
    white-space: nowrap;
}

/* El color de cada canal. Lo unico que cambia entre botones.

   Tres de los cuatro son el color de SU MARCA —el verde de WhatsApp, el azul de
   Telegram, el blanco de X— y no se eligen: son los que la gente reconoce sin
   leer la etiqueta.

   «Llamar» no tiene marca, asi que su color si es una eleccion. Estuvo en azul y
   quedaba pegado al de Telegram: dos botones azules uno al lado del otro en la
   misma rejilla, indistinguibles de un vistazo. Pasa al rosa de la referencia del
   cliente, que ademas es el tono de la plataforma. */
.scort-contacto__btn--llamar { --canal: #ec4899; --canal-rgb: 236, 72, 153; }
.scort-contacto__btn--wsp    { --canal: #25d366; --canal-rgb: 37, 211, 102; }
.scort-contacto__btn--tg     { --canal: #2aabee; --canal-rgb: 42, 171, 238; }

/* X AL REVES QUE LOS DEMAS: circulo claro y logotipo oscuro.

   Su marca es negra, y un circulo negro sobre un fondo casi negro no es un boton,
   es un agujero — al lado del verde de WhatsApp y del azul de Telegram
   sencillamente desaparece. Invertido se reconoce al instante y ademas destaca,
   que es lo que hace un blanco entre tres colores.

   El `color` hay que decirlo aqui porque el aro lo fija en blanco para todos: sin
   esta linea el logotipo seria blanco sobre blanco y no se veria ninguno. */
.scort-contacto__btn--x      { --canal: #f7f9f9; --canal-rgb: 247, 249, 249; }
.scort-contacto__btn--x .scort-contacto__aro { color: #0b0b0f; }

/* AQUI TIKTOK SE OCULTABA EN EL TELEFONO, por peticion del propietario de entonces.

   Se va con TikTok. X ocupa su sitio y el propietario lo quiere A LA VISTA junto a
   llamar, WhatsApp y Telegram: los nombro uno por uno al pedir que esos cuatro
   botones salieran al lado de la foto. */

/* En movil se aprieta lo justo para que los que queden entren en una fila dentro de la
   tarjeta. Partidos en 3 + 1 se ven como un error de maquetacion.
   Son CUATRO tambien en el telefono desde que X sustituyo a TikTok: el que se ocultaba
   aqui era TikTok, y esa regla se fue con el. */
@media (max-width: 520px) {
    .scort-contacto {
        gap: var(--space-2);
        justify-content: space-between;
    }

    .scort-contacto__btn {
        inline-size: 3.9rem;
        font-size: 0.68rem;
    }

    .scort-contacto__aro {
        inline-size: 2.6rem;
        block-size: 2.6rem;
    }
}

/* Quien pide menos movimiento no recibe el salto ni la ampliacion. El cambio
   de color y el halo se mantienen: son la senial, no el adorno. */
@media (prefers-reduced-motion: reduce) {
    .scort-contacto__aro {
        transition:
            box-shadow 420ms ease-out,
            border-color 420ms ease-out,
            background 420ms ease-out;
    }

    .scort-contacto__btn:hover .scort-contacto__aro,
    .scort-contacto__btn:focus-visible .scort-contacto__aro {
        transform: none;
        transition:
            box-shadow 130ms ease-out,
            border-color 130ms ease-out,
            background 130ms ease-out;
    }
}

/* ===========================================================================
   MODALES — la caja
   ===========================================================================
   Vive aqui, y no en la hoja de una seccion, porque la pintan tres pantallas
   que no tienen nada que ver entre si: administracion, la cartera y el resumen
   de la cuenta.

   Estuvo en scort-admin.css, que fue donde nacio el primer modal. La cartera
   acabo cargando la hoja de administracion entera solo por estas seis reglas,
   y el resumen --que no la cargaba-- enseñaba su modal con el estilo de fabrica
   del navegador: borde blanco de 3 px, sin sombra y sin esquinas. Cada pantalla
   nueva que quisiera un modal repetiria ese fallo.

   El fondo usa --scort-surface-elevated, que es el tono que el sistema reserva
   para lo que flota por encima de la pagina. Una variable inventada no daria
   error: simplemente no aplica, y el dialogo saldria transparente.
   =========================================================================== */

.scort-modal {
    width: min(30rem, calc(100vw - 2rem));
    padding: 0 var(--space-4) var(--space-4);
    border: 1px solid var(--scort-border-strong);
    border-radius: var(--radius-lg);
    background: var(--scort-surface-elevated);
    color: var(--scort-text);

    /* Separa el dialogo del fondo aunque el tono sea parecido. */
    box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
}

/* El velo. Bastante oscuro para que lo de detras deje de competir por la
   atencion, y con desenfoque donde el navegador lo admita. */
.scort-modal::backdrop {
    background: rgb(0 0 0 / 72%);
    backdrop-filter: blur(2px);
}

.scort-modal__x {
    display: flex;
    justify-content: flex-end;
    margin: 0 calc(var(--space-4) * -1) 0;
    padding-top: var(--space-2);
}

.scort-modal__close {
    border: 0;
    background: none;
    color: var(--scort-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.scort-modal__close:hover {
    color: var(--scort-text);
}

.scort-modal__title {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
}

/* El formulario de la propina: atajos, importe libre y el resumen del saldo.
   --------------------------------------------------------------------------
   Vive aqui --y no en la hoja de la ficha-- porque se pinta en DOS sitios: el
   modal de la ficha y la pagina /perfil/{handle}/propina, que es el plan B sin
   JavaScript y no carga esa hoja.

   Son primos de los del modal de recarga (scort-recarga.css). No se reutilizan
   esas clases a proposito: aquella hoja solo la carga la cartera, y hacerla
   cargar en cada ficha por tres botones seria pagar 20 KB por un atajo. */
.scort-tip__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.scort-tip__chip {
    flex: 1 1 auto;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--scort-border-strong);
    border-radius: var(--radius-md);
    background: var(--scort-surface);
    color: var(--scort-text);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.scort-tip__chip:hover {
    border-color: var(--scort-accent);
}

/* El «S/» pegado al campo, para que nadie lo escriba dentro. */
.scort-tip__money {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--scort-border-strong);
    border-radius: var(--radius-md);
    background: var(--scort-bg);
    overflow: hidden;
    margin-top: var(--space-2);
}

.scort-tip__money:focus-within {
    border-color: var(--scort-accent);
}

.scort-tip__cur {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--scort-surface);
    border-right: 1px solid var(--scort-border);
    color: var(--scort-accent);
    font-weight: 700;
}

.scort-tip__money .scort-field__input {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* La cuenta del saldo: «Mandas S/ 5.00, te quedaran S/ 5.00». Es la linea que se
   lee antes de pulsar, asi que va separada del campo y no en gris de nota. */
.scort-tip__resumen {
    margin: var(--space-3) 0;
    color: var(--scort-text);
    font-size: var(--font-size-sm);
    min-height: 1.2em;
}

.scort-tip__saldo {
    margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Formulario de accion y cifra de dinero
   --------------------------------------------------------------------------
   Tambien vivian en scort-admin.css, y tambien las usa el modal de recarga: por
   ellas la cartera cargaba los 36 KB de la hoja de administracion entera. No
   tienen nada de administrativo --un formulario que se parte con gracia y una
   cifra en verde-- y las paginas de administracion cargan esta hoja igual.
   -------------------------------------------------------------------------- */

/* Un formulario de acción dentro de una fila: campos y botón en una línea que
   se parte con gracia en pantallas estrechas. */
.scort-aform {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.scort-aform .scort-field {
    flex: 1 1 14rem;
    margin-bottom: 0;
}

.scort-chip-money {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--scort-success) 18%, transparent);
    color: var(--scort-success);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   LA VUELTA AL PANEL
   --------------------------------------------------------------------------
   Ni el panel de usuario ni el de creador llevan menu: sus cifras son la
   navegacion de ida y este enlace es la de vuelta.

   Vive aqui y no en scort-dashboard.css porque lo pintan tambien «Mis
   actividades» y «Reservas recibidas», que cargan las hojas de reservas y NO
   la del panel. Alli salia sin estilo --se vio midiendo: `display: inline` y
   el morado de enlace en vez del gris apagado-- que es el mismo fallo que ya
   tuvo la caja del modal cuando vivia en la hoja de administracion.
   -------------------------------------------------------------------------- */

.scort-volver {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    /* `inline-flex` no basta: dentro de una columna flex el estirado del eje
       transversal lo llevaba al ancho entero del panel --343 px medidos-- y se
       pulsaba a diez centimetros del texto. */
    align-self: flex-start;
    margin-block-end: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    color: var(--scort-text-muted);
    text-decoration: none;
}

.scort-volver:hover,
.scort-volver:focus-visible {
    color: var(--scort-text);
}

/* --- #etiquetas públicas --------------------------------------------------------
   En `scort-components.css` y no en la hoja del perfil porque las pintan tres
   pantallas: la ficha, el directorio y el aviso de búsqueda filtrada. Repetidas en
   cada hoja acabarían divergiendo. */

.scort-tags {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.scort-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--scort-border);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-size-sm);
    color: var(--scort-text-muted);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.scort-tag:hover,
.scort-tag:focus-visible {
    border-color: var(--scort-accent);
    color: var(--scort-text);
    background: color-mix(in srgb, var(--scort-accent) 10%, transparent);
}

/* La etiqueta por la que se está filtrando ahora mismo. */
.scort-tag--activa {
    border-color: var(--scort-accent);
    color: var(--scort-text);
    background: color-mix(in srgb, var(--scort-accent) 16%, transparent);
}

/* EL NÚMERO BAJO «Llamar» YA NO SE PINTA: el propietario dejó la fila solo con
   los botones, y sus reglas se fueron con él. El número sigue en el `href` del
   `tel:`, que es lo que hace que pulsar llame. */

/* ===========================================================================
   EL MENÚ DEL AVATAR

   Hecho con `<details>`, así que abre y cierra sin JavaScript. Lo que hay aquí
   es solo cómo se ve: colocar la lista bajo el aro y quitarle a `<summary>` los
   adornos que trae de serie.

   LA FLECHITA DE `<summary>` SE QUITA con las dos reglas —el `::-webkit-details-
   marker` y `list-style`—, que no es redundancia: los navegadores no coinciden
   en cuál miran, y con una sola queda un triángulo pegado al aro en la mitad.
   =========================================================================== */
.scort-usermenu {
    position: relative;
    flex: none;
}

.scort-usermenu > summary {
    cursor: pointer;
    list-style: none;
}

.scort-usermenu > summary::-webkit-details-marker {
    display: none;
}

/* Abierto, el aro se queda marcado: dice cuál de los botones de la barra
   desplegó esto. */
.scort-usermenu[open] > summary {
    border-color: var(--scort-accent);
}

.scort-usermenu__lista {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    /* Anclado a la DERECHA: el aro es lo último de la barra, y colgando desde la
       izquierda el menú se saldría de la pantalla en un teléfono. */
    inset-inline-end: 0;

    z-index: 60;
    min-inline-size: 13rem;

    margin: 0;
    padding: var(--space-2);
    list-style: none;

    border: 1px solid var(--marco-panel);
    border-radius: var(--radius-lg);
    background: var(--scort-surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.scort-usermenu__lista > li + li {
    margin-block-start: 2px;
}

/* Un enlace y un botón tienen que verse IGUAL: «Cerrar sesión» es un botón
   porque manda un POST, no porque sea otra cosa. De ahí el reset de los estilos
   propios del botón y el `inline-size: 100%`, que le da el mismo ancho de fila
   que a los enlaces. */
.scort-usermenu__ir {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;

    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--scort-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.scort-usermenu__ir:hover,
.scort-usermenu__ir:focus-visible {
    background: rgba(var(--scort-accent-rgb), 0.14);
    color: var(--scort-text);
}

/* Cerrar sesión, separado y en rojo: es la única del menú que no se deshace
   volviendo atrás. */
.scort-usermenu__ir--salir {
    margin-block-start: var(--space-2);
    border-block-start: 1px solid var(--scort-border);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    color: var(--scort-danger);
}

.scort-usermenu__ir--salir:hover,
.scort-usermenu__ir--salir:focus-visible {
    background: rgba(255, 77, 94, 0.14);
    color: var(--scort-danger);
}

/* =========================================================================
   EL BUSCADOR — sus campos y sus botones

   Vive solo dentro de la ventana de la lupa (ver «LA LUPA Y SU BUSCADOR»), en
   todas las páginas y en todos los anchos. Antes fue también una barra de cristal
   en la portada, con los campos en fila; esa barra se retiró el 21/09/2026 porque el
   propietario quiso en PC la lupa del móvil. Con ella se fueron su caja y sus
   columnas: la ventana ya es la caja, y dentro los campos van en UNA columna.
   ========================================================================= */
.scort-filterbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

/* La etiqueta se lee, no se adivina.
   Estaba en 0,75 rem, en mayúsculas y en color de acento: tres cosas que compiten con el
   valor seleccionado y ninguna que ayude a leerla. Ahora es texto normal, del color de
   texto secundario, y el acento se reserva para el icono. */
.scort-filterbar__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium);
    color: var(--scort-text-muted);
}

.scort-filterbar__label svg { color: var(--scort-accent); flex: none; }

.scort-filterbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
}

/* «Limpiar» ya no es un enlace suelto encajado entre un desplegable y un botón.
   Un texto sin caja entre dos controles con caja no se lee como una acción: se lee como
   una etiqueta perdida. Mantiene su jerarquía —es secundaria— con la forma de un botón
   fantasma, que es lo que ya usa el resto del sistema. */
.scort-filterbar__clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    color: var(--scort-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.scort-filterbar__clear:hover {
    border-color: var(--scort-border-strong);
    background: var(--scort-surface-hover);
}

.scort-filterbar__clear:hover { color: var(--scort-text); }

/* «Aplicar filtros» es la acción de la barra, y era un botón fantasma más entre dos
   controles: se leía igual que «Limpiar», que hace lo contrario. Pasa a sólido, con el
   degradado de marca y su halo, para que a lo que hay que pulsar se le vea.

   «BUSCAR», A LO ANCHO Y EN MAYÚSCULAS: es la acción de la ventana. Es como salía en la
   portada del teléfono, que es lo que el propietario vio y aprobó. Ese retoque vivía en
   scort-home.css, así que fuera de la portada la misma ventana salía con otro botón; aquí
   vale en todas las páginas. La letra baja a `sm` para compensar las mayúsculas. */
.scort-filterbar__submit {
    flex: 1 1 auto;
    border: 0;
    background: linear-gradient(90deg, var(--scort-cta-de), var(--scort-cta-a));
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(var(--scort-accent-rgb), 0.28);
}

.scort-filterbar__submit:hover {
    /* Sin `brightness`: aclarar el degradado baja el blanco por debajo de AA en el tema
       magenta. La senal la dan el halo y el levantamiento. */
    box-shadow: 0 8px 26px rgba(var(--scort-accent-rgb), 0.42);
    transform: translateY(-1px);
}

/* «LIMPIAR» NO VA EN EL TELÉFONO, por petición del propietario: en su referencia no está.
   Lo que hace —dejarlo todo en «Todos»— se sigue pudiendo hacer a mano, desplegable por
   desplegable. En PC se queda, al lado de «Buscar». */
@media (max-width: 640px) {
    .scort-filterbar__clear { display: none; }
}

/* =========================================================================
   LA LUPA Y SU BUSCADOR

   Nació en el móvil, con una captura del propietario: en el teléfono el buscador
   ocupaba media pantalla entre el escaparate y los perfiles, y pasó a vivir detrás
   de una lupa en la barra de arriba, al lado del botón de publicar.

   El 21/09/2026 la pidió también en PC, en lugar de la barra de filtros de la
   portada y de la caja de texto de la barra. Queda UN buscador: la misma lupa y la
   misma ventana en todas las páginas y en todos los anchos. Cambia solo la forma de
   abrirse: en el teléfono, una hoja que sube desde abajo —donde llega el pulgar—; en
   PC, una ventana centrada.

   Es un <dialog> nativo: atrapa el foco, se cierra con Escape y el resto de la
   página queda inerte mientras está abierto, sin una línea de JS para nada de eso.
   ========================================================================= */
.scort-navbar__lupa {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid rgba(var(--scort-accent-rgb), 0.55);
    border-radius: 50%;
    background: rgba(var(--scort-accent-rgb), 0.12);
    color: var(--scort-text);
    cursor: pointer;
    box-shadow: 0 0 14px -4px rgba(var(--scort-accent-rgb), 0.8);
    transition:
        border-color var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

/* Con ratón se nota al pasar por encima, como el avatar de al lado. */
.scort-navbar__lupa:hover {
    border-color: var(--scort-accent);
    background: rgba(var(--scort-accent-rgb), 0.22);
    box-shadow: 0 0 18px -4px rgba(var(--scort-accent-rgb), 0.95);
}

.scort-buscador-modal {
    inline-size: min(560px, 100%);
    max-inline-size: 100%;
    max-block-size: 88dvh;
    margin: auto auto 0;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    overflow-y: auto;

    color: var(--scort-text);
    background: var(--scort-surface-elevated);
    border: 1px solid var(--marco-destacado);
    border-block-end: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
}

/* EN PC, UNA VENTANA CENTRADA. Con ratón no hay pulgar al que acercar nada, y una hoja
   pegada al pie de una pantalla ancha se lee como un aviso y no como el buscador. Desde
   768, que es donde empieza la tableta: por debajo sigue siendo un teléfono. */
@media (min-width: 768px) {
    .scort-buscador-modal {
        inline-size: min(520px, calc(100% - 2 * var(--space-6)));
        margin: auto;
        padding: var(--space-6);
        border-block-end: 1px solid var(--marco-destacado);
        border-radius: var(--radius-xl);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    }
}

.scort-buscador-modal::backdrop {
    background: rgba(4, 4, 8, 0.72);
    backdrop-filter: blur(3px);
}

.scort-buscador-modal__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
}

.scort-buscador-modal__titulo {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--weight-bold);
}

.scort-buscador-modal__cerrar {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--scort-border-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--scort-text);
    cursor: pointer;
}

.scort-buscador-modal__cerrar:hover {
    border-color: var(--scort-accent);
    color: var(--scort-accent);
}

/* El texto libre —nombre, #etiqueta— arriba del todo y un poco aparte: es otra forma de
   buscar, no un filtro más de la lista de lugares. */
.scort-buscador-modal__texto {
    margin-block-end: var(--space-4);
}

/* =========================================================================
   UBICACIÓN EN CASCADA — el aviso cuando una lista no llega
   =========================================================================
   Lo crea scort.js debajo del desplegable que no se pudo llenar, en el buscador
   y en el anuncio. Sin él, un desplegable vacío no dice si esperar o qué hacer. */
.scort-ubicacion__aviso {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-xs);
    color: var(--scort-danger);
}

/* =========================================================================
   ATENCIÓN AL CLIENTE — /Home/Contact
   =========================================================================
   Una tarjeta centrada con el texto del propietario y un solo botón: escribir
   por WhatsApp. Aquí y no en una hoja propia porque son cuatro reglas, y el
   layout ya carga esta hoja en todas las páginas. */
.scort-atencion {
    display: grid;
    place-items: center;
}

.scort-atencion__tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    inline-size: min(100%, 38rem);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    background: var(--scort-surface);
    border: 1px solid var(--marco-destacado);
    border-radius: var(--radius-xl);
    box-shadow: var(--marco-destacado-halo), var(--shadow-md);
}

.scort-atencion__icono {
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 50%;
    color: var(--scort-accent);
    background: rgba(var(--scort-accent-rgb), 0.12);
    border: 1px solid rgba(var(--scort-accent-rgb), 0.45);
}

.scort-atencion__titulo {
    margin: 0;
    font-size: var(--font-size-xl);
}

.scort-atencion__pregunta {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--weight-semibold);
}

.scort-atencion__texto,
.scort-atencion__horario {
    margin: 0;
    color: var(--scort-text-muted);
}

.scort-atencion__canal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-2);
}

.scort-atencion__numero {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--weight-semibold);
}

.scort-atencion__numero a {
    color: var(--scort-text);
    white-space: nowrap;
}

/* EL VERDE DE WHATSAPP, con letra OSCURA. Es lo que se reconoce antes de leer, pero con
   letra blanca no llega a 2:1 de contraste; con la oscura pasa de 8:1.
   El verde es el MISMO del botón de WhatsApp de las fichas (`.scort-contacto__btn--wsp`),
   con los mismos nombres de variable. */
.scort-atencion__wsp {
    --canal: #25d366;
    --canal-rgb: 37, 211, 102;
    --canal-tinta: #0b1f14;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 48px;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-pill);
    background: var(--canal);
    color: var(--canal-tinta);
    font-weight: var(--weight-bold);
    text-decoration: none;
    box-shadow: 0 8px 24px -10px rgba(var(--canal-rgb), 0.9);
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.scort-atencion__wsp:hover,
.scort-atencion__wsp:focus-visible {
    color: var(--canal-tinta);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(var(--canal-rgb), 1);
}

@media (prefers-reduced-motion: reduce) {
    .scort-atencion__wsp,
    .scort-atencion__wsp:hover { transition: none; transform: none; }
}

/* En el teléfono, el botón a lo ancho de la tarjeta: es lo que se pulsa con el pulgar.
   El canal se ESTIRA primero —la tarjeta centra a sus hijos, y centrado mide lo que su
   línea más larga—; sin eso, el 100 % del botón era el ancho del número y nada más. */
@media (max-width: 480px) {
    .scort-atencion__tarjeta { padding: var(--space-5) var(--space-4); }
    .scort-atencion__canal { align-self: stretch; }
    .scort-atencion__wsp { inline-size: 100%; }
}