y en el
resto , por eso el selector no nombra la etiqueta. No aplica
en mobile, donde la grilla ya es de dos columnas y los grupos se
comportan como acordeón. */
@media(min-width:901px){
.footer-grid>*:not(:first-child){column-count:2;column-gap:12px}
.footer-grid>*:not(:first-child)>h4,
.footer-grid>*:not(:first-child)>summary{column-span:all}
}
@media(max-width:900px){
.footer{padding:12px 14px;border-radius:16px}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-grid>div:first-child{grid-column:1/-1}
.footer-bottom{flex-direction:column;gap:4px}
}
/* Volver + miga de pan (producto.html) */
.page-nav{margin:14px auto 0;width:min(1180px,calc(100% - 28px))}
.back-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--tinta);font-weight:700;font-size:14px}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;color:var(--tinta);font-size:13px}
.breadcrumb a,.breadcrumb span{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--tinta)}
.breadcrumb .sep{padding:0 2px;min-height:auto}
/* =========================================================
CATÁLOGO / FILTROS / DETALLE / BOLSA / CHECKOUT / VENDER
========================================================= */
.catalog-layout{display:grid;grid-template-columns:230px 1fr;gap:32px}
.filters{padding:0 18px 0 0;border-right:.5px solid var(--line);height:max-content;position:sticky;top:100px}
.filter-group{padding:14px 0;border-bottom:.5px solid var(--line)}
.filter-group:last-child{border:0}
.filter-group strong{display:block;margin-bottom:10px}
.filter-group label{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin:8px 0}
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}
.toolbar input,.toolbar select,.field input,.field select,.field textarea{
width:100%;border:.5px solid var(--line);background:var(--card-surface);border-radius:14px;padding:13px 14px;outline:none;color:var(--tinta);
}
.toolbar input{max-width:360px}
.detail-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:32px}
.gallery{background:var(--card-surface);border:.5px solid var(--line);box-shadow:var(--card-shadow);border-radius:28px;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.gallery img{width:82%;height:82%;object-fit:contain}
.gallery-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.gallery-thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;border:1.5px solid var(--line);padding:0;background:none;cursor:pointer}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb--defecto{border-color:var(--verde)}
.detail-info{padding:20px 10px}
.detail-info h1{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,48px);line-height:1.03;letter-spacing:-.03em;margin:10px 0}
.detail-price{font-size:26px;font-weight:800;margin:16px 0}
.detail-price .product-envio{font-size:13px;margin-top:3px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:.5px solid var(--line);border-radius:999px;padding:8px 12px;background:var(--card-surface);font-size:12px}
#productState{background:var(--verde);color:var(--crema);border-color:transparent;font-weight:700}
.detail-text{color:var(--muted);line-height:1.65}
.delivery-box{margin:20px 0;padding:18px;border-radius:18px;background:var(--card-surface);border:.5px solid var(--line)}
.fallas-callout{margin:16px 0;padding:16px 18px;border-radius:18px;background:var(--card-surface);border:1.5px solid var(--verde)}
.fallas-callout strong{display:block;margin-bottom:6px}
.fallas-callout ul{margin:0;padding-left:18px;color:var(--muted)}
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:24px}
.cart-list{display:flex;flex-direction:column;gap:12px}
.cart-item{display:grid;grid-template-columns:100px 1fr auto;gap:16px;align-items:center;padding:12px;border-radius:20px;background:var(--card-surface);border:.5px solid var(--line)}
.cart-item img{width:100px;height:120px;object-fit:cover;border-radius:14px;background:var(--crema)}
.summary{padding:22px;border-radius:24px;background:var(--card-surface);border:.5px solid var(--line);box-shadow:var(--card-shadow);height:max-content;position:sticky;top:100px}
.summary-row{display:flex;justify-content:space-between;margin:12px 0;color:var(--muted)}
.summary-row.total{font-size:19px;color:var(--tinta);font-weight:800;border-top:.5px solid var(--line);padding-top:16px}
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:24px}
.form-card{padding:24px;border-radius:24px;background:var(--card-surface);border:.5px solid var(--line)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.seller-page{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}
.seller-copy{padding:30px}
.seller-copy h1{font-family:'Playfair Display',serif;font-size:clamp(32px,4.6vw,54px);line-height:1.03;letter-spacing:-.03em}
.seller-form{padding:30px;border-radius:28px;background:var(--card-surface);border:.5px solid var(--line);box-shadow:var(--card-shadow)}
@media(max-width:900px){
.catalog-layout,.detail-layout,.cart-layout,.checkout-grid,.seller-page{grid-template-columns:1fr}
.filters{position:static;border-right:0;border-bottom:.5px solid var(--line);padding:0 0 16px}
.toolbar{flex-direction:column;align-items:stretch}
.toolbar input{max-width:none}
.gallery{min-height:380px}
.cart-item{grid-template-columns:80px 1fr auto}
.cart-item img{width:80px;height:96px}
.summary{position:static}
.form-grid{grid-template-columns:1fr}
}
/* =========================================================
BARRA INFERIOR (mobile-nav) — glass, con compensación de
padding-bottom en (punto 5).
========================================================= */
.mobile-nav{display:none}
@media(max-width:900px){
:root{--bottombar-h:64px}
.mobile-nav{
display:grid;position:fixed;z-index:60;bottom:10px;left:8px;right:8px;
grid-template-columns:repeat(5,1fr);
background:var(--glass-bg);
backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-border);
box-shadow:var(--glass-shadow);
border-radius:20px;padding:8px 4px;
}
.mobile-nav a,.mobile-nav button{border:0;background:transparent;text-align:center;font-size:9px;color:var(--muted);position:relative;min-height:44px}
.mobile-nav b{display:block;font-size:18px;color:var(--tinta);font-weight:400;margin-bottom:2px}
.mobile-nav .count{position:absolute;top:-2px;right:18%;min-width:16px;height:16px;font-size:9px}
}
.nm-toast{
position:fixed;left:50%;bottom:calc(24px + var(--bottombar-h));transform:translate(-50%,20px);opacity:0;z-index:99;
background:var(--tinta);color:var(--crema);padding:12px 18px;border-radius:999px;font-size:13px;transition:.25s;
}
.nm-toast.show{opacity:1;transform:translate(-50%,0)}
/* =========================================================
MOBILE ≤720px — reestructuración exclusiva de index.html.
Desktop/tablet siguen intactos: los breakpoints de arriba
(900px/1180px) no se tocan, y estas reglas solo entran en
vigor por debajo de 720px.
.mobile-accordion usa / nativos con el
atributo "open" puesto en el HTML por defecto, así que en
cualquier ancho por encima de este breakpoint el contenido
se ve siempre expandido, igual que antes de este cambio.
pointer-events:none en el summary (fuera de la media query)
evita que un click en desktop dispare el toggle nativo y
lo colapse. home.js le saca el atributo "open" al cargar
si el viewport ya es ≤720px, para que arranque cerrado.
========================================================= */
details.mobile-accordion{margin:0}
details.mobile-accordion > summary{display:block;list-style:none;pointer-events:none}
details.mobile-accordion > summary::-webkit-details-marker{display:none}
@media(max-width:720px){
/* 1) Hero: alto máximo 65vh, solo título + 2 botones.
Se ocultan la bajada larga y el bloque de logo/identidad;
los 3 puntos de prueba quedan (ver punto 4) porque caben
en una fila compacta sin comerse el alto. */
.brand-intro{max-height:65vh;min-height:0;padding:26px 20px 18px}
.brand-intro-copy{padding-left:0}
.brand-intro-lead,.brand-intro-identity{display:none}
/* 2) Orden de secciones: "Recién llegado" sube justo debajo
del hero, antes de la grilla de categorías. Se resuelve
con order sobre , sin mover nada en el HTML. */
main{display:flex;flex-direction:column}
main > section:nth-of-type(1){order:1}
main > section:nth-of-type(3){order:2}
main > section:nth-of-type(2){order:3}
main > section:nth-of-type(4){order:4}
main > section:nth-of-type(5){order:5}
/* 3) Categorías: tira horizontal de 7 chips con scroll-snap,
sin numeración ni bajada — solo el nombre. */
.category-row{
display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.category-row::-webkit-scrollbar{display:none}
.category-card{
flex:0 0 auto;scroll-snap-align:start;
display:inline-flex;flex-direction:row;align-items:center;justify-content:center;
min-height:44px;height:auto;min-width:0;
padding:10px 20px;
}
.category-card span,.category-card small{display:none}
/* 4) Los tres puntos 01/02/03 del hero: una fila compacta,
sin numeración ni descripción — solo el título corto. */
.brand-intro-proof{display:flex;gap:8px}
.brand-intro-proof div{flex:1 1 0;min-width:0;text-align:center}
.brand-intro-proof span,.brand-intro-proof small{display:none}
/* 5) y 6) Acordeones: indicador +/- y toggle habilitado */
details.mobile-accordion > summary{cursor:pointer;position:relative;padding-right:26px;pointer-events:auto}
details.mobile-accordion > summary::after{content:'+';position:absolute;right:0;top:0;font-size:18px;color:var(--muted)}
details.mobile-accordion[open] > summary::after{content:'−'}
/* 6) Footer: Comprar/Ayuda/Vender como acordeones apilados;
de la línea de zonas/copyright se oculta solo la bajada. */
.footer-grid{grid-template-columns:1fr;gap:0}
.footer-grid>div:first-child{grid-column:auto}
.footer-grid > details{border-top:.5px solid var(--line);padding:14px 0}
.footer-grid > details > summary h4{margin:0}
.footer-bottom .footer-tagline{display:none}
}
/* 7) Barra inferior fija: el body ya suma --bottombar-h (64px,
definido en el breakpoint de 900px de arriba) + el safe area
como padding-bottom, así que el último bloque nunca queda
tapado. Sigue vigente sin cambios por debajo de 720px. */
/* =========================================================
HEADER MOBILE ≤720px — aplica a las 7 páginas (el header
es igual en todas). Nada de esto se ve fuera de la media
query: .btn-icon queda oculto por defecto para que el
botón "Bolsa" del header siga mostrando la palabra en
desktop, tal cual está hoy.
========================================================= */
.btn-icon{display:none}
@media(max-width:720px){
/* 1) "Quiero vender" se monta sobre el logo: fuera del header
en mobile. Sigue disponible como botón del hero y en el
footer, así que el acceso no se pierde. */
.header .seller-btn{display:none}
/* 2) El logo nunca empuja a los íconos */
.header .logo-wordmark{width:150px;max-width:150px;height:auto;flex-shrink:0}
/* 3) Barra de anuncio: ocupaba dos líneas, se oculta */
#nm-final-topstrip-v19{display:none!important}
.nm17-topstrip{display:none}
/* 4) Íconos a 40px de diámetro, contador como badge en la
esquina; "Bolsa" muestra el ícono en vez de la palabra */
.header .icon-btn{
position:relative;
width:40px;height:40px;min-height:0;padding:0;
display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;
}
.header .icon-btn .count{
position:absolute;top:-2px;right:-2px;margin-left:0;
min-width:16px;height:16px;font-size:9px;
}
.header .btn-icon{display:inline-flex;font-size:16px}
.header .btn-label{display:none}
}
/* =========================================================
FORMULARIO DEL VENDEDOR (vender.html) — 5 pasos.
Reusa --crema/--tinta/--verde/--card-surface/--line/--muted
y los componentes .field/.btn/.pill que ya existían. Sin
rectángulos duros: todo con el mismo radio y glass que el
resto del sitio donde corresponde.
========================================================= */
.seller-form-shell{max-width:640px;margin:0 auto}
/* Barra de progreso: 5 puntos conectados por una línea */
.stepper{display:flex;align-items:center;margin-bottom:28px}
.stepper-dot{
width:28px;height:28px;border-radius:50%;flex:0 0 auto;
display:grid;place-items:center;
background:var(--card-surface);border:.5px solid var(--line);
color:var(--muted);font-size:12px;font-weight:800;
}
.stepper-line{flex:1 1 auto;height:1px;background:var(--line);margin:0 4px}
.stepper-dot.is-done{background:var(--verde);border-color:var(--verde);color:var(--crema)}
.stepper-dot.is-current{border-color:var(--verde);color:var(--verde)}
.stepper-line.is-done{background:var(--verde)}
.stepper-label{text-align:center;color:var(--muted);font-size:13px;margin:-16px 0 26px}
/* Cada paso ocupa una tarjeta de superficie, coherente con el resto */
.step-panel{
background:var(--card-surface);border:.5px solid var(--line);box-shadow:var(--card-shadow);
border-radius:28px;padding:28px;margin-bottom:18px;
}
.step-panel[hidden]{display:none}
.step-panel h2{font-family:'Playfair Display',serif;font-size:26px;margin:0 0 6px}
.step-panel .step-intro{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 20px}
/* Tarjetas de opción (radio/checkbox) tocables, sin bordes duros */
.option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0 20px}
.option-card{
position:relative;min-height:44px;border-radius:16px;
border:.5px solid var(--line);background:#fff;
padding:12px 14px;cursor:pointer;
}
.option-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.option-card strong{display:block;font-size:14px}
.option-card small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.4}
.option-card:has(input:checked){border-color:var(--verde);background:rgba(63,80,64,.08)}
.option-card:has(input:checked) strong{color:var(--verde)}
/* Paso 2 — medidas: dibujo + input, uno por fila en mobile */
.medida-field{
display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;
padding:12px 0;border-top:.5px solid var(--line);
}
.medida-field:first-of-type{border-top:0}
.medida-field img{width:64px;height:auto}
.medida-field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.medida-field .campo-opcional{color:var(--muted);font-weight:400}
.medidas-aviso{
background:rgba(63,80,64,.08);border:.5px solid var(--line);border-radius:16px;
padding:14px 16px;font-size:13px;color:var(--tinta);margin-bottom:18px;line-height:1.5;
}
/* Paso 3 — aviso de falla declarada */
.falla-aviso{
display:none;background:rgba(63,80,64,.1);border:.5px solid var(--verde);border-radius:16px;
padding:14px 16px;margin-top:14px;font-size:13px;color:var(--tinta);line-height:1.5;
}
.falla-aviso.is-visible{display:block}
.falla-detalle{margin-top:8px}
/* Paso 4 — fotos */
.foto-slot{
border:.5px dashed var(--line);border-radius:20px;background:#fff;
padding:16px;margin-bottom:14px;
}
.foto-slot > strong{display:block;font-size:14px;margin-bottom:4px}
.foto-slot > p{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.5}
.foto-input-btn{
display:inline-flex;align-items:center;justify-content:center;min-height:44px;
padding:0 18px;border-radius:999px;border:.5px solid var(--line);
background:var(--card-surface);color:var(--tinta);font-weight:700;font-size:13px;cursor:pointer;
}
.foto-input-btn input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.foto-input-btn:has(input:disabled){opacity:.5;cursor:default}
.foto-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:12px}
.foto-preview{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--crema)}
.foto-preview img{width:100%;height:100%;object-fit:cover;display:block}
.foto-preview .foto-remove{
position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
border:0;background:rgba(20,17,15,.72);color:#fff;font-size:14px;line-height:1;cursor:pointer;
}
.foto-preview .foto-progreso{
position:absolute;inset:0;background:rgba(20,17,15,.55);color:var(--crema);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.foto-preview.is-ok .foto-progreso{display:none}
/* Paso 5 — resumen y precio */
.precio-recibis{
background:rgba(63,80,64,.1);border:.5px solid var(--verde);border-radius:16px;
padding:14px 16px;margin:12px 0 20px;
}
.precio-recibis strong{display:block;color:var(--verde);font-size:22px}
.precio-recibis span{display:block;color:var(--muted);font-size:12px}
.field-hint{display:block;margin-top:5px;color:var(--muted);font-size:12px}
/* Bloques explicativos del paso de precio: comisión, consejo de
precio, vigencia y estado de la prenda. Son texto de lectura, no
controles, así que van sin el peso visual de un campo. */
.nota-vendedor{margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--card-surface);border:.5px solid var(--line)}
.nota-vendedor h4{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.nota-vendedor p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.nota-vendedor--destacada{background:rgba(63,80,64,.08);border-color:var(--verde)}
.resumen-list{display:flex;flex-direction:column;gap:0}
.resumen-row{
display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
padding:12px 0;border-top:.5px solid var(--line);font-size:13px;
}
.resumen-row:first-child{border-top:0}
.resumen-row dt{color:var(--muted);flex:0 0 40%}
.resumen-row dd{margin:0;flex:1 1 auto;text-align:right}
.resumen-editar{color:var(--verde);font-weight:700;font-size:12px;margin-left:8px}
.confirmacion-check{display:flex;gap:10px;align-items:flex-start;margin:20px 0;font-size:13px;line-height:1.5}
.confirmacion-check input{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
/* Navegación entre pasos */
.form-nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.form-nav .btn{flex:1 1 0}
.field-error{color:#8a2f2f;font-size:12px;margin-top:6px}
.honeypot-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Pantalla de éxito */
.exito-panel{text-align:center;padding:40px 24px}
.exito-panel .codigo-grande{
font-family:'Playfair Display',serif;font-size:40px;color:var(--verde);margin:14px 0;
}
@media(max-width:720px){
.seller-form-shell{padding:0 4px}
.step-panel{padding:20px;border-radius:22px}
.medida-field{grid-template-columns:52px 1fr}
.medida-field img{width:52px}
}