/* ==========================================================================
   Compraventa San Juan
   Dirección: el aviso clasificado sanjuanino. Vino Syrah de la provincia y la
   cartulina flúor de los precios escritos a mano en verdulerías y parabrisas.
   El único gesto audaz es la etiqueta de precio; todo lo demás se queda quieto.
   Tipografía: Archivo (Omnibus-Type, Buenos Aires), variable en ancho y peso.
   ========================================================================== */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 62% 100%;
    font-display: swap;
    src: url("../fonts/archivo-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 62% 100%;
    font-display: swap;
    src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Paleta. Si cambia la marca, los derivados de abajo se recalculan juntos
       (mezclas en sRGB de estos colores; van en hex para que anden en cualquier navegador). */
    --marca: #5A1846;          /* encabezado, portada, botones y enlaces */
    --marca-rgb: 90, 24, 70;
    --marca-hondo: #43102F;    /* la marca al pasar el mouse */
    --tinta: #2B1126;          /* texto, pie y costado del panel */
    --tinta-rgb: 43, 17, 38;   /* sombras y velos oscuros */
    --revoque: #F5F2F4;        /* fondo, pared encalada */
    --papel: #FFFFFF;
    --apagado: #6F5A69;        /* texto secundario */
    --linea: #E4DCE2;
    --linea-fuerte: #CDBFC8;
    --cartulina: #F4FA3A;      /* precio escrito en cartulina flúor */
    --cartulina-hover: #E8EE2C;
    --verde: #0B7A4B;          /* WhatsApp y confirmaciones */
    --rojo: #B3261E;
    --ambar: #8A5A00;

    /* Derivados de la paleta */
    --tinte: #F8F6F8;               /* marca 4% sobre papel: hover de botones claros */
    --tinte-fuerte: #EEE8EC;        /* marca 10% sobre papel: estado "vendido" */
    --sobre-marca: #E1D5DE;         /* papel 82% sobre marca: texto secundario sobre la marca */
    --anillo: rgba(var(--marca-rgb), 0.16);  /* foco de los campos */
    --hueco: #EBE7EA;               /* tinta 5% sobre revoque: lugar de la foto que falta */
    --hueco-icono: #BCB3BA;         /* tinta 28% sobre revoque */
    --suave: #FAF8FA;               /* revoque 50% sobre papel: filas y fondos apenas marcados */
    --placeholder: #9A8C96;         /* apagado 70% sobre papel */
    --linea-hover: #BAABB5;         /* línea fuerte 80% sobre apagado */
    --sobre-tinta: #DDD9DC;         /* papel 84% sobre tinta: texto del pie y del panel */
    --sobre-tinta-suave: #BBB3BA;   /* papel 68% sobre tinta */

    /* Forma: el radio depende del material, no es uno solo para todo */
    --r-papel: 2px;
    --r-control: 6px;
    --r-foto: 8px;
    --r-pill: 999px;

    /* Escala tipográfica (Bringhurst): 12 14 16 18 21 24 36 48 60 72 */
    --t-12: 0.75rem;
    --t-14: 0.875rem;
    --t-16: 1rem;
    --t-18: 1.125rem;
    --t-21: 1.3125rem;
    --t-24: 1.5rem;
    --t-36: 2.25rem;
    --t-48: 3rem;
    --t-60: 3.75rem;
    --t-72: 4.5rem;

    --font: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --wrap: 1240px;
    --gutter: clamp(16px, 3vw, 32px);
    --header-h: 64px;
    --focus: var(--marca);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: var(--t-16);
    font-stretch: 100%;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--revoque);
    -webkit-font-smoothing: antialiased;
}

.site-main { flex: 1 0 auto; outline: none; }

img, svg { display: block; max-width: 100%; }
/* "hidden" siempre esconde, aunque la clase del elemento le ponga otro display (por ejemplo .btn). */
[hidden] { display: none !important; }
img { height: auto; }

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
    margin: 0 0 0.5em;
    font-stretch: 75%;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.005em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

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

::selection { background: var(--cartulina); color: var(--tinta); }

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

.skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 100;
    background: var(--cartulina);
    color: var(--tinta);
    padding: 10px 16px;
    border-radius: var(--r-control);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    display: inline-block;
    vertical-align: -0.25em;
}

.wrap {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
}

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mt-24 { margin-top: 24px; }
.muted { color: var(--apagado); }
code { padding: 1px 5px; border-radius: 4px; background: var(--hueco); font-size: 0.9em; }

/* ---------- Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: var(--r-control);
    background: none;
    font-size: var(--t-16);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.btn .icon { width: 1.2em; height: 1.2em; }
.btn--primary { background: var(--marca); color: var(--papel); }
.btn--primary:hover { background: var(--marca-hondo); }
.btn--cartulina {
    background: var(--cartulina);
    color: var(--tinta);
    font-stretch: 80%;
    font-weight: 800;
    font-size: var(--t-18);
}
.btn--cartulina:hover { background: var(--cartulina-hover); }
.btn--outline { background: var(--papel); color: var(--marca); border-color: var(--marca); }
.btn--outline:hover { background: var(--tinte); }
.btn--ghost { background: transparent; color: var(--marca); border-color: var(--linea-fuerte); }
.btn--ghost:hover { border-color: var(--marca); }
.btn--whatsapp { background: var(--verde); color: var(--papel); }
.btn--whatsapp:hover { background: #086640; }
.btn--danger { background: var(--papel); color: var(--rojo); border-color: currentColor; }
.btn--danger:hover { background: #FCF1F0; }
/* Ingreso con Google: blanco con borde gris y la "G" de colores, como pide la guía de marca de Google. */
.btn--google { background: #fff; color: #1F1F1F; border: 1px solid #747775; gap: 12px; font-weight: 600; }
.btn--google:hover { background: #F7F8F8; border-color: #1F1F1F; }
.btn--google .g-logo { width: 20px; height: 20px; flex: none; }
.oauth { margin-bottom: 4px; }
.oauth__note { margin-top: 10px; color: var(--apagado); font-size: var(--t-14); line-height: 1.45; }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: var(--t-18); }
.btn--sm { min-height: 38px; padding: 0 12px; font-size: var(--t-14); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: 0.6; pointer-events: none; }
.btn-link {
    background: none; border: 0; padding: 0;
    color: var(--marca); text-decoration: underline; text-underline-offset: 0.18em;
    font-weight: 600; cursor: pointer;
}
.btn-link--danger { color: var(--rojo); }

/* ---------- Encabezado ---------- */

.site-header {
    --focus: var(--cartulina);
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--marca);
    color: var(--papel);
}
.site-header__bar {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    color: var(--papel);
    text-decoration: none;
}
.brand__word {
    font-stretch: 68%;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.01em;
}
.brand__tag {
    display: inline-block;
    padding: 0.28em 0.45em 0.2em;
    border-radius: var(--r-papel);
    background: var(--cartulina);
    color: var(--tinta);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    transform: rotate(-4deg);
}

.header-search {
    flex: 1;
    max-width: 560px;
    display: flex;
    align-items: stretch;
    background: var(--papel);
    border-radius: var(--r-control);
}
.header-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-control) 0 0 var(--r-control);
    background: transparent;
    color: var(--tinta);
    font-size: var(--t-16);
}
.header-search input::placeholder { color: var(--apagado); }
.header-search input:focus-visible { outline-offset: 0; }
.header-search__btn {
    display: grid; place-items: center;
    width: 48px;
    border: 0;
    border-radius: 0 var(--r-control) var(--r-control) 0;
    background: transparent;
    color: var(--marca);
}
.header-search__btn .icon { width: 22px; height: 22px; }

.header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.header-nav__icon {
    position: relative;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    color: var(--papel);
}
.header-nav__icon .icon { width: 24px; height: 24px; }
.header-nav__icon:hover { background: rgba(255, 255, 255, 0.12); }
.header-nav__link {
    padding: 10px 12px;
    color: var(--papel);
    font-weight: 700;
    text-decoration: none;
}
.header-nav__link:hover { text-decoration: underline; }
.header-nav__publish { margin-left: 8px; }
/* Solo para quien administra: acceso directo al panel. */
.header-nav__panel {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px;
    margin: 0 4px;
    padding: 0 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--r-control);
    color: var(--papel);
    font-weight: 700;
    text-decoration: none;
}
.header-nav__panel .icon { width: 20px; height: 20px; }
.header-nav__panel:hover { border-color: var(--papel); background: rgba(255, 255, 255, 0.12); }

.badge {
    position: absolute;
    top: 3px; right: 1px;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--cartulina);
    color: var(--tinta);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* Menú de cuenta */
.menu { position: relative; }
.menu__trigger {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--r-pill);
    list-style: none;
    cursor: pointer;
    color: var(--papel);
}
.menu__trigger::-webkit-details-marker { display: none; }
.menu__trigger:hover { background: rgba(255, 255, 255, 0.12); }
.menu__name { font-weight: 700; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__caret { width: 14px; height: 14px; }
.menu__panel {
    position: absolute;
    right: 0; top: calc(100% + 8px);
    z-index: 60;
    min-width: 230px;
    padding: 6px;
    background: var(--papel);
    color: var(--tinta);
    border: 1px solid var(--linea);
    border-radius: var(--r-foto);
    box-shadow: 0 12px 32px rgba(var(--tinta-rgb), 0.18);
    --focus: var(--marca);
}
.menu__panel a, .menu__panel button {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0; border-radius: var(--r-control);
    background: none;
    color: var(--tinta);
    font-size: var(--t-16);
    text-align: left;
    text-decoration: none;
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--revoque); }
.menu__panel .icon { color: var(--marca); }
.menu__panel form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--linea); }
.menu__count {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--cartulina);
    font-size: var(--t-12);
    font-weight: 800;
}

.avatar {
    display: inline-grid; place-items: center;
    flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--marca);
    color: var(--papel);
    font-stretch: 75%;
    font-weight: 800;
    font-size: var(--t-18);
    line-height: 1;
}
.avatar--sm { width: 34px; height: 34px; font-size: var(--t-14); background: var(--cartulina); color: var(--tinta); }
.avatar--lg { width: 72px; height: 72px; font-size: var(--t-24); }

/* ---------- Mensajes flash ---------- */

.flash-stack { padding-top: 16px; }
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    padding: 14px 16px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--marca);
    border-radius: var(--r-control);
}
.alert > .icon { margin-top: 2px; color: var(--marca); }
.alert p { flex: 1; margin: 0; }
.alert--success { border-left-color: var(--verde); }
.alert--success > .icon { color: var(--verde); }
.alert--error { border-left-color: var(--rojo); }
.alert--error > .icon { color: var(--rojo); }
.alert--warning { border-left-color: var(--ambar); }
.alert--warning > .icon { color: var(--ambar); }
.alert__close {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    margin: -6px -8px -6px 0;
    border: 0; border-radius: 50%;
    background: none; color: var(--apagado);
}
.alert__close:hover { background: var(--revoque); }
.alert__close .icon { width: 18px; height: 18px; }

/* ---------- Portada ---------- */

.hero {
    --focus: var(--cartulina);
    padding: clamp(24px, 3.4vw, 44px) 0 clamp(28px, 3.4vw, 44px);
    background: var(--marca);
    color: var(--papel);
}
.hero__title {
    max-width: 11ch;
    margin: 0 0 clamp(18px, 2.2vw, 26px);
    font-stretch: 62%;
    font-weight: 900;
    font-size: clamp(3.25rem, 8vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.012em;
}
.hero-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px auto;
    gap: 8px;
    max-width: 900px;
}
.hero-search__field { position: relative; }
.hero-search__icon {
    position: absolute;
    left: 16px; top: 50%;
    width: 24px; height: 24px;
    transform: translateY(-50%);
    color: var(--apagado);
    pointer-events: none;
}
.hero-search input {
    width: 100%;
    height: 58px;
    padding: 0 16px 0 50px;
    border: 0;
    border-radius: var(--r-control);
    background: var(--papel);
    color: var(--tinta);
    font-size: var(--t-18);
}
.hero-search input::placeholder { color: var(--apagado); }
.hero-search .select { height: 58px; border: 0; font-size: var(--t-16); }
.hero-search__btn { min-height: 58px; padding: 0 30px; font-size: var(--t-21); }
.hero__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.hero__quick a {
    color: var(--papel);
    text-decoration-color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}
.hero__quick a:hover { text-decoration-color: var(--cartulina); }

.home {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    grid-template-areas: "cats main" "extras main";
    grid-template-rows: auto 1fr;
    column-gap: 44px;
    align-items: start;
    padding: 32px 0 56px;
}
.cat-index { grid-area: cats; }
.home__main { grid-area: main; min-width: 0; }
.home__extras { grid-area: extras; }

.side-title {
    margin: 0 0 10px;
    font-stretch: 75%;
    font-weight: 800;
    font-size: var(--t-21);
}
.cat-index__list, .dep-index {
    margin: 0; padding: 0;
    list-style: none;
}
.cat-index__list { display: grid; gap: 12px; }
.cat-index__section {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--r-control);
    color: var(--tinta);
    font-weight: 800;
    text-decoration: none;
}
.cat-index__section:hover { background: var(--papel); }
.cat-index__section:hover .cat-index__name { text-decoration: underline; }
.cat-index__section .icon { width: 22px; height: 22px; color: var(--marca); }
/* "Electrodomésticos" no entra en media columna del celular: se corta con guion. */
.cat-index__name { line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.cat-index__count, .dep-index__count {
    color: var(--apagado);
    font-size: var(--t-14);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.cat-index__sub { margin: 0; padding: 0 0 0 42px; list-style: none; }
.cat-index__sub a {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 4px 8px 4px 0;
    color: var(--tinta);
    font-size: var(--t-14);
    line-height: 1.3;
    text-decoration: none;
}
.cat-index__sub a:hover span:first-child { text-decoration: underline; }
.cat-index__sub .cat-index__all { color: var(--marca); font-weight: 700; }

/* ---------- Menú de categorías del encabezado ---------- */
.mega__trigger {
    display: flex; align-items: center; gap: 7px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--r-control);
    color: var(--papel);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.mega__trigger::-webkit-details-marker { display: none; }
.mega__trigger .icon { width: 20px; height: 20px; }
.mega__trigger .mega__caret { width: 14px; height: 14px; transition: transform 0.15s; }
.mega[open] .mega__caret { transform: rotate(180deg); }
.mega__trigger:hover, .mega[open] .mega__trigger { background: rgba(255, 255, 255, 0.12); }
.mega__panel {
    --focus: var(--marca);
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 55;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--papel);
    color: var(--tinta);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 18px 40px rgba(var(--tinta-rgb), 0.18);
}
.mega__head { display: none; }
.mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    padding-top: 24px;
    padding-bottom: 28px;
}
.mega__section { margin: 0 0 8px; font-stretch: 100%; font-weight: 800; font-size: var(--t-16); }
.mega__section a { display: flex; align-items: center; gap: 8px; color: var(--marca); text-decoration: none; }
.mega__section a:hover span:nth-of-type(1) { text-decoration: underline; }
.mega__section .icon { width: 20px; height: 20px; flex: none; }
.mega__list { margin: 0; padding: 0; list-style: none; }
.mega__list--cols { columns: 2; column-gap: 24px; }
.mega__list li { break-inside: avoid; }
.mega__list a {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 5px 0;
    color: var(--tinta);
    font-size: var(--t-14);
    line-height: 1.3;
    text-decoration: none;
}
.mega__list a:hover span:first-child { text-decoration: underline; }
.mega__list a.is-empty { color: var(--apagado); }
.mega__count { margin-left: auto; color: var(--apagado); font-size: var(--t-12); font-weight: 400; font-variant-numeric: tabular-nums; }
.mega__block + .mega__block { margin-top: 22px; }
.mega__all { margin: 22px 0 0; font-size: var(--t-14); font-weight: 700; }
.mega__all + .mega__all { margin-top: 10px; }
.mega__all a { display: inline-flex; align-items: center; gap: 6px; }
.mega__all .icon { width: 18px; height: 18px; color: var(--marca); }

.side-block { margin-top: 32px; }
.code-search { display: flex; gap: 8px; }
.code-search .input { min-width: 0; }
.dep-index { columns: 2; column-gap: 16px; }
.dep-index a {
    display: flex; justify-content: space-between; gap: 6px;
    padding: 4px 0;
    color: var(--tinta);
    font-size: var(--t-14);
    text-decoration: none;
    break-inside: avoid;
}
.dep-index a:hover span:first-child { text-decoration: underline; }

.shelf { margin-top: 44px; }
.shelf:first-child { margin-top: 0; }
/* Aire antes del pie en páginas que terminan con una grilla (aviso, vendedor, tienda). */
.wrap > .shelf:last-child,
.wrap > .ad:last-child { margin-bottom: clamp(40px, 6vw, 64px); }
.store { padding-bottom: clamp(40px, 6vw, 64px); }
.shelf__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-bottom: 18px;
}
.shelf__title {
    margin: 0;
    font-stretch: 68%;
    font-weight: 850;
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
}
.shelf__more { font-weight: 600; }
.shelf__lead { max-width: 62ch; margin: -6px 0 16px; color: var(--apagado); line-height: 1.45; }
.shelf__lead a { font-weight: 700; }

.publish-band {
    border-top: 1px solid var(--linea);
    background: var(--papel);
    padding: clamp(28px, 4vw, 44px) 0;
}
.publish-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}
.publish-band__title {
    margin: 0 0 4px;
    font-stretch: 68%;
    font-weight: 850;
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
}
.publish-band__text { max-width: 56ch; margin: 0; color: var(--apagado); font-size: var(--t-18); }

/* ---------- Tiendas ---------- */

.store-logo {
    display: grid; place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: var(--r-foto);
    background: var(--papel);
    box-shadow: 0 0 0 1px var(--linea);
}
.store-logo img { width: 100%; height: 100%; object-fit: cover; }
.store-logo__initials {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    background: var(--marca);
    color: var(--cartulina);
    font-stretch: 70%;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.store-logo--sm { width: 48px; height: 48px; }
.store-logo--sm .store-logo__initials { font-size: var(--t-18); }
.store-logo--md { width: 72px; height: 72px; }
.store-logo--md .store-logo__initials { font-size: var(--t-24); }
.store-logo--lg { width: 132px; height: 132px; border-radius: 12px; box-shadow: 0 0 0 4px var(--revoque), 0 0 0 5px var(--linea); }
.store-logo--lg .store-logo__initials { font-size: var(--t-48, 3rem); }

.store-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); font-size: var(--t-14); font-weight: 700; font-stretch: 100%; letter-spacing: 0; vertical-align: middle; }
.store-verified .icon { width: 1.25em; height: 1.25em; }
.store-verified--sm { font-size: var(--t-12); }

/* Portada: la foto del local, o una franja de la marca con un dibujo suave */
.store-cover { height: clamp(140px, 22vw, 300px); background: var(--marca); overflow: hidden; }
.store-cover__img { width: 100%; height: 100%; object-fit: cover; }
.store-cover--plain {
    height: clamp(96px, 12vw, 150px);
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 28px),
        var(--marca);
}
.store .crumbs ol { margin: 12px 0 10px; }
.store .alert { margin-bottom: 12px; }
.store-cover { border-radius: var(--r-foto); }
.store-owner { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-control); background: var(--tinte-fuerte); font-size: var(--t-14); }
.store-owner .icon { width: 18px; height: 18px; color: var(--marca); }
.store-owner a { font-weight: 700; }

.store-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    margin-top: -70px;
    padding-bottom: 18px;
}
.store-head--plain { margin-top: -48px; }
.store-head__kind { margin: 0 0 4px; color: var(--apagado); font-size: var(--t-14); font-weight: 600; }
.store-head__name {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    margin: 0;
    font-stretch: 64%;
    font-weight: 900;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 0.95;
}
.store-head__tagline { margin: 8px 0 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--t-14); }
.store-head__actions { display: flex; gap: 8px; }
.store-head__info { padding-top: 76px; }
.store-head { padding-left: clamp(0px, 2vw, 24px); }

.store-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 0 22px;
    border: 1.5px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
}
.store-stats > div { padding: 12px 16px; }
.store-stats > div + div { border-left: 1px solid var(--linea); }
.store-stats dt { color: var(--apagado); font-size: var(--t-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.store-stats dd { margin: 2px 0 0; font-stretch: 72%; font-weight: 850; font-size: var(--t-21); font-variant-numeric: tabular-nums; }
.store-stats small { font-size: 0.7em; font-weight: 700; color: var(--apagado); }

.store-tabs { margin-bottom: 18px; }
.store-tabs a .icon { width: 18px; height: 18px; }
.store-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.store-search { display: flex; flex: 1 1 320px; max-width: 520px; }
.store-search .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.store-search .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; min-height: 48px; padding: 0 16px; }
.store-results { margin-top: 18px; }

.store-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.store-card { padding: 18px; border: 1.5px solid var(--linea); border-radius: var(--r-control); background: var(--papel); }
.store-card--wide { grid-column: 1 / -1; }
.store-card__title { margin: 0 0 12px; font-stretch: 72%; font-weight: 850; font-size: var(--t-21); }
.store-card__actions { display: grid; gap: 8px; margin-bottom: 12px; }
.store-card__text { display: flex; gap: 8px; margin: 0; line-height: 1.45; }
.store-card__text .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--marca); }
.store-card__more { display: inline-block; margin-top: 10px; font-weight: 700; }
.store-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.store-links li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.store-links .icon { flex: none; width: 20px; height: 20px; color: var(--marca); }
.store-links a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Directorio */
.stores__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.stores__tools { display: grid; gap: 12px; margin-bottom: 20px; }
.store-search--dir { max-width: 460px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 0 0 40px; padding: 0; list-style: none; }
.store-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px;
    border: 1.5px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
    color: var(--tinta);
    text-decoration: none;
}
.store-tile:hover { border-color: var(--marca); }
.store-tile:hover .store-tile__name { text-decoration: underline; }
.store-tile__body { display: grid; gap: 2px; min-width: 0; }
.store-tile__name { font-weight: 800; font-size: var(--t-18); line-height: 1.2; }
.store-tile__tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-14); }
.store-tile__meta { color: var(--apagado); font-size: var(--t-12); }
.store-tile__count { text-align: right; color: var(--apagado); font-size: var(--t-12); line-height: 1.1; }
.store-tile__count strong { display: block; color: var(--tinta); font-stretch: 70%; font-weight: 850; font-size: var(--t-24); }

/* Tiendas en la portada */
.store-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.store-strip__item { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border: 1.5px solid var(--linea); border-radius: var(--r-control); background: var(--papel); color: var(--tinta); text-align: center; text-decoration: none; }
.store-strip__item:hover { border-color: var(--marca); }
.store-strip__name { font-weight: 700; line-height: 1.2; }
.store-strip__count { color: var(--apagado); font-size: var(--t-12); }

/* Mi tienda y panel */
.store-status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: var(--r-control); background: var(--papel); }
.store-status > div { flex: 1 1 260px; min-width: 0; }
.store-status p { margin: 0; }
.store-status__text { color: var(--apagado); font-size: var(--t-14); margin-top: 4px !important; }
.store-status--pending { border-color: var(--ambar); }
.store-status--rejected { border-color: var(--rojo); }
.store-form__current { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.store-form__cover { width: 180px; height: 60px; object-fit: cover; border-radius: var(--r-papel); }
.panel__lead { margin: -4px 0 12px; color: var(--apagado); font-size: var(--t-14); }
.admin-store { display: flex; gap: 10px; align-items: flex-start; }
.table__reject { display: inline-block; }
.table__reject summary { list-style: none; cursor: pointer; }
.table__reject summary::-webkit-details-marker { display: none; }
.table__reject[open] form { display: grid; gap: 6px; margin-top: 6px; min-width: 240px; }
.seller--store .store-logo { margin-top: 2px; }

@media (max-width: 960px) {
    .store-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .store-stats > div:nth-child(4) { border-left: 0; }
    .store-stats > div:nth-child(n + 4) { border-top: 1px solid var(--linea); }
    .store-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .store-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin-top: -44px; }
    .store-head--plain { margin-top: -36px; }
    .store-logo--lg { width: 88px; height: 88px; border-radius: 10px; }
    .store-logo--lg .store-logo__initials { font-size: var(--t-36); }
    .store-head__info { padding-top: 48px; }
    .store-head__actions { grid-column: 1 / -1; }
    .store-head__actions .btn { flex: 1; }
    .store-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .store-stats > div:nth-child(n) { border-left: 0; border-top: 0; }
    .store-stats > div:nth-child(even) { border-left: 1px solid var(--linea); }
    .store-stats > div:nth-child(n + 3) { border-top: 1px solid var(--linea); }
    .store-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .store-stats dd { font-size: var(--t-18); }
    .store-contact { grid-template-columns: minmax(0, 1fr); }
    .store-search { max-width: none; }
    .store-grid { grid-template-columns: minmax(0, 1fr); }
    .store-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Panel > Correo ---------- */

.mail-smtp { margin: 18px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--linea); min-width: 0; }
.mail-smtp legend { padding: 0; }
.test-mail { display: flex; gap: 8px; }
.test-mail .input { flex: 1; min-width: 0; }
.dns-check { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-control); background: var(--suave); }
.dns-check dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 8px 0; }
.dns-check dt { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.dns-check dt .icon { width: 18px; height: 18px; }
.dns-check dd { margin: 0; overflow-wrap: anywhere; }
.dns-check code { font-size: var(--t-12); }

/* ---------- Pagos ---------- */

.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pay-method { position: relative; }
.pay-method input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pay-method__box { display: grid; gap: 4px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-control); background: var(--papel); }
.pay-method__box strong { display: flex; align-items: center; gap: 8px; }
.pay-method__box strong .icon { width: 20px; height: 20px; color: var(--marca); }
.pay-method__box small { color: var(--apagado); font-size: var(--t-14); line-height: 1.35; }
.pay-method input:checked + .pay-method__box { border-color: var(--marca); background: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--marca); }
.pay-method input:focus-visible + .pay-method__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.pay-manual { margin: 4px 0 0; }
.pay-manual summary { cursor: pointer; font-weight: 700; color: var(--marca); }
.pay-manual[open] summary { margin-bottom: 8px; }
.pay-go, .pay-result { max-width: 640px; padding: 28px 0; }
.pay-go__icon, .pay-result__icon { width: 48px; height: 48px; margin-bottom: 12px; color: var(--marca); }
.pay-result--ok .pay-result__icon { color: var(--verde); }
.pay-result--bad .pay-result__icon { color: var(--rojo); }
.pay-go .alert { margin: 0 0 16px; }
.pay-go .btn { margin-bottom: 8px; }
.steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.steps code { word-break: break-all; }
.help-steps { margin: 4px 0 18px; font-size: var(--t-14); }
.help-steps > summary { cursor: pointer; color: var(--marca); font-weight: 700; min-height: 32px; display: inline-flex; align-items: center; }
.mb-24 { margin-bottom: 24px; }

/* ---------- Dólar hoy ---------- */

.dollar { padding-bottom: clamp(32px, 4vw, 56px); }
.dollar__head { padding: 4px 0 22px; }
.dollar__title {
    margin: 0;
    font-stretch: 64%;
    font-weight: 900;
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    line-height: 0.95;
}
.dollar__meta { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--apagado); }
.dollar__meta .icon { width: 18px; height: 18px; }
.dollar__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "main conv" "list conv";
    grid-template-rows: auto 1fr;
    gap: 12px 24px;
    align-items: start;
}
.dollar__grid > .quote--main { grid-area: main; }
.dollar__grid > .quotes { grid-area: list; }
.dollar__grid > .converter { grid-area: conv; }
.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin: 0; padding: 0;
    list-style: none;
}
.quote {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 16px 18px;
    border: 1.5px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
}
.quote__name { margin: 0; font-stretch: 72%; font-weight: 850; font-size: var(--t-24); line-height: 1.1; }
.quote__hint { margin: 0 0 6px; color: var(--apagado); font-size: var(--t-14); line-height: 1.35; }
.quote__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.quote__values dt { color: var(--apagado); font-size: var(--t-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.quote__values dd { margin: 2px 0 0; font-stretch: 70%; font-weight: 850; font-size: var(--t-24); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote__time { margin: 6px 0 0; color: var(--apagado); font-size: var(--t-12); }
/* El blue manda: va primero y con la venta en cartulina, como un precio */
.quote--main { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.quote--main .quote__name { font-size: var(--t-36); }
.quote--main .quote__values { max-width: 520px; }
.quote--main .quote__values dd { font-size: clamp(2.25rem, 5vw, 3rem); }
.quote--main .quote__sell dd {
    display: inline-block;
    padding: 0.06em 0.3em 0;
    border-radius: var(--r-papel);
    background: var(--cartulina);
    transform: rotate(-1.4deg);
    box-shadow: 0 1px 0 rgba(var(--tinta-rgb), 0.32);
}
.converter {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    padding: 18px;
    border-radius: var(--r-control);
    background: var(--papel);
    border: 1.5px solid var(--linea);
}
.converter__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-stretch: 72%; font-weight: 850; font-size: var(--t-24); }
.converter__title .icon { width: 22px; height: 22px; color: var(--marca); }
.converter__form { display: grid; gap: 4px; }
.converter__form .currency-switch span { padding: 9px 4px; }
.converter__result { min-height: 1.6em; margin: 8px 0 0; font-size: var(--t-18); }
.converter__result:empty::before { content: "Escribí un monto para ver la cuenta."; color: var(--apagado); font-size: var(--t-14); }
.converter__result strong { font-stretch: 70%; font-weight: 850; font-size: var(--t-24); }
.converter__note { margin: 4px 0 0; color: var(--apagado); font-size: var(--t-12); }
.dollar__note {
    max-width: 820px;
    margin-top: 28px;
    padding: 18px 20px;
    border-left: 4px solid var(--cartulina);
    border-radius: var(--r-papel);
    background: var(--papel);
}
.dollar__note-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--t-18); }
.dollar__note-title .icon { width: 20px; height: 20px; color: var(--marca); }
.dollar__note ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.dollar__links { margin: 12px 0 0; }
.dollar__links a { font-weight: 700; }

/* Widget de la portada */
.dollar-widget__list { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.dollar-widget__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: var(--r-control); background: var(--papel); }
.dollar-widget__list strong { font-stretch: 70%; font-weight: 850; font-size: var(--t-21); font-variant-numeric: tabular-nums; }
.dollar-widget__list small { color: var(--apagado); font-size: var(--t-12); }
.dollar-widget__more { font-weight: 700; }

/* Precio de un aviso en dólares, pasado a pesos */
.ad__ars { margin: -6px 0 14px; color: var(--apagado); font-size: var(--t-14); }
.ad__ars a { color: inherit; }

@media (max-width: 960px) {
    .dollar__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "conv" "list"; grid-template-rows: auto; }
    .converter { position: static; }
}

/* ---------- Portadas de rubro: Vehículos, Inmuebles, Servicios ---------- */

.portal-hero {
    --focus: var(--cartulina);
    /* El relleno de arriba evita que el margen de las migas "se escape" y deje una franja clara. */
    padding: 14px 0 clamp(24px, 3vw, 40px);
    background: var(--marca);
    color: var(--papel);
}
.portal-hero .crumbs ol { margin-top: 0; }
.portal-hero .crumbs a, .portal-hero .crumbs span { color: var(--sobre-marca); }
.portal-hero .crumbs a:hover { color: var(--cartulina); }
.portal-hero .crumbs li + li::before { color: rgba(255, 255, 255, 0.4); }
.portal-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head finder" "trends finder";
    column-gap: clamp(20px, 3vw, 44px);
    row-gap: 22px;
    align-items: start;
    margin-top: clamp(8px, 1.4vw, 18px);
}
.portal-hero__head { grid-area: head; }
.portal-hero .finder { grid-area: finder; }

/* Lo más buscado (o publicado), en el héroe: debajo del título en escritorio, después del buscador en el celular */
.portal-trends { grid-area: trends; }
.portal-trends__title { margin: 0 0 10px; color: var(--sobre-marca); font-size: var(--t-14); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.portal-hero__title {
    margin: 0 0 14px;
    font-stretch: 62%;
    font-weight: 900;
    font-size: clamp(3rem, 6.4vw, 5.25rem);
    line-height: 0.9;
    letter-spacing: -0.012em;
}
.portal-hero__title span { display: block; font-size: 0.5em; font-weight: 800; color: var(--cartulina); letter-spacing: 0; }
.portal-hero__lead { max-width: 36ch; margin: 0 0 18px; color: var(--sobre-marca); font-size: var(--t-18); line-height: 1.45; }
.portal-hero__all {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--papel);
    font-size: var(--t-18);
    text-decoration-color: rgba(255, 255, 255, 0.45);
}
.portal-hero__all strong { font-stretch: 70%; font-weight: 850; font-size: var(--t-24); }
.portal-hero__all .icon { width: 20px; height: 20px; }
.portal-hero__all:hover { text-decoration-color: var(--cartulina); }

/* "Estoy buscando": la tarjeta blanca del buscador avanzado */
.finder {
    --focus: var(--marca);
    padding: clamp(16px, 2vw, 22px);
    border-radius: var(--r-foto);
    background: var(--papel);
    color: var(--tinta);
    box-shadow: 0 14px 36px rgba(var(--tinta-rgb), 0.28);
}
.finder__title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px;
    font-stretch: 72%;
    font-weight: 850;
    font-size: var(--t-24);
}
.finder__title .icon { width: 24px; height: 24px; color: var(--marca); }
.finder__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 12px;
}
.finder__field { min-width: 0; }
.finder__field--wide { grid-column: span 2; }
.finder__label { display: block; margin-bottom: 5px; font-size: var(--t-14); font-weight: 700; }
.finder__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.finder__pair--price { grid-template-columns: 84px repeat(2, minmax(0, 1fr)); }
.finder__actions { align-self: end; }
.finder__actions .btn { min-height: 48px; }
.finder__toggle { display: none; }

.portal { padding: clamp(24px, 3vw, 36px) 0 clamp(32px, 4vw, 56px); }
.portal__types { margin-bottom: clamp(28px, 3.4vw, 40px); }
.portal__types .shelf__title { margin-bottom: 14px; }

/* Rubros con contador, como los íconos de los clasificados de siempre */
.type-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 0; padding: 0;
    list-style: none;
}
.type-tile {
    display: grid;
    justify-items: center;
    gap: 6px;
    height: 100%;
    padding: 16px 10px 14px;
    border: 1.5px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
    color: var(--tinta);
    text-align: center;
    text-decoration: none;
}
.type-tile:hover { border-color: var(--marca); }
.type-tile:hover .type-tile__name { text-decoration: underline; }
.type-tile__icon {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--tinte-fuerte);
    color: var(--marca);
}
.type-tile__icon .icon { width: 28px; height: 28px; }
.type-tile__name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.type-tile__count { color: var(--apagado); font-size: var(--t-14); font-variant-numeric: tabular-nums; }
.type-tile.is-empty { border-style: dashed; background: transparent; }
.type-tile.is-empty .type-tile__icon { background: var(--hueco); color: var(--hueco-icono); }

/* Lo más buscado: ranking con número en cartulina */
.trends {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0; padding: 0;
    list-style: none;
}
.trends__item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px 5px 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--r-pill);
    color: var(--papel);
    text-decoration: none;
}
.trends__item:hover { border-color: var(--cartulina); }
.trends__item:hover .trends__label { text-decoration: underline; }
.trends__rank {
    display: grid; place-items: center;
    min-width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cartulina);
    color: var(--tinta);
    font-stretch: 70%;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.trends__label { font-weight: 700; }
.trends__count { color: var(--sobre-marca); font-size: var(--t-14); }

/* Rubros repartidos en filas parejas en escritorio (la vista elige cuántas columnas) */
@media (min-width: 1101px) {
    .type-tiles--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .type-tiles--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .type-tiles--c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .type-tiles--c7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .type-tiles--c8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .portal-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "finder" "trends"; }
    .portal-hero__lead { max-width: 60ch; }
}
@media (max-width: 760px) {
    .portal-hero__title { font-size: clamp(2.75rem, 13vw, 3.75rem); margin-bottom: 10px; }
    .portal-hero__lead { font-size: var(--t-16); margin-bottom: 12px; }
    .finder__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .finder__field--wide, .finder__actions { grid-column: 1 / -1; }
    /* En el celular, lo principal arriba y el resto en "Más filtros" (lo arma app.js) */
    .finder.is-compact .finder__field--more { display: none; }
    .finder__toggle {
        display: block;
        grid-column: 1 / -1;
        justify-self: start;
        padding: 4px 0;
        border: 0;
        background: none;
        color: var(--marca);
        font: inherit;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 0.18em;
        cursor: pointer;
    }
    /* Rubros en lista de dos columnas: entra todo sin hacer scroll de más */
    .type-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .type-tile {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        justify-items: start;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        text-align: left;
    }
    .type-tile__icon { width: 36px; height: 36px; }
    .type-tile__icon .icon { width: 21px; height: 21px; }
    .type-tile__name { font-size: var(--t-14); }
    .type-tile__count { font-size: var(--t-12); }
}

/* ---------- Tarjetas de aviso ---------- */

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 30px 20px;
}
.grid-cards__break { grid-column: 1 / -1; }

.card { position: relative; min-width: 0; }
.card__link { display: block; color: inherit; text-decoration: none; }
.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-foto);
    background: var(--hueco);
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: var(--r-foto);
}
.card__placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: var(--r-foto);
    color: var(--hueco-icono);
}
.card__placeholder .icon { width: 56px; height: 56px; }
.card__badge {
    position: absolute;
    left: 8px; top: 8px;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    background: var(--marca);
    color: var(--papel);
    font-size: var(--t-12);
    font-weight: 700;
    line-height: 1.2;
}
/* "Busca": contorno en vez de relleno para que no se confunda con "Destacado" */
.card__badge--busca { background: var(--papel); color: var(--marca); box-shadow: inset 0 0 0 1.5px var(--marca); }
.card .tag { position: absolute; left: 10px; bottom: -13px; }
.card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 24px 0 6px;
    font-stretch: 100%;
    font-weight: 500;
    font-size: var(--t-16);
    line-height: 1.3;
    letter-spacing: 0;
}
.card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.card__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    color: var(--apagado);
    font-size: var(--t-14);
    line-height: 1.3;
}
.card__place { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.card__place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__place .icon { width: 15px; height: 15px; }
.card__meta time { flex: none; }

/* Etiqueta de precio: cartulina flúor, pegada a mano sobre la foto */
.tag {
    --tilt: -2deg;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.1em;
    padding: 0.26em 0.42em 0.2em;
    border-radius: var(--r-papel);
    background: var(--cartulina);
    color: var(--tinta);
    font-stretch: 62%;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: lining-nums;
    box-shadow: 0 1px 0 rgba(var(--tinta-rgb), 0.32);
    transform: rotate(var(--tilt));
}
.tag--t0 { --tilt: -2.2deg; }
.tag--t1 { --tilt: -0.8deg; }
.tag--t2 { --tilt: 1.3deg; }
.tag__cur { font-size: 0.56em; margin-top: 0.08em; font-weight: 800; }
.tag__num { letter-spacing: -0.005em; }
.tag__per { align-self: flex-end; margin-left: 0.3em; font-size: 0.46em; font-stretch: 75%; font-weight: 700; }
.tag__ask { font-size: 0.62em; font-stretch: 75%; font-weight: 800; padding: 0.12em 0; }
/* "hasta": el precio de un aviso de busco es el presupuesto */
.tag__pre { align-self: center; margin-right: 0.2em; font-size: 0.46em; font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.tag--sm { font-size: var(--t-24); }
.tag--md { font-size: var(--t-36); }
.tag--lg { font-size: clamp(2.5rem, 5vw, 3.25rem); padding: 0.22em 0.4em 0.16em; }

/* Favoritos */
.fav-form { margin: 0; }
.fav-form--overlay { position: absolute; top: 8px; right: 8px; }
.fav-btn {
    display: inline-grid; place-items: center;
    border: 0;
    color: var(--marca);
    --focus: var(--marca);
}
.fav-btn--overlay {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
}
.fav-btn--overlay .icon { width: 22px; height: 22px; }
.fav-btn--full {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r-control);
    background: transparent;
    font-size: var(--t-14);
    font-weight: 700;
}
.fav-btn--full:hover { border-color: var(--marca); }
.fav-btn__on { display: none; }
.fav-btn[aria-pressed="true"] .fav-btn__on { display: inline-block; }
.fav-btn[aria-pressed="true"] .fav-btn__off { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .fav-btn.is-popping .fav-btn__on { animation: pop 0.36s ease-out; }
    @keyframes pop {
        0% { transform: scale(0.6); }
        55% { transform: scale(1.25); }
        100% { transform: scale(1); }
    }
}

/* Filas compactas */
.rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0 28px;
    margin: 0; padding: 0;
    list-style: none;
}
.row { border-bottom: 1px solid var(--linea); }
.row__link {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    color: inherit;
    text-decoration: none;
}
.row__media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-control);
    background: var(--hueco);
    overflow: hidden;
}
.row__media img { width: 100%; height: 100%; object-fit: cover; }
.row__placeholder { display: grid; place-items: center; height: 100%; color: var(--hueco-icono); }
.row__placeholder .icon { width: 30px; height: 30px; }
.row__body { display: grid; gap: 2px; min-width: 0; }
.row__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--t-16);
    line-height: 1.3;
}
.row__link:hover .row__title { text-decoration: underline; }
.row__kind {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1.5px var(--marca);
    color: var(--marca);
    font-size: var(--t-12);
    font-weight: 700;
    line-height: 1.4;
    vertical-align: 1px;
}
.row__price { font-stretch: 70%; font-weight: 850; font-size: var(--t-18); }
.row__price small { font-size: var(--t-14); font-weight: 600; }
.row__meta { color: var(--apagado); font-size: var(--t-14); }

/* ---------- Publicidad ---------- */

.promo { position: relative; margin: 24px 0; }
.promo img { width: 100%; border-radius: var(--r-control); }
.promo__label {
    position: absolute;
    right: 6px; bottom: 6px;
    padding: 1px 6px;
    border-radius: var(--r-papel);
    background: rgba(255, 255, 255, 0.9);
    color: var(--apagado);
    font-size: 11px;
}
.promo__empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px dashed var(--linea-fuerte);
    border-radius: var(--r-control);
    color: var(--apagado);
    font-size: var(--t-14);
    text-decoration: none;
}
.promo__empty strong { color: var(--tinta); }
.promo__empty .icon { width: 26px; height: 26px; color: var(--marca); }
.promo__empty:hover { border-color: var(--marca); }
.promo--box .promo__empty { flex-direction: column; align-items: flex-start; }
.site-main > .wrap > .promo:first-child { margin-top: 24px; margin-bottom: 0; }
.ad__aside > .promo:last-child { margin-bottom: 0; }

/* ---------- Migas y encabezados de listado ---------- */

.crumbs ol {
    display: flex; flex-wrap: wrap; gap: 4px 6px;
    margin: 18px 0 6px; padding: 0;
    list-style: none;
    color: var(--apagado);
    font-size: var(--t-14);
}
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--linea-fuerte); }
.crumbs a { color: var(--apagado); }
.crumbs a:hover { color: var(--marca); }

.listing-head { padding: 4px 0 24px; }
.listing-head__title {
    margin: 0;
    font-stretch: 64%;
    font-weight: 900;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 0.98;
}
.listing-head__count { margin: 8px 0 0; color: var(--apagado); }
.listing-head__lead { max-width: 62ch; margin: 10px 0 0; line-height: 1.45; }
.listing-head__lead a { font-weight: 700; }

.chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 18px 0 0; padding: 0;
    list-style: none;
}
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--linea);
    border-radius: var(--r-pill);
    background: var(--papel);
    color: var(--tinta);
    font-size: var(--t-14);
    text-decoration: none;
}
.chip:hover { border-color: var(--marca); }
.chip[aria-current] { background: var(--marca); border-color: var(--marca); color: var(--papel); }
.chip__count { color: var(--apagado); font-size: var(--t-12); font-variant-numeric: tabular-nums; }
.chip[aria-current] .chip__count { color: var(--sobre-marca); }

.listing {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    align-items: start;
    padding-bottom: 56px;
}

/* Filtros: columna normal (sin sticky) para que el botón nunca quede recortado. */
.filters {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.filters__sheet-head { display: none; }
html:not(.js) .filters__toggle { display: inline-flex; margin-bottom: 12px; }
.filters__toggle {
    display: none;
    align-items: center; gap: 8px;
    min-height: 46px;
    padding: 0 16px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r-control);
    background: var(--papel);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.filters__toggle::-webkit-details-marker { display: none; }
.filters__form { margin: 0; }
.filters__group {
    margin: 0;
    padding: 14px 0 16px;
    border: 0;
    border-top: 1px solid var(--linea);
    min-width: 0;
}
.filters__group:first-of-type { border-top: 0; padding-top: 0; }
/* El legend flotado deja de "cortar" el borde del fieldset: la línea queda arriba del título. */
.filters__title {
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 10px; padding: 0;
    font-stretch: 100%;
    font-weight: 700;
    font-size: var(--t-16);
}
.filters__title ~ * { clear: both; }
.filters__actions { display: grid; gap: 12px; padding-top: 8px; }
.filters__clear { justify-self: start; font-weight: 600; }

.range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.range > span { color: var(--apagado); font-size: var(--t-14); }

.currency-switch { display: flex; margin-bottom: 10px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-control); overflow: hidden; }
.currency-switch label { flex: 1; position: relative; }
.currency-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.currency-switch span { display: block; padding: 7px 0; text-align: center; font-size: var(--t-14); font-weight: 600; }
.currency-switch input:checked + span { background: var(--marca); color: var(--papel); }
.currency-switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Vendo u ofrezco / Busco o compro, al principio del formulario de publicar */
.kind-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kind-switch label { position: relative; }
.kind-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kind-switch input:disabled { cursor: not-allowed; }
.kind-switch label > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r-control);
    background: var(--papel);
}
.kind-switch strong { display: flex; align-items: center; gap: 8px; font-size: var(--t-16); line-height: 1.25; }
.kind-switch strong .icon { width: 20px; height: 20px; flex: none; color: var(--marca); }
.kind-switch small { color: var(--apagado); font-size: var(--t-14); line-height: 1.35; }
.kind-switch input:checked + span { border-color: var(--marca); background: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--marca); }
.kind-switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.kind-switch input:disabled + span { opacity: 0.55; }
.kind-switch label:hover input:not(:checked):not(:disabled) + span { border-color: var(--linea-hover); }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-pill);
    background: var(--papel);
    font-size: var(--t-14);
}
.pill input:checked + span { background: var(--marca); border-color: var(--marca); color: var(--papel); }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.results { grid-column: 2; grid-row: 2; min-width: 0; }
.results__bar { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 20px; }
.mt-8 { margin-top: 8px; }
.sort { display: flex; align-items: center; gap: 10px; }
.sort label { color: var(--apagado); font-size: var(--t-14); white-space: nowrap; }
.js .sort [data-autosubmit-btn] { display: none; }

.featured-strip {
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--linea);
}
.featured-strip__title { font-size: var(--t-24); font-stretch: 72%; margin-bottom: 16px; }

/* Paginación */
.pager {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    margin: 44px 0 8px;
}
.pager a, .pager span {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 44px; height: 44px;
    padding: 0 12px;
    border: 1px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
    color: var(--tinta);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--marca); }
.pager [aria-current] { background: var(--marca); border-color: var(--marca); color: var(--papel); font-weight: 700; }
.pager__gap { border: 0 !important; background: none !important; min-width: 20px !important; }

/* Estados vacíos y páginas de error */
.empty { max-width: 560px; padding: 32px 0; }
.empty__icon { width: 44px; height: 44px; color: var(--marca); margin-bottom: 12px; }
.empty__title { font-size: var(--t-24); }
.empty__text { color: var(--apagado); }
.empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.gone { max-width: 640px; padding: clamp(40px, 7vw, 88px) 0 32px; }
.gone__code {
    margin: 0 0 8px;
    font-stretch: 62%; font-weight: 900;
    font-size: clamp(4rem, 12vw, 7.5rem);
    line-height: 0.85;
    color: var(--marca);
}
.gone__icon { width: 52px; height: 52px; color: var(--marca); margin-bottom: 14px; }
.gone__title { font-size: clamp(2rem, 4.5vw, 3rem); font-stretch: 66%; font-weight: 900; }
.gone__text { color: var(--apagado); font-size: var(--t-18); max-width: 52ch; }
.gone__search { display: flex; gap: 8px; max-width: 480px; margin: 24px 0 16px; }
.gone__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }

/* ---------- Detalle del aviso ---------- */

.ad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 44px;
    align-items: start;
    padding: 8px 0 24px;
}
.ad__main { min-width: 0; }

.gallery__stage { position: relative; }
.gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: var(--r-foto);
    background: var(--tinta);
    scrollbar-width: none;
    --focus: var(--cartulina);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide {
    flex: 0 0 100%;
    margin: 0;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    display: grid; place-items: center;
}
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery__nav {
    position: absolute; top: 50%;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    margin-top: -23px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--tinta);
}
.gallery__nav .icon { width: 24px; height: 24px; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav[disabled] { opacity: 0.35; }
.gallery__count {
    position: absolute;
    left: 12px; bottom: 12px;
    margin: 0;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: rgba(var(--tinta-rgb), 0.82);
    color: var(--papel);
    font-size: var(--t-14);
    font-variant-numeric: tabular-nums;
}
.gallery__zoom {
    position: absolute; right: 12px; bottom: 12px;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: rgba(var(--tinta-rgb), 0.82);
    color: var(--papel);
}
.gallery__thumbs {
    display: flex; gap: 8px;
    margin: 10px 0 0; padding: 2px;
    overflow-x: auto;
    list-style: none;
}
.gallery__thumb {
    display: block;
    width: 88px;
    aspect-ratio: 4 / 3;
    border: 2px solid transparent;
    border-radius: var(--r-control);
    overflow: hidden;
    opacity: 0.75;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { border-color: var(--marca); opacity: 1; }
.gallery__empty {
    display: grid; place-items: center; gap: 10px;
    aspect-ratio: 16 / 9;
    padding: 24px;
    border-radius: var(--r-foto);
    background: var(--hueco);
    color: var(--apagado);
    text-align: center;
}
.gallery__empty .icon { width: 64px; height: 64px; color: var(--hueco-icono); }
.gallery:fullscreen { background: var(--tinta); display: grid; place-items: center; }
.gallery:fullscreen .gallery__stage { width: 100%; }
.gallery:fullscreen .gallery__slide { aspect-ratio: auto; height: 100vh; }
.gallery:fullscreen .gallery__thumbs { display: none; }

.ad__section { margin-top: 40px; }
.ad__h2 { font-size: var(--t-24); font-stretch: 75%; margin-bottom: 14px; }
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0 28px;
    margin: 0;
}
.specs__item { padding: 11px 0; border-bottom: 1px solid var(--linea); }
.specs dt { display: flex; align-items: center; gap: 6px; color: var(--apagado); font-size: var(--t-14); }
.specs dt .icon { width: 18px; height: 18px; color: var(--marca); }
.specs dd { margin: 2px 0 0; font-weight: 650; font-size: var(--t-18); }
.description { max-width: 68ch; font-size: var(--t-18); line-height: 1.6; overflow-wrap: anywhere; }

.ad__foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linea); }
.ad__stats { display: flex; flex-wrap: wrap; gap: 6px 24px; color: var(--apagado); font-size: var(--t-14); }
.report { margin-top: 14px; }
.report > summary {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--apagado);
    font-size: var(--t-14);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
    list-style: none;
}
.report > summary::-webkit-details-marker { display: none; }
.report > summary .icon { width: 16px; height: 16px; }
.report__form {
    display: grid; gap: 10px;
    max-width: 520px;
    margin-top: 14px;
    padding: 18px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-foto);
}
.report__form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.report__form legend { font-weight: 700; margin-bottom: 6px; }
.report__form .btn { justify-self: start; }

.ad__aside { position: sticky; top: calc(var(--header-h) + 16px); }
/* Pedido de "busco o compro", arriba del título */
.ad__kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1.5px var(--marca);
    color: var(--marca);
    font-size: var(--t-14);
    font-weight: 700;
}
.ad__kind .icon { width: 18px; height: 18px; }
.ad__title {
    margin: 0 0 18px;
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.06;
    overflow-wrap: anywhere;
}
.ad__price { margin: 0 0 22px; }
.ad__facts {
    display: grid; gap: 6px;
    margin: 0 0 22px; padding: 0;
    list-style: none;
    color: var(--apagado);
}
.ad__facts li { display: flex; align-items: center; gap: 8px; }
.ad__facts .icon { color: var(--marca); }

.contact {
    display: grid; gap: 10px;
    padding: 18px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-foto);
}
.contact form { margin: 0; }
.contact__form { display: grid; gap: 8px; margin-top: 4px !important; }
.contact__own, .contact__none { margin: 0; color: var(--apagado); }
.contact__lead { margin: 0; font-weight: 700; }
.contact__tools { display: flex; gap: 8px; margin-top: 4px; }
.contact__tools > * { flex: 1 1 0; min-width: 0; }
.contact__tools > [hidden] { display: none; }
.contact__tools .btn, .contact__tools .fav-btn--full { width: 100%; justify-content: center; padding: 0 8px; }

.seller {
    display: flex; gap: 14px; align-items: center;
    margin-top: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--linea);
}
.seller__body p { margin: 0; }
.seller__name { font-weight: 700; font-size: var(--t-18); display: flex; align-items: center; gap: 6px; }
.seller__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); font-size: var(--t-14); font-weight: 600; }
.seller__since { color: var(--apagado); font-size: var(--t-14); }
.seller__link { font-size: var(--t-14); font-weight: 600; }

.safety {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 16px;
    color: var(--apagado);
    font-size: var(--t-14);
}
.safety .icon { width: 22px; height: 22px; color: var(--verde); flex: none; }
.safety p { margin: 0; }

.contact-bar { display: none; }

/* Perfil público */
.profile-head { display: flex; align-items: center; gap: 18px; padding: 8px 0 32px; }
.profile-head__name { margin: 0; font-stretch: 66%; font-weight: 900; font-size: clamp(2rem, 4.5vw, 3rem); }
.profile-head__meta { margin: 4px 0 0; color: var(--apagado); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }

/* ---------- Formularios ---------- */

.form { display: grid; gap: 0; }
.field { margin: 0 0 20px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.field__label { display: block; margin: 0 0 6px; font-weight: 650; }
.field__label--sm { font-size: var(--t-14); margin-top: 12px; }
.field__optional { color: var(--apagado); font-weight: 400; }
.field__hint { margin: 6px 0 0; color: var(--apagado); font-size: var(--t-14); }
.field__error {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 7px 0 0;
    color: var(--rojo);
    font-size: var(--t-14);
    font-weight: 600;
}
.field__error .icon { width: 18px; height: 18px; }
.field__counter { float: right; color: var(--apagado); font-size: var(--t-12); font-weight: 400; font-variant-numeric: tabular-nums; }

.input, .select, .textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r-control);
    background: var(--papel);
    color: var(--tinta);
    font-size: var(--t-16);
    line-height: 1.35;
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--linea-hover); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--marca); outline: 3px solid var(--anillo); outline-offset: 0; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--rojo); }
.textarea { min-height: 120px; resize: vertical; }
.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235A1846' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}
.input--sm, .select--sm { min-height: 42px; padding-top: 8px; padding-bottom: 8px; font-size: var(--t-14); }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span {
    display: grid; place-items: center;
    padding: 0 12px;
    border: 1.5px solid var(--linea-fuerte); border-right: 0;
    border-radius: var(--r-control) 0 0 var(--r-control);
    background: var(--revoque);
    color: var(--apagado);
    font-weight: 700;
}
.input-prefix .input { border-radius: 0 var(--r-control) var(--r-control) 0; }

.check {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    line-height: 1.35;
}
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--marca); }
.check small { display: block; color: var(--apagado); font-size: var(--t-14); }

.password { position: relative; }
.password .input { padding-right: 96px; }
.password__toggle {
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 0; border-radius: var(--r-control);
    background: none;
    color: var(--marca);
    font-size: var(--t-14);
    font-weight: 700;
}

.form-page {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 320px);
    gap: 56px;
    padding: clamp(28px, 4vw, 48px) 0 64px;
}
.crumbs + .form-page { padding-top: 12px; }
.form-page__title { font-stretch: 64%; font-weight: 900; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 0.98; margin-bottom: 12px; }
.form-page__lead { color: var(--apagado); font-size: var(--t-18); margin-bottom: 28px; max-width: 50ch; }
.form-page__side { padding-top: 12px; color: var(--apagado); }
.form-page__side .side-title { color: var(--tinta); }
.form-page__foot { margin-top: 20px; color: var(--apagado); }
.tick-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tick-list li { position: relative; padding-left: 22px; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 2px; background: var(--cartulina); box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), 0.25); }

.divider-text { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--apagado); font-size: var(--t-14); }
.divider-text::before, .divider-text::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }

/* Páginas de texto */
.prose-page { max-width: 760px; padding: 8px 0 64px; }
.prose-page__title { font-stretch: 64%; font-weight: 900; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 0.98; margin-bottom: 24px; }
.prose-page__cta { margin-top: 36px; }
.prose { font-size: var(--t-18); line-height: 1.62; max-width: 68ch; }
.prose h2 { margin: 1.8em 0 0.5em; font-size: var(--t-24); font-stretch: 75%; }
.prose h3 { margin: 1.5em 0 0.4em; font-size: var(--t-21); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--marca); }

/* ---------- Mi cuenta ---------- */

.account {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 28px 0 64px;
}
.account-nav { position: sticky; top: calc(var(--header-h) + 16px); }
.account-nav__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.account-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-control);
    color: var(--tinta);
    text-decoration: none;
}
.account-nav a:hover { background: var(--papel); }
.account-nav a[aria-current] { background: var(--papel); color: var(--marca); font-weight: 700; box-shadow: inset 3px 0 0 var(--marca); }
.account-nav .icon { color: var(--marca); }
.account-nav__count { margin-left: auto; padding: 0 7px; border-radius: var(--r-pill); background: var(--cartulina); font-size: var(--t-12); font-weight: 800; }
.account-main { min-width: 0; }
.account-title { margin: 0 0 6px; font-stretch: 64%; font-weight: 900; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; }
.account-lead { margin: 0 0 24px; color: var(--apagado); }
.account-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 24px; }
.account-head .account-lead { margin: 0; }

.panel {
    padding: 24px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-foto);
}
.panel + .panel { margin-top: 20px; }
.panel__title { font-size: var(--t-21); font-stretch: 75%; margin-bottom: 14px; }
.panel__subtitle { margin: 18px 0 10px; font-size: var(--t-18); }

/* Verificación en dos pasos */
.input--code { max-width: 260px; font-size: 1.3rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.totp-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 12px 0 18px; }
.totp-setup__qr .qr { display: block; width: 205px; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; }
.totp-key { display: inline-block; padding: 6px 10px; font-size: 1.05rem; letter-spacing: 0.06em; word-break: break-all; }
.recovery { border-color: var(--marca); }
.recovery__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 12px 0 0; padding-left: 22px; }
.recovery__list code { font-size: 1.05rem; letter-spacing: 0.05em; }

/* Recuadro de Cloudflare Turnstile: se reserva el alto para que el formulario no salte al aparecer. */
.turnstile { min-height: 65px; margin: 4px 0 18px; }
.panel--danger { border-color: #E9C5C2; }
.admin-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; border-color: var(--marca); }
.admin-callout .panel__title { margin-bottom: 4px; }
.admin-callout p { margin: 0; }

.summary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.summary-list a {
    display: grid; gap: 2px;
    padding: 16px;
    border: 1px solid var(--linea);
    border-radius: var(--r-foto);
    background: var(--papel);
    color: var(--tinta);
    text-decoration: none;
}
.summary-list a:hover { border-color: var(--marca); }
.summary-list strong { font-stretch: 66%; font-weight: 900; font-size: var(--t-36); line-height: 1; }
.summary-list span { color: var(--apagado); font-size: var(--t-14); }

/* La línea gris de abajo es una sombra interna (no un borde) para que la raya de la pestaña activa la tape sin
   salirse de la caja: con overflow-x: auto, 1 px de más hacía aparecer una barra de desplazamiento vertical
   en Windows. overflow-y: hidden por si algún redondeo deja medio píxel de más. */
.tabs { display: flex; gap: 4px; margin: 0 0 20px; padding: 0; overflow-x: auto; overflow-y: hidden; list-style: none; box-shadow: inset 0 -1px 0 var(--linea); }
.tabs a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    border-bottom: 3px solid transparent;
    color: var(--apagado);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tabs a:hover { color: var(--tinta); }
/* El contorno de foco va por dentro: la caja de las pestañas recorta lo que se sale. */
.tabs a:focus-visible { outline-offset: -3px; }
.tabs a[aria-current] { color: var(--marca); border-bottom-color: var(--marca); }
.tabs__count { font-size: var(--t-12); color: var(--apagado); font-variant-numeric: tabular-nums; }

.my-ads { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.my-ad {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 16px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-foto);
}
.my-ad__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-control); overflow: hidden; background: var(--hueco); }
.my-ad__media img { width: 100%; height: 100%; object-fit: cover; }
.my-ad__media .row__placeholder .icon { width: 36px; height: 36px; }
.my-ad__title { margin: 0 0 4px; font-stretch: 100%; font-weight: 650; font-size: var(--t-18); line-height: 1.3; }
.my-ad__title a { color: var(--tinta); text-decoration: none; }
.my-ad__title a:hover { text-decoration: underline; }
.my-ad__price { font-stretch: 70%; font-weight: 850; font-size: var(--t-21); }
.my-ad__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; color: var(--apagado); font-size: var(--t-14); }
.my-ad__meta span { display: inline-flex; align-items: center; gap: 4px; }
.my-ad__meta .icon { width: 16px; height: 16px; }
.my-ad__note { margin: 8px 0 0; font-size: var(--t-14); }
.my-ad__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 150px; }
.my-ad__actions form { margin: 0; }
.my-ad__actions .btn { width: 100%; }

.status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--t-12);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--active { background: #E3F2EA; color: #0A6B42; }
.status--pending { background: #FBF0D9; color: var(--ambar); }
.status--paused { background: var(--hueco); color: var(--apagado); }
.status--sold { background: var(--tinte-fuerte); color: var(--marca); }
.status--expired, .status--rejected, .status--banned { background: #F9E4E2; color: var(--rojo); }
.status--featured { background: var(--cartulina); color: var(--tinta); }
.status--featured::before { display: none; }
.status--busca { background: var(--papel); color: var(--marca); box-shadow: inset 0 0 0 1.5px var(--marca); }
.status--busca::before { display: none; }

/* Formulario de aviso */
.ad-form { display: grid; gap: 20px; }
.form-section {
    padding: 24px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-foto);
}
.form-section__title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font-size: var(--t-21); font-stretch: 75%; }
.form-section__step {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--marca);
    color: var(--papel);
    font-stretch: 75%;
    font-size: var(--t-16);
    font-weight: 800;
    flex: none;
    transform: translateY(-2px);
}
.form-section__lead { margin: 0 0 18px; color: var(--apagado); font-size: var(--t-14); }
.form-section .field:last-child { margin-bottom: 0; }
.ad-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ad-form__submit p { margin: 0; color: var(--apagado); font-size: var(--t-14); }
.js [data-schema-block][hidden] { display: none; }

.uploader {
    padding: 16px;
    border: 2px dashed var(--linea-fuerte);
    border-radius: var(--r-foto);
    background: var(--suave);
}
.uploader.is-dragover { border-color: var(--marca); background: var(--tinte); }
.uploader__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
    margin: 0 0 14px; padding: 0;
    list-style: none;
}
.uploader__grid:empty { display: none; }
.uploader__item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-control);
    overflow: hidden;
    background: var(--hueco);
}
.uploader__item img { width: 100%; height: 100%; object-fit: cover; }
.uploader__item:first-child::before {
    content: "Portada";
    position: absolute; left: 6px; top: 6px; z-index: 1;
    padding: 3px 7px;
    border-radius: var(--r-papel);
    background: var(--cartulina);
    color: var(--tinta);
    font-size: var(--t-12);
    font-weight: 800;
    transform: rotate(-2deg);
}
.uploader__tools {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between;
    padding: 4px;
    background: rgba(var(--tinta-rgb), 0.74);
}
.uploader__tools button {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 0; border-radius: var(--r-control);
    background: transparent; color: var(--papel);
    --focus: var(--cartulina);
}
.uploader__tools button:hover { background: rgba(255, 255, 255, 0.16); }
.uploader__tools .icon { width: 18px; height: 18px; }
.uploader__progress { position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--cartulina); transition: width 0.2s; }
.uploader__item.is-error { outline: 2px solid var(--rojo); }
.uploader__item.is-error::after { content: "Error"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(179, 38, 30, 0.72); color: var(--papel); font-weight: 700; }
.uploader__drop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.uploader__drop p { margin: 0; color: var(--apagado); font-size: var(--t-14); }
.uploader__input { max-width: 100%; }
.js .uploader__input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.alert ul { margin: 6px 0 0; padding-left: 1.1em; }
.alert li + li { margin-top: 2px; }
.alert a { font-weight: 600; }

.card--gone .card__title, .card--gone .card__meta { color: var(--apagado); }

.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.plan { position: relative; }
.plan input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan__box {
    display: grid; gap: 4px;
    padding: 16px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r-foto);
    background: var(--papel);
}
.plan__days { font-weight: 700; }
.plan__price { font-stretch: 66%; font-weight: 900; font-size: var(--t-36); line-height: 1; }
.plan input:checked + .plan__box { border-color: var(--marca); box-shadow: inset 0 0 0 1.5px var(--marca); background: var(--tinte); }
.plan input:focus-visible + .plan__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.prose--sm { font-size: var(--t-16); }

/* Mensajes */
.inbox { margin: 0; padding: 0; list-style: none; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-foto); }
.inbox li + li { border-top: 1px solid var(--linea); }
.inbox a {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    color: var(--tinta);
    text-decoration: none;
}
.inbox a:hover { background: var(--suave); }
.inbox__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-control); overflow: hidden; background: var(--hueco); }
.inbox__media img { width: 100%; height: 100%; object-fit: cover; }
.inbox__who { font-weight: 700; }
.inbox__ad { color: var(--apagado); font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--apagado); }
.inbox__side { display: grid; justify-items: end; gap: 6px; color: var(--apagado); font-size: var(--t-12); }
.inbox .is-unread .inbox__preview { color: var(--tinta); font-weight: 600; }
.inbox__dot { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--cartulina); color: var(--tinta); font-weight: 800; font-size: var(--t-12); }

.thread-head {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-foto) var(--r-foto) 0 0;
}
.thread-head__media { width: 72px; flex: none; aspect-ratio: 4 / 3; border-radius: var(--r-control); overflow: hidden; background: var(--hueco); }
.thread-head__media img { width: 100%; height: 100%; object-fit: cover; }
.thread-head__title { margin: 0; font-weight: 700; line-height: 1.3; }
.thread-head__sub { margin: 2px 0 0; color: var(--apagado); font-size: var(--t-14); }
.thread {
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 16px;
    background: var(--suave);
    border-left: 1px solid var(--linea);
    border-right: 1px solid var(--linea);
    max-height: 60vh;
    overflow-y: auto;
}
.bubble {
    max-width: min(78%, 560px);
    padding: 10px 14px;
    border: 1px solid var(--linea);
    border-radius: 14px 14px 14px 4px;
    background: var(--papel);
    overflow-wrap: anywhere;
}
.bubble p { margin: 0; }
.bubble time { display: block; margin-top: 4px; color: var(--apagado); font-size: var(--t-12); }
.bubble--mine { align-self: flex-end; border-color: var(--marca); border-radius: 14px 14px 4px 14px; background: var(--marca); color: var(--papel); }
.bubble--mine time { color: var(--sobre-marca); }
.thread__day { align-self: center; color: var(--apagado); font-size: var(--t-12); padding: 2px 10px; background: var(--revoque); border-radius: var(--r-pill); }
.reply {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
    align-items: end;
    padding: 14px 16px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 0 0 var(--r-foto) var(--r-foto);
}
.reply .textarea { min-height: 52px; }

/* ---------- Administración ---------- */

.admin-body { background: var(--revoque); }
.admin {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
}
.admin-side {
    --focus: var(--cartulina);
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 14px;
    background: var(--tinta);
    color: var(--sobre-tinta);
}
.admin-side .brand { margin: 0 0 24px 6px; }
.admin-side .brand__word { font-size: 1.5rem; }
.admin-nav { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.admin-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-control);
    color: var(--sobre-tinta);
    text-decoration: none;
    font-size: var(--t-14);
}
.admin-nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--papel); }
.admin-nav a[aria-current] { background: rgba(244, 250, 58, 0.14); color: var(--cartulina); font-weight: 700; }
.admin-nav .icon { width: 19px; height: 19px; }
.admin-nav__count { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--cartulina); color: var(--tinta); font-size: 11px; font-weight: 800; text-align: center; }
.admin-nav__sep { margin: 12px 10px 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.admin-main { min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 56px; }
.admin-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.admin-title { margin: 0; font-stretch: 66%; font-weight: 900; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1; }
.admin-sub { margin: 4px 0 0; color: var(--apagado); }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { display: grid; gap: 4px; padding: 16px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-foto); color: var(--tinta); text-decoration: none; }
a.stat:hover { border-color: var(--marca); }
.stat__num { font-stretch: 66%; font-weight: 900; font-size: var(--t-36); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--apagado); font-size: var(--t-14); }
.stat--alert .stat__num { color: var(--rojo); }

.chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 8px 0 0; }
.chart__bar { flex: 1; min-width: 4px; background: var(--marca); border-radius: 2px 2px 0 0; position: relative; }
.chart__bar:hover { background: var(--marca-hondo); }
.chart__legend { display: flex; justify-content: space-between; color: var(--apagado); font-size: var(--t-12); margin-top: 6px; }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.admin-grid > .panel + .panel { margin-top: 0; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.toolbar .field { margin: 0; }
.toolbar .input, .toolbar .select { min-height: 42px; padding-top: 8px; padding-bottom: 8px; font-size: var(--t-14); }

.table-wrap { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-foto); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.table th {
    padding: 10px 12px;
    background: var(--suave);
    border-bottom: 1px solid var(--linea);
    color: var(--apagado);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--suave); }
.table__thumb { width: 64px; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--hueco); }
.table__thumb img { width: 100%; height: 100%; object-fit: cover; }
.table__main { font-weight: 600; color: var(--tinta); }
.table__sub { color: var(--apagado); font-size: var(--t-12); }
.table__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.table__actions form { margin: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.inline-form .input, .inline-form .select { width: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: var(--t-14); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.kv dt { color: var(--apagado); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
/* En la grilla la separación la da el gap: sin esto los paneles de cada fila quedaban desparejos. */
.settings-grid > .panel + .panel { margin-top: 0; }
.code-note { padding: 10px 12px; border-radius: var(--r-control); background: var(--revoque); font-size: var(--t-14); overflow-wrap: anywhere; }

/* ---------- Pie ---------- */

.site-footer {
    --focus: var(--cartulina);
    margin-top: auto;
    padding: 52px 0 28px;
    background: var(--tinta);
    color: var(--sobre-tinta);
}
.site-footer a { color: var(--papel); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.site-footer h2 { margin: 0 0 14px; font-stretch: 100%; font-weight: 700; font-size: var(--t-16); color: var(--papel); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: var(--t-14); }
.site-footer__about p { max-width: 36ch; margin: 16px 0 0; font-size: var(--t-14); }
.site-footer__contact { margin-top: 16px !important; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 8px; }
.brand--footer .brand__word { font-size: 1.6rem; }
.site-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--t-14);
    color: var(--sobre-tinta-suave);
}
.site-footer__bottom p { margin: 0; }

.tabbar { display: none; }

.toast {
    position: fixed;
    left: 50%; bottom: 24px;
    z-index: 90;
    max-width: min(92vw, 460px);
    padding: 12px 18px;
    border-radius: var(--r-control);
    background: var(--tinta);
    color: var(--papel);
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(var(--tinta-rgb), 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity 0.2s, transform 0.2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--rojo); }

/* ---------- Aviso de cookies ---------- */

.cookie-bar {
    position: fixed; left: 50%; bottom: 16px; z-index: 75;
    transform: translateX(-50%);
    width: min(980px, calc(100% - 32px));
    display: flex; align-items: center; gap: 12px 20px;
    padding: 14px 16px 14px 20px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(var(--tinta-rgb), 0.18);
}
.cookie-bar__text { margin: 0; flex: 1; font-size: var(--t-14); line-height: 1.45; }
.cookie-bar__text a { color: var(--marca); font-weight: 700; white-space: nowrap; }
.cookie-bar__actions { display: flex; gap: 8px; flex: none; margin: 0; }
.cookie-bar__actions .btn { min-height: 44px; padding: 0 18px; }
.has-cookie-bar .site-footer { padding-bottom: 120px; }

.consent-box { max-width: 68ch; margin: 0 0 32px; padding: 18px 20px; border: 1px solid var(--linea); border-radius: 14px; background: var(--tinte); }
.consent-box__title { margin: 0 0 6px; font-size: var(--t-18); }
.consent-box__now { margin: 0 0 14px; color: var(--apagado); }
.consent-box__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* ---------- Instalador ---------- */

.bare { max-width: 820px; margin: 0 auto; padding: 40px var(--gutter) 64px; }
.bare .brand { color: var(--marca); margin-bottom: 28px; }
.checklist { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 6px; }
.checklist li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-14); }
.checklist .ok { color: var(--verde); }
.checklist .bad { color: var(--rojo); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .ad { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
    .home {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "cats" "main" "extras";
        padding-top: 24px;
    }
    /* En la portada del celular y la tablet, las secciones van como botones; el detalle está en el menú. */
    .cat-index { margin-bottom: 36px; }
    .cat-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cat-index__section { min-height: 54px; background: var(--papel); border: 1px solid var(--linea); }
    .cat-index__sub { display: none; }
    .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mega__col--wide { grid-column: span 2; }
    .home__extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; margin-top: 12px; }

    .listing { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
    .filters { grid-column: 1; grid-row: 1; position: static; max-height: none; overflow: visible; padding: 0; }
    .filters__toggle { display: inline-flex; }
    .results__bar { grid-column: 2; grid-row: 1; margin: 0; }
    .results { grid-column: 1 / -1; grid-row: 2; margin-top: 20px; }
    .filters[open] .filters__sheet {
        position: fixed;
        inset: 0;
        z-index: 95;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 var(--gutter) env(safe-area-inset-bottom);
        background: var(--papel);
    }
    .filters__sheet-head {
        position: sticky; top: 0; z-index: 2;
        display: flex; align-items: center; justify-content: space-between;
        margin: 0 0 8px; padding: 10px 0;
        border-bottom: 1px solid var(--linea);
        background: var(--papel);
    }
    .filters__sheet-title { margin: 0; font-stretch: 75%; font-weight: 800; font-size: var(--t-24); }
    .filters__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--tinta); }
    .filters__close .icon { width: 24px; height: 24px; }
    .filters__sheet .filters__actions { position: sticky; bottom: 0; padding: 12px 0 16px; background: var(--papel); border-top: 1px solid var(--linea); }
    .filters__sheet .filters__group:first-of-type { padding-top: 8px; }
    body.filters-open { overflow: hidden; }

    .ad { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ad__aside { position: static; order: -1; }
    .ad__main { display: contents; }
    .gallery { order: -2; }
    .ad__section, .ad__foot { order: 0; margin-top: 12px; }

    .account { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 16px; }
    .account-nav { position: static; }
    .account-nav__list { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
    .account-nav a { white-space: nowrap; background: var(--papel); border: 1px solid var(--linea); }
    .account-nav a[aria-current] { box-shadow: none; border-color: var(--marca); }

    .form-page { grid-template-columns: minmax(0, 1fr); gap: 24px; }

    .admin { grid-template-columns: minmax(0, 1fr); }
    .admin-side { position: static; height: auto; padding: 12px; }
    .admin-side .brand { margin: 4px 0 12px 4px; }
    .admin-nav { display: flex; overflow-x: auto; gap: 4px; }
    .admin-nav a { white-space: nowrap; }
    .admin-nav__sep { display: none; }
}

/* Nombre de la cuenta: en pantallas medianas alcanza con el avatar para que entre el buscador. */
@media (max-width: 1180px) {
    .menu__name { display: none; }
}

/* Tablets: el encabezado no entra en una línea. El buscador baja a su propia fila y
   "Categorías" queda como ícono; si no, todo se desborda y el navegador achica la página entera. */
@media (max-width: 1000px) {
    .site-header { position: relative; z-index: 80; }
    .site-header__bar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; min-height: 0; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 4px; }
    .mega__label, .mega__trigger .mega__caret, .menu__caret { display: none; }
    .mega__trigger { width: 40px; padding: 0; justify-content: center; }
    .mega__trigger .icon { width: 24px; height: 24px; }
}

@media (max-width: 760px) {
    :root { --header-h: 58px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Por encima de la barra de abajo (70), así la hoja del menú de categorías la tapa. */
    .site-header { position: relative; z-index: 80; }
    .site-header__bar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; min-height: 0; }
    .brand__word { font-size: 1.5rem; }
    .brand__tag { font-size: 0.9rem; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 4px; }
    .header-nav__icon, .menu__name, .menu__caret { display: none; }
    .header-nav__link { padding: 8px 4px; }
    .header-nav__panel { width: 40px; margin: 0 2px; padding: 0; justify-content: center; }
    .header-nav__panel span { display: none; }

    .mega__label, .mega__trigger .mega__caret { display: none; }
    .mega__trigger { width: 40px; padding: 0; justify-content: center; }
    .mega__trigger .icon { width: 24px; height: 24px; }
    .mega[open] .mega__panel {
        position: fixed;
        inset: 0;
        z-index: 96;
        max-height: none;
        padding-bottom: env(safe-area-inset-bottom);
        border: 0;
        box-shadow: none;
    }
    .mega__head {
        position: sticky; top: 0; z-index: 2;
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px var(--gutter);
        border-bottom: 1px solid var(--linea);
        background: var(--papel);
    }
    .mega__title { margin: 0; font-stretch: 75%; font-weight: 800; font-size: var(--t-24); }
    .mega__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--tinta); }
    .mega__close .icon { width: 24px; height: 24px; }
    .mega__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 18px; }
    .mega__col--wide { grid-column: auto; }
    .mega__list--cols { columns: 1; }
    .mega__list a { padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: var(--t-16); }
    body.mega-open { overflow: hidden; }
    .header-nav__publish { min-height: 40px; padding: 0 12px; font-size: var(--t-16); }
    .menu__trigger { padding: 0; }
    .menu__panel { right: -4px; }

    .hero__title { max-width: 9ch; }
    .hero-search { grid-template-columns: minmax(0, 1fr); }
    .hero-search__btn { width: 100%; }

    .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
    .tag--sm { font-size: var(--t-21); }
    .card .tag { left: 6px; }
    .card__title { font-size: var(--t-14); margin-top: 20px; }
    .card__meta { font-size: var(--t-12); }
    .fav-form--overlay { top: 4px; right: 4px; }
    .fav-btn--overlay { width: 36px; height: 36px; }

    .my-ad { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .my-ad__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .my-ad__actions .btn, .my-ad__actions form { flex: 1 1 auto; width: auto; }

    .form-section { padding: 18px 16px; }
    .panel { padding: 18px 16px; }
    .inbox a { grid-template-columns: 56px minmax(0, 1fr); }
    .inbox__side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; }

    .site-footer { padding-bottom: 96px; }
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }

    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        display: grid; grid-template-columns: repeat(5, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--papel);
        border-top: 1px solid var(--linea);
        box-shadow: 0 -6px 18px rgba(var(--tinta-rgb), 0.06);
    }
    .tabbar a {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 7px 0 6px;
        color: var(--apagado);
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
    }
    .tabbar a .icon { width: 24px; height: 24px; }
    .tabbar a[aria-current] { color: var(--marca); }
    .tabbar__publish .icon { width: 30px !important; height: 30px !important; padding: 5px; margin-top: -2px; border-radius: 50%; background: var(--cartulina); color: var(--tinta); }
    .tabbar .badge { top: 2px; right: calc(50% - 22px); }
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

    body.has-contact-bar .tabbar { display: none; }
    body.has-contact-bar .contact-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--papel);
        border-top: 1px solid var(--linea);
        box-shadow: 0 -6px 18px rgba(var(--tinta-rgb), 0.08);
    }
    .contact-bar form, .contact-bar form .btn { width: 100%; }
    .contact-bar .btn { min-height: 48px; padding: 0 10px; font-size: var(--t-16); }
    body.has-contact-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    .gallery__stage { margin-inline: calc(-1 * var(--gutter)); }
    .gallery__track { border-radius: 0; }
    .gallery__nav { display: none !important; }
    .gallery__thumbs { display: none; }

    .sort label { display: none; }
    .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(-1 * var(--gutter));
        padding: 2px var(--gutter) 6px;
        scrollbar-width: none;
    }
    .chips::-webkit-scrollbar { display: none; }
    .chip { flex: none; }
    .listing-head { padding-bottom: 16px; }
    .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

    /* El aviso de cookies queda pegado arriba de la barra de abajo (o de la de contacto en un aviso). */
    .cookie-bar {
        left: 0; right: 0; transform: none; width: auto;
        bottom: calc(60px + env(safe-area-inset-bottom));
        flex-direction: column; align-items: stretch; gap: 10px;
        padding: 12px var(--gutter);
        border-width: 1px 0 0; border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 24px rgba(var(--tinta-rgb), 0.12);
    }
    body.has-contact-bar .cookie-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
    .cookie-bar__actions .btn { flex: 1; padding: 0 10px; }
    .has-cookie-bar .site-footer { padding-bottom: 250px; }
}

@media (max-width: 420px) {
    .brand__word { font-size: 1.32rem; }
    .header-nav__publish span { display: none; }
    .header-nav__publish { width: 42px; padding: 0; }
    .grid-cards { gap: 22px 10px; }
    .dep-index { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
    .site-header, .site-footer, .tabbar, .contact-bar, .cookie-bar, .promo, .report, .contact__tools, .gallery__thumbs, .gallery__nav { display: none !important; }
    body { background: #fff; }
    .ad { grid-template-columns: 1fr; }
}