@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* -------------------------------------------------------------------------
   [hidden] va primero de todas las reglas (sólo la precede el @import, que
   el estándar obliga a poner al comienzo del archivo).

   El motor esconde con el atributo `hidden` todo lo que depende de un dato
   opcional: teléfono, WhatsApp, logo, envío gratis, bloques de rubro sin
   publicaciones, filtros sin facetas. El !important es lo que evita que un
   `display: grid` posterior deje a la vista una sección vacía.
   ------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* =========================================================================
   Patagónico — marketplace regional
   -------------------------------------------------------------------------
   Dos acentos con trabajos distintos:

   --marca   estructura e identidad (barra de rubros, enlaces, insignia de
             comercio certificado). Es la variable que pisa `color_principal`
             desde el backoffice, así que todo lo que la use cambia con el
             color del cliente.
   --acento  señales comerciales (precio, oferta, botón de compra). Se
             mantiene fijo a propósito: es el color que empuja a la acción y
             no debe confundirse con el de la marca.

   El resto de la paleta se deriva de --marca con color-mix, de modo que un
   color muy distinto al de por defecto siga dando un sitio coherente.
   ========================================================================= */

:root {
    /* --- Los cuatro colores del logo ---------------------------------
       El rojo manda: es el que pinta las acciones, los precios y los
       estados activos, o sea lo que más se repite en pantalla. Los otros
       tres bajan en jerarquía y aparecen de a poco. */
    --marca: #df0209;      /* rojo    — acción, precio, activo */
    --naranja: #ed8600;    /* naranja — promos y cuentas regresivas */
    --dorado: #fdcf00;     /* dorado  — la etiqueta "Usado" */
    --amarillo: #ffef00;   /* amarillo— destellos sobre fondo oscuro */

    /* Derivados del rojo. El editor pisa --marca con `color_principal`,
       así que todo lo que salga de acá acompaña ese cambio. */
    --marca-tinta: color-mix(in srgb, var(--marca) 74%, #2b0002);
    --marca-clara: color-mix(in srgb, var(--marca) 70%, #ffffff);
    --marca-borde: color-mix(in srgb, var(--marca) 26%, #ffffff);
    --marca-suave: color-mix(in srgb, var(--marca) 7%, #ffffff);
    --marca-velo: color-mix(in srgb, var(--marca) 20%, transparent);

    /* --- Negro cálido estructural ------------------------------------
       Es el mismo #211915 de la tipografía del logo. Sostiene la barra
       superior, el pie y el fondo de los degradados: sin un neutro que
       haga de contrapeso, cuatro colores cálidos juntos terminan
       pareciendo un folleto de ofertas en vez de un marketplace. */
    --carbon: #211915;
    --carbon-hondo: #16100d;
    --carbon-claro: #3b302a;

    /* Señal secundaria: promos, relojes, sellos. */
    --acento: var(--naranja);
    /* El naranja del logo sobre blanco da 2,6:1 — no sirve para texto.
       Esta version quemada llega a 5,2:1 y sigue leyendose naranja, bien
       diferenciada del rojo. El --acento pleno queda para superficies. */
    --acento-hondo: #a85800;
    --acento-suave: #fff4e8;

    /* Neutros cálidos, para que convivan con la paleta del logo. */
    --tinta: #221a16;
    --tinta-media: #5d5049;
    --tinta-suave: #786c66;
    --linea: #e9e4e1;
    --linea-fuerte: #d6cfca;

    --fondo: #ffffff;
    --fondo-suave: #f8f6f4;
    --fondo-hondo: #efeae6;

    --exito: #1c7a4d;
    --alerta: #b26a00;

    --radio: 10px;
    --radio-lg: 16px;
    --sombra: 0 1px 2px rgba(33, 25, 21, .06);
    --sombra-media: 0 6px 20px -8px rgba(33, 25, 21, .20);
    --sombra-alta: 0 18px 44px -16px rgba(33, 25, 21, .30);

    --ancho: 1320px;
    --gap: 24px;

    --tipo: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--tipo);
    font-size: 15px;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--fondo-suave);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-tinta); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }

:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =========================================================================
   Layout
   ========================================================================= */

#contenido-sitio { display: block; background: var(--fondo-suave); }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 24px;
}

.seccion { padding: 46px 0; }
.seccion--compacta { padding: 30px 0; }

.seccion__encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.seccion__encabezado--barra {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--linea);
    align-items: center;
}

.seccion__encabezado--centro {
    justify-content: center;
    text-align: center;
    border: 0;
}

.overline {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.overline--acento { color: var(--acento-hondo); }
.overline--claro { color: rgba(255, 255, 255, .72); }

.titulo { font-size: clamp(21px, 2.4vw, 27px); }
.titulo--lg { font-size: clamp(27px, 3.6vw, 38px); }

/* El peso de titular lo dan el weight 800 y el tracking cerrado, no un
   cambio de familia: el sitio usa una sola tipografía. */
.titulo-display {
    font-weight: 800;
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.16;
    letter-spacing: -.03em;
    margin: 0 0 8px;
}
.titulo-display--xl { font-size: clamp(30px, 5vw, 50px); letter-spacing: -.035em; }

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--marca);
    white-space: nowrap;
}
.enlace-flecha:hover { gap: 10px; }

/* =========================================================================
   Botones
   ========================================================================= */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--tinta);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* La acción comercial —comprar, buscar, consultar— va en rojo: es el
   botón que más se repite y lo que hace dominante al color del logo.
   .boton--marca queda como la sólida secundaria, en el negro cálido. */
.boton--acento { background: var(--marca); border-color: var(--marca); color: #fff; }
.boton--acento:hover { background: var(--marca-tinta); border-color: var(--marca-tinta); color: #fff; }

.boton--marca { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.boton--marca:hover { background: var(--carbon-claro); border-color: var(--carbon-claro); color: #fff; }

.boton--fantasma { background: transparent; border-color: var(--linea-fuerte); color: var(--tinta); }
.boton--fantasma:hover { border-color: var(--marca); color: var(--marca); background: var(--marca-suave); }

.boton--claro { background: #fff; border-color: #fff; color: var(--carbon); }
.boton--claro:hover { background: rgba(255, 255, 255, .88); color: var(--marca); }

.boton--texto { background: transparent; color: var(--tinta-media); padding: 8px 12px; }
.boton--texto:hover { color: var(--marca); background: var(--marca-suave); }

/* Acción que todavía no se puede hacer (el carrito sin publicaciones
   marcadas). No es `disabled` porque sigue siendo un enlace: el clic lo
   frena el JS y avisa por qué. */
.boton--inactivo {
    background: var(--fondo-hondo);
    border-color: var(--linea-fuerte);
    color: var(--tinta-suave);
    cursor: not-allowed;
}
.boton--inactivo:hover {
    background: var(--fondo-hondo);
    border-color: var(--linea-fuerte);
    color: var(--tinta-suave);
    transform: none;
}

.boton--sm { padding: 8px 14px; font-size: 13px; }
.boton--lg { padding: 14px 26px; font-size: 15px; }
.boton--bloque { display: flex; width: 100%; }
.boton__flecha { transition: transform .16s ease; }
.boton:hover .boton__flecha { transform: translateX(3px); }

/* =========================================================================
   Campos
   ========================================================================= */

.campo { display: block; }
.campo__etiqueta {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tinta-media);
}
.campo__control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--fondo);
    font-size: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.campo__control:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-velo);
}
select.campo__control { cursor: pointer; }
textarea.campo__control { resize: vertical; min-height: 84px; }
.campo--cantidad .campo__control { max-width: 110px; }

/* Pastillas de radio: filtros de enum (condición, tipo de vendedor) */
.pastillas-radio { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilla-radio { position: relative; cursor: pointer; }
.pastilla-radio input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.pastilla-radio span {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 999px;
    background: var(--fondo);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta-media);
    transition: all .16s ease;
}
.pastilla-radio:hover span { border-color: var(--marca); color: var(--marca); }
.pastilla-radio input:checked + span {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}
.pastilla-radio input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }

/* =========================================================================
   Cabecera
   ========================================================================= */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 120;
    background: var(--fondo);
    box-shadow: var(--sombra);
}

.franja-aviso {
    background: var(--carbon);
    color: rgba(255, 255, 255, .82);
    font-size: 12.5px;
    overflow: hidden;
    max-height: 46px;
    transition: max-height .25s ease;
}
.cabecera.esta-fija .franja-aviso { max-height: 0; }

.franja-aviso__interior {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 38px;
    flex-wrap: wrap;
}
.franja-aviso__texto { margin-right: auto; }
.franja-aviso__envio { font-weight: 700; color: #fff; }
.franja-aviso__envio b { color: #fff; }
.franja-aviso__enlaces { display: flex; gap: 18px; }
.franja-aviso__enlaces a { color: rgba(255, 255, 255, .82); font-weight: 600; }
.franja-aviso__enlaces a:hover { color: #fff; }

.cabecera__barra { border-bottom: 1px solid var(--linea); }
.cabecera__interior {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
    transition: padding .2s ease;
}
.cabecera.esta-fija .cabecera__interior { padding-top: 10px; padding-bottom: 10px; }

.marca { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.marca__logo { max-height: 40px; width: auto; }
.marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    padding-left: 12px;
    border-left: 1px solid var(--linea);
}
/* El nombre ya está en el logo: se conserva sólo para lectores de
   pantalla y para que el motor pueda escribir el nombre del comercio
   cuando el cliente lo cargue en el backoffice. */
.marca__nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.marca__bajada {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* Buscador principal: la pieza más usada del sitio, por eso ocupa el centro */
.buscador-barra {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    /* Marco en carbón para que el rojo del botón sea lo que salta. */
    border: 2px solid var(--carbon);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo);
}
.buscador-barra__rubro {
    flex: 0 0 auto;
    max-width: 190px;
    padding: 10px 12px;
    border: 0;
    border-right: 1px solid var(--linea);
    background: var(--fondo-suave);
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-media);
    cursor: pointer;
}
.buscador-barra__rubro:focus { outline: none; }
.buscador-barra__entrada {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 0;
    font-size: 14px;
}
.buscador-barra__entrada:focus { outline: none; }
.buscador-barra__boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    border: 0;
    background: var(--marca);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease;
}
.buscador-barra__boton:hover { background: var(--marca-tinta); }

.cabecera__acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.accion {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: var(--radio);
    color: var(--tinta);
    transition: background .16s ease;
}
.accion:hover { background: var(--fondo-suave); color: var(--marca); }
.accion__icono { position: relative; display: inline-flex; }
.accion__cuerpo { display: flex; flex-direction: column; line-height: 1.15; }
.accion__sobre { font-size: 11px; color: var(--tinta-suave); }
.accion__valor { font-size: 13.5px; font-weight: 700; }
.accion__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.navegacion__boton {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--fondo);
    cursor: pointer;
}
.navegacion__boton span {
    display: block;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px;
}

/* Barra de navegación + mega-menú */
.cabecera__nav { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cabecera__nav-interior {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 46px;
}
.cabecera.esta-fija .cabecera__nav { display: none; }

/* -------------------------------------------------------------------------
   Mega-menú de rubros

   El panel ocupa todo el ancho del contenedor y se arma en tres piezas:
   riel de familias (izquierda), cuadrícula de rubros de la familia elegida
   (centro) y atajos del marketplace (derecha).

   Las familias no vienen del API: se deducen del nombre de cada categoría
   (`familiaRubro` en el motor), así que el menú se reordena solo a medida
   que cambia el catálogo y nunca muestra un grupo vacío. Con pocas
   categorías el riel queda corto y la cuadrícula ocupa el resto: el panel
   se ve completo igual, sin depender de imágenes que quizá no existan.
   ------------------------------------------------------------------------- */
.cabecera__nav-interior { position: relative; }
/* El panel se ancla al contenedor, no al botón: por eso `static`. */
.rubros { position: static; flex-shrink: 0; }
.rubros__boton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 18px;
    border: 0;
    background: var(--marca);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease;
}
.rubros__boton:hover,
.rubros__boton[aria-expanded="true"] { background: var(--marca-tinta); }

.rubros__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 130;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-top: 0;
    border-radius: 0 0 var(--radio-lg) var(--radio-lg);
    background: var(--fondo);
    box-shadow: var(--sombra-alta);
    animation: rubros-entrar .16s ease-out both;
}
@keyframes rubros-entrar {
    from { opacity: 0; transform: translateY(-8px); }
}

.rubros__cargando { margin: 0; padding: 26px 20px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }

.rubros__grilla {
    display: grid;
    grid-template-columns: minmax(212px, 250px) minmax(0, 1fr) minmax(196px, 236px);
    min-height: 336px;
    max-height: min(580px, 68vh);
}

/* --- Riel de familias --- */
.rubros__familias {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    overflow-y: auto;
    background: var(--fondo-suave);
    border-right: 1px solid var(--linea);
}
.rubros__familia {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 26px 9px 11px;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    color: var(--tinta);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.rubros__familia:hover { background: var(--marca-suave); color: var(--marca); }
.rubros__familia[aria-selected="true"] {
    background: var(--fondo);
    color: var(--marca);
    font-weight: 700;
    box-shadow: var(--sombra);
}
/* La flecha sólo aparece en la familia abierta: marca hacia dónde mirar. */
.rubros__familia::after {
    content: "";
    position: absolute;
    right: 10px;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .14s ease, transform .14s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m9%205%207%207-7%207%22/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m9%205%207%207-7%207%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.rubros__familia[aria-selected="true"]::after,
.rubros__familia:hover::after { opacity: .75; transform: translateX(0); }

.rubros__familia-icono {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    opacity: .85;
    -webkit-mask: var(--icono, none) no-repeat center / contain;
    mask: var(--icono, none) no-repeat center / contain;
}
.rubros__familia-nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rubros__familia-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--tinta-suave);
}
.rubros__familia[aria-selected="true"] .rubros__familia-count { color: var(--marca); }

/* --- Rubros de la familia abierta --- */
.rubros__detalle {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 20px 20px;
    overflow-y: auto;
}
.rubros__detalle-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--linea);
}
.rubros__detalle-titulo {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.rubros__detalle-meta { margin: 0; font-size: 12px; font-weight: 600; color: var(--tinta-suave); }

.rubros__cuadricula {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 6px;
    margin-top: 12px;
}
.rubros__rubro {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: var(--radio);
    color: var(--tinta);
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.rubros__rubro:hover {
    background: var(--marca-suave);
    border-color: var(--marca-borde);
    color: var(--marca);
    transform: translateY(-1px);
}
/* La miniatura es el ancla visual de la fila: con foto la usa; sin foto
   dibuja el ícono de la familia sobre un fondo tenue. Así conviven las
   categorías fotografiadas con las que sólo tienen nombre. */
.rubros__rubro-miniatura {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--fondo-suave);
    border: 1px solid var(--linea);
}
.rubros__rubro--con-imagen .rubros__rubro-miniatura {
    background: var(--categoria-imagen) center / cover no-repeat;
    border-color: transparent;
}
.rubros__rubro-icono {
    width: 20px;
    height: 20px;
    background-color: var(--marca);
    opacity: .8;
    -webkit-mask: var(--icono, none) no-repeat center / contain;
    mask: var(--icono, none) no-repeat center / contain;
}
.rubros__rubro--con-imagen .rubros__rubro-icono { display: none; }
.rubros__rubro-cuerpo { min-width: 0; }
.rubros__rubro-nombre {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.rubros__rubro-count {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tinta-suave);
}
.rubros__rubro:hover .rubros__rubro-count { color: var(--marca-clara); }

/* --- Atajos --- */
.rubros__atajos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-left: 1px solid var(--linea);
    background: linear-gradient(180deg, var(--fondo-suave), var(--fondo) 62%);
    overflow-y: auto;
}
.rubros__atajos-titulo {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.rubros__atajo {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: var(--radio);
    color: var(--tinta);
    font-size: 13px;
    font-weight: 700;
    transition: background .14s ease, color .14s ease;
}
.rubros__atajo:hover { background: var(--marca-suave); color: var(--marca); }
.rubros__atajo span {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--tinta-suave);
}
.rubros__atajo:hover span { color: var(--marca-clara); }
.rubros__cta {
    margin-top: auto;
    padding: 14px;
    border-radius: var(--radio);
    background: linear-gradient(142deg, #c40108, #6d0104);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    transition: transform .16s ease, box-shadow .16s ease;
}
.rubros__cta:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sombra-media); }
.rubros__cta span {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
}

/* =========================================================================
   Quiero mi tienda (/tienda)
   -------------------------------------------------------------------------
   Dos caminos con pesos distintos. La gratuita usa --marca porque es la
   que queremos que el comercio abra hoy; la certificada usa --acento, que
   en este sitio es el color de lo comercial. No compiten: una es el piso
   y la otra el techo, y la página se lee de arriba hacia abajo en ese
   orden (planes → condición → alta gratuita → contacto certificada).
   ========================================================================= */

.seccion__bajada {
    max-width: 56ch;
    margin: 8px auto 0;
    color: var(--tinta-media);
}

/* --- Los dos planes ---------------------------------------------------- */

.planes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}

.plan {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 28px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    box-shadow: var(--sombra);
}

/* La certificada es la de arriba en la escala, y se nota sin gritar:
   un borde de acento y una sombra más profunda alcanzan. */
.plan--destacado {
    border-color: color-mix(in srgb, var(--acento) 38%, #ffffff);
    box-shadow: var(--sombra-media);
}

.plan__cabeza { display: flex; flex-direction: column; gap: 6px; }

.plan__sello {
    align-self: flex-start;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.plan__sello--acento { background: var(--acento-suave); color: var(--acento-hondo); }

.plan__titulo { margin: 4px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

.plan__precio {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--acento-hondo);
}

.plan--destacado .plan__precio { color: var(--acento-hondo); }
.plan__bajada { margin: 4px 0 0; color: var(--tinta-media); }

.plan .lista-marcada { flex: 1 1 auto; margin: 0; }
.plan .boton { margin-top: auto; }

/* --- La condición de actividad, dicha de frente ------------------------ */

.condicion {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 32px;
    align-items: start;
    padding: 30px;
    border-radius: var(--radio-lg);
    background: var(--fondo-suave);
    border: 1px solid var(--linea);
}

.condicion__texto p { color: var(--tinta-media); }
.condicion__texto p + p { margin-bottom: 0; }

.condicion__linea { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.condicion__hito {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
    padding: 14px 16px;
    border-radius: var(--radio);
    background: var(--fondo);
    border: 1px solid var(--linea);
}

.condicion__hito b { grid-column: 2; font-size: 14px; }
.condicion__hito > span:last-child { grid-column: 2; font-size: 13px; color: var(--tinta-media); }

.condicion__marca {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fondo-hondo);
    color: var(--tinta-suave);
    font-weight: 800;
    font-size: 14px;
}

.condicion__hito--bien { border-color: color-mix(in srgb, var(--exito) 32%, #ffffff); }
.condicion__hito--bien .condicion__marca {
    background: color-mix(in srgb, var(--exito) 12%, #ffffff);
    color: var(--exito);
}

.condicion__hito--aviso { border-color: color-mix(in srgb, var(--acento) 38%, #ffffff); }
.condicion__hito--aviso .condicion__marca { background: var(--acento-suave); color: var(--acento-hondo); }

/* --- El asistente de alta ---------------------------------------------- */

.alta {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    box-shadow: var(--sombra-media);
}

.alta__cargando { margin: 0; text-align: center; color: var(--tinta-suave); }

.alta__pasos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.alta__paso {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radio);
    background: var(--fondo-suave);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tinta-suave);
    /* El paso en curso cambia de color y de fondo a la vez: en un
       indicador chico, un solo cambio no se ve. */
    transition: background .2s ease, color .2s ease;
}

.alta__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fondo-hondo);
    color: var(--tinta-suave);
    font-size: 11.5px;
    font-weight: 800;
}

.alta__paso.is-activo { background: var(--marca-suave); color: var(--marca); }
.alta__paso.is-activo .alta__numero { background: var(--marca); color: #ffffff; }

.alta__paso.is-hecho { color: var(--exito); }
.alta__paso.is-hecho .alta__numero {
    background: color-mix(in srgb, var(--exito) 14%, #ffffff);
    color: var(--exito);
}

.alta__intro { margin-bottom: 18px; }
.alta__intro h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.alta__intro p { margin: 0; color: var(--tinta-media); font-size: 14px; }

.alta__form { display: flex; flex-direction: column; gap: 16px; }

.alta__grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.alta__ancho { grid-column: 1 / -1; }
.alta__grilla .campo__etiqueta em { font-style: normal; font-weight: 500; color: var(--tinta-suave); }

.alta__titulo {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.alta__rubros { display: flex; flex-wrap: wrap; gap: 8px; }

.alta__rubro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 999px;
    background: var(--fondo);
    font-size: 13px;
    cursor: pointer;
}

.alta__rubro:has(input:checked) {
    border-color: var(--marca);
    background: var(--marca-suave);
    color: var(--marca-tinta);
    font-weight: 700;
}

.alta__rubros .campo { flex: 1 1 100%; }

.alta__pie {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid var(--linea);
}

/* El estado empuja los botones a los extremos: volver a la izquierda,
   avanzar a la derecha, y el mensaje ocupando el medio. */
.alta__pie .acceso__estado { flex: 1 1 auto; margin: 0; }
.alta__pie .boton[type="submit"] { margin-left: auto; }

.alta__medios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.alta__medio { display: flex; flex-direction: column; gap: 8px; }

.alta__previsualizacion {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-height: 150px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--fondo-suave);
    overflow: hidden;
}

.alta__previsualizacion--ancha { aspect-ratio: 16 / 9; }
.alta__miniatura { width: 100%; height: 100%; object-fit: cover; }

.alta__final { text-align: center; padding: 20px 0 10px; }

.alta__tilde {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--exito) 12%, #ffffff);
    color: var(--exito);
    font-size: 26px;
    font-weight: 800;
}

.alta__final h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.alta__final p { margin: 0 auto; max-width: 48ch; color: var(--tinta-media); }
.alta__quien { font-weight: 800; color: var(--marca); }

.alta__acciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

/* --- El asistente de publicación (/publicar) ---------------------------- */

/* Comparte la caja, los pasos y la grilla del alta de tienda: es el mismo
   gesto (un formulario largo cortado en pasos) y no tiene por qué verse
   como otra cosa. Acá va sólo lo que el alta no necesita. */

.publicar { max-width: 920px; }
.publicar .alta__pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Elegir qué se publica es la decisión que ordena todo lo que sigue: se
   muestra como cuatro tarjetas grandes, no como un desplegable. */
.publicar__tipos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.publicar__tipo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 18px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.publicar__tipo:hover,
.publicar__tipo:focus-visible {
    border-color: var(--marca);
    box-shadow: var(--sombra-media);
    transform: translateY(-2px);
}

.publicar__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radio);
    background: var(--marca-suave);
    color: var(--marca);
}

.publicar__tipo-nombre { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.publicar__tipo-bajada { font-size: 13px; line-height: 1.45; color: var(--tinta-media); }

.publicar__bloque { display: flex; flex-direction: column; gap: 12px; }

.publicar__ayuda {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--tinta-suave);
}

.publicar__nota {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radio);
    background: var(--fondo-suave);
    font-size: 13px;
    line-height: 1.5;
    color: var(--tinta-media);
}

.publicar__tilde {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: start;
    padding: 9px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.publicar__tilde:has(input:checked) {
    border-color: var(--marca);
    background: var(--marca-suave);
    color: var(--marca);
}

.publicar__fotos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.publicar__foto {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo-suave);
}

.publicar__foto img { width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; }
.publicar__foto--error { border-color: var(--alerta); }

/* Arrastre en curso: la ficha levantada se atenúa y la que recibirá el
   drop se marca con el aro de marca. */
.publicar__foto--arrastre { opacity: .45; }
.publicar__foto--destino {
    border-color: var(--marca);
    box-shadow: inset 0 0 0 2px var(--marca);
}

/* Mientras sube, la foto se ve pero se sabe que todavía no está guardada. */
.publicar__foto-estado {
    position: absolute;
    inset: auto 0 0 0;
    padding: 5px 8px;
    background: rgba(17, 17, 17, .72);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.publicar__foto-quitar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 17, .72);
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

/* Pie de la ficha: el lugar que ocupa la foto en la publicación. La
   primera dice "Portada"; las flechas reordenan sin depender del mouse,
   que es como se reordena también en un teléfono. */
.publicar__foto-pie {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 5px;
    border-top: 1px solid var(--linea);
    background: var(--fondo);
}

.publicar__foto-portada {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--marca);
    white-space: nowrap;
    overflow: hidden;
}

.publicar__foto-mover {
    flex: 0 0 22px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--linea-fuerte);
    border-radius: 6px;
    background: var(--fondo);
    color: var(--tinta-media);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.publicar__foto-mover:hover:not(:disabled) { border-color: var(--marca); color: var(--marca); }
.publicar__foto-mover:disabled { opacity: .35; cursor: default; }

/* --- Contacto de la tienda certificada --------------------------------- */

.certificada {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: start;
}

.certificada__texto p { color: var(--tinta-media); }
.certificada__form { padding: 26px; }
.certificada__nota { margin: 0; font-size: 13px; color: var(--tinta-suave); }
.certificada__form .alta__grilla { margin-bottom: 14px; }

/* --- Vigencia de la tienda, dentro de /cuenta -------------------------- */

.vigencia {
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    background: var(--fondo-suave);
}

.vigencia__titulo { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.vigencia__texto { margin: 0; font-size: 13.5px; color: var(--tinta-media); }

.vigencia--bien {
    border-color: color-mix(in srgb, var(--exito) 30%, #ffffff);
    background: color-mix(in srgb, var(--exito) 6%, #ffffff);
}
.vigencia--bien .vigencia__titulo { color: var(--exito); }

.vigencia--aviso { border-color: color-mix(in srgb, var(--acento) 40%, #ffffff); background: var(--acento-suave); }
.vigencia--aviso .vigencia__titulo { color: var(--acento-hondo); }

.vigencia--caida { border-color: var(--marca-borde); background: var(--marca-suave); }
.vigencia--caida .vigencia__titulo { color: var(--marca); }

/* Confirmación de envío: el estado de los formularios es rojo por
   defecto porque casi siempre es un error. Cuando salió bien, no. */
.acceso__estado--ok { color: var(--exito); font-weight: 700; }

@media (max-width: 900px) {
    .planes { grid-template-columns: 1fr; }
    .condicion { grid-template-columns: 1fr; padding: 24px; }
    .certificada { grid-template-columns: 1fr; }
    .publicar__tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .alta { padding: 20px; }
    .alta__grilla { grid-template-columns: 1fr; }
    .alta__medios { grid-template-columns: 1fr; }
    .alta__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alta__pie { flex-direction: column; align-items: stretch; }
    .alta__pie .boton { margin-left: 0; width: 100%; }
    .alta__pie .acceso__estado { order: -1; text-align: center; }
    .certificada__form { padding: 20px; }
    .publicar .alta__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .publicar__tipos { grid-template-columns: 1fr; }
    .publicar__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .rubros__panel { animation: none; }
    .rubros__rubro:hover,
    .rubros__cta:hover { transform: none; }
}

/* Sin lugar para la columna de atajos, el panel se queda con las dos
   piezas que sostienen la navegación. */
@media (max-width: 1080px) {
    .rubros__grilla { grid-template-columns: minmax(196px, 232px) minmax(0, 1fr); }
    .rubros__atajos { display: none; }
}

.navegacion { flex: 1 1 auto; min-width: 0; }
.navegacion__lista { display: flex; gap: 4px; flex-wrap: wrap; }
.navegacion__lista a {
    display: inline-block;
    padding: 12px 13px;
    color: var(--tinta);
    font-size: 13.5px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}
.navegacion__lista a:hover { color: var(--marca); }
.navegacion__lista a[aria-current="page"] { color: var(--marca); border-bottom-color: var(--marca); }

.cabecera__nav-extra { display: flex; gap: 16px; flex-shrink: 0; }
.cabecera__nav-extra a { font-size: 12.5px; font-weight: 700; color: var(--acento-hondo); }
.cabecera__nav-extra a:hover { color: var(--marca); }

/* =========================================================================
   Portada
   -------------------------------------------------------------------------
   A sangre y sin tarjeta: nada de panel flotante con borde, radio, sombra ni
   textura de fondo. Media pantalla de texto sobre blanco y media de fotos
   reales del catálogo, pegadas al filo derecho de la ventana.
   ========================================================================= */

.portada {
    overflow: hidden;              /* la foto puede pasarse del filo */
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
}
.portada__principal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* La fila manda la altura del hero. Sin un alto definido, las fotos del
       catálogo (que vienen a 1500 px) estiraban la portada media pantalla. */
    grid-template-rows: minmax(clamp(400px, 34vw, 500px), auto);
}
.portada__contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    /* El 100% del padding es el ancho de esta columna, o sea media pantalla.
       Restarle medio contenedor deja el texto arrancando en la misma línea
       vertical que el resto del sitio sin encerrar el hero en un ancho fijo. */
    padding: 56px 48px 56px max(24px, calc(100% - (var(--ancho) / 2 - 24px)));
}
.portada__titulo {
    max-width: 14ch;
    font-size: clamp(34px, 3.1vw, 50px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.028em;
    text-wrap: balance;
}
.portada__titulo strong { color: var(--marca); font-weight: inherit; }
.portada__texto {
    max-width: 46ch;
    margin-top: 20px;
    color: var(--tinta-media);
    font-size: 16px;
    line-height: 1.62;
    text-wrap: pretty;
}
.portada__acciones { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.portada__enlace {
    padding-bottom: 2px;
    color: var(--tinta);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--linea-fuerte);
    transition: color .2s ease, border-color .2s ease;
}
.portada__enlace:hover { color: var(--marca); border-color: var(--marca); }

/* Mosaico de publicaciones: sin gap real, las líneas de 1 px son el fondo
   asomando entre las fotos. */
.portada__escaparate {
    display: grid;
    grid-template-columns: 1.24fr .76fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    min-height: 0;
    /* Muchas fotos del catálogo vienen recortadas sobre blanco: sin esta
       línea el mosaico se derrama sobre la mitad del texto. */
    border-left: 1px solid var(--linea);
    background: var(--linea);
}
.portada-producto {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--fondo-hondo);
    color: #fff;
}
.portada-producto:first-child { grid-row: 1 / -1; }
.portada-producto:hover { color: #fff; }
/* Absoluta a propósito: así la foto llena su casilla sin que su alto real
   entre en el cálculo de la grilla. */
.portada-producto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.portada-producto:hover img { transform: scale(1.035); }
.portada-producto__velo {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* El velo mide lo que mide el texto, no un porcentaje de la foto: sobre
       los recortes en blanco del catálogo un degradado largo ensucia todo. */
    padding: 34px 16px 16px;
    background: linear-gradient(to top, rgba(22, 16, 13, .9), rgba(22, 16, 13, .55) 58%, rgba(22, 16, 13, 0));
}
.portada-producto:first-child .portada-producto__velo { padding: 48px 22px 22px; }
.portada-producto__categoria {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .74);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.portada-producto__nombre {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portada-producto:first-child .portada-producto__nombre { font-size: 17px; }
.portada-producto__precio { margin-top: 4px; font-size: 13px; font-weight: 700; }
.portada-producto--carga { background: var(--fondo-hondo); }

/* Franja de respaldo: una línea de garantías, sin cifras ni contadores. */
.portada__respaldo {
    border-top: 1px solid var(--linea);
    background: var(--fondo);
}
.portada__garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portada-garantia {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    color: var(--tinta);
    border-left: 1px solid var(--linea);
}
.portada-garantia:first-child { padding-left: 0; border-left: 0; }
a.portada-garantia:hover { color: var(--marca); }
.portada-garantia__icono { display: inline-flex; flex: 0 0 auto; color: var(--tinta-suave); }
.portada-garantia > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.portada-garantia b { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.portada-garantia small { color: var(--tinta-suave); font-size: 11.5px; line-height: 1.4; }

/* =========================================================================
   Categorías (chips del inicio)
   ========================================================================= */

/* Mosaico de rubros: usa una imagen optimizada cuando existe para la
   categoría y conserva estas placas de color como fallback para rubros
   nuevos. El nombre y la cantidad siempre salen del catálogo real. */
.categorias {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.categoria-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 174px;
    padding: 20px;
    border-radius: var(--radio);
    overflow: hidden;
    isolation: isolate;
    /* Tono por defecto; el motor asigna --tono-N a cada placa. El ángulo
       también cambia por tono: con la misma diagonal en las ocho placas,
       la franja se veía estampada. */
    --tono-a: #c40108;
    --tono-b: #6d0104;
    --giro: 142deg;
    --faceta: 118deg;
    --icono: none;
    /* Texto de la placa: casi todas son oscuras y llevan texto blanco; la
       dorada invierte el par para poder usar el amarillo del logo. */
    --placa-tinta: #fff;
    --placa-tenue: #fff;
    --pastilla-fondo: rgba(255, 255, 255, .94);
    --pastilla-tinta: var(--carbon);
    color: var(--placa-tinta);
    background:
        linear-gradient(var(--faceta), rgba(255, 255, 255, .10) 0 26%, transparent 26%),
        linear-gradient(calc(var(--faceta) + 182deg), rgba(0, 0, 0, .16) 0 34%, transparent 34%),
        radial-gradient(120% 82% at 86% 6%, rgba(255, 255, 255, .18), transparent 62%),
        linear-gradient(var(--giro), var(--tono-a), var(--tono-b));
    transition: transform .18s ease, box-shadow .18s ease;
}
.categoria-chip:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); color: var(--placa-tinta); }

.categoria-chip.categoria-chip--con-imagen {
    --placa-tinta: #fff;
    --placa-tenue: rgba(255, 255, 255, .86);
    --pastilla-fondo: rgba(255, 255, 255, .94);
    --pastilla-tinta: var(--carbon);
    background:
        linear-gradient(90deg, rgba(20, 14, 11, .88) 0%, rgba(20, 14, 11, .65) 45%, rgba(20, 14, 11, .12) 100%),
        linear-gradient(0deg, rgba(20, 14, 11, .74) 0%, transparent 72%),
        var(--categoria-imagen) center / cover no-repeat;
}

/* Tonos derivados de la paleta del logo. Los tres oscuros están bajados
   hasta que el blanco encima pase AA (el más claro da 5,7:1); el dorado va
   al revés —amarillo pleno con texto carbón, 11,6:1— para que el cuarto
   color del logo entre sin ensuciarse en un marrón. */
.categoria-chip--tono-1 { --tono-a: #c40108; --tono-b: #6d0104; --giro: 142deg; --faceta: 118deg; }
.categoria-chip--tono-2 { --tono-a: #8a4700; --tono-b: #4f2800; --giro: 128deg; --faceta: 146deg; }
.categoria-chip--tono-3 { --tono-a: #3b302a; --tono-b: #17110e; --giro: 152deg; --faceta: 100deg; }
.categoria-chip--tono-4 {
    --tono-a: #fdcf00;
    --tono-b: #e0a300;
    --giro: 134deg;
    --faceta: 132deg;
    --placa-tinta: var(--carbon);
    --placa-tenue: rgba(33, 25, 21, .78);
    --pastilla-fondo: var(--carbon);
    --pastilla-tinta: #fff;
}

.categoria-chip__icono {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    opacity: .92;
    -webkit-mask: var(--icono) no-repeat center / contain;
    mask: var(--icono) no-repeat center / contain;
}

.categoria-chip__nombre {
    display: block;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.categoria-chip__count {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--placa-tenue);
}
.categoria-chip__accion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--pastilla-fondo);
    color: var(--pastilla-tinta);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: transform .16s ease;
}
.categoria-chip:hover .categoria-chip__accion { transform: translateX(2px); }

/* Íconos por familia de rubro. La clase la pone el motor sobre cualquier
   pieza que muestre un rubro —placa del inicio, riel y cuadrícula del
   mega-menú— y sólo define `--icono`: cada componente decide el tamaño y
   el color con los que dibuja la máscara. */
.rubro-familia--alimentos { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%208.8h16l-1.5%2010.8a1.2%201.2%200%200%201-1.2%201H6.7a1.2%201.2%200%200%201-1.2-1zM8.6%208.8%2012%203.4l3.4%205.4M9.6%2012.6v4.4M14.4%2012.6v4.4%22/%3E%3C/svg%3E"); }
.rubro-familia--cuidado { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9.4%209.6h5.2v9.9a1.3%201.3%200%200%201-1.3%201.3h-2.6a1.3%201.3%200%200%201-1.3-1.3z%22/%3E%3Cpath%20d=%22M10.9%209.6V7h2.2v2.6M13.1%207h2.7V4.4%22/%3E%3Cpath%20d=%22M11%2013.4h2.6%22/%3E%3C/svg%3E"); }
.rubro-familia--deportes { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%208.6v6.8M7.2%206.4v11.2M16.8%206.4v11.2M20%208.6v6.8M7.2%2012h9.6%22/%3E%3C/svg%3E"); }
.rubro-familia--descartables { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6.6%203.4h7.1l4.3%204.3v12.9H6.6z%22/%3E%3Cpath%20d=%22M13.7%203.4v4.3H18%22/%3E%3Cpath%20d=%22M9.4%2012.4h5.4M9.4%2016h5.4%22/%3E%3C/svg%3E"); }
.rubro-familia--destacados { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%203.6%202.6%205.4%205.9.8-4.3%204.2%201%205.9-5.2-2.8-5.2%202.8%201-5.9L3.5%209.8l5.9-.8z%22/%3E%3C/svg%3E"); }
.rubro-familia--general { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.6%204.2h7.3l9.1%209.1-7.3%207.3-9.1-9.1z%22/%3E%3Ccircle%20cx=%227.6%22%20cy=%228.2%22%20r=%221.2%22/%3E%3C/svg%3E"); }
.rubro-familia--herramientas { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M15.4%203.4a5%205%200%200%200-4.8%206.2L3.2%2017l1.9%201.9%207.4-7.4a5%205%200%200%200%206.2-4.8l-2.9%202.9-2.6-.7-.7-2.6z%22/%3E%3C/svg%3E"); }
.rubro-familia--hogar { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2012.4V9.6a2.2%202.2%200%200%201%202.2-2.2h11.6A2.2%202.2%200%200%201%2020%209.6v2.8M3%2012.4h18v5.2H3zM6.2%2017.6v2.2M17.8%2017.6v2.2%22/%3E%3C/svg%3E"); }
.rubro-familia--inmuebles { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2010.6%2012%204l9%206.6V20a1%201%200%200%201-1%201h-4.5v-6.2h-7V21H4a1%201%200%200%201-1-1z%22/%3E%3C/svg%3E"); }
.rubro-familia--limpieza { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.4c3%203.7%204.6%206.3%204.6%208.5a4.6%204.6%200%201%201-9.2%200c0-2.2%201.6-4.8%204.6-8.5z%22/%3E%3Cpath%20d=%22M18.6%204.2v2.6M17.3%205.5h2.6%22/%3E%3C/svg%3E"); }
.rubro-familia--mascotas { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2013.8c2.6%200%204.7%201.9%204.7%203.8S14.8%2021%2012%2021s-4.7-1.5-4.7-3.4%202.1-3.8%204.7-3.8z%22/%3E%3Cellipse%20cx=%227.4%22%20cy=%2210.4%22%20rx=%221.7%22%20ry=%222.2%22/%3E%3Cellipse%20cx=%2216.6%22%20cy=%2210.4%22%20rx=%221.7%22%20ry=%222.2%22/%3E%3Cellipse%20cx=%2210.2%22%20cy=%226.4%22%20rx=%221.5%22%20ry=%222%22/%3E%3Cellipse%20cx=%2213.8%22%20cy=%226.4%22%20rx=%221.5%22%20ry=%222%22/%3E%3C/svg%3E"); }
.rubro-familia--nautica { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%207.5V21M12%207.5a2.2%202.2%200%201%200%200-4.4%202.2%202.2%200%200%200%200%204.4M4.8%2013a7.2%207.2%200%200%200%2014.4%200M8.6%2011H5.2M18.8%2011h-3.4%22/%3E%3C/svg%3E"); }
.rubro-familia--ropa { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8.4%203.6%205%205.6%203%209l3.4%202.2V20.4h11.2V11.2L21%209l-2-3.4-3.4-2a3.7%203.7%200%200%201-7.2%200z%22/%3E%3C/svg%3E"); }
.rubro-familia--tecnologia { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.4%205h17.2v10.6H3.4zM9%2020h6M12%2015.6V20%22/%3E%3C/svg%3E"); }
.rubro-familia--vehiculos { --icono: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2012.5h16l-1.6-4.7A2%202%200%200%200%2016.5%206.4h-9a2%202%200%200%200-1.9%201.4z%22/%3E%3Cpath%20d=%22M4%2012.5V18h16v-5.5%22/%3E%3Cpath%20d=%22M7%2018v2M17%2018v2%22/%3E%3Ccircle%20cx=%227.5%22%20cy=%2215.2%22%20r=%221%22/%3E%3Ccircle%20cx=%2216.5%22%20cy=%2215.2%22%20r=%221%22/%3E%3C/svg%3E"); }

/* =========================================================================
   Tarjeta de publicación
   ========================================================================= */

.tarjeta {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tarjeta:hover {
    border-color: var(--marca-borde);
    box-shadow: var(--sombra-media);
    transform: translateY(-3px);
}

.tarjeta__enlace { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; }
.tarjeta__enlace:hover { color: inherit; }

.tarjeta__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--fondo-hondo);
    overflow: hidden;
}
.tarjeta__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tarjeta:hover .tarjeta__media img { transform: scale(1.035); }
.tarjeta__sinfoto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 12.5px;
    color: var(--tinta-suave);
}

.tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    padding: 13px 14px 12px;
}
.tarjeta__categoria {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.tarjeta__titulo {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tarjeta__marca { font-size: 12.5px; color: var(--tinta-media); }
.tarjeta__precio {
    margin-top: auto;
    padding-top: 6px;
    font-size: 19px;
    font-weight: 800;
    color: var(--marca);
    letter-spacing: -.02em;
}
.tarjeta__precio--consultar { font-size: 14px; font-weight: 700; color: var(--tinta-media); }

.tarjeta__reloj {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--acento-hondo);
    font-variant-numeric: tabular-nums;
}

.tarjeta__vendedor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--linea);
    font-size: 11.5px;
    color: var(--tinta-media);
}
.tarjeta__vendedor-nombre {
    font-weight: 700;
    color: var(--tinta);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tarjeta__vendedor-lugar { color: var(--tinta-suave); }

.tarjeta__pie { padding: 0 14px 14px; }
.tarjeta__pie .boton { width: 100%; }
.tarjeta__agotado {
    display: block;
    padding: 8px;
    border-radius: var(--radio);
    background: var(--fondo-suave);
    color: var(--tinta-suave);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}

/* Etiquetas sobre la foto */
.etiquetas {
    position: absolute;
    top: 9px;
    left: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100% - 18px);
}
.etiqueta {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .94);
    color: var(--tinta);
    box-shadow: var(--sombra);
}
/* "Nuevo" es la condición corriente: va en neutro para no gritar en
   todas las tarjetas. "Usado" se lleva el dorado del logo porque es el
   dato que el comprador busca. La promo, el rojo. */
.etiqueta--nuevo { background: rgba(33, 25, 21, .82); color: #fff; }
.etiqueta--usado { background: var(--dorado); color: var(--carbon); }
.etiqueta--marca { background: var(--marca); color: #fff; }
.etiqueta--tenue { background: rgba(33, 25, 21, .78); color: #fff; }
/* Publicación con menos de 48 horas: el "Nuevo" pasa a verde para
   distinguir la novedad real de la condición, que está en todas. */
.etiqueta--reciente { background: var(--exito); color: #fff; }

/* Insignia de vendedor */
.insignia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.insignia--oficial { background: var(--marca-suave); color: var(--marca-tinta); border: 1px solid var(--marca-borde); }
.insignia--particular { background: var(--fondo-suave); color: var(--tinta-media); border: 1px solid var(--linea-fuerte); }
.insignia__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

/* =========================================================================
   Rieles y grillas de publicaciones
   ========================================================================= */

.riel { display: grid; gap: var(--gap); }
.riel--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.riel--rubro { grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; }

.grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: var(--gap);
}

/* Vista en lista del catálogo */
.grilla--lista { grid-template-columns: 1fr; gap: 12px; }
.grilla--lista .tarjeta { flex-direction: row; }
.grilla--lista .tarjeta__enlace { flex-direction: row; flex: 1 1 auto; }
.grilla--lista .tarjeta__media { flex: 0 0 220px; aspect-ratio: 4 / 3; }
.grilla--lista .tarjeta__cuerpo { padding: 16px 18px; }
.grilla--lista .tarjeta__titulo { -webkit-line-clamp: 3; font-size: 16px; }
.grilla--lista .tarjeta__pie {
    display: flex;
    align-items: center;
    flex: 0 0 190px;
    padding: 16px;
}
.grilla--lista .esqueleto { flex-direction: row; }

/* =========================================================================
   Bloque doble (ofertas + columna lateral)
   ========================================================================= */

.bloque-doble {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--gap);
    align-items: start;
}
.bloque-doble__principal { min-width: 0; }

.panel {
    padding: 18px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}
.panel__titulo {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--linea);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta);
}

.lista-mini { display: flex; flex-direction: column; gap: 4px; }
.lista-mini__enlace {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px;
    border-radius: var(--radio);
    color: var(--tinta);
    transition: background .16s ease;
}
.lista-mini__enlace:hover { background: var(--fondo-suave); color: var(--tinta); }
.lista-mini__media {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo-hondo);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lista-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.lista-mini__sinfoto { color: var(--tinta-suave); font-size: 15px; }
.lista-mini__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-mini__titulo {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lista-mini__precio { font-size: 13.5px; font-weight: 800; color: var(--marca); }

/* =========================================================================
   Bloques por rubro
   ========================================================================= */

.rubro__encabezado {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--marca);
    margin-bottom: 18px;
}
.rubro__titulo {
    font-size: clamp(19px, 2.2vw, 24px);
    color: var(--carbon);
    flex-shrink: 0;
}
.rubro__filtros { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.rubro__filtro {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta-media);
}
.rubro__filtro:hover { background: var(--marca-suave); color: var(--marca); }

.rubro__cuerpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--gap); }
.rubro__aparte { display: flex; flex-direction: column; gap: 12px; }
/* Cuando el rubro no tiene subcategorías, el banner ocupa la columna
   entera en vez de dejar un hueco debajo. */
.rubro__promo { flex: 1 1 auto; }

.rubro__promo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
    min-height: 190px;
    padding: 20px;
    border-radius: var(--radio);
    color: #fff;
    background-image:
        linear-gradient(180deg, rgba(18, 14, 12, .08) 20%, rgba(18, 14, 12, .86) 100%),
        url('../image/home/promo-mascotas.webp');
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.rubro__promo--dos {
    background-image:
        linear-gradient(180deg, rgba(6, 7, 9, .02) 18%, rgba(6, 7, 9, .9) 100%),
        url('../image/home/promo-cubiertas.webp');
}
.rubro__promo--tres {
    background-image:
        linear-gradient(180deg, rgba(36, 22, 16, .02) 18%, rgba(36, 22, 16, .88) 100%),
        url('../image/home/promo-perfumeria.webp');
}
.rubro__promo--cuatro {
    background-image:
        linear-gradient(180deg, rgba(12, 21, 22, .02) 18%, rgba(12, 21, 22, .88) 100%),
        url('../image/home/promo-limpieza.webp');
}
.rubro__promo-overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.rubro__promo-titulo {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
}

.rubro__categorias {
    padding: 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}
.rubro__categorias-titulo {
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.rubro__categorias-lista { display: flex; flex-direction: column; }
.rubro__categorias-lista a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta);
    border-bottom: 1px solid var(--linea);
}
.rubro__categorias-lista li:last-child a { border-bottom: 0; }
.rubro__categorias-lista a:hover { color: var(--marca); padding-left: 5px; }

/* =========================================================================
   Franjas de llamada a la acción
   ========================================================================= */

.franja-cta {
    padding: 46px 0;
    background: linear-gradient(120deg, var(--carbon-hondo) 0%, var(--carbon) 42%, var(--marca) 132%);
    color: #fff;
}
.franja-cta__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.franja-cta__interior > div { max-width: 62ch; }
.franja-cta p { color: rgba(255, 255, 255, .84); }
.franja-cta .titulo-display { color: #fff; }

.franja-cta--suave { background: var(--fondo-hondo); color: var(--tinta); }
.franja-cta--suave p { color: var(--tinta-media); }
.franja-cta--suave .titulo-display { color: var(--tinta); }

/* Franja de beneficios */
.franja {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap);
}
.franja__item {
    padding: 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}
.franja__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: var(--radio);
    background: var(--marca-suave);
    color: var(--marca);
}
.franja__item h3 { font-size: 15.5px; margin-bottom: 5px; }
.franja__item p { font-size: 13.5px; color: var(--tinta-media); }

/* =========================================================================
   Vendedores
   ========================================================================= */

.vendedores { padding: 30px 0 46px; }
.vendedores__estado { padding: 30px 0; color: var(--tinta-media); }

.filtros-linea {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px;
    margin-bottom: 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}
.filtros-linea .campo--ancho { flex: 1 1 260px; }

.vendedores__lista,
.vendedores-riel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: var(--gap);
}

.vendedor-tarjeta {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.vendedor-tarjeta:hover {
    border-color: var(--marca-borde);
    box-shadow: var(--sombra-media);
    transform: translateY(-3px);
}
.vendedor-tarjeta__enlace {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    color: var(--tinta);
}
.vendedor-tarjeta__enlace:hover { color: var(--tinta); }
.vendedor-tarjeta__media {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
}
.vendedor-tarjeta__media img { width: 100%; height: 100%; object-fit: cover; }
.vendedor-tarjeta__inicial {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--marca);
}
.vendedor-tarjeta__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.vendedor-tarjeta__nombre { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.vendedor-tarjeta__lugar { font-size: 12.5px; color: var(--tinta-media); }
.vendedor-tarjeta__conteo { font-size: 12px; font-weight: 700; color: var(--marca); }

/* Ficha de un vendedor */
.vendedor-ficha__cabecera { margin-bottom: 30px; }
.vendedor-ficha__identidad { display: flex; gap: 22px; align-items: flex-start; margin-top: 16px; flex-wrap: wrap; }
.vendedor-ficha__logo {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
}
.vendedor-ficha__logo img { width: 100%; height: 100%; object-fit: cover; }
.vendedor-ficha__datos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.vendedor-ficha__lugar { font-size: 14px; color: var(--tinta-media); }
.vendedor-ficha__texto { max-width: 68ch; color: var(--tinta-media); white-space: pre-line; }
.vendedor-ficha__conteo { font-size: 13px; font-weight: 700; color: var(--marca); }
.vendedor-ficha__canales { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#vendedor-ficha .titulo { margin: 26px 0 18px; }

/* Caja de vendedor en la ficha de la publicación
   -------------------------------------------------------------------------
   Sin bordes: vive dentro del resumen, que ya es una caja, así que la
   tarjeta se apoya sólo en una superficie suave y en la tipografía. Los
   tres tipos de vendedor se distinguen por el tinte de la superficie y el
   color de la línea de tipo; ningún elemento interno lleva marco. */
.vendedor-caja {
    margin-top: 18px;
    padding: 16px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--fondo-suave);
}
.vendedor-caja--certificado {
    background: color-mix(in srgb, var(--exito) 5%, var(--fondo));
}
.vendedor-caja--comercio {
    background: color-mix(in srgb, var(--marca) 3%, var(--fondo));
}
/* --particular usa la superficie neutra de la base */

/* Rótulo con el mismo aire que los overlines de la ficha */
.vendedor-caja__titulo {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.vendedor-caja__fila { display: flex; align-items: center; gap: 12px; }

/* Avatar: círculo limpio, sin anillo — la profundidad la da la sombra */
.vendedor-caja__logo {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--fondo);
    box-shadow: 0 1px 5px rgba(33, 25, 21, .14);
}
.vendedor-caja__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
    display: block;
}
.vendedor-caja__logo .vendedor-tarjeta__inicial {
    font-size: 19px;
    font-weight: 800;
    color: var(--tinta);
    line-height: 1;
}

/* Sello de verificación: único elemento que se superpone al avatar. El
   aro replica la superficie de la tarjeta para separarlo sin dibujar un
   borde más. */
.vendedor-caja__sello {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--exito);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--exito) 5%, var(--fondo));
}

.vendedor-caja__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.vendedor-caja__nombre {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.25;
    text-decoration: none;
    transition: color .15s ease;
}
.vendedor-caja__nombre:hover { color: var(--marca); }

/* Tipo de vendedor: texto con ícono, el color es el único código */
.vendedor-caja__tipo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.vendedor-caja__tipo--certificado { color: var(--exito); }
.vendedor-caja__tipo--comercio { color: var(--marca-tinta); }
.vendedor-caja__tipo--particular { color: var(--tinta-media); }

.vendedor-caja__lugar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--tinta-media);
    line-height: 1;
}

/* Línea de confianza exclusiva del certificado */
.vendedor-caja__confianza {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--exito);
}

/* Acciones: el enlace es el mismo componente flecha del sitio; WhatsApp
   queda como botón compacto de ícono para no sumar un bloque pesado. */
.vendedor-caja__acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}
.vendedor-caja__whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    transition: background .15s ease, transform .15s ease;
}
.vendedor-caja__whatsapp:hover { background: #1fb855; transform: translateY(-1px); }

/* Íconos vectoriales de la tarjeta: siluetas por máscara, coloreadas con
   currentColor para que acompañen al texto que las sostiene. */
.vendedor-caja__icono {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}
.vendedor-caja__icono--check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.vendedor-caja__icono--escudo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
}
.vendedor-caja__icono--pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.vendedor-caja__icono--tienda {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-11 4H6v-4h4v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-11 4H6v-4h4v4z'/%3E%3C/svg%3E");
}
.vendedor-caja__icono--persona {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.vendedor-caja__icono--whatsapp {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}

/* =========================================================================
   Encabezados de página
   ========================================================================= */

.pagina-encabezado { padding: 34px 0 24px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.pagina-encabezado__bajada { max-width: 72ch; margin-top: 8px; color: var(--tinta-media); }
.pagina-encabezado--hero {
    padding: 66px 0;
    border: 0;
    background: linear-gradient(120deg, var(--carbon-hondo) 0%, var(--carbon) 42%, var(--marca) 132%);
    color: #fff;
}
.pagina-encabezado--hero .pagina-encabezado__bajada { color: rgba(255, 255, 255, .84); }

.pagina { padding: 34px 0 50px; }
.pagina__encabezado { margin-bottom: 24px; }
.pagina__bajada { max-width: 70ch; margin-top: 8px; color: var(--tinta-media); }

/* =========================================================================
   Catálogo
   ========================================================================= */

.catalogo { padding: 26px 0 50px; }
.catalogo__grilla { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--gap); align-items: start; }

.catalogo__abrir-filtros { display: none; }

.filtros {
    position: sticky;
    top: 112px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}
.filtros__grupo { display: flex; flex-direction: column; gap: 8px; }
.filtros__titulo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta);
}
.filtros__rango { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtros__pie { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--linea); }
.filtros__encabezado { display: grid; gap: 8px; }
.filtros__ayuda, .filtros__estado { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tinta-media); }
.filtros__estado { color: var(--marca-tinta); }
.filtros__facetas { display: grid; gap: 16px; }
.faceta { min-width: 0; border-top: 1px solid var(--linea); padding-top: 12px; }
.faceta__cabecera { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--tinta); font-size: 13px; font-weight: 800; }
.faceta__cabecera::after { content: '+'; margin-left: auto; font-size: 18px; font-weight: 500; }
.faceta[open] > .faceta__cabecera::after { content: '−'; }
.faceta__cabecera::-webkit-details-marker { display: none; }
.faceta__seleccion { color: var(--marca-tinta); font-size: 11px; font-variant-numeric: tabular-nums; }
.faceta__buscar { margin-top: 12px; font-size: 12px; }
.faceta__opciones { display: grid; gap: 4px; max-height: 228px; overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; scrollbar-width: thin; }
.faceta__opcion { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--tinta-media); }
.faceta__opcion:hover { background: var(--fondo-suave); }
.faceta__opcion:has(input:checked) { background: var(--marca-suave); color: var(--marca-tinta); }
.faceta__opcion:has(input:disabled) { color: var(--tinta-suave); cursor: default; }
.faceta__opcion input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--marca); }
.faceta__nombre { overflow-wrap: anywhere; }
.faceta__cantidad { margin-left: auto; padding-left: 4px; color: var(--tinta-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.faceta__limpiar { margin-top: 8px; padding: 4px 0; border: 0; background: none; color: var(--marca-tinta); font: inherit; font-size: 12px; cursor: pointer; }
.faceta__vacia { margin: 8px 0 0; color: var(--tinta-suave); font-size: 12px; }
.filtros .campo__control { min-width: 0; }
.filtros[aria-busy="true"] .faceta__cantidad { visibility: hidden; }
@media (min-width: 1001px) {
    .filtros { max-height: calc(100dvh - 136px); overflow-y: auto; scrollbar-width: thin; }
}

.catalogo__resultados { min-width: 0; }
.catalogo__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}
.catalogo__resumen { font-size: 13.5px; font-weight: 600; color: var(--tinta-media); }
.catalogo__vista { display: flex; gap: 4px; }
.catalogo__vista-boton {
    padding: 6px 13px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--fondo);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tinta-media);
    cursor: pointer;
    transition: all .16s ease;
}
.catalogo__vista-boton[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }

.catalogo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.catalogo__chips:empty { margin-bottom: 0; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--marca-borde);
    border-radius: 999px;
    background: var(--marca-suave);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--marca-tinta);
}
.chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.chip button:hover { background: var(--marca-tinta); }

.paginacion { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 30px; }
.paginacion button {
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--fondo);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tinta);
    cursor: pointer;
    transition: all .16s ease;
}
.paginacion button:hover:not(:disabled) { border-color: var(--marca); color: var(--marca); }
.paginacion button:disabled { opacity: .4; cursor: not-allowed; }
.paginacion button[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.paginacion__salto { display: inline-flex; align-items: center; padding: 0 4px; color: var(--tinta-suave); }

/* =========================================================================
   Ficha de publicación
   ========================================================================= */

.ficha { padding: 26px 0 50px; }
.ficha__estado { padding: 40px 0; color: var(--tinta-media); }
.ficha__volver { display: inline-block; margin-bottom: 18px; font-size: 13.5px; font-weight: 600; }

.ficha__superior { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }

/* La galería tiene dos formas, y las elige el JS según el rubro:
   "mosaico" para inmuebles y vehículos —la foto es el argumento de venta,
   así que ocupa el ancho de la ficha— y "tira" para el resto del catálogo
   —miniaturas apiladas al costado y la pieza en grande, sin recortar—. */
.galeria { display: grid; gap: 8px; }

.galeria__item {
    position: relative;
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
}
.galeria__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__item:hover { border-color: var(--marca); }

/* Velo "+N" sobre la última plaza cuando quedan fotos afuera */
.galeria__velo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 15, 20, .55);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Acceso a todas las fotos, sobre la principal del mosaico */
.galeria__todas {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(8, 15, 20, .78);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    transition: background .15s ease;
}
.galeria__item--principal:hover .galeria__todas { background: rgba(8, 15, 20, .94); }

/* Mosaico: principal + hasta cuatro al costado, todo a una misma altura.
   La altura la fija el mosaico entero con aspect-ratio, no las fotos: si
   la dejara librada al contenido, la columna del costado se estiraría con
   el alto natural de sus imágenes y pasaría de largo a la principal. */
.galeria--mosaico {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    aspect-ratio: 2.59 / 1;
}
.galeria--mosaico .galeria__item--principal { aspect-ratio: auto; height: 100%; min-height: 0; }
.galeria__costado {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.galeria__costado .galeria__item { aspect-ratio: auto; height: 100%; min-height: 0; }
/* Con una o dos fotos al costado la columna doble deja huecos: una sola */
.galeria__costado[data-fotos="1"],
.galeria__costado[data-fotos="2"] { grid-template-columns: minmax(0, 1fr); }
.galeria__costado[data-fotos="1"] { grid-template-rows: minmax(0, 1fr); }
/* Con tres, la primera toma la fila entera y las otras dos se reparten */
.galeria__costado[data-fotos="3"] > .galeria__item:first-child { grid-column: 1 / -1; }

/* Tira: miniaturas apiladas + la foto grande, sin recortar. La altura la
   manda la foto grande y la columna de miniaturas la sigue —de ahí que
   vaya absoluta: como columna del grid, su contenido entraba a discutir
   el alto de la fila y terminaba estirando la foto—. Las seis plazas se
   reparten esa altura, así la tira termina siempre donde termina la foto. */
.galeria--tira {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding-left: 92px;
}
.galeria__tira {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 84px;
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
.galeria__miniatura {
    position: relative;
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--fondo);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.galeria__miniatura img { display: block; width: 100%; height: 100%; object-fit: contain; }
.galeria__miniatura:hover { border-color: var(--marca); }
.galeria__miniatura[aria-current="true"] {
    border-color: var(--marca);
    box-shadow: inset 0 0 0 1px var(--marca);
}
.galeria__miniatura .galeria__velo { font-size: 14px; }
.galeria--tira .galeria__item--principal { aspect-ratio: 4 / 3; }

/* Una pieza se muestra entera —la foto viene sobre fondo blanco y
   recortarla se come el producto—; un inmueble o un vehículo, al revés,
   llenan el cuadro. */
.galeria--pieza .galeria__item--principal img { object-fit: contain; padding: 16px; }

/* Publicación con una sola foto: no hay galería que armar */
.galeria--sola { grid-template-columns: minmax(0, 1fr); }
.galeria--sola .galeria__item--principal { aspect-ratio: 16 / 10; }
.galeria--sola.galeria--pieza .galeria__item--principal { aspect-ratio: 4 / 3; }

.galeria__sinfoto {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio);
    color: var(--tinta-suave);
    font-size: 13.5px;
}

.ficha__resumen {
    position: sticky;
    top: 112px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.ficha__resumen .etiquetas { position: static; gap: 8px; margin-bottom: 24px; }
.ficha__resumen .etiqueta { padding: 6px 11px; border-radius: 999px; font-size: 11px; line-height: 1.3; }
.ficha__resumen .etiqueta--categoria { background: var(--marca); color: #fff; }
.ficha__resumen .etiqueta--tenue { background: #efeeed; color: #595959; }
.ficha__resumen .ficha__marca { font-weight: 500; color: #666; letter-spacing: .04em; }
.ficha__resumen .ficha__nombre { margin: 6px 0 26px; font-weight: 800; letter-spacing: -.045em; overflow-wrap: anywhere; }
.ficha__resumen .ficha__precio { margin-bottom: 22px; }
.ficha__resumen .ficha__precio dt { margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #666; }
.ficha__resumen .ficha__precio dd { font-size: clamp(32px, 3.2vw, 42px); font-weight: 700; overflow-wrap: anywhere; }
.ficha__resumen .ficha__stock--consulta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    color: var(--tinta);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
}
.ficha__resumen .ficha__stock--consulta::before {
    content: '';
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--marca-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df0209' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8l-6 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ficha__resumen .ficha__compra:has(> :not([hidden])) { margin-top: 18px; }
.ficha__resumen .ficha__referencia {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--linea);
    color: #707070;
    font-size: 12px;
}
.ficha__referencia-icono { flex: 0 0 18px; width: 18px; height: 20px; }

.ficha-compartir { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea); }
.ficha-compartir h2 { margin-bottom: 12px; color: var(--tinta-media); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ficha-compartir__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-compartir__opcion {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--fondo);
    color: var(--tinta-media);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ficha-compartir__opcion:hover { background: var(--marca-suave); border-color: var(--marca-borde); color: var(--marca-tinta); }
.ficha-compartir__opcion:active { background: var(--fondo-suave); }
.ficha-compartir__opcion:disabled { opacity: .6; cursor: wait; }
.ficha-compartir__opcion svg, .ficha-compartir__opcion .vendedor-caja__icono { flex: 0 0 20px; width: 20px; height: 20px; }
.ficha-compartir__estado { color: var(--tinta-media); font-size: 12px; line-height: 1.5; }
.ficha-compartir__estado:not(:empty) { margin-top: 10px; }
.ficha-compartir__manual { display: block; margin-top: 10px; color: var(--tinta-media); font-size: 12px; }
.ficha-compartir__manual input { width: 100%; min-width: 0; margin-top: 6px; font-size: 12px; }

/* El vendedor forma parte del resumen, sin una segunda tarjeta de fondo. */
.ficha__resumen .vendedor-caja {
    margin-top: 26px;
    padding: 24px 0 0;
    border-top: 1px solid var(--linea);
    border-radius: 0;
    background: transparent;
}
.ficha__resumen .vendedor-caja__fila { gap: 18px; }
.ficha__resumen .vendedor-caja__logo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border: 1px solid var(--marca-clara);
    background: var(--fondo-suave);
    box-shadow: none;
}
.ficha__resumen .vendedor-caja__logo .vendedor-tarjeta__inicial { font-size: 30px; font-weight: 600; }
.ficha__resumen .vendedor-caja__cuerpo { gap: 9px; }
.ficha__resumen .vendedor-caja__nombre { font-size: 19px; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; }
.ficha__resumen .vendedor-caja__tipo {
    padding: 6px 10px;
    border: 1px solid var(--marca-borde);
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca-tinta);
    font-size: 11px;
    font-weight: 500;
}
.ficha__resumen .vendedor-caja__tipo--particular { border-color: var(--linea); background: var(--fondo-suave); color: var(--tinta-media); }
.ficha__resumen .vendedor-caja__lugar { font-size: 11px; line-height: 1.5; }
.ficha__resumen .vendedor-caja__confianza { flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; color: var(--tinta); font-size: 11px; font-weight: 400; }
.vendedor-caja__estado { display: inline-flex; align-items: center; gap: 6px; }
.vendedor-caja__estado + .vendedor-caja__estado { padding-left: 12px; border-left: 1px solid var(--linea-fuerte); }
.vendedor-caja__estado .vendedor-caja__icono { color: var(--marca); flex-basis: 18px; width: 18px; height: 18px; }
.ficha__resumen .vendedor-caja__icono--escudo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 4v6c0 5-9 10-9 10S3 17 3 12V6l9-4Z'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 4v6c0 5-9 10-9 10S3 17 3 12V6l9-4Z'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}
.vendedor-caja__estadisticas { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 18px; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo-suave); }
.vendedor-caja__estadisticas strong { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vendedor-caja__estadisticas div > span { display: block; font-size: 12px; }
.vendedor-caja__icono--publicaciones {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    color: var(--marca);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v13H3zM3 8l3-5h12l3 5M9 3v10h6V3M16 17h2v2h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v13H3zM3 8l3-5h12l3 5M9 3v10h6V3M16 17h2v2h-2z'/%3E%3C/svg%3E");
}
.ficha__resumen .vendedor-caja__acciones { flex-wrap: wrap; margin-top: 14px; }
.ficha__resumen .vendedor-caja__publicaciones { display: inline-flex; align-items: center; min-height: 32px; gap: 8px; color: var(--tinta-media); font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ficha__resumen .vendedor-caja__publicaciones:hover { color: var(--tinta); }
.ficha__resumen .vendedor-caja__publicaciones:active { transform: translateY(1px); }
.ficha__resumen .vendedor-caja__whatsapp { margin-left: auto; }

/* Ficha panorámica (inmuebles y vehículos): la galería toma el ancho
   completo y el resumen baja convertido en una banda —identidad a la
   izquierda, precio y contacto a la derecha—, que es como se lee un aviso
   de una casa o una camioneta. */
.ficha__superior--panoramica { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ficha__superior--panoramica .ficha__resumen {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 30px;
    align-items: start;
}
.ficha__superior--panoramica .ficha__accion {
    padding-left: 30px;
    border-left: 1px solid var(--linea);
}
/* Los datos del vertical no entran a la banda: la tira de destacados los
   pone debajo, y la planilla completa queda en el cuerpo con la descripción. */
.ficha__marca { font-size: 13px; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.ficha__nombre { font-size: clamp(21px, 2.6vw, 28px); margin: 4px 0 16px; }

.ficha__precio { margin-bottom: 8px; }
.ficha__precio dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.ficha__precio dd { font-size: 32px; font-weight: 800; color: var(--marca); letter-spacing: -.03em; line-height: 1.15; }

.ficha__stock { font-size: 13px; font-weight: 700; color: var(--exito); margin-bottom: 18px; }
.ficha__stock--agotado { color: var(--tinta-suave); }
.ficha__stock--consulta { color: var(--tinta-media); font-weight: 600; }

.ficha__compra { display: flex; flex-direction: column; gap: 12px; }
.ficha__referencia { margin-top: 16px; font-size: 12px; color: var(--tinta-suave); }

/* El cuerpo es un panel blanco, hermano del resumen: sobre el fondo del
   sitio, la descripción y los detalles se leen como la continuación de la
   tarjeta de compra y no como texto suelto debajo de la foto. */
.ficha__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 34px;
    margin-top: 22px;
    padding: 30px 32px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.ficha__descripcion { min-width: 0; }
.ficha__caracteristicas { min-width: 0; padding-left: 34px; border-left: 1px solid var(--linea); }

.ficha__titulo-seccion {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--tinta);
}
.ficha__titulo-seccion svg { flex: 0 0 19px; width: 19px; height: 19px; color: var(--marca); }

.ficha__texto {
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--tinta-media);
    font-size: 14.5px;
    line-height: 1.75;
}

/* Detalles como planilla de especificaciones: cada dato en su celda, así
   la lista se escanea igual en un repuesto que en un campo de cuarenta
   hectáreas. El .lista-datos pelado sigue existiendo para la tienda. */
.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin-top: 10px; font-size: 13.5px; }
.lista-datos dt { font-weight: 700; color: var(--tinta-suave); }
.lista-datos dd { color: var(--tinta); }
.lista-datos--ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 9px;
    margin-top: 0;
}
.lista-datos--ficha .lista-datos__item {
    padding: 11px 13px;
    border-radius: var(--radio);
    background: var(--fondo-suave);
}
.lista-datos--ficha dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.lista-datos--ficha dd {
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Tira de datos clave del vertical (m², ambientes, kilómetros, año):
   mosaicos con ícono entre la galería y el cuerpo. Un inmueble o un
   vehículo se compran por estos números, que se leen de un golpe. */
.ficha__destacados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.ficha__destacado {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 15px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
}
.ficha__destacado__icono {
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--marca-suave);
    color: var(--marca);
}
.ficha__destacado__icono svg { width: 20px; height: 20px; }
.ficha__destacado__cuerpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ficha__destacado__etiqueta {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.ficha__destacado__valor { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }

.ficha__extras { margin-top: 32px; }
.pastillas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pastillas a {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta-media);
}
.pastillas a:hover { border-color: var(--marca); color: var(--marca); background: var(--marca-suave); }

.ficha__relacionadas { margin-top: 46px; }
.ficha__relacionadas .seccion__encabezado { margin-bottom: 20px; }

/* Visor de imágenes */
.visor {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(8, 15, 20, .93);
}
.visor img { max-width: min(1100px, 92vw); max-height: 82vh; object-fit: contain; border-radius: var(--radio); }
.visor__pie { position: absolute; bottom: 22px; color: rgba(255, 255, 255, .75); font-size: 13px; }
.visor__boton {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.visor__boton:hover { background: rgba(255, 255, 255, .2); }
.visor__boton[data-dir="anterior"] { left: 22px; }
.visor__boton[data-dir="siguiente"] { right: 22px; }
.visor__boton[data-dir="cerrar"] { top: 22px; right: 22px; }

/* =========================================================================
   Confirmación
   -------------------------------------------------------------------------
   Diálogo corto para decisiones destructivas chiquitas (quitar la última
   unidad de una publicación del carrito). Es al visor lo que un recado a
   una conferencia: misma capa de bloqueo, mucho menos ceremonia.
   ========================================================================= */

.confirmacion {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 15, 20, .55);
    animation: aparecer .18s ease;
}
.confirmacion__caja {
    width: min(400px, 100%);
    padding: 24px;
    border-radius: var(--radio-lg);
    background: var(--fondo);
    box-shadow: var(--sombra-alta);
}
.confirmacion__titulo { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; }
.confirmacion__texto { margin-top: 6px; font-size: 13.5px; color: var(--tinta-media); }
.confirmacion__acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================================
   Carrito
   -------------------------------------------------------------------------
   El carrito de un marketplace no es una lista: es una lista por vendedor.
   Cada bloque `.carrito-grupo` se lee como un pedido chico —quién vende
   arriba, sus publicaciones adentro, su subtotal abajo— y la columna de
   tildes de la izquierda decide qué entra en la compra de ahora.
   ========================================================================= */

.carrito__estado { padding: 30px 0; color: var(--tinta-media); }
.carrito__vacio {
    padding: 56px 26px;
    text-align: center;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.carrito__vacio p { max-width: 48ch; margin: 10px auto 20px; color: var(--tinta-media); }
.carrito__vacio .boton { display: inline-flex; width: auto; }

.carrito { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.carrito__lista-caja { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); overflow: hidden; }
.carrito__lista { display: flex; flex-direction: column; }

/* Barra de selección: el tilde maestro, el recuento y el atajo para vaciar
   lo que se acaba de marcar. */
.carrito__barra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--linea);
    background: var(--fondo-suave);
}
.carrito__conteo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--tinta-media);
}
.carrito__accion {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tinta-suave);
    text-decoration: underline;
    cursor: pointer;
}
.carrito__accion:hover { color: var(--marca); }

/* Casilla de selección. El área clicable es la etiqueta entera: un tilde de
   14px es un blanco imposible en un teléfono. */
.carrito-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    cursor: pointer;
}
.carrito-check--barra { width: auto; gap: 8px; padding-right: 4px; }
.carrito-check--hueco { cursor: default; }
.carrito-check__texto { font-size: 13px; font-weight: 700; color: var(--tinta); }
.carrito-check__caja {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--marca);
    cursor: pointer;
}
.carrito-check__caja:disabled { cursor: not-allowed; }

/* --- Bloque de un vendedor --------------------------------------------- */

.carrito-grupo { border-bottom: 1px solid var(--linea-fuerte); }
.carrito-grupo:last-child { border-bottom: 0; }

.carrito-grupo__cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--marca-suave);
    border-bottom: 1px solid var(--linea);
}
.carrito-grupo__vendedor {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.carrito-grupo__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--fondo);
    border: 1px solid var(--linea-fuerte);
}
.carrito-grupo__logo img { width: 100%; height: 100%; object-fit: cover; }
.carrito-grupo__inicial { font-size: 12px; font-weight: 800; color: var(--tinta-media); }
.carrito-grupo__nombre {
    font-size: 14px;
    font-weight: 800;
    color: var(--tinta);
}
a.carrito-grupo__nombre:hover { color: var(--marca); text-decoration: underline; }
.carrito-grupo__lugar { font-size: 12px; color: var(--tinta-media); }

.carrito-grupo__lista { display: flex; flex-direction: column; }

.carrito-grupo__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: var(--fondo-suave);
    border-top: 1px solid var(--linea);
}
.carrito-grupo__pie-texto { font-size: 12.5px; color: var(--tinta-media); }
.carrito-grupo__pie-monto { font-size: 15px; font-weight: 800; color: var(--tinta); }

/* --- Línea ------------------------------------------------------------- */

.carrito-linea { display: flex; gap: 16px; padding: 18px; border-bottom: 1px solid var(--linea); }
.carrito-linea:last-child { border-bottom: 0; }
/* Lo que ya no se puede comprar sigue a la vista y apagado: sacarlo de
   golpe deja a quien vuelve al carrito sin saber qué pasó con su producto.
   Toda la línea pierde intensidad menos el aviso, que es justo lo que hay
   que leer; y la fila no entra en ninguna suma del resumen. */
.carrito-linea--inactiva { background: var(--fondo-suave); }
.carrito-linea--inactiva .carrito-linea__media,
.carrito-linea--inactiva .carrito-linea__titulo,
.carrito-linea--inactiva .carrito-linea__detalle,
.carrito-linea--inactiva .carrito-linea__precio,
.carrito-linea--inactiva .carrito-linea__subtotal { opacity: .5; }
.carrito-linea__media {
    position: relative;
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo-hondo);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carrito-linea__media img { width: 100%; height: 100%; object-fit: cover; }
/* Banda sobre la foto de una línea no disponible: se lee "No disponible"
   y el motivo concreto queda en el aviso naranja del cuerpo. */
.carrito-linea__agotado {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 0;
    background: rgba(33, 25, 21, .85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}
.carrito-linea__sinfoto { font-size: 11.5px; color: var(--tinta-suave); }
.carrito-linea__cuerpo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.carrito-linea__titulo { font-size: 15px; font-weight: 700; }
.carrito-linea__detalle { font-size: 12.5px; color: var(--tinta-media); }
.carrito-linea__precio { font-size: 13.5px; color: var(--tinta-media); }
.carrito-linea__aviso { font-size: 12.5px; font-weight: 700; color: var(--alerta); }

.carrito-linea__controles { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.carrito-linea__boton {
    width: 30px;
    height: 30px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--fondo);
    font-size: 15px;
    font-weight: 700;
    color: var(--tinta);
    cursor: pointer;
}
.carrito-linea__boton:hover { border-color: var(--marca); color: var(--marca); }
.carrito-linea__cantidad { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.carrito-linea__quitar {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    text-decoration: underline;
    cursor: pointer;
}
.carrito-linea__quitar:hover { color: var(--marca); }
.carrito-linea__subtotal { flex: 0 0 auto; font-size: 16px; font-weight: 800; color: var(--tinta); text-align: right; }

/* --- Actualización de una línea ------------------------------------------
   Cambiar una cantidad no esconde el carrito: la línea tocada se cubre con
   un velo semitransparente —spinner + "Actualizando"— mientras el API
   devuelve la línea hidratada (precio, stock y promo 2x1 del momento). El
   velo también traba los controles de esa línea: no se enciman dos cambios
   sobre la misma cantidad. */
.carrito-linea--actualizando { position: relative; }
.carrito-linea__velo {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, .78);
    animation: aparecer .18s ease;
}
.carrito-linea--actualizando .carrito-linea__velo { display: flex; }
.carrito-linea__velo-giro {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--linea-fuerte);
    border-top-color: var(--marca);
    border-radius: 50%;
    animation: girar .7s linear infinite;
}
.carrito-linea__velo-texto { font-size: 12.5px; font-weight: 700; color: var(--tinta-media); }

@keyframes girar { to { transform: rotate(360deg); } }

/* --- Panel de resumen --------------------------------------------------- */

.carrito__resumen {
    position: sticky;
    top: 112px;
    padding: 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.carrito__desglose {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linea);
}
.carrito__desglose:empty { display: none; }
.carrito__desglose-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.carrito__desglose-nombre {
    font-size: 12.5px;
    color: var(--tinta-media);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carrito__desglose-monto { font-size: 13px; font-weight: 700; white-space: nowrap; }

.carrito__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.carrito__fila b { font-size: 21px; font-weight: 800; }
.carrito__envio { font-size: 12.5px; font-weight: 700; color: var(--exito); margin-bottom: 8px; }
.carrito__aviso-sel { font-size: 12.5px; font-weight: 700; color: var(--alerta); margin-bottom: 8px; }
.carrito__multi { font-size: 12.5px; color: var(--tinta-media); margin-bottom: 8px; }
.carrito__nota { font-size: 12.5px; color: var(--tinta-media); margin-bottom: 16px; }
/* =========================================================================
   Checkout
   ========================================================================= */

.checkout__estado { padding: 18px 0; font-size: 14px; color: var(--tinta-media); }

.acceso { display: flex; justify-content: center; padding: 20px 0 40px; }
.acceso__caja {
    width: 100%;
    max-width: 470px;
    padding: 30px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.acceso__caja > p { color: var(--tinta-media); margin-bottom: 20px; }
.acceso__tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; border-radius: var(--radio); background: var(--fondo-suave); }
.acceso__tab {
    flex: 1 1 0;
    padding: 9px;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tinta-media);
    cursor: pointer;
}
.acceso__tab[aria-selected="true"] { background: var(--fondo); color: var(--marca); box-shadow: var(--sombra); }
.acceso__panel { display: flex; flex-direction: column; gap: 14px; }
.acceso__estado { font-size: 13px; color: var(--marca); min-height: 18px; }

/* =========================================================================
   Panel de usuario (/cuenta)
   ========================================================================= */

/* Mismo fondo que el resto de las páginas interiores: sin brillo radial,
   la página se apoya sólo en tarjetas blancas y acentos rojos. */
.pagina--cuenta { min-height: 70vh; }

/* Encabezado como el de catálogo o vendedores —tipografía sobre el fondo,
   sin caja— más los dos gestos de identidad del sitio: la regla roja de
   los títulos de rubro y la "P" en placa, el mismo cuadrado rojo con
   letra blanca del sello de acceso y del avatar. */
.cuenta-encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 0 18px;
    border-bottom: 2px solid var(--marca);
}
.cuenta-encabezado .overline { color: var(--marca); }
.cuenta-encabezado__bajada { max-width: 62ch; margin-top: 8px; color: var(--tinta-media); }
.cuenta-encabezado__marca {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: var(--radio-lg);
    background: var(--marca);
    color: #fff;
    font-size: 25px;
    font-weight: 800;
}
.acceso--cuenta { padding-top: 8px; }
.acceso--cuenta .acceso__caja { border-color: var(--linea-fuerte); box-shadow: var(--sombra-media); }
.acceso__bienvenida { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.acceso__bienvenida .overline { margin-bottom: 2px; }
.acceso__bienvenida h2 { font-size: 22px; }
.acceso__sello {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radio);
    background: var(--marca);
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}

.cuenta-panel { max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; }
.cuenta-panel__cabeza {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    box-shadow: var(--sombra);
}
/* La inicial sobre el rojo pleno de la marca, sin degradado ni halo:
   es la misma placa de la "P" del encabezado y del sello de acceso. */
.cuenta-panel__avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radio-lg);
    background: var(--marca);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
    overflow: hidden;
}
/* Con foto cargada, la imagen ocupa la placa entera y el rojo no se ve. */
.cuenta-panel__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cuenta-panel__quien { min-width: 0; }
.cuenta-panel__saludo { margin: 0 0 -2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.cuenta-panel__nombre { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.025em; color: var(--tinta); }
.cuenta-panel__email { margin: 2px 0 0; font-size: 13.5px; color: var(--tinta-media); overflow-wrap: anywhere; }
.cuenta-panel__estado { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--exito); }
.cuenta-panel__estado-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--exito); box-shadow: 0 0 0 4px color-mix(in srgb, var(--exito) 13%, transparent); }
.cuenta-panel__salir { flex: 0 0 auto; }

.cuenta-panel__estructura {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* Navegación por secciones: la misma tarjeta blanca con borde de los
   filtros del catálogo. El carbón queda para la franja y el pie; adentro
   del contenido el sitio es claro y cálido. */
.cuenta-panel__nav {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 18px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    color: var(--tinta);
    box-shadow: var(--sombra);
}
.cuenta-panel__grupo { min-width: 0; }
.cuenta-panel__grupo--final { padding-top: 16px; border-top: 1px solid var(--linea); }
.cuenta-panel__grupo-titulo {
    margin: 0 10px 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.cuenta-panel__tabs { display: grid; gap: 3px; }
.cuenta-panel__tab {
    width: 100%;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--tinta-media);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
/* Números como los pasos del asistente de alta: círculo neutro que se
   enciende en rojo cuando la sección está abierta. */
.cuenta-panel__tab > span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fondo-hondo);
    color: var(--tinta-suave);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease;
}
.cuenta-panel__tab:hover { color: var(--marca); background: var(--marca-suave); transform: translateX(2px); }
.cuenta-panel__tab:hover > span { background: var(--marca); color: #fff; }
.cuenta-panel__tab.is-activo { background: var(--marca); color: #fff; }
.cuenta-panel__tab.is-activo > span { background: rgba(255, 255, 255, .18); color: #fff; }
.cuenta-panel__tab:active { transform: translateX(2px) scale(.985); }

.cuenta-panel__vistas { min-width: 0; }
.cuenta-panel__vista { min-width: 0; }
.cuenta-panel__vista:not([hidden]) { animation: cuenta-entrada .34s cubic-bezier(.22, 1, .36, 1); }
.cuenta-panel__col { min-width: 0; padding: 24px; border: 1px solid var(--linea); border-radius: var(--radio-lg); background: var(--fondo); box-shadow: var(--sombra); }
.cuenta-vista__encabezado {
    min-height: 96px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
    padding: 4px 5px 12px;
    /* La regla roja de los bloques de rubro de la portada. */
    border-bottom: 2px solid var(--marca);
}
.cuenta-vista__encabezado h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; text-wrap: balance; }
.cuenta-vista__encabezado p:not(.overline) { max-width: 60ch; margin-top: 5px; font-size: 13.5px; color: var(--tinta-media); text-wrap: pretty; }
.cuenta-vista__encabezado .overline { margin-bottom: 3px; color: var(--marca); }
/* La pastilla de las insignias del sitio (oficial / particular), en verde. */
.cuenta-vista__insignia {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--exito) 32%, #ffffff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--exito) 8%, #fff);
    font-size: 11px;
    font-weight: 800;
    color: var(--exito);
    white-space: nowrap;
}
.cuenta-form__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cuenta-form__ancho { grid-column: 1 / -1; }
.cuenta-form__pie { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
.cuenta-form__pie .acceso__estado { margin-right: auto; }
.cuenta-panel__datos form { display: flex; flex-direction: column; gap: 14px; }
.cuenta-bloque__encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.cuenta-bloque__encabezado h3 { font-size: 20px; letter-spacing: -.025em; }
.cuenta-bloque__bajada { margin: -6px 0 18px; font-size: 13px; color: var(--tinta-media); }

/* Foto de perfil: la misma placa del encabezado, en grande y editable. */
.cuenta-avatar { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--linea); }
.cuenta-avatar__muestra { width: 72px; height: 72px; font-size: 27px; }
.cuenta-avatar__texto { min-width: 0; }
.cuenta-avatar__titulo { margin: 2px 0 3px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.cuenta-avatar__ayuda { max-width: 46ch; font-size: 12.5px; line-height: 1.5; color: var(--tinta-media); }
.cuenta-avatar__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
/* El input de archivo va oculto dentro del label, que es el botón visible. */
.cuenta-avatar__elegir { cursor: pointer; }
.cuenta-avatar__elegir input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Seguridad: contraseña a la izquierda, estado de la sesión al costado. */
.cuenta-seguridad__grilla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
.cuenta-seguridad__datos { display: grid; gap: 12px; margin-bottom: 16px; }
.cuenta-seguridad__datos div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.cuenta-seguridad__datos dt { font-size: 12px; font-weight: 700; color: var(--tinta-media); }
.cuenta-seguridad__datos dd { font-size: 13.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cuenta-seguridad__aviso { margin-bottom: 14px; font-size: 12.5px; line-height: 1.5; color: var(--tinta-media); }

/* Domicilios guardados */
.cuenta-direcciones { padding: 24px; border: 1px solid var(--linea); border-radius: var(--radio-lg); background: var(--fondo); box-shadow: var(--sombra); }
#cuenta-direcciones-lista { display: grid; gap: 14px; }
.cuenta-direccion { position: relative; padding: 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo-suave); }
.cuenta-direccion__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cuenta-direccion__cabeza strong { font-size: 14px; }
.cuenta-direccion__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cuenta-direccion__ancho { grid-column: 1 / -1; }
.cuenta-direccion__preferida { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 12.5px; font-weight: 600; color: var(--tinta-media); }
.cuenta-direcciones__acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }

@keyframes cuenta-entrada {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pedidos (Mis compras) */
.cuenta-ordenes { display: grid; gap: 12px; }
.cuenta-orden {
    padding: 14px 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo-suave);
}
.cuenta-orden__cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.cuenta-orden__cabeza > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cuenta-orden__cabeza strong { font-size: 14px; color: var(--tinta); }
.cuenta-orden__fecha { font-size: 12.5px; color: var(--tinta-media); }
.cuenta-orden__estado {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    background: var(--fondo-hondo);
    color: var(--tinta-media);
}
.cuenta-orden__estado--exito { background: color-mix(in srgb, var(--exito) 10%, #fff); color: var(--exito); }
.cuenta-orden__estado--alerta { background: var(--acento-suave); color: var(--acento-hondo); }
.cuenta-orden__items { display: grid; gap: 3px; }
.cuenta-orden__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--tinta-media);
}
.cuenta-orden__item b { color: var(--tinta); font-weight: 700; white-space: nowrap; }
.cuenta-orden__total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--linea);
    font-size: 14px;
    font-weight: 700;
    color: var(--tinta);
}
.cuenta-orden__total b { color: var(--marca); }

/* Publicaciones (Mis publicaciones) */
.cuenta-publicaciones { display: grid; gap: 12px; }
.cuenta-publicacion {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo-suave);
}
.cuenta-publicacion__media {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo-hondo);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cuenta-publicacion__media img { width: 100%; height: 100%; object-fit: cover; }
.cuenta-publicacion__sinfoto { color: var(--tinta-suave); font-size: 17px; }
.cuenta-publicacion__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cuenta-publicacion__nombre { font-size: 14px; font-weight: 700; color: var(--tinta); line-height: 1.35; }
.cuenta-publicacion__categoria { font-size: 12px; color: var(--tinta-media); }
.cuenta-publicacion__precio { font-size: 14.5px; font-weight: 800; color: var(--marca); }
.cuenta-publicacion__vistas { font-size: 12px; color: var(--tinta-media); }
.cuenta-publicacion__acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cuenta-publicacion__ver { white-space: nowrap; }

@media (max-width: 760px) {
    .cuenta-publicacion { flex-wrap: wrap; }
    .cuenta-publicacion__acciones { width: 100%; margin-left: 0; justify-content: flex-start; }
}

@media (max-width: 760px) {
    .cuenta-encabezado { padding: 4px 0 14px; }
    .cuenta-encabezado__marca { width: 44px; height: 44px; font-size: 19px; border-radius: var(--radio); }
    .cuenta-panel__cabeza { flex-wrap: wrap; padding: 16px; }
    .cuenta-panel__estado { order: 3; margin-left: 74px; }
    .cuenta-panel__salir { order: 4; margin-left: auto; }
    .cuenta-panel__estructura { grid-template-columns: 1fr; }
    .cuenta-panel__nav {
        position: static;
        gap: 12px;
        padding: 14px;
        overflow-x: auto;
    }
    .cuenta-panel__grupo { min-width: max-content; }
    .cuenta-panel__grupo--final { padding-top: 0; border-top: 0; }
    .cuenta-panel__tabs { display: flex; }
    .cuenta-panel__tab { width: auto; grid-template-columns: auto auto; white-space: nowrap; }
    .cuenta-vista__encabezado { min-height: 0; align-items: flex-start; flex-direction: column; padding-top: 10px; }
    .cuenta-panel__col, .cuenta-direcciones { padding: 18px; }
    .cuenta-avatar { flex-direction: column; gap: 12px; }
    .cuenta-seguridad__grilla { grid-template-columns: 1fr; }
    .cuenta-form__grilla, .cuenta-direccion__grilla { grid-template-columns: 1fr; }
    .cuenta-form__ancho, .cuenta-direccion__ancho { grid-column: auto; }
    .cuenta-direcciones__acciones { align-items: stretch; flex-direction: column; }
}

.checkout { display: flex; justify-content: center; padding-bottom: 30px; }
.checkout__caja {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.checkout__campos { display: flex; flex-direction: column; gap: 14px; }
.checkout__leyenda { font-size: 12.5px; color: var(--tinta-media); }
.checkout__resumen-caja { padding: 18px; border-radius: var(--radio); background: var(--fondo-suave); }
.checkout__fila { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.checkout__fila--total { border-top: 1px solid var(--linea-fuerte); margin-top: 6px; padding-top: 12px; font-size: 17px; }
.checkout__fila--total b { font-size: 21px; font-weight: 800; color: var(--marca); }
.checkout__pago { font-size: 12.5px; color: var(--tinta-media); text-align: center; }

.resumen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.resumen-linea { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.resumen-linea__nombre { color: var(--tinta-media); }
.resumen-linea__monto { font-weight: 700; white-space: nowrap; }
/* Con más de un vendedor el resumen se subdivide igual que el carrito. */
.resumen-linea--vendedor {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--linea);
}
.resumen-linea--vendedor:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.resumen-linea__vendedor {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tinta);
}
.resumen-linea--envio .resumen-linea__nombre { color: var(--marca); font-weight: 600; }

/* =========================================================================
   Checkout en pasos: /envios → /pagos → /fin
   ========================================================================= */

/* --- Stepper ------------------------------------------------------------ */

.pasos {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}
.pasos__paso {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    font-size: 13px;
    font-weight: 700;
    color: var(--tinta-media);
}
.pasos__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fondo-suave);
    font-size: 12px;
    font-weight: 800;
}
.pasos__paso--hecho { color: var(--tinta); }
.pasos__paso--hecho .pasos__num { background: var(--exito-suave, var(--fondo-suave)); color: var(--exito, var(--tinta)); }
.pasos__paso--activo {
    border-color: var(--marca-borde);
    background: var(--marca-suave);
    color: var(--marca-tinta);
}
.pasos__paso--activo .pasos__num { background: var(--marca); color: #fff; }

/* --- Paso 1: /envios ------------------------------------------------------ */

.envios__estado { padding: 18px 0; font-size: 14px; color: var(--tinta-media); }
.envios { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.envios__col { display: flex; flex-direction: column; gap: 16px; }
.envios__tiendas { display: flex; flex-direction: column; gap: 14px; }

.envios-tarjeta {
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    padding: 18px;
}
.envios-tarjeta__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.envios-tarjeta__quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.envios-tarjeta__logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--linea);
    flex-shrink: 0;
}
.envios-tarjeta__nombre { font-weight: 800; font-size: 14.5px; }
.envios-tarjeta__subtotal { font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.envios-tarjeta__items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.envios-tarjeta__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--tinta-media);
}
.envios-tarjeta__modos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.envios-opcion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--fondo);
    cursor: pointer;
}
.envios-opcion:hover { border-color: var(--marca); }
.envios-opcion:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.envios-opcion:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.envios-opcion input { margin-top: 3px; accent-color: var(--marca); flex-shrink: 0; }
.envios-opcion__cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.envios-opcion__titulo { font-size: 13.5px; font-weight: 800; }
.envios-opcion__detalle { font-size: 12px; color: var(--tinta-media); }
.envios-opcion__monto { margin-left: auto; font-size: 13px; font-weight: 800; white-space: nowrap; }

.envios__caja {
    padding: 18px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo-suave);
}
.envios__caja .panel__titulo { margin-bottom: 12px; }
.envios__campos { display: flex; flex-direction: column; gap: 14px; }
.envios__nueva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.envios__nueva .campo:first-child { grid-column: 1 / -1; }
.envios__guardar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta);
    cursor: pointer;
}
.envios__guardar input { accent-color: var(--marca); }
.envios__nota-caja { margin-bottom: 2px; }
.envios__resumen {
    position: sticky;
    top: 112px;
    padding: 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.envios__leyenda { font-size: 12.5px; color: var(--tinta-media); margin-top: 10px; }

/* --- Paso 2: /pagos -------------------------------------------------------- */

.pagos { display: flex; justify-content: center; padding-bottom: 30px; }
.pagos__estado { padding: 18px 0; font-size: 14px; color: var(--tinta-media); }
.pagos__col {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pagos__entrega { display: flex; flex-direction: column; gap: 8px; }
.pagos__entrega-fila { font-size: 13.5px; color: var(--tinta-media); }
.pagos__entrega-fila strong { color: var(--tinta); margin-right: 4px; }
.pagos__entrega-fila--direccion { color: var(--tinta); }
.pagos__totales { padding: 4px 2px 0; }

/* --- Paso 3: /fin ------------------------------------------------------------ */

.fin__caja {
    max-width: 620px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    text-align: center;
}
.fin__estado { font-size: 15.5px; line-height: 1.6; }
.fin__acciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
.fin__acciones .boton { width: auto; }

/* =========================================================================
   Contacto
   ========================================================================= */

.contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 30px; }
.contacto__canal {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--tinta);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.contacto__canal:hover { border-color: var(--marca); transform: translateY(-2px); box-shadow: var(--sombra-media); color: var(--tinta); }
.contacto__canal--principal { border-color: var(--marca); background: var(--marca-suave); }
.contacto__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radio);
    background: var(--marca-suave);
    color: var(--marca);
}
.contacto__canal--principal .contacto__icono { background: #fff; color: var(--marca); }
.contacto__cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.contacto__cuerpo b { font-size: 14.5px; }
.contacto__cuerpo span { font-size: 13px; color: var(--tinta-media); }

.contacto__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; padding-top: 26px; border-top: 1px solid var(--linea); }
.contacto__dato p:not(.overline) { color: var(--tinta-media); }
.contacto__redes { display: flex; gap: 14px; }

/* =========================================================================
   Página "Vender"
   ========================================================================= */

.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); }

.carta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--fondo);
}
.carta--destacada { border-color: var(--marca); box-shadow: var(--sombra-media); }
.carta__sello {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.carta__sello--tenue { background: var(--fondo-hondo); color: var(--tinta-media); }
.carta__titulo { font-size: 23px; }
.carta__texto { color: var(--tinta-media); }
.carta .boton { margin-top: auto; }

.lista-marcada { display: flex; flex-direction: column; gap: 9px; }
.lista-marcada li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--tinta-media);
}
.lista-marcada li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca);
    font-size: 10px;
    font-weight: 800;
}

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gap); }
.paso { padding: 26px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.paso__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}
.paso h3 { font-size: 16px; margin-bottom: 5px; }
.paso p { font-size: 13.5px; color: var(--tinta-media); }

/* =========================================================================
   Pie
   ========================================================================= */

.pie { background: var(--carbon-hondo); color: rgba(255, 255, 255, .72); }

.pie__boletin { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pie__boletin-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 34px 24px;
    flex-wrap: wrap;
}
.pie__boletin .titulo-display { color: #fff; }
.pie__boletin-texto { max-width: 62ch; }

.pie__grilla {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
    gap: 34px;
    padding-top: 44px;
    padding-bottom: 40px;
}
.pie__marca p { font-size: 13.5px; margin-top: 14px; max-width: 44ch; }
/* Versión clara del logo: el wordmark en blanco y los cuadrados de color
   intactos, para que se lea sobre el fondo oscuro del pie. */
.pie__logo { max-height: 38px; width: auto; }
.pie__nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.pie__redes { display: flex; gap: 16px; margin-top: 16px; }
.pie__redes a { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.pie__redes a:hover { color: #fff; }

.pie__titulo {
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.pie__columna li { margin-bottom: 9px; font-size: 13.5px; }
.pie__columna a { color: rgba(255, 255, 255, .72); }
.pie__columna a:hover { color: #fff; }
.pie__contacto li { line-height: 1.5; }

.pie__legal { border-top: 1px solid rgba(255, 255, 255, .12); }
.pie__legal-interior {
    display: flex;
    align-items: center;
    gap: 10px 24px;
    padding: 18px 24px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .62);
}
.pie__legal-nota { margin-right: auto; }

/* Firma del estudio, a la derecha del renglón legal. El SVG ya trae el
   "creado por", así que no lleva texto al lado.

   Viene en gris oscuro y sobre este pie no se vería: como es monocromo,
   `brightness(0) invert(1)` lo pasa a blanco puro sin tocar el archivo
   original —así sigue sirviendo tal cual en un fondo claro—. La opacidad
   lo deja discreto y sube al pasar el mouse. */
.pie__firma {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.pie__firma img {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .55;
    transition: opacity .16s ease;
}
.pie__firma:hover img { opacity: 1; }

/* =========================================================================
   Estados: carga, vacío, aviso flotante
   ========================================================================= */

.esqueleto { pointer-events: none; }
.esqueleto__bloque {
    aspect-ratio: 4 / 3;
    background: linear-gradient(100deg, var(--fondo-hondo) 30%, #f7fafb 50%, var(--fondo-hondo) 70%);
    background-size: 220% 100%;
    animation: brillo 1.4s ease-in-out infinite;
}
.esqueleto__linea {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    background: linear-gradient(100deg, var(--fondo-hondo) 30%, #f7fafb 50%, var(--fondo-hondo) 70%);
    background-size: 220% 100%;
    animation: brillo 1.4s ease-in-out infinite;
}
.esqueleto__linea--corta { width: 55%; }

@keyframes brillo {
    from { background-position: 180% 0; }
    to { background-position: -60% 0; }
}

.aviso {
    grid-column: 1 / -1;
    padding: 44px 26px;
    text-align: center;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio-lg);
    background: var(--fondo);
    color: var(--tinta-media);
}
.aviso__titulo { font-size: 17px; font-weight: 700; color: var(--tinta); margin-bottom: 6px; }
.aviso .boton { margin-top: 16px; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 250;
    transform: translateX(-50%);
    max-width: min(440px, 92vw);
    padding: 13px 20px;
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--sombra-alta);
    animation: subir .22s ease;
}

@keyframes subir {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Aparición al entrar en pantalla */
.aparece { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.aparece.es-visible { opacity: 1; transform: none; }

/* =========================================================================
   Atajos de salto (inicio / final de la página)
   -------------------------------------------------------------------------
   Botones fijos de la esquina inferior derecha. Nacen ocultos y sólo el
   JS les agrega `es-visible` cuando su salto tiene recorrido: sin
   scripts no queda un control muerto en pantalla. Quedan por debajo de
   la cabecera (120) para que el mega menú los tape al abrirse.
   ========================================================================= */

.salto {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 110;
    display: grid;
    gap: 10px;
}

.salto__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--linea-fuerte);
    border-radius: 999px;
    background: var(--fondo);
    color: var(--tinta);
    box-shadow: var(--sombra-media);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s,
                border-color .15s ease, color .15s ease;
}

.salto__boton.es-visible { opacity: 1; visibility: visible; transform: none; }
.salto__boton:hover { border-color: var(--marca); color: var(--marca); }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1180px) {
    .categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .portada__contenido { padding-right: 34px; }
    .portada-garantia { padding-inline: 20px; }
    .riel--cuatro, .riel--rubro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rubro__cuerpo { grid-template-columns: 220px minmax(0, 1fr); }
    .ficha__superior { grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; }
    .cabecera__nav-extra { display: none; }
}

@media (max-width: 1000px) {
    .portada__principal { grid-template-columns: 1fr; grid-template-rows: auto; }
    .portada__contenido { padding: 46px 24px 34px; }
    .portada__titulo { max-width: 16ch; }
    .portada__escaparate { height: 340px; }
    .bloque-doble { grid-template-columns: 1fr; }
    .rubro__cuerpo { grid-template-columns: 1fr; }
    .rubro__aparte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .catalogo__grilla { grid-template-columns: 1fr; }
    .carrito { grid-template-columns: 1fr; }
    .envios { grid-template-columns: 1fr; }
    .envios__resumen { position: static; }
    .ficha__superior { grid-template-columns: minmax(0, 1fr); }
    .ficha__resumen { position: static; }
    /* Sin dos columnas para la ficha, la banda panorámica tampoco: la
       raya que separaba identidad de precio pasa de vertical a horizontal. */
    .ficha__superior--panoramica .ficha__resumen { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ficha__superior--panoramica .ficha__accion {
        padding-left: 0;
        border-left: 0;
        padding-top: 24px;
        border-top: 1px solid var(--linea);
    }
    .ficha__cuerpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 22px 20px;
    }
    /* Apiladas las dos columnas, la raya que separaba descripción de
       detalles pasa de vertical a horizontal. */
    .ficha__caracteristicas {
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid var(--linea);
    }
    .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

    /* Filtros del catálogo: pasan a panel desplegable */
    .catalogo__abrir-filtros {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 18px;
        border: 1px solid var(--linea-fuerte);
        border-radius: var(--radio);
        background: var(--fondo);
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
    }
    .filtros { position: static; display: none; }
    .filtros[data-abierto] { display: flex; }
}

@media (max-width: 860px) {
    .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cabecera__interior { flex-wrap: wrap; row-gap: 12px; }
    .buscador-barra { order: 3; flex-basis: 100%; }
    .cabecera__acciones { margin-left: auto; }
    .navegacion__boton { display: flex; }

    .cabecera__nav-interior { min-height: 0; padding: 8px 24px; }
    .rubros { order: 2; }
    .rubros__boton { height: 40px; border-radius: var(--radio); }

    /* En pantalla angosta el riel de familias pasa a ser una fila de
       fichas que se desliza: el panel deja de pelear por el ancho. */
    .rubros__grilla { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: 74vh; }
    .rubros__familias {
        flex-direction: row;
        gap: 6px;
        padding: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--linea);
    }
    .rubros__familia {
        width: auto;
        flex-shrink: 0;
        padding: 7px 13px;
        border: 1px solid var(--linea-fuerte);
        background: var(--fondo);
        font-size: 13px;
    }
    .rubros__familia[aria-selected="true"] { border-color: var(--marca); box-shadow: none; }
    .rubros__familia::after { display: none; }
    .rubros__familia-count { display: none; }
    .rubros__detalle { padding: 14px 16px 18px; }
    .rubros__cuadricula { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
    .rubros__rubro-miniatura { width: 36px; height: 36px; }

    .navegacion {
        order: 1;
        flex-basis: 100%;
        display: none;
    }
    .navegacion[data-abierto] { display: block; }
    .navegacion__lista { flex-direction: column; gap: 0; }
    .navegacion__lista a { display: block; padding: 12px 0; border-bottom: 1px solid var(--linea); border-left: 2px solid transparent; }
    .navegacion__lista a[aria-current="page"] { border-bottom-color: var(--linea); border-left-color: var(--marca); padding-left: 10px; }

    .riel--cuatro, .riel--rubro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portada__garantias { grid-template-columns: 1fr; }
    .portada-garantia,
    .portada-garantia:first-child { padding: 11px 0; border: 0; border-top: 1px solid var(--linea); }
    .portada-garantia:first-child { border-top: 0; }
    .franja-aviso__texto { display: none; }
}

@media (max-width: 620px) {
    :root { --gap: 14px; }
    body { font-size: 14.5px; }
    .contenedor { padding: 0 16px; }
    .seccion { padding: 32px 0; }
    .salto { right: 14px; bottom: 14px; gap: 8px; }

    .marca__bajada { display: none; }
    .marca__texto { display: none; }
    .marca__logo { max-height: 32px; }
    .accion__cuerpo { display: none; }
    .accion { padding: 7px 8px; }
    .buscador-barra__rubro { display: none; }
    .buscador-barra__boton { padding: 0 14px; }
    .buscador-barra__boton-texto { display: none; }

    .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .riel--cuatro, .riel--rubro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    /* El stepper queda de sólo números: los rótulos no entran. */
    .pasos__paso { flex: 1; justify-content: center; padding: 9px 10px; font-size: 0; }
    .pasos__paso .pasos__num { font-size: 12px; }
    .envios-tarjeta__modos { grid-template-columns: 1fr; }
    .envios__nueva { grid-template-columns: 1fr; }
    /* En el celular la placa se compacta: el ícono baja de tamaño y el
       botón deja lugar al nombre, que es lo que se toca. */
    .categorias { gap: 10px; }
    .categoria-chip { min-height: 132px; padding: 15px; }
    .categoria-chip__icono { top: 13px; left: 15px; width: 24px; height: 24px; }
    .categoria-chip__nombre { font-size: 14.5px; }
    .categoria-chip__accion { margin-top: 10px; padding: 5px 11px; font-size: 11px; }

    .tarjeta__cuerpo { padding: 11px 11px 10px; }
    .tarjeta__titulo { font-size: 13.5px; }
    .tarjeta__precio { font-size: 17px; }
    .tarjeta__pie { padding: 0 11px 11px; }

    /* En pantallas chicas la lista vuelve a comportarse como grilla:
       una fila horizontal de 220 px de foto no entra. */
    .grilla--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .grilla--lista .tarjeta,
    .grilla--lista .tarjeta__enlace { flex-direction: column; }
    .grilla--lista .tarjeta__media { flex: 1 1 auto; }
    .grilla--lista .tarjeta__pie { flex: 0 0 auto; padding: 0 11px 11px; }

    .portada__contenido { padding: 34px 16px 28px; }
    .portada__titulo { max-width: none; font-size: clamp(32px, 9.5vw, 44px); }
    .portada__texto { margin-top: 16px; font-size: 14.5px; }
    .portada__acciones { align-items: stretch; flex-direction: column; gap: 14px; margin-top: 24px; }
    .portada__enlace { align-self: flex-start; }
    .portada__escaparate { height: 250px; }
    .portada-producto__velo,
    .portada-producto:first-child .portada-producto__velo { padding: 12px; }
    .portada-producto:first-child .portada-producto__nombre { font-size: 14px; }
    .portada-producto__precio { font-size: 11.5px; }

    /* El encabezado del rubro no entra en una línea: el título, los accesos
       de orden y el "Ver todo" empujaban la página a scroll horizontal. Los
       accesos de orden se van —están completos en el catálogo— y el resto
       envuelve. */
    .rubro__encabezado { flex-wrap: wrap; gap: 10px; }
    .rubro__filtros { display: none; }
    .seccion__encabezado, .seccion__encabezado--barra { flex-wrap: wrap; gap: 10px; }

    .catalogo__barra { flex-direction: column; align-items: flex-start; gap: 10px; }
    /* En pantalla chica las dos galerías se vuelven lo mismo: la foto
       grande arriba y el resto como cinta desplazable abajo. */
    .galeria--mosaico, .galeria--tira { grid-template-columns: minmax(0, 1fr); }
    .galeria--mosaico { aspect-ratio: auto; grid-template-rows: none; }
    .galeria--mosaico .galeria__item--principal { aspect-ratio: 4 / 3; height: auto; }
    .galeria--mosaico .galeria__costado[data-fotos] {
        height: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: 74px;
    }
    .galeria--mosaico .galeria__costado[data-fotos] > .galeria__item:first-child { grid-column: auto; }
    .galeria--tira { position: static; padding-left: 0; }
    .galeria--tira .galeria__item--principal { order: 1; }
    .galeria--tira .galeria__tira {
        position: static;
        width: auto;
        order: 2;
        grid-template-rows: none;
        grid-auto-flow: column;
        grid-auto-columns: 66px;
        grid-auto-rows: 66px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .ficha__resumen { padding: 18px; }
    .ficha__cuerpo { padding: 20px 18px; }
    .ficha__destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ficha__destacado { padding: 10px 12px; gap: 10px; }
    .acceso__caja, .checkout__caja { padding: 22px; }

    .carrito__barra { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
    .carrito__conteo { flex-basis: 100%; order: 3; }
    .carrito-grupo__cabecera { padding: 12px 14px; }
    .carrito-grupo__pie { padding: 10px 14px; }
    .carrito-grupo__lugar { flex-basis: 100%; }

    .carrito-linea { flex-wrap: wrap; gap: 12px; padding: 16px 14px; }
    .carrito-linea__media { flex-basis: 66px; width: 66px; height: 66px; }
    .carrito-linea__subtotal { flex-basis: 100%; text-align: left; }

    .pie__grilla { grid-template-columns: 1fr; gap: 24px; }
    .pie__boletin-interior { padding: 26px 16px; }

    .visor { padding: 16px; }
    .visor__boton[data-dir="anterior"] { left: 8px; }
    .visor__boton[data-dir="siguiente"] { right: 8px; }

    .post-feed { grid-template-columns: 1fr; }
    .cuenta-comercio__fila { flex-wrap: wrap; }
    .cuenta-comercio__dias { flex-basis: 100%; }
}

/* =====================================================================
   Ficha del comercio: portada, horarios y links destacados
   ===================================================================== */
.vendedor-ficha__banner {
    margin-bottom: 16px;
    border-radius: var(--radio-lg);
    overflow: hidden;
    border: 1px solid var(--linea);
    aspect-ratio: 1200 / 320;
    background: var(--marca-suave);
}
.vendedor-ficha__banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vendedor-ficha__horarios { margin-top: 6px; }
.vendedor-ficha__horarios-titulo {
    font-size: 13px;
    font-weight: 700;
    color: var(--tinta);
    margin-bottom: 6px;
}
.vendedor-ficha__horarios-lista { list-style: none; margin: 0; padding: 0; }
.vendedor-ficha__horario {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 13.5px;
    line-height: 1.5;
}
.vendedor-ficha__horario-dias { color: var(--tinta-media); min-width: 130px; }
.vendedor-ficha__horario-franja { font-weight: 600; }

.vendedor-ficha__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    max-width: 420px;
}
.vendedor-ficha__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.vendedor-ficha__link::after { content: '→'; color: var(--marca); }
.vendedor-ficha__link:hover {
    border-color: var(--marca-borde);
    box-shadow: var(--sombra-media);
    transform: translateY(-2px);
    color: var(--tinta);
}

/* =====================================================================
   Feed de novedades (posts de los comercios)
   ===================================================================== */
.novedades__estado { padding: 30px 0; color: var(--tinta-media); }
.novedades__mas { display: flex; justify-content: center; margin-top: 26px; }

.post-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--gap);
}
.post-feed--riel { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.post-tarjeta {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.post-tarjeta:hover { border-color: var(--marca-borde); box-shadow: var(--sombra-media); }

.post-tarjeta__cabecera { padding: 14px 16px 0; }
.post-tarjeta__perfil {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--tinta);
    min-width: 0;
}
.post-tarjeta__perfil:hover { color: var(--tinta); }
.post-tarjeta__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
}
.post-tarjeta__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-tarjeta__quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.post-tarjeta__nombre { font-size: 14px; font-weight: 700; line-height: 1.3; }
.post-tarjeta__lugar { font-size: 12px; color: var(--tinta-media); }

.post-tarjeta__fotos { margin-top: 12px; display: grid; gap: 3px; }
.post-tarjeta__fotos--1 { grid-template-columns: 1fr; }
.post-tarjeta__fotos--2 { grid-template-columns: 1fr 1fr; }
.post-tarjeta__fotos--3 { grid-template-columns: 1fr 1fr; }
.post-tarjeta__fotos--3 .post-tarjeta__foto:first-child { grid-column: 1 / -1; }
.post-tarjeta__fotos--4 { grid-template-columns: 1fr 1fr; }
.post-tarjeta__foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--marca-suave);
}

.post-tarjeta__texto {
    padding: 14px 16px 4px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tinta);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.post-tarjeta__pie { padding: 10px 16px 14px; }
.post-tarjeta__fecha { font-size: 12px; color: var(--tinta-media); }

/* =====================================================================
   Panel Mi comercio (/cuenta)
   ===================================================================== */
.cuenta-comercio__grilla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
.cuenta-comercio__nombre { font-size: 21px; font-weight: 800; margin: 0; }
.cuenta-comercio__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cuenta-comercio__subir { display: block; margin: 12px 0 4px; }
.cuenta-comercio__titulo { margin: 25px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--linea); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--tinta); }
.cuenta-comercio__novedades { position: sticky; top: 18px; }
.cuenta-comercio__novedades form { display: grid; gap: 13px; padding: 15px; border-radius: var(--radio); background: var(--fondo-suave); }

.cuenta-comercio__fila {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.cuenta-comercio__fila .campo__control { flex: 1 1 160px; }
.cuenta-comercio__dias { display: flex; gap: 6px; flex-wrap: wrap; }
.cuenta-comercio__dia {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--tinta-media);
    cursor: pointer;
}
.cuenta-comercio__franjash { display: flex; gap: 8px; align-items: center; }
.cuenta-comercio__franjash .campo__control { width: 110px; }

.cuenta-novedad {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--linea);
}
.cuenta-novedad:last-child { border-bottom: 0; }
.cuenta-novedad__cuerpo { display: flex; flex-direction: column; gap: 4px; }
.cuenta-novedad__texto { font-size: 14px; line-height: 1.55; white-space: pre-line; }
.cuenta-novedad__fecha { font-size: 12px; color: var(--tinta-media); }
.cuenta-novedad__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .vendedor-ficha__horario { flex-direction: column; gap: 2px; }
    .vendedor-ficha__horario-dias { min-width: 0; }
    .cuenta-comercio__grilla { grid-template-columns: 1fr; }
    .cuenta-comercio__novedades { position: static; }
    .cuenta-comercio__media { grid-template-columns: 1fr; }
    .cuenta-comercio__franjash { flex-wrap: wrap; }

    /* Tarjeta del vendedor en móvil: el enlace y el botón de WhatsApp
       comparten fila sin problema, sólo se afloja el padding. */
    .vendedor-caja { padding: 14px 15px; margin-top: 16px; }
    .vendedor-caja__logo { flex-basis: 42px; width: 42px; height: 42px; }
    .vendedor-caja__logo .vendedor-tarjeta__inicial { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .aparece { opacity: 1; transform: none; }
    .diapo { transition: none; }
}