/* ============================================================
   Abogados.Work — Marketplace público (directorio clásico)
   Wrapper: body.aw-marketplace-public

   Sin Tailwind: la página es CSS propio de punta a punta. Las variables
   viven en el WRAPPER (no en :root) para no filtrarse al resto del sitio.

   Tipografía: Visby en TODA la página, sin excepciones ni fuentes externas.
   `--font-display` y `--font-mono` son alias de la misma familia; lo que
   cambia entre títulos, cuerpo y cifras es el peso y el tracking.
   ============================================================ */

/* ── Visby (tres pesos oficiales del proyecto) ─────────────── */
@font-face {
    font-family: 'Visby';
    src: url('https://abogados.work/wp-content/uploads/2026/04/VisbyRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Visby';
    src: url('https://abogados.work/wp-content/uploads/2026/04/VisbyMedium.otf') format('opentype');
    /* Range: cubre 500 (medium) y 600 (semibold) con el mismo archivo medium */
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Visby';
    src: url('https://abogados.work/wp-content/uploads/2026/04/VisbyBold.otf') format('opentype');
    /* Range: cubre 700 (bold) y 800 (extrabold) con el mismo archivo bold */
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
}

/* ════════════════════════════ TOKENS ════════════════════════════ */
.aw-marketplace-public {
    --bg:        #e7e4dc;
    --panel:     #f4f1ea;
    --surface:   #ffffff;
    --sunken:    #f7f5ef;
    --ink:       #040813;
    --ink-2:     #1c2030;
    --muted:     #6b7080;
    --muted-2:   #9aa0b0;
    --line:      #ece8df;
    --line-2:    #dfdbcf;
    --accent:    #807dfe;
    --accent-deep: #5e5be0;
    --accent-soft: rgba(128, 125, 254, .11);

    /* Estrellas: el gris es el estado por defecto de todo perfil nuevo, así
       que es un token de la paleta y no un color suelto de la tarjeta. */
    --star-on:  #f5a623;
    --star-off: #cbccd3;

    /* Distintivos del marketplace. Elite («Muy destacado») va en dorado: es
       el escalón más alto y se lee solo. Pro («Destacado») en el morado de
       marca. Básico no lleva distintivo. */
    --plan-elite:      #b98a2f;
    --plan-elite-soft: rgba(185, 138, 47, .45);
    --plan-pro:        #807dfe;
    --plan-pro-soft:   rgba(128, 125, 254, .38);

    --shadow-card: 0 1px 0 rgba(15,20,15,.04), 0 10px 30px -18px rgba(15,20,15,.18);
    --shadow-hi:   0 24px 48px -26px rgba(4,8,19,.35);

    /* Una sola curva y una sola duración para TODO lo que reacciona al ratón.
       Teníamos siete tiempos distintos (.15s, .18s, .2s, .22s…) y cada
       elemento entraba y salía a destiempo: eso es lo que se leía como
       «hovers raros» aunque cada regla por separado fuera correcta. */
    --t: .25s ease-in-out;

    /* Una sola familia en toda la página: Visby, la tipografía corporativa.
       `display` y `mono` existen como alias semánticos (títulos y cifras) para
       poder ajustar peso y tracking sin cambiar de fuente. Nada de fuentes
       externas: la página no pide nada a Google Fonts. */
    --font-body:    'Visby', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-body);
    --font-mono:    var(--font-body);

    --wrap: 1420px;
    --side: 268px;
    --r-card: 24px;

    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Reset ─────────────────────────────────────────────────────
   Esta página ya no carga Tailwind. Su "preflight" era lo único que
   contenía al tema activo (Astra mete márgenes, bordes y min-height a
   títulos, botones e inputs), así que aquí se replica lo imprescindible
   —bordes en cero, márgenes en cero, svg en bloque— para que los modales
   de agendamiento, que se diseñaron bajo ese preflight, se vean igual.  */
.aw-marketplace-public *,
.aw-marketplace-public *::before,
.aw-marketplace-public *::after {
    box-sizing: border-box;
    border: 0 solid var(--line);
}

 /* `:where()` no aporta especificidad: el reset vale (0,1,0) y cualquier
    regla de componente posterior lo gana. Sin esto, `.aw-marketplace-public p`
    (0,1,1) pisaba el `margin: … auto` de `.awm-sub` y `.awm-cta__d`, y los
    párrafos centrados aparecían pegados a la izquierda. */
.aw-marketplace-public :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, form, ul, ol) { margin: 0; }
.aw-marketplace-public :where(ul, ol) { padding: 0; list-style: none; }

.aw-marketplace-public :where(svg, video, canvas) { display: block; vertical-align: middle; }
.aw-marketplace-public :where(table) { border-collapse: collapse; }

/* Igual que el reset de márgenes: en `:where()` para que valga (0,1,0) y
   cualquier regla de componente lo gane. Con `.aw-marketplace-public button`
   (0,1,1) el `padding: 0` y el `min-height: 0` aplastaban a TODOS los botones
   cuyo padding viene de una sola clase — el CTA del pop-up quedaba en un hilo,
   las pestañas sin respiro bajo el subrayado y los chips de filtro activo sin
   su píldora. */
.aw-marketplace-public :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.aw-marketplace-public :where(a) { color: inherit; text-decoration: none; }

/* ── Blindaje de estados contra el tema ────────────────────────
   AQUÍ estaba el bloque morado del sidebar. El reset de arriba vive dentro de
   `:where()` y vale (0,1,0) a propósito, pero el tema declara
   `button:hover { background-color: <acento>; color: <acento oscuro>; }` con
   (0,1,1): en cuanto el ratón entraba en una cabecera de filtro, el tema
   pintaba SU fondo y SU color de texto encima — morado sobre morado, texto
   desaparecido. Este blindaje vale (0,2,0): le gana al tema y pierde contra
   cualquier `:hover` de componente declarado más abajo, que es justo lo que
   queremos. Devuelve el elemento a su estado neutro y deja que sea el
   componente, y solo el componente, quien decida cómo se realza. */
.aw-marketplace-public :where(button, [type="button"], [type="submit"], a, label):hover,
.aw-marketplace-public :where(button, [type="button"], [type="submit"], a, label):focus,
.aw-marketplace-public :where(button, [type="button"], [type="submit"], a, label):active {
    background-color: transparent;
    background-image: none;
    color: inherit;
    border-color: inherit;
    opacity: 1;
    text-decoration: none;
    transform: none;
}
.aw-marketplace-public :where(img) { display: block; max-width: 100%; }
.aw-marketplace-public :where(input, select, textarea) {
    font: inherit;
    color: inherit;
    min-height: 0;
    margin: 0;
}
/* Aquí estaba el bug de las esquinas del pop-up: esta regla llevaba
   `border-radius: 6px` y `.aw-marketplace-public :focus-visible` vale (0,2,0),
   así que le ganaba a `.aw-mp-onb__card` (0,1,0). En cuanto la tarjeta —o
   cualquier botón dentro— recibía el foco al hacer clic, su radio pasaba de
   24px a 6px y las esquinas se cuadraban a la vista. El `outline` moderno ya
   sigue el redondeo del propio elemento: no hay que imponerle ninguno. */
.aw-marketplace-public :where(:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.aw-marketplace-public .awm-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.aw-marketplace-public .awm-strong { color: var(--ink); font-weight: 700; }

/* Varias piezas se ocultan con el atributo `hidden` desde el JS; sin esto,
   cualquier `display` declarado después (flex/grid/block) lo pisaría. */
.aw-marketplace-public [hidden] { display: none !important; }

/* Enlaces de navegación mientras cargan la siguiente página */
.aw-marketplace-public a.is-loading { opacity: .55; cursor: progress; }

.aw-marketplace-public ::-webkit-scrollbar { width: 9px; height: 9px; }
.aw-marketplace-public ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; }
.aw-marketplace-public ::-webkit-scrollbar-track { background: transparent; }

.awm-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
}
.awm-skip:focus { left: 0; }

/* ════════════════════════════ BOTONES ════════════════════════════ */
.aw-marketplace-public .awm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 11px 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: all var(--t);
}
.aw-marketplace-public .awm-btn svg { flex: none; }

.aw-marketplace-public .awm-btn--ink {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 10px 22px -14px rgba(4,8,19,.85);
}
.aw-marketplace-public .awm-btn--ink:hover { background: #161b2c; color: #fff; }

.aw-marketplace-public .awm-btn--accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 22px -14px var(--accent);
}
.aw-marketplace-public .awm-btn--accent:hover { background: var(--accent-deep); color: #fff; }

.aw-marketplace-public .awm-btn--ghost {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-2);
}
.aw-marketplace-public .awm-btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: #fff; }

.aw-marketplace-public .awm-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    transition: all var(--t);
}
/* Nunca por opacidad: bajar el texto al 65 % lo destiñe contra el papel, así
   que el hover terminaba restando legibilidad justo en el elemento que invita
   a pulsar. El realce va por color de marca + subrayado, que no reflota nada. */
.aw-marketplace-public .awm-link:hover {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.awm-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
}

/* ════════════════════════════ NAV ════════════════════════════ */
.awm-nav {
    position: relative;
    z-index: 60;
    background: var(--bg);
}
/* Rejilla 1fr | auto | 1fr en vez de `space-between`: con el CTA fuera, la
   columna derecha queda casi vacía y un `space-between` empujaría las píldoras
   contra el logo. Así el menú está centrado en la página, no entre vecinos. */
.awm-nav__in {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 22px 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}
.awm-nav__logo { justify-self: start; }
.awm-nav__acts { justify-self: end; }
.awm-nav__logo img { height: 28px; width: auto; object-fit: contain; }

.awm-nav__pills {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
}
.awm-pill {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    transition: all var(--t);
}
.aw-marketplace-public .awm-pill:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.awm-pill.is-on {
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 2px 8px -4px rgba(4,8,19,.25);
}
/* El CTA de la esquina derecha: la única acción de la barra. Lleva el texto
   completo, así que se le deja crecer y solo se acorta el padding en pantallas
   intermedias; el centro (navegación) nunca compite con él. */
.aw-marketplace-public .awm-nav__cta {
    max-width: 320px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

/* Mismo acceso en el desplegable, con el aspecto de las demás filas. */
.awm-nav__mobile-signup,
.awm-nav__mobile-signup-link {
    display: block;
    padding: 11px 2px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--accent-deep);
    text-align: left;
    cursor: pointer;
    transition: all var(--t);
}
.aw-marketplace-public .awm-nav__mobile-signup:hover,
.aw-marketplace-public .awm-nav__mobile-signup-link:hover { color: var(--ink); }

.awm-nav__acts { display: flex; align-items: center; gap: 10px; }

.awm-burger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--line);
    place-items: center;
}

.awm-nav__mobile {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 14px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.awm-nav__mobile a {
    padding: 11px 2px;
    font-size: 14.5px;
    color: var(--ink-2);
    font-weight: 500;
}

/* ════════════════════════ CABECERA DEL DIRECTORIO ════════════════════════ */
.awm-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 28px 80px;
}

.awm-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 44px 0 40px;
}
.awm-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 4.8vw, 48px);
    line-height: 1.06;
    letter-spacing: -.035em;
    text-align: center;
}
/* Visby no trae itálica: una `font-style: italic` la sintetiza el navegador
   inclinando la redonda y se ve sucio. El énfasis va por color y peso. */
.awm-h1 em { color: var(--accent-deep); font-style: normal; font-weight: 700; }
.aw-marketplace-public .awm-sub {
    max-width: 580px;
    margin: 12px auto 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    text-align: center;
    text-wrap: pretty;
}

/* ── Pestañas ─────────────────────────────────────────────── */
.awm-tabs {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid var(--line-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.awm-tabs::-webkit-scrollbar { display: none; }
.awm-tab {
    position: relative;
    padding: 0 2px 13px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all var(--t);
}
.aw-marketplace-public .awm-tab:hover { color: var(--ink-2); }
.awm-tab.is-on { color: var(--ink); font-weight: 700; }
.awm-tab.is-on::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}
.awm-count {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted-2);
}
.awm-tab.is-on .awm-count { background: var(--accent-soft); color: var(--accent-deep); }

/* ── Toolbar ──────────────────────────────────────────────── */
.awm-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 20px;
}
.awm-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 0 16px;
    height: 46px;
    transition: all var(--t);
}
.awm-search:focus-within { border-color: var(--ink); }
.awm-search > svg { color: var(--muted-2); flex: none; }
.awm-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: 13.5px;
    padding: 0;
    height: 100%;
}
.awm-search input::-webkit-search-cancel-button { display: none; }
.awm-search__clear { font-size: 11px; color: var(--muted); white-space: nowrap; transition: all var(--t); }
.aw-marketplace-public .awm-search__clear:hover { color: var(--ink); }

.awm-select {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 0 14px;
    height: 46px;
    flex: none;
}
.awm-select select {
    border: 0;
    outline: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    padding: 0 4px 0 0;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.awm-select > svg { color: var(--muted); pointer-events: none; flex: none; }

.awm-view {
    display: flex;
    gap: 3px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 4px;
    flex: none;
}
.awm-view__b {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted-2);
    transition: all var(--t);
}
.aw-marketplace-public .awm-view__b:hover { color: var(--ink-2); }
.awm-view__b.is-on {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 2px 6px -3px rgba(4,8,19,.3);
}

/* El prefijo del wrapper es obligatorio: `.aw-marketplace-public .awm-btn`
   (0,2,0) declara `display:inline-flex` y ganaba a `.awm-filters-open` (0,1,0),
   así que el botón se veía también en escritorio. Al pulsarlo se bloqueaba el
   scroll del body sin que la hoja de filtros —que solo existe bajo 1024px—
   llegara a aparecer: la página quedaba congelada sin forma visible de salir. */
.aw-marketplace-public .awm-filters-open { display: none; height: 46px; flex: none; }

/* ════════════════════════ CUERPO ════════════════════════ */
.awm-body {
    display: grid;
    grid-template-columns: var(--side) 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Sidebar de filtros ───────────────────────────────────── */
.awm-filters {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px 18px 6px;
    position: sticky;
    top: 18px;
    align-self: start;
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column;
}
.awm-filters__handle,
.awm-filters__close,
.awm-filters__foot { display: none; }

.awm-filters__top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    flex: none;
}
.awm-filters__t {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    flex: 1;
}
.awm-filters__reset {
    font-size: 11.5px;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: all var(--t);
}
.aw-marketplace-public .awm-filters__reset:hover { color: var(--ink); }

/* La sangría de 8px es el presupuesto de «respiro» de toda la columna: es
   hasta donde puede crecer el fondo de un elemento realzado sin salirse del
   carril de scroll (y sin provocar scroll horizontal). Con los 18px de padding
   del panel, ningún realce llega a menos de 10px de la pared. */
.awm-filters__scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -8px;
    padding: 0 8px 14px;
}

.awm-fs { border-bottom: 1px solid var(--line); }
.awm-fs__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* El realce necesita caja propia: 8px de aire alrededor del texto y 10px
       hasta la pared del panel. Los márgenes negativos compensan el padding,
       así que el título NO se mueve de sitio — solo crece la superficie que
       se pinta debajo. */
    padding: 15px 8px;
    margin-inline: -8px;
    width: calc(100% + 16px);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: left;
    transition: all var(--t);
}
/* Contraste forzado: el texto se queda en el tono más oscuro de la paleta
   sobre una superficie casi blanca. No hereda nada del botón ni del tema. */
.aw-marketplace-public .awm-fs__h:hover {
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
}
.aw-marketplace-public .awm-fs__h:hover svg { color: var(--accent-deep); }
.awm-fs__h svg { color: var(--muted); transform: rotate(-90deg); transition: all var(--t); flex: none; }
.awm-fs.is-open .awm-fs__h svg { transform: none; }
.awm-fs__c { display: none; padding-bottom: 16px; flex-direction: column; gap: 10px; }
.awm-fs.is-open .awm-fs__c { display: flex; }
.awm-fs__note { font-size: 11px; color: var(--muted-2); line-height: 1.5; }
.awm-fs__empty { font-size: 11.5px; color: var(--muted-2); padding: 4px 6px; }
.awm-fs__tail { padding: 16px 0 4px; }

.awm-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 8px 11px;
}
.awm-mini svg { color: var(--muted-2); flex: none; }
.awm-mini input { border: 0; outline: 0; background: none; font-size: 12.5px; width: 100%; }
.awm-mini input::-webkit-search-cancel-button { display: none; }

.awm-checks { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
/* El `padding-right` separa las filas de su propia barra de scroll: sin él la
   casilla y la barra se tocaban. */
.awm-checks--scroll { max-height: 208px; overflow-y: auto; padding-right: 6px; }

.awm-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--t);
}
.awm-check:hover { background: rgba(255,255,255,.85); }
/* El texto de la fila se fija a mano en cada estado: así no hay forma de que
   herede el color del tema ni se acerque al tono del propio fondo. */
.awm-check:hover .awm-check__t { color: var(--ink); }
.awm-check:hover .awm-check__n { color: var(--muted); }
.awm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.awm-check__box {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--line-2);
    background: #fff;
    color: #fff;
    transition: all var(--t);
}
.awm-check__box svg { opacity: 0; }
.awm-check input:checked ~ .awm-check__box { background: var(--accent); border-color: var(--accent); }
.awm-check input:checked ~ .awm-check__box svg { opacity: 1; }
.awm-check input:focus-visible ~ .awm-check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.awm-check__t {
    flex: 1;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
/* Al marcar NO se cambia el peso: la negrita ensancha el texto, empuja el
   contador de la derecha y hace bailar la columna entera. El estado ya se lee
   por la casilla en morado y el fondo de la fila. */
.awm-check input:checked ~ .awm-check__t { color: var(--ink); }
.awm-check__n { font-size: 11px; color: var(--muted-2); flex: none; }
.awm-check:has(input:checked) { background: var(--accent-soft); }
/* La fila marcada también responde: sin esto el hover blanco perdía contra
   `:has()` y la casilla ya elegida se quedaba muerta bajo el ratón. */
.awm-check:has(input:checked):hover { background: rgba(128, 125, 254, .2); }
.awm-check:has(input:checked):hover .awm-check__t { color: var(--ink); }
.awm-check--wide { padding-left: 8px; }

.awm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.awm-chip { cursor: pointer; }
.awm-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.awm-chip span {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    transition: all var(--t);
}
.awm-chip span:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
/* Mismo peso marcada y sin marcar: la negrita ensanchaba la píldora, las de
   al lado se reacomodaban en la fila y los bordes acababan tocándose. El
   estado se lee por el relleno oscuro, que no mueve ni un píxel. */
.awm-chip input:checked + span {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.awm-chip input:checked + span:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.awm-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.awm-rate { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.awm-rate b { font-size: 15px; font-weight: 600; color: var(--ink); }
.awm-rate__ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted-2); }

.aw-marketplace-public input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--line-2);
    outline: none;
    padding: 0;
    accent-color: var(--accent);
}
.aw-marketplace-public input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(4,8,19,.3);
    cursor: pointer;
}
.aw-marketplace-public input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(4,8,19,.3);
    cursor: pointer;
}

/* ── Barra de resultados ──────────────────────────────────── */
/* min-width:0 — sin esto el item de grid usa min-width:auto y una tarjeta
   con texto largo ensancha la columna hasta desbordar la página. */
.awm-results { min-width: 0; }

.awm-resbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.awm-resbar__n { font-size: 13px; color: var(--muted); }
.awm-resbar__n b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.awm-activechips { display: flex; flex-wrap: wrap; gap: 7px; }
.awm-achip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    transition: all var(--t);
}
.aw-marketplace-public .awm-achip:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.awm-achip i { font-style: normal; color: var(--muted-2); font-size: 13px; line-height: 1; }

/* ════════════════════════ TARJETAS ════════════════════════ */
.awm-grid.is-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.awm-grid.is-list { display: flex; flex-direction: column; gap: 14px; }

.awm-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: all var(--t);
}
.awm-card[hidden] { display: none !important; }

@media (hover: hover) {
    /* `z-index` es la pieza que faltaba: la tarjeta siguiente pinta después por
       orden del DOM y tapaba el anillo y la sombra de la que se levanta, así
       que el borde se veía cortado y «pegado» al vecino. Levantarla sin sacarla
       de plano era justo la mitad del efecto. */
    .awm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hi); z-index: 2; }
}

/* La caja de la foto es SIEMPRE del mismo alto: la imagen que sube cada
   abogado no puede decidir el tamaño de la tarjeta. `object-fit: cover` +
   `object-position` recortan al encuadre de hombros sin deformar. */
.awm-card__hero {
    position: relative;
    height: 236px;
    min-height: 236px;
    max-height: 236px;
    flex: none;
    background: #d8d5cd;
    overflow: hidden;
}
.awm-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 28%;
}
.awm-card__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.awm-card__ph span {
    font-family: var(--font-display);
    font-size: 62px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255,255,255,.85);
    letter-spacing: -.02em;
}
.awm-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4,8,19,.88) 0%, rgba(4,8,19,.45) 28%, rgba(4,8,19,0) 58%);
    pointer-events: none;
}

.aw-marketplace-public .awm-heart {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    color: var(--ink);
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px -4px rgba(4,8,19,.4);
    z-index: 3;
    transition: all var(--t);
}
/* Sin `scale`: el botón lleva `backdrop-filter`, y escalarlo obliga a repintar
   el fondo desenfocado — es el mismo salto de esquinas que ya documentó el
   CTA del onboarding. El realce va por relleno y sombra. */
.aw-marketplace-public .awm-heart:hover {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 4px 14px -4px rgba(4,8,19,.45);
}
.aw-marketplace-public .awm-heart.is-active { background: var(--accent); color: #fff; }
.aw-marketplace-public .awm-heart.is-active svg { fill: currentColor; }
.aw-marketplace-public .awm-heart--right { left: auto; right: 16px; }

/* Cinta de plan sobre la foto: dice Pro o Elite, nunca "Destacado" a secas.
   Un abogado Básico no lleva ninguna. */
.awm-card__flag {
    position: absolute;
    top: 16px;
    right: 14px;
    z-index: 3;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 9.5px;
    font-weight: 800;
    /* Tracking corto: «MUY DESTACADO» es el triple de largo que «ELITE» y con
       .12em se comía el ancho de la foto en vista lista. */
    letter-spacing: .06em;
    white-space: nowrap;
    text-transform: uppercase;
    color: #fff;
    background: rgba(4, 8, 19, .78);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px -6px rgba(4, 8, 19, .6);
}
.awm-card__flag--senior {
    background: linear-gradient(120deg, #9c7126 0%, #c79433 52%, #e2b85a 100%);
    box-shadow: 0 4px 16px -6px var(--plan-elite);
}
.awm-card__flag--mid {
    background: linear-gradient(120deg, #6d4bff 0%, #807dfe 55%, #b06bff 100%);
    box-shadow: 0 4px 16px -6px var(--plan-pro);
}

/* Borde de la tarjeta según el plan: el anillo interior evita que el color
   dependa del grosor del borde y se vea distinto entre navegadores. */
.awm-card--senior {
    border-color: var(--plan-elite-soft);
    box-shadow: 0 0 0 1px var(--plan-elite-soft), var(--shadow-card);
}
.awm-card--mid {
    border-color: var(--plan-pro-soft);
    box-shadow: 0 0 0 1px var(--plan-pro-soft), var(--shadow-card);
}
@media (hover: hover) {
    .awm-card--senior:hover { box-shadow: 0 0 0 1px var(--plan-elite), var(--shadow-hi); }
    .awm-card--mid:hover    { box-shadow: 0 0 0 1px var(--plan-pro),   var(--shadow-hi); }
}

.awm-card__over {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
}
.aw-marketplace-public .awm-card__eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.awm-card__name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 19.5px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    text-wrap: pretty;
}
.awm-seal { color: var(--accent); flex: none; }
.aw-marketplace-public .awm-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 5px;
    font-size: 12px;
    color: rgba(255,255,255,.82);
}
.awm-card__meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.awm-card__rate { color: #fff; font-weight: 700; }

/* ── Cinco estrellas ──────────────────────────────────────────
   Dos filas superpuestas: la de abajo siempre completa en gris (perfil sin
   reseñas = cinco huecos, nunca un vacío), la de arriba en color y recortada
   por ancho, así que 4,3 pinta cuatro estrellas y un 30 % de la quinta.
   Especificidad de dos clases a propósito: dentro de `.awm-card__meta` hay
   una regla que pone `display:inline-flex` a todo `span` descendiente. */
.aw-marketplace-public .awm-stars {
    position: relative;
    display: inline-flex;
    flex: none;
    line-height: 0;
    color: var(--star-off);
}
.awm-stars .awm-stars__row,
.awm-stars .awm-stars__on {
    display: flex;
    align-items: center;
    gap: 2px;
    line-height: 0;
}
.awm-stars .awm-stars__on {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    overflow: hidden;
    color: var(--star-on);
}
.awm-stars svg { display: block; flex: none; width: 13px; height: 13px; }
/* Sobre la foto el gris desaparece contra el degradado: el hueco se marca
   en blanco translúcido. */
.aw-marketplace-public .awm-stars--photo { color: rgba(255, 255, 255, .45); }
/* Estrellas + promedio + número de reseñas viajan juntos: no se parten de
   línea aunque la fila bajo el nombre tenga que envolver. */
.awm-card__stars2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.awm-card__body {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.awm-card__head { display: none; }
.awm-card__quote {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
    text-wrap: pretty;
}
.awm-card__specs { display: flex; flex-direction: column; gap: 7px; }
.awm-spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px 14px;
    min-width: 0;
}
.awm-spec span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.awm-spec b {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* La ciudad solo aparece como etiqueta en la vista lista: en cuadrícula ya
   está escrita sobre la foto y duplicarla ensuciaría la reja. */
.awm-spec--city { display: none; }
.awm-card__foot {
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.aw-marketplace-public .awm-card__foot .awm-btn { padding: 10px 16px; font-size: 12px; }
.awm-card__aside { display: none; }
.awm-card__seo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.awm-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--line);
    border-radius: 999px;
    padding: 3px 9px;
}
.awm-tag--ok { color: var(--accent-deep); background: var(--accent-soft); }
.awm-tag--senior {
    color: #fff;
    background: linear-gradient(120deg, #9c7126 0%, #c79433 52%, #e2b85a 100%);
    letter-spacing: .06em;
}
.awm-tag--mid {
    color: #fff;
    background: linear-gradient(120deg, #6d4bff 0%, #807dfe 55%, #b06bff 100%);
    letter-spacing: .06em;
}

/* ── Vista lista ──────────────────────────────────────────── */
/* Alto de fila FIJO: es lo que garantiza que las cinco fotos midan
   exactamente 196 × 240. Todo el contenido variable de dentro está acotado
   (nombre a una línea, cita a dos, especificaciones en dos filas), así que
   nada llega a desbordar ese alto — quedan ~25px de holgura por si los
   distintivos de plan bajan a una segunda línea con un nombre muy largo. */
.awm-grid.is-list .awm-card {
    display: grid;
    grid-template-columns: 196px 1fr 232px;
    height: 248px;
    border-radius: 20px;
}
.awm-grid.is-list .awm-card:hover { z-index: 2; transform: none; }
.awm-grid.is-list .awm-card__hero { height: 248px; min-height: 248px; max-height: 248px; }
.awm-grid.is-list .awm-card__name,
.awm-grid.is-list .awm-card__meta { display: none; }
/* La cinta de plan SÍ se mantiene en lista: es el distintivo comercial. */
.awm-grid.is-list .awm-card__flag { top: 12px; right: 10px; padding: 4px 9px; font-size: 8.5px; letter-spacing: .04em; }
.awm-grid.is-list .awm-card__over { bottom: 12px; left: 14px; right: 14px; }
.awm-grid.is-list .awm-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* Una sola línea: un nombre largo no puede empujar la tarjeta y romper la
   uniformidad de la fila. */
.awm-card__name2 {
    flex: 0 1 auto;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Bajo el nombre: especialidad · áreas · años de ejercicio. Es el orden en
   que se decide a quién contratar; la ciudad se fue a las etiquetas. Los
   puntos separadores los pone el CSS para que el orden de los datos pueda
   cambiar sin arrastrar signos de puntuación en la plantilla. */
.awm-card__meta2 {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    font-size: 12px;
    color: var(--muted);
    min-width: 0;
}
.awm-card__meta2 > * + *::before {
    content: "\00B7";
    margin-right: 9px;
    color: var(--muted-2);
}
/* El bloque de estrellas ya separa por dentro con su propio `gap`. */
.awm-card__meta2 > .awm-card__stars2::before { margin-right: 0; }
.awm-card__areas2 {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink-2);
}
.awm-card__areas2 b { color: var(--accent-deep); font-weight: 800; }
.awm-card__exp2 { white-space: nowrap; }
.awm-card__exp2 b { color: var(--ink); font-weight: 700; }
/* La universidad va un escalón por debajo: respalda, no encabeza. */
.awm-card__edu2 {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11.5px;
    color: var(--muted);
}
.awm-card__edu2 svg { flex: none; color: var(--muted-2); }
.awm-card__edu2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awm-grid.is-list .awm-card__body { padding: 18px 22px; gap: 10px; }
/* Dos líneas como máximo, por la misma razón que el nombre. */
.awm-grid.is-list .awm-card__quote {
    text-align: left;
    font-size: 12.5px;
    max-width: 640px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.awm-grid.is-list .awm-card__specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: auto;
}
/* Experiencia, especialidad y educación ya se leen bajo el nombre: repetirlas
   aquí gastaría la única fila de etiquetas que cabe en el alto fijo. */
.awm-grid.is-list .awm-spec--rate,
.awm-grid.is-list .awm-spec--exp,
.awm-grid.is-list .awm-spec--areas,
.awm-grid.is-list .awm-spec--edu { display: none; }
.awm-grid.is-list .awm-spec--city { display: flex; }
.awm-grid.is-list .awm-card__foot { display: none; }
.awm-grid.is-list .awm-card__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    border-left: 1px dashed var(--line-2);
    padding: 18px 20px;
    background: #fcfbf7;
}
.awm-card__aside-l {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.aw-marketplace-public .awm-card__aside-v {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-top: 4px;
}
.awm-card__aside-s { font-size: 11.5px; color: var(--muted); }
.awm-card__aside-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }

/* ── Vacío ────────────────────────────────────────────────── */
.awm-empty {
    background: var(--panel);
    border: 1px dashed var(--line-2);
    border-radius: 22px;
    padding: 64px 32px;
    text-align: center;
}
.aw-marketplace-public .awm-empty__t {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.025em;
    margin-bottom: 8px;
}
.aw-marketplace-public .awm-empty__d {
    max-width: 420px;
    margin: 0 auto 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* ════════════════════════ CTA FINAL ════════════════════════ */
.awm-cta {
    margin-top: 56px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: 56px 32px;
    text-align: center;
}
.awm-cta__t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3.6vw, 38px);
    letter-spacing: -.035em;
    line-height: 1.1;
}
.aw-marketplace-public .awm-cta__d {
    max-width: 560px;
    margin: 14px auto 26px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}
.awm-cta__b { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.aw-marketplace-public .awm-cta__b .awm-btn { padding: 13px 22px; font-size: 13px; }

/* ════════════════ SLIDE-OVER DE PERFIL ════════════════ */
.awm-sheet { position: fixed; inset: 0; z-index: 90000; display: none; }
.awm-sheet.is-open { display: block; }
.awm-sheet__bd {
    position: absolute;
    inset: 0;
    background: rgba(4,8,19,.45);
    backdrop-filter: blur(2px);
    animation: awmFade .2s ease;
}
.awm-sheet__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100%);
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -30px 0 70px -30px rgba(4,8,19,.5);
    animation: awmSlide .28s cubic-bezier(.2,.8,.25,1);
}
@keyframes awmSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes awmFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes awmSpin  { to { transform: rotate(360deg); } }

.awm-sheet__load {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    font-size: 13px;
    color: var(--muted);
}
.awm-sheet.is-loading .awm-sheet__load { display: flex; }
.awm-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--line-2);
    border-top-color: var(--accent);
    animation: awmSpin .7s linear infinite;
}

.awm-sheet__hero { position: relative; height: 280px; background: #d8d5cd; overflow: hidden; }
.awm-sheet__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.aw-marketplace-public .awm-sheet__close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    color: var(--ink);
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px);
    z-index: 3;
}
.awm-sheet__body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.awm-sheet__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12.5px;
    color: var(--muted);
}
.awm-sheet__facts .awm-strong { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.awm-sheet__facts .awm-strong svg { color: var(--accent-deep); }
.awm-sheet__bio {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.01em;
    color: var(--ink-2);
    text-wrap: pretty;
}
.awm-sheet__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.awm-stat {
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    min-width: 0;
}
.awm-stat__l {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.aw-marketplace-public .awm-stat__v {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.awm-sheet__card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.awm-row { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; }
.awm-row span { color: var(--muted); flex: none; }
.awm-row b { font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.aw-marketplace-public .awm-sheet__h { font-size: 14px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 12px; }
.awm-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.awm-day {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 9px 2px;
    text-align: center;
}
.awm-day.is-off { opacity: .42; }
.awm-day__d {
    display: block;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.awm-day__h { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; }
.aw-marketplace-public .awm-sheet__note { margin-top: 10px; font-size: 11.5px; line-height: 1.55; color: var(--muted-2); }

.awm-sheet__bar {
    background: var(--ink);
    color: #fff;
    border-radius: 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.awm-sheet__bar-l {
    font-size: 11px;
    color: rgba(255,255,255,.6);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}
.aw-marketplace-public .awm-sheet__bar-v { font-size: 20px; font-weight: 600; margin-top: 4px; letter-spacing: -.02em; }
.aw-marketplace-public .awm-sheet__bar .awm-btn { padding: 13px 22px; font-size: 13px; }
.awm-sheet__link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-deep);
    text-align: center;
    padding-bottom: 8px;
    transition: all var(--t);
}
.aw-marketplace-public .awm-sheet__link:hover { color: var(--ink); }

/* ════════════════ BARRA INFERIOR MÓVIL ════════════════ */
.awm-tabbar { display: none; }
.awm-fbd { display: none; }

/* ════════════════════════ RESPONSIVE ════════════════════════ */
@media (min-width: 1280px) {
    /* El menú desplegable solo existe con el botón hamburguesa visible, y el
       botón aparece exactamente donde las píldoras dejan de caber (1280px).
       Antes el desplegable moría en 768px mientras las píldoras ya se ocultaban
       en 1280: entre medias la barra se quedaba sin un solo enlace. */
    .awm-nav__mobile { display: none !important; }
}

@media (max-width: 1279px) {
    .awm-grid.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .awm-nav__pills { display: none; }
    .awm-burger { display: grid; }
}

@media (max-width: 1023px) {
    .awm-nav__in { padding: 18px 20px; }
    .awm-wrap { padding: 0 20px 40px; }
    .awm-body { grid-template-columns: 1fr; }
    .aw-marketplace-public .awm-filters-open { display: inline-flex; }

    /* El sidebar pasa a ser hoja inferior (bottom sheet) */
    .awm-filters {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 90001;
        max-height: 86vh;
        border-radius: 26px 26px 0 0;
        border-width: 1px 0 0;
        padding: 0 20px;
        transform: translateY(101%);
        transition: transform .3s cubic-bezier(.2,.8,.25,1);
        box-shadow: 0 -24px 60px -24px rgba(4,8,19,.5);
        background: var(--bg);
    }
    .awm-filters.is-open { transform: none; }
    .awm-filters__handle {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: var(--line-2);
        margin: 12px auto 6px;
        flex: none;
    }
    .awm-filters__close {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--panel);
        color: var(--muted);
        flex: none;
    }
    .awm-filters__top { padding: 6px 0 12px; }
    .awm-filters__foot {
        display: flex;
        gap: 10px;
        padding: 14px 0 calc(20px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: var(--bg);
        flex: none;
    }
    .aw-marketplace-public .awm-filters__foot .awm-btn { flex: 1; padding: 14px 18px; font-size: 13.5px; }
    .aw-marketplace-public .awm-filters__foot .awm-btn--ghost { flex: 0 0 auto; }

    .awm-fbd {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90000;
        background: rgba(4,8,19,.42);
        animation: awmFade .22s ease;
    }

    /* Lista: la columna de tarifa se apila bajo el contenido, así que el alto
       de fila deja de ser fijo. La foto conserva su caja exacta. */
    .awm-grid.is-list .awm-card { grid-template-columns: 160px 1fr; height: auto; }
    .awm-grid.is-list .awm-card__hero { height: 100%; min-height: 200px; max-height: none; }
    .awm-grid.is-list .awm-card__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        border-left: 0;
        border-top: 1px dashed var(--line-2);
    }
    .awm-grid.is-list .awm-card__aside-cta { flex-direction: row; align-items: center; margin-left: auto; }
}

@media (max-width: 767px) {
    /* El CTA no cabe junto al logo: baja al desplegable. */
    .aw-marketplace-public .awm-nav__cta { display: none; }

    .awm-head { padding: 24px 0 26px; }
    .awm-toolbar { flex-wrap: wrap; }
    .awm-search { flex: 1 1 100%; order: -1; }
    .awm-select { flex: 1; }
    .awm-view { display: none; }

    .awm-grid.is-grid,
    .awm-grid.is-list { display: flex; flex-direction: column; gap: 16px; }
    .awm-grid.is-list .awm-card { display: flex; flex-direction: column; grid-template-columns: none; height: auto; }
    .awm-grid.is-list .awm-card__hero { height: 214px; min-height: 214px; max-height: 214px; }
    .awm-grid.is-list .awm-card__quote { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
    .awm-grid.is-list .awm-card__name,
    .awm-grid.is-list .awm-card__meta { display: flex; }
    .awm-grid.is-list .awm-card__head { display: none; }
    .awm-grid.is-list .awm-card__specs { display: flex; flex-direction: column; }
    .awm-grid.is-list .awm-spec--rate,
    .awm-grid.is-list .awm-spec--exp,
    .awm-grid.is-list .awm-spec--areas,
    .awm-grid.is-list .awm-spec--edu { display: flex; }
    .awm-grid.is-list .awm-spec--city { display: none; }
    .awm-grid.is-list .awm-card__foot { display: flex; }
    .awm-grid.is-list .awm-card__aside { display: none; }

    .awm-card__hero { height: 214px; min-height: 214px; max-height: 214px; }
    .awm-card__ph span { font-size: 66px; }
    .awm-card__body { padding: 15px 15px 14px; }
    .awm-card__foot { flex-wrap: wrap; }
    .aw-marketplace-public .awm-card__foot .awm-btn { flex: 1; }

    .awm-sheet__panel { width: 100%; }
    .awm-sheet__hero { height: 240px; }
    .awm-sheet__body { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
    .awm-sheet__stats { grid-template-columns: 1fr 1fr; }
    .awm-days { grid-template-columns: repeat(4, 1fr); }

    .awm-cta { padding: 40px 22px; margin-top: 36px; }

    /* Tab bar: la traducción móvil de la barra de herramientas */
    .aw-marketplace-public { padding-bottom: 0; }
    .awm-wrap { padding-bottom: 92px; }
    .awm-tabbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 89000;
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        padding: 8px 0 calc(6px + env(safe-area-inset-bottom));
    }
    .awm-tabbar__b {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 2px 0 4px;
        color: var(--muted-2);
        font-size: 10px;
        font-weight: 500;
        min-height: 44px;
    }
    .awm-tabbar__b.is-on { color: var(--ink); font-weight: 700; }
    .awm-tabbar__badge {
        position: absolute;
        top: -2px;
        left: 50%;
        margin-left: 4px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: 9.5px;
        font-weight: 800;
        display: grid;
        place-items: center;
    }
    .awm-tabbar__dot {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: 6px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aw-marketplace-public *,
    .aw-marketplace-public *::before,
    .aw-marketplace-public *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════
   POP-UP DE ONBOARDING DEL MARKETPLACE
   Mismo sistema de diseño que el pop-up de la landing lp-clientes:
   contenedor liquid-glass, rounded-2xl, morado de marca en variable
   sobre el wrapper (no en :root). Explica el objetivo (elegir abogado
   para agendar) y la función de los botones de cada tarjeta.
   ════════════════════════════════════════════════════════════ */
.aw-mp-onb {
    --aw-onb-brand: #807dfe;
    --t: .25s ease-in-out;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Visby', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.aw-mp-onb.is-open {
    display: flex;
}

.aw-mp-onb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: aw-mp-onb-fade .35s ease-out both;
}

/* Contenedor liquid-glass */
.aw-mp-onb__card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 40px);
    /* `hidden auto` explícito: el eje X nunca desborda las esquinas. */
    overflow: hidden auto;
    padding: 34px 32px 28px;
    /* Radios en px y esquina por esquina, no en `rem` ni en atajo: `rem`
       depende del tamaño de fuente raíz y bastaba con que el tema lo tocara
       para que el redondeo cambiara. */
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    /* Capa de pintado propia: sin esto, cualquier repintado del interior
       (un clic, el hover del CTA, la barra de scroll apareciendo) hacía que
       Chrome volviera a pintar el `backdrop-filter` como un rectángulo y las
       esquinas se "cuadraran" a mitad de interacción. */
    isolation: isolate;
    background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 12.5px 10px rgba(0, 0, 0, .06),
        0 41.8px 33.4px rgba(0, 0, 0, .086),
        0 100px 80px rgba(0, 0, 0, .12);
    animation: aw-mp-onb-rise .45s cubic-bezier(.16, 1, .3, 1) both;
}

.aw-mp-onb__card:focus,
.aw-mp-onb__card:focus-visible {
    outline: none;
}

/* La barra de scroll nativa se pintaba sobre las esquinas redondeadas y las
   dejaba en ángulo recto al aparecer. Fina, con el track retranqueado. */
.aw-mp-onb__card { scrollbar-width: thin; scrollbar-color: rgba(4, 8, 19, .18) transparent; }
.aw-mp-onb__card::-webkit-scrollbar { width: 6px; }
.aw-mp-onb__card::-webkit-scrollbar-track { background: transparent; margin: 26px 0; }
.aw-mp-onb__card::-webkit-scrollbar-thumb { background: rgba(4, 8, 19, .18); border-radius: 999px; }

@keyframes aw-mp-onb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes aw-mp-onb-rise {
    /* Solo desplazamiento. Con `scale()` el radio se escalaba con la caja y
       las esquinas "respiraban" durante la animación (y el easing de esta
       tarjeta sobrepasa 1, así que además se pasaba de largo). */
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.aw-mp-onb__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: #555;
    cursor: pointer;
    transition: all var(--t);
}

.aw-mp-onb__close:hover {
    background: rgba(0, 0, 0, .12);
    color: #111827;
}

.aw-mp-onb__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 5px 13px;
}

.aw-mp-onb__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #171717;
    margin: 16px 0 0;
}

.aw-mp-onb__sub {
    font-size: 16px;
    line-height: 1.55;
    color: #6b7280;
    margin: 12px 0 0;
}

/* Filas que explican cada botón de la tarjeta */
.aw-mp-onb__rows {
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aw-mp-onb__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.aw-mp-onb__ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

/* La acción principal (Agendar) usa el negro de la marca, igual que el botón real. */
.aw-mp-onb__ico--book {
    background: #111827;
    color: #fff;
}

.aw-mp-onb__ico--profile {
    background: #f5f4ff;
    color: var(--aw-onb-brand);
    border: 1px solid #e6e3ff;
}

.aw-mp-onb__ico--fav {
    background: #fff0f3;
    color: #ff5d8f;
    border: 1px solid #ffd9e2;
}

.aw-mp-onb__row-t {
    font-size: 16px;
    font-weight: 600;
    color: #171717;
    margin: 2px 0 0;
}

.aw-mp-onb__row-t .aw-mp-onb__flag {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--aw-onb-brand);
    background: #f0effe;
    border-radius: 6px;
    padding: 2px 7px;
    vertical-align: middle;
}

.aw-mp-onb__row-d {
    font-size: 14.5px;
    line-height: 1.5;
    color: #6b7280;
    margin: 2px 0 0;
}

.aw-marketplace-public .aw-mp-onb__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 68px;
    margin: 48px 0 0;
    padding: 22px 28px;
    border: none;
    /* En px y esquina por esquina, como la tarjeta: el `overflow:hidden` que
       recorta el brillo tiene que apoyarse en un radio que no cambie. */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    background: linear-gradient(120deg, #6d4bff 0%, #807dfe 45%, #b06bff 100%);
    color: #fff;
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--t);
    animation: aw-mp-cta-pulse 1.9s ease-in-out infinite;
}

/* Sin `transform` en el hover: mover un hijo dentro de una tarjeta con
   `backdrop-filter` forzaba el repintado del fondo y ahí es donde se veían
   saltar las esquinas. Y sin subir el brillo: aclarar un morado medio con
   texto blanco encima le quita contraste justo cuando se va a pulsar, así que
   el degradado se oscurece en vez de aclararse. */
.aw-marketplace-public .aw-mp-onb__cta:hover {
    background: linear-gradient(120deg, #5a37e0 0%, #6a67ea 45%, #9a52ea 100%);
    color: #fff;
    animation-play-state: paused;
}

.aw-mp-onb__cta-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    animation: aw-mp-cta-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes aw-mp-cta-shine {
    0%, 18%   { left: -60%; }
    55%, 100% { left: 130%; }
}

@keyframes aw-mp-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(128, 100, 255, .7), 0 10px 26px rgba(128, 100, 255, .4); }
    55%  { box-shadow: 0 0 0 16px rgba(128, 100, 255, 0), 0 16px 40px rgba(128, 100, 255, .5); }
    100% { box-shadow: 0 0 0 0 rgba(128, 100, 255, 0), 0 10px 26px rgba(128, 100, 255, .4); }
}

@media (prefers-reduced-motion: reduce) {
    .aw-mp-onb__cta,
    .aw-mp-onb__cta-shine {
        animation: none;
    }
}

@media (max-width: 480px) {
    .aw-mp-onb__card { padding: 26px 20px 22px; }
    .aw-mp-onb__title { font-size: 24px; }
    .aw-marketplace-public .aw-mp-onb__cta {
        min-height: 62px;
        padding: 20px 22px;
        font-size: 16px;
        margin-top: 34px;
    }
}

/* ════════════════════════════════════════════════════════════
   MODAL DE AGENDAMIENTO (recarga → chat popup → agendar)
   Mismo sistema de diseño: liquid-glass, rounded-2xl, morado de marca.
   ════════════════════════════════════════════════════════════ */
.aw-sched {
    --aw-onb-brand: #807dfe;
    --t: .25s ease-in-out;
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Visby', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.aw-sched.is-open { display: flex; }

.aw-sched__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: aw-mp-onb-fade .35s ease-out both;
}

.aw-sched__card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 40px);
    overflow: hidden auto;
    padding: 32px 30px 26px;
    /* Mismo tratamiento que la tarjeta del pop-up: radios en px, esquina por
       esquina, y capa de pintado propia para que el `backdrop-filter` no se
       repinte como rectángulo al interactuar dentro. */
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    isolation: isolate;
    background: linear-gradient(160deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .82));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12.5px 10px rgba(0, 0, 0, .06), 0 41.8px 33.4px rgba(0, 0, 0, .086), 0 100px 80px rgba(0, 0, 0, .12);
    animation: aw-mp-onb-rise .45s cubic-bezier(.16, 1, .3, 1) both;
    transition: max-width .35s cubic-bezier(.16, 1, .3, 1);
}

.aw-sched__card:focus,
.aw-sched__card:focus-visible { outline: none; }

.aw-sched__card { scrollbar-width: thin; scrollbar-color: rgba(4, 8, 19, .18) transparent; }
.aw-sched__card::-webkit-scrollbar { width: 6px; }
.aw-sched__card::-webkit-scrollbar-track { background: transparent; margin: 26px 0; }
.aw-sched__card::-webkit-scrollbar-thumb { background: rgba(4, 8, 19, .18); border-radius: 999px; }

.aw-sched__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: #555;
    cursor: pointer;
    transition: all var(--t);
    z-index: 2;
}

.aw-sched__close:hover { background: rgba(0, 0, 0, .12); color: #111827; }

/* Barra de progreso */
.aw-sched__head { margin: 0 0 18px; }

.aw-sched__steplabel {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 7px;
}

.aw-sched__bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
    overflow: hidden;
}

.aw-sched__bar-fill {
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--aw-onb-brand), #a5a2ff);
    transition: width .5s cubic-bezier(.16, 1, .3, 1);
}

.aw-sched__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 5px 13px;
}

.aw-sched__title {
    font-size: 25px;
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #171717;
    margin: 14px 0 0;
}

.aw-sched__sub {
    font-size: 15px;
    line-height: 1.55;
    color: #6b7280;
    margin: 10px 0 0;
}

/* Tarjetas de paquete */
.aw-sched__pkgs {
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aw-sched__pkg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 15px 18px;
    border-radius: 16px;
    border: 1.5px solid #e8e6f5;
    background: #fff;
    cursor: pointer;
    transition: all var(--t);
}

/* Sin `translateY`: la tarjeta lleva una cinta colgando en `top:-9px` y al
   levantarse se metía en la línea de la tarjeta de arriba. El realce va por
   borde y sombra, que crecen sin mover nada de sitio. */
.aw-sched__pkg:hover {
    border-color: var(--aw-onb-brand);
    box-shadow: 0 8px 22px rgba(128, 100, 255, .14);
}

.aw-sched__pkg--best {
    border-color: var(--aw-onb-brand);
    background: linear-gradient(160deg, #f6f5ff, #fdf2ff);
}

.aw-sched__pkg-name { display: block; font-size: 15px; font-weight: 700; color: #171717; }
.aw-sched__pkg-cred { display: block; font-size: 13px; color: #6b7280; margin-top: 3px; }
.aw-sched__pkg-price { font-size: 17px; font-weight: 800; color: #171717; white-space: nowrap; }

.aw-sched__pkg-flag {
    position: absolute;
    top: -9px;
    left: 16px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    background: var(--aw-onb-brand);
    border-radius: 6px;
    padding: 2px 8px;
}

/* Volver */
.aw-sched__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, .05);
    color: #444;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--t);
}

.aw-sched__back:hover { background: rgba(0, 0, 0, .1); color: #111827; }

.aw-sched__pkgsummary {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f5f4ff;
    border: 1px solid #e6e3ff;
    font-size: 14px;
    color: #171717;
}

.aw-sched__pkgsummary b { color: var(--aw-onb-brand); }

/* Formulario */
.aw-sched__form { margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.aw-sched__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.aw-sched__form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.aw-sched__form input,
.aw-sched__form select {
    height: 44px;
    padding: 0 13px;
    border-radius: 11px;
    border: 1.5px solid #e2e0ee;
    background: #fff;
    font-size: 15px;
    color: #171717;
    font-family: inherit;
    outline: none;
    transition: all var(--t);
}

.aw-sched__form input:focus,
.aw-sched__form select:focus { border-color: var(--aw-onb-brand); }

.aw-sched__err {
    margin: 2px 0 0;
    font-size: 13px;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 12px;
}

/* CTA (comparte lenguaje con el pop-up de la landing) */
.aw-sched__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    margin: 6px 0 0;
    padding: 10px 18px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(120deg, #6d4bff 0%, #807dfe 45%, #b06bff 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--t);
}

/* El realce oscurece el degradado en vez de aclararlo: con texto blanco de
   16px encima, subir el brillo del morado dejaba el contraste por debajo de lo
   legible justo en el momento de pulsar. */
.aw-sched__cta:hover { background: linear-gradient(120deg, #5a37e0 0%, #6a67ea 45%, #9a52ea 100%); color: #fff; }
.aw-sched__cta:disabled { opacity: .6; cursor: not-allowed; }

.aw-sched__cta-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    animation: aw-mp-cta-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}

/* Promo */
.aw-sched__promo { margin: 18px 0 0; }

.aw-sched__promo-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9ca3af;
    font-size: 12px;
    margin-bottom: 10px;
}

.aw-sched__promo-sep::before,
.aw-sched__promo-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.aw-sched__promo-row { display: flex; gap: 8px; }

.aw-sched__promo-row input {
    flex: 1;
    height: 44px;
    padding: 0 13px;
    border-radius: 11px;
    border: 1.5px solid #e2e0ee;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.aw-sched__promo-row input:focus { border-color: var(--aw-onb-brand); }

.aw-sched__promo-btn {
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 11px;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t);
}

.aw-sched__promo-btn:hover { background: #1f2937; color: #fff; }
.aw-sched__promo-btn:disabled { opacity: .5; cursor: not-allowed; }

.aw-sched__promo-msg { margin: 10px 0 0; font-size: 13px; }
.aw-sched__promo-msg.is-ok { color: #059669; }
.aw-sched__promo-msg.is-err { color: #dc2626; }

/* Loading */
.aw-sched__pane--loading { text-align: center; padding: 40px 0; color: #6b7280; }

.aw-sched__spin {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 4px solid #e7e3fb;
    border-top-color: var(--aw-onb-brand);
    animation: aw-sched-spin 1s linear infinite;
}

@keyframes aw-sched-spin { to { transform: rotate(360deg); } }

/* Chat popup (paso final) */
.aw-sched__chat { text-align: left; }

.aw-sched__chat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 16px;
    border-bottom: 1px solid #ececf3;
}

.aw-sched__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e7e3fb;
    flex-shrink: 0;
}

.aw-sched__chat-name { font-size: 17px; font-weight: 700; color: #171717; margin: 0; }

.aw-sched__chat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #059669;
    margin-top: 2px;
}

.aw-sched__chat-body { padding: 18px 0 22px; }

.aw-sched__bubble {
    background: #f4f4f7;
    border-radius: 4px 16px 16px 16px;
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #333;
    max-width: 92%;
}

/* Botón palpitante "Agendar llamada" */
.aw-sched__book {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    border-radius: 16px;
    background: #111827;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    animation: aw-sched-pulse 1.7s ease-in-out infinite;
    transition: all var(--t);
}

.aw-sched__book:hover { background: #1f2937; color: #fff !important; animation-play-state: paused; }

@keyframes aw-sched-pulse {
    0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(128, 100, 255, .55), 0 8px 22px rgba(0, 0, 0, .18); }
    55%  { transform: scale(1.02);  box-shadow: 0 0 0 14px rgba(128, 100, 255, 0), 0 14px 32px rgba(0, 0, 0, .24); }
    100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(128, 100, 255, 0), 0 8px 22px rgba(0, 0, 0, .18); }
}

@media (prefers-reduced-motion: reduce) {
    .aw-sched__book,
    .aw-sched__cta-shine { animation: none; }
}

@media (max-width: 480px) {
    .aw-sched__card { padding: 26px 20px 22px; }
    .aw-sched__title { font-size: 22px; }
    .aw-sched__grid2 { grid-template-columns: 1fr; }
}

/* ── Paso final: modal de agendamiento (duración/fecha/hora/modalidad) ── */
.aw-sched__balance {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--aw-onb-brand);
    background: #f5f4ff;
    border: 1px solid #e6e3ff;
    border-radius: 10px;
    padding: 8px 12px;
    display: inline-block;
}

.aw-sched__field { margin: 18px 0 0; }

.aw-sched__flabel {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin: 0 0 8px;
}

.aw-sched__durs { display: flex; gap: 10px; }

.aw-sched__dur {
    flex: 1;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1.5px solid #e2e0ee;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: all var(--t);
}

.aw-sched__dur:not(.is-active):hover { border-color: var(--aw-onb-brand); background: #fff; color: #111827; }
.aw-sched__dur.is-active { border-color: #111827; background: #111827; }
.aw-sched__dur.is-active .aw-sched__dur-t,
.aw-sched__dur.is-active .aw-sched__dur-c { color: #fff; }

.aw-sched__dur-t { display: block; font-size: 15px; font-weight: 700; color: #171717; }
.aw-sched__dur-c { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }

.aw-sched__field input[type="date"],
#aw-sched-mode {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e0ee;
    background: #fff;
    font-size: 15px;
    color: #171717;
    font-family: inherit;
    outline: none;
}

.aw-sched__field input[type="date"]:focus,
#aw-sched-mode:focus { border-color: var(--aw-onb-brand); }

.aw-sched__slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.aw-sched__slot {
    padding: 10px 4px;
    border-radius: 11px;
    border: 1.5px solid #e2e0ee;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all var(--t);
}

.aw-sched__slot:not(.is-active):not(.is-occupied):hover { border-color: var(--aw-onb-brand); background: #fff; color: #111827; }
.aw-sched__slot.is-active { background: #111827; border-color: #111827; color: #fff; }
.aw-sched__slot.is-occupied { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.aw-sched__slots-note { margin: 8px 0 0; font-size: 13px; color: #9ca3af; }

.aw-sched__cost {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f4f7;
    font-size: 13.5px;
    color: #4b5563;
}

.aw-sched__cost b { color: #171717; }

.aw-sched__book--confirm {
    margin-top: 16px;
    animation: none;
    justify-content: center;
}

.aw-sched__book--confirm:disabled { opacity: .55; cursor: not-allowed; }

.aw-sched__bk-ok { text-align: center; padding: 20px 0 6px; }

.aw-sched__bk-check {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #34d399);
    animation: aw-mp-onb-rise .4s cubic-bezier(.16, 1, .3, 1) both;
}

@media (max-width: 480px) {
    .aw-sched__slots { grid-template-columns: repeat(3, 1fr); }
}

/* ── Paso 1: lista de abogados guardados ── */
.aw-sched__center { text-align: center; }

.aw-sched__lawyers {
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aw-sched__lawyer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1.5px solid #e8e6f5;
    background: #fff;
}

.aw-sched__lawyer-av {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e7e3fb;
}

.aw-sched__lawyer-info { min-width: 0; flex: 1; }
.aw-sched__lawyer-name { font-size: 15px; font-weight: 700; color: #171717; }
.aw-sched__lawyer-meta { font-size: 12.5px; color: #6b7280; margin-top: 1px; }

.aw-sched__lawyer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 9px 15px;
    border: none;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t);
}

.aw-sched__lawyer-cta:hover { background: #1f2937; color: #fff; }

/* ── Paso 2: paywall (invertir crédito) ── */
.aw-sched__pw-ico {
    width: 56px;
    height: 56px;
    margin: 4px auto 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aw-onb-brand);
    background: #f0effe;
    border: 1px solid #ddd9fb;
}

.aw-sched__pw-balance {
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f5f4ff;
    border: 1px solid #e6e3ff;
    text-align: center;
    font-size: 14px;
    color: #4c3bd6;
}

.aw-sched__pw-balance b { color: #171717; }

.aw-sched__pane--paywall #aw-sched-pw-credits {
    width: 100%;
    height: 50px;
    margin: 8px 0 0;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid #e2e0ee;
    font-size: 18px;
    font-weight: 700;
    color: #171717;
    font-family: inherit;
    outline: none;
    text-align: left;
}

.aw-sched__pane--paywall #aw-sched-pw-credits:focus { border-color: var(--aw-onb-brand); }

.aw-sched__pane--paywall .aw-sched__flabel { margin-top: 18px; }

.aw-sched__pw-note {
    margin: 14px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f4f4f7;
    font-size: 13px;
    line-height: 1.55;
    color: #5b6270;
}

.aw-sched__pw-note b { color: #171717; }

/* ── Paso 3: chat real (burbujas me/them, como el dashboard) ── */
.aw-sched__chat-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 44vh;
    overflow-y: auto;
}

/* Fila de mensaje + avatar (el "them" muestra iniciales del abogado) */
.aw-sched__msg-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.aw-sched__msg-row--me { flex-direction: row-reverse; }

.aw-sched__msg-av {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e7e6f3;
    color: #4b3f9e;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* Burbuja: fit-content dentro del 78% del ancho */
.aw-sched__msg-b {
    position: relative;
    max-width: 78%;
    width: fit-content;
    padding: 10px 14px 8px;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-break: break-word;
}
.aw-sched__msg-b--them {
    background: #f4f4f7;
    color: #333;
    border-radius: 4px 16px 16px 16px;
}
.aw-sched__msg-b--me {
    background: var(--aw-onb-brand);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    margin-left: auto;
}
.aw-sched__msg-t {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    opacity: .6;
}
.aw-sched__msg-b--me .aw-sched__msg-t { text-align: right; }

.aw-sched__chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 12px;
}

.aw-sched__chip {
    border: 1px solid #e2e0ee;
    background: #fff;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
    transition: all var(--t);
}

.aw-sched__chip:hover { border-color: var(--aw-onb-brand); background: #f7f6ff; color: #111827; }

.aw-sched__chat-input {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
}

.aw-sched__chat-input input {
    flex: 1;
    height: 46px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1.5px solid #e2e0ee;
    background: #f8f8fb;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.aw-sched__chat-input input:focus { border-color: var(--aw-onb-brand); background: #fff; }

.aw-sched__chat-send {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t);
}

.aw-sched__chat-send:hover { background: #1f2937; color: #fff; }

/* ════════════════════════════════════════════════════════════
   FIX de contraste en botones de modales (marketplace)
   El reset `.aw-marketplace-public button { background:none; color:inherit }`
   (0,1,1) pisa el fondo/color de las clases de botón (0,1,0), dejándolos
   blanco-sobre-blanco. Se reasserta con prefijo del wrapper + !important.
   ════════════════════════════════════════════════════════════ */

/* Botones oscuros (acción principal / secundarias) */
.aw-marketplace-public .aw-sched__book,
.aw-marketplace-public .aw-sched__promo-btn,
.aw-marketplace-public .aw-sched__lawyer-cta,
.aw-marketplace-public .aw-sched__chat-send,
.aw-marketplace-public .aw-sched__dur.is-active,
.aw-marketplace-public .aw-sched__slot.is-active {
    background: #111827 !important;
    color: #fff !important;
}

/* CTAs con gradiente de marca */
.aw-marketplace-public .aw-sched__cta,
.aw-marketplace-public .aw-mp-onb__cta {
    background: linear-gradient(120deg, #6d4bff 0%, #807dfe 45%, #b06bff 100%) !important;
    color: #fff !important;
}

/* (El parche de `margin-top` del CTA que vivía aquí ya no hace falta: el reset
   de <button> pasó a `:where()` y la regla base manda. Además estorbaba, porque
   al ir al final del archivo pisaba el margen reducido de la versión móvil.) */

/* El reset `.aw-marketplace-public button { padding:0 }` (0,1,1) también
   anulaba el relleno de los botones del modal (0,1,0): el texto chocaba con
   los bordes ("Chatear", "Canjear") y las tarjetas de paquete quedaban
   delgadas. Se re-asegura con el prefijo del wrapper, que gana al reset
   sin necesidad de !important. */
.aw-marketplace-public .aw-sched__pkg        { padding: 18px; }
.aw-marketplace-public .aw-sched__lawyer-cta { padding: 10px 18px; }
.aw-marketplace-public .aw-sched__promo-btn  { padding: 0 22px; }
.aw-marketplace-public .aw-sched__dur        { padding: 12px 10px; }
.aw-marketplace-public .aw-sched__slot       { padding: 10px 6px; }
.aw-marketplace-public .aw-sched__chip       { padding: 7px 13px; }
.aw-marketplace-public .aw-sched__back       { padding: 6px 12px 6px 8px; }

/* Botón "Abrir chat" (verde) cuando el abogado YA está desbloqueado: se
   muestra en el paywall en vez de "Invertir y chatear" para no recobrar. */
.aw-marketplace-public .aw-sched__book--go { background: #059669 !important; }
.aw-marketplace-public .aw-sched__book--go:hover { background: #047857 !important; color: #fff !important; }

/* Botones claros sobre la tarjeta glass */
.aw-marketplace-public .aw-sched__pkg,
.aw-marketplace-public .aw-sched__dur,
.aw-marketplace-public .aw-sched__slot,
.aw-marketplace-public .aw-sched__chip,
.aw-marketplace-public .aw-sched__promo-row input {
    background: #fff !important;
    color: #374151 !important;
}

.aw-marketplace-public .aw-sched__pkg--best {
    background: linear-gradient(160deg, #f6f5ff, #fdf2ff) !important;
}

/* Aspa y "volver": fondo tenue, texto gris */
.aw-marketplace-public .aw-sched__close,
.aw-marketplace-public .aw-mp-onb__close {
    background: rgba(0, 0, 0, .06) !important;
    color: #555 !important;
}

.aw-marketplace-public .aw-sched__back {
    background: rgba(0, 0, 0, .05) !important;
    color: #444 !important;
}

/* Slots ocupados: mantienen el gris atenuado aunque el reset intervenga */
.aw-marketplace-public .aw-sched__slot.is-occupied {
    color: #9ca3af !important;
}

/* Textos oscuros que el reset (color:inherit) podría aclarar de más */
.aw-marketplace-public .aw-sched__pkg-name,
.aw-marketplace-public .aw-sched__dur-t,
.aw-marketplace-public .aw-sched__lawyer-name {
    color: #171717 !important;
}