/* Web pública de Semu: sistema de diseño (un solo archivo).
   Estética de tienda de moda: blanco, negro, grises cálidos y un único
   acento (el naranja de Semu) solo en el botón principal y detalles.
   Tipografía: Inter, servida desde /static/ (la misma que trae el admin). */

/* ── Fuente ─────────────────────────────────────────────────────────── */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../unfold/fonts/inter/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../unfold/fonts/inter/Inter-Medium.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../unfold/fonts/inter/Inter-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../unfold/fonts/inter/Inter-Bold.woff2) format("woff2")}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Color */
  --c-fondo:#FFFFFF;
  --c-fondo-alt:#FAFAF9;
  --c-texto:#111111;
  --c-texto-2:#6B6B6B;        /* 5,3:1 sobre blanco */
  --c-borde:#E7E5E4;
  --c-acento:#F26B1D;         /* solo fondo del botón principal y detalles */
  --c-acento-texto:#111111;   /* texto sobre el acento: 6,2:1 */
  --c-pie:#111111;
  --c-pie-texto:#A8A29E;      /* 7,5:1 sobre el pie */
  --c-error:#B42318;

  /* Tipografía: una sola familia */
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-1:clamp(36px,5.2vw,56px);   /* titular del hero */
  --t-2:clamp(28px,3.4vw,40px);   /* títulos de sección y de página */
  --t-3:clamp(20px,2vw,24px);
  --t-cuerpo:16px;
  --t-pequeno:14px;
  --t-mini:12px;
  --tracking-titular:-0.02em;

  /* Espaciado */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:24px;--e-6:32px;--e-7:48px;--e-8:64px;--e-9:96px;--e-10:128px;

  /* Forma */
  --r-1:6px;--r-2:8px;
  --borde:1px solid var(--c-borde);
  --sombra-hover:0 2px 8px rgb(0 0 0 / .06);
  --ancho:1240px;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-fondo);color:var(--c-texto);font-family:var(--f-sans);font-size:var(--t-cuerpo);line-height:1.6;-webkit-font-smoothing:antialiased}
body,button,input,select,textarea{font-family:var(--f-sans)}
.web{background:var(--c-fondo);color:var(--c-texto)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-weight:600;letter-spacing:var(--tracking-titular);line-height:1.1;margin:0;color:var(--c-texto);text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--ancho);margin:0 auto;padding-left:var(--e-4);padding-right:var(--e-4)}
@media (min-width:768px){.wrap{padding-left:var(--e-5);padding-right:var(--e-5)}}
@media (min-width:1024px){.wrap{padding-left:var(--e-7);padding-right:var(--e-7)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--c-texto);outline-offset:2px}
.eyebrow,.etiqueta{font-size:var(--t-mini);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-texto-2)}
.display{font-weight:600;letter-spacing:var(--tracking-titular)}
.texto-2{color:var(--c-texto-2)}
body.con-modal{overflow:hidden}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn,.btn-primary,.btn-oscuro{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);height:48px;padding:0 var(--e-5);border-radius:var(--r-2);border:0;font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn,.btn-primary{background:var(--c-acento);color:var(--c-acento-texto)}
.btn:hover,.btn-primary:hover{box-shadow:var(--sombra-hover)}
.btn-oscuro{background:var(--c-texto);color:#FFFFFF}
.btn-oscuro:hover{background:#2A2A2A}
.btn-sec,.btn-borde{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);height:48px;padding:0 var(--e-5);border-radius:var(--r-2);border:var(--borde);background:var(--c-fondo);color:var(--c-texto);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.btn-borde{width:48px;padding:0}
.btn-sec:hover,.btn-borde:hover{border-color:#C9C6C3}
.btn-sm{height:40px;padding:0 var(--e-4);font-size:14px}
.icono-btn,.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:left}
.enlace{font-size:var(--t-pequeno);font-weight:500;border-bottom:1px solid currentColor;padding-bottom:1px}
.enlace:hover{color:var(--c-texto-2)}

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cab{position:sticky;top:0;z-index:50;isolation:isolate}
/* Al bajar más de 8 px (clase .cab-scroll, ver web.js): borde y fondo
   translúcido con desenfoque. Van en una capa aparte que solo cambia de
   opacidad (no se animan ni el borde ni el fondo). */
.cab::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(255 255 255 / .85);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:var(--borde);opacity:0;transition:opacity .2s ease-out}
.cab-scroll::before{opacity:1}
.cab-fila{display:flex;align-items:center;gap:var(--e-6);height:64px}
.cab-logo{display:flex;align-items:center;gap:var(--e-2);flex-shrink:0;font-size:18px;font-weight:700;letter-spacing:.04em}
.cab-logo img{width:26px;height:30px;object-fit:contain;display:block}
.cab-nav{display:flex;gap:var(--e-5);font-size:var(--t-pequeno);font-weight:500}
.cab-nav a{padding:var(--e-1) 0;color:var(--c-texto-2)}
.cab-nav a:hover,.cab-nav a[aria-current="page"]{color:var(--c-texto)}
.cab-nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--c-texto)}
.cab-acciones{display:flex;align-items:center;gap:var(--e-2);margin-left:auto}
.cab-icono{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-2);color:var(--c-texto)}
.cab-icono:hover{background:var(--c-fondo-alt)}
.cab-cuenta{font-size:var(--t-pequeno);font-weight:500;padding:0 var(--e-2);height:44px;display:flex;align-items:center;color:var(--c-texto-2)}
.cab-cuenta:hover{color:var(--c-texto)}
.cab .btn{height:40px;padding:0 var(--e-4);font-size:14px}
.cab-nav-movil{display:none}
@media (max-width:767px){
  .cab-fila{gap:var(--e-3);height:56px}
  .cab-nav,.cab-cuenta{display:none}
  .cab-nav-movil{display:flex;gap:var(--e-5);height:40px;align-items:center;font-size:var(--t-pequeno);font-weight:500;border-top:var(--borde)}
  .cab-nav-movil a{color:var(--c-texto-2)}
  .cab-nav-movil a[aria-current="page"]{color:var(--c-texto)}
}

/* ── Secciones ──────────────────────────────────────────────────────── */
.sec{padding-top:var(--e-9)}
.sec-alt{background:var(--c-fondo-alt);border-top:var(--borde);border-bottom:var(--borde);padding:var(--e-9) 0;margin-top:var(--e-9)}
.sec-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--e-4);margin-bottom:var(--e-6)}
.sec-cab h2,.h2{font-size:var(--t-2)}
.sec-cab .eyebrow{display:block;margin-bottom:var(--e-3)}
@media (max-width:767px){.sec{padding-top:var(--e-8)}.sec-alt{padding:var(--e-8) 0;margin-top:var(--e-8)}}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{padding-top:var(--e-8)}
.hero-rejilla{display:grid;gap:var(--e-7);align-items:center}
@media (min-width:960px){.hero-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--e-8)}}
.hero h1{font-size:var(--t-1);line-height:1.02}
.hero-sub{margin-top:var(--e-5);max-width:440px;font-size:18px;line-height:1.55;color:var(--c-texto-2)}
.hero-accion{margin-top:var(--e-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-4)}
.hero-nota{font-size:var(--t-pequeno);color:var(--c-texto-2)}
.hero-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3)}
.hero-fotos a{display:block;aspect-ratio:4/5;border-radius:var(--r-1);overflow:hidden;background:var(--c-fondo-alt)}
.hero-fotos a:nth-child(2n){transform:translateY(var(--e-7))}
.hero-fotos img{width:100%;height:100%;object-fit:cover;display:block}
.hero-fotos-espacio{padding-bottom:var(--e-7)}
@media (max-width:959px){
  .hero{padding-top:var(--e-7)}
  .hero-fotos a:nth-child(2n){transform:translateY(var(--e-5))}
  .hero-fotos-espacio{padding-bottom:var(--e-5)}
}

/* ── Rejilla de productos ───────────────────────────────────────────── */
.pg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-6) var(--e-3)}
@media (min-width:768px){.pg{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-7) var(--e-4)}}
@media (min-width:1024px){.pg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pg-item{min-width:0;display:flex;flex-direction:column}
.pg-foto{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-1);overflow:hidden;background:var(--c-fondo-alt)}
.pg-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pg-sinfoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#A8A29E}
.pg-tag{position:absolute;top:var(--e-2);left:var(--e-2);background:var(--c-fondo);color:var(--c-texto);padding:3px 7px;border-radius:4px;font-size:10px !important;line-height:1.4}
.pg-tit{display:block;margin-top:var(--e-3);font-size:var(--t-pequeno);color:var(--c-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-precio{display:block;margin-top:2px;font-size:var(--t-pequeno);color:var(--c-texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-precio b{font-weight:500;color:var(--c-texto)}
.pg-precio small{font-size:var(--t-mini);margin-left:3px}

/* ── Banda de destacados ──────────────────────────────────────────────
   Tarjetas de ancho fijo (--tarjeta: 160 px en móvil, 240 px desde
   768 px), foto 4:5: nunca a todo el ancho.
   Con 4 o más, web.js repite los productos hasta cubrir el doble de la
   pantalla, fija --banda-ancho (un juego de productos) y --banda-duracion
   (~40 px/s) y añade .banda-animada: la pista se mueve exactamente un
   juego y vuelve a empezar, sin saltos. Pausa con el ratón, el foco o al
   arrastrar. Sin JS o con "reducir movimiento": fila deslizable con
   scroll-snap. Con menos de 4 (.banda-fija): fila fija. */
:root{--tarjeta:160px;--hueco:var(--e-4)}
@media (min-width:768px){:root{--tarjeta:240px}}
.banda{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent)}
.banda::-webkit-scrollbar{display:none}
.banda-pista{display:flex;width:max-content}
.banda-item{flex:none;width:calc(var(--tarjeta) + var(--hueco));padding-right:var(--hueco);scroll-snap-align:start}
.banda-fija{overflow:visible;-webkit-mask-image:none;mask-image:none}
.banda-fija .banda-pista{width:auto;flex-wrap:wrap;gap:var(--e-6) var(--hueco)}
.banda-fija .banda-item{width:var(--tarjeta);padding-right:0}
.banda-animada{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;-webkit-mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.banda-animada .banda-pista{animation:banda var(--banda-duracion,60s) linear infinite;will-change:transform}
.banda-animada:hover .banda-pista,.banda-animada:focus-within .banda-pista,.banda-pausa .banda-pista{animation-play-state:paused}
@keyframes banda{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--banda-ancho,0px)))}}
@media (prefers-reduced-motion:reduce){
  .banda-animada .banda-pista{animation:none}
  .banda-copia{display:none}
}

/* ── Aparición al hacer scroll ───────────────────────────────────────
   html.anim la pone un script en <head> (solo si se puede animar y no se
   pide reducir movimiento); web.js añade .visible una sola vez. */
html.anim .revelar{opacity:0;transform:translateY(16px);transition:opacity .4s ease-out,transform .4s ease-out}
html.anim .revelar.visible{opacity:1;transform:none}

/* ── Categorías (fotos reales) ──────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-5) var(--e-3)}
@media (min-width:768px){.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-6) var(--e-4)}}
@media (min-width:1024px){.cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cat{display:block;min-width:0}
.cat-foto{display:block;aspect-ratio:4/5;border-radius:var(--r-1);overflow:hidden;background:var(--c-fondo-alt)}
.cat-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Hover en fotos: solo con ratón (en móvil, un toque no deja la foto ampliada). */
@media (hover:hover){
  .hero-fotos img,.pg-foto img,.cat-foto img{transition:transform .3s ease-out}
  .hero-fotos a:hover img,.pg-foto:hover img,.cat:hover .cat-foto img{transform:scale(1.03)}
}
.cat-nombre{display:flex;justify-content:space-between;align-items:center;gap:var(--e-2);margin-top:var(--e-3);font-size:15px;font-weight:500}
.cat-nombre svg{flex-shrink:0;color:var(--c-texto-2);transition:transform .2s ease}
@media (hover:hover){.cat:hover .cat-nombre svg{transform:translateX(3px)}}

/* ── Cómo funciona ──────────────────────────────────────────────────── */
.pasos{display:grid;gap:var(--e-6);list-style:none;margin:0;padding:0;counter-reset:paso}
@media (min-width:768px){.pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-7)}}
.paso{display:flex;flex-direction:column;gap:var(--e-3)}
.paso svg{color:var(--c-texto)}
.paso-num{font-size:var(--t-mini);font-weight:500;letter-spacing:.14em;color:var(--c-texto-2)}
.paso h3{font-size:18px;letter-spacing:-0.01em;line-height:1.3}
.paso p{font-size:15px;color:var(--c-texto-2);line-height:1.6;max-width:320px}
.sellos{list-style:none;margin-bottom:0;padding-left:0;display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6);margin-top:var(--e-7);padding-top:var(--e-5);border-top:var(--borde);font-size:var(--t-pequeno);color:var(--c-texto-2)}
.sellos li{display:flex;align-items:center;gap:var(--e-2)}
.sellos svg{color:var(--c-acento);flex-shrink:0}

/* ── Bloque final de descarga ───────────────────────────────────────── */
.final{display:grid;gap:var(--e-6);align-items:center}
@media (min-width:860px){.final{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--e-7)}}
.final-mascota{width:120px;height:auto;display:block}
.final h2{font-size:var(--t-2)}
.final p{margin-top:var(--e-3);color:var(--c-texto-2);max-width:460px}
.tiendas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);margin-top:var(--e-5)}
.qr{display:flex;flex-direction:column;align-items:center;gap:var(--e-2);font-size:var(--t-mini);color:var(--c-texto-2)}
.qr svg{width:128px;height:128px;display:block;background:#FFFFFF;border:var(--borde);border-radius:var(--r-1)}
@media (max-width:859px){.final .qr{display:none}}

/* Insignias de tienda: misma altura y forma (negras) */
.badge-appstore{display:inline-flex;line-height:0;height:48px}
.badge-appstore img{height:48px;width:auto;display:block}
.badge-android{display:inline-flex;align-items:center;gap:8px;height:48px;min-width:144px;padding:0 14px 0 10px;border-radius:9px;background:#000000;border:1px solid #A6A6A6;color:#FFFFFF;text-decoration:none;line-height:1.05}
.badge-android span{display:flex;flex-direction:column;font-size:18px;font-weight:600;letter-spacing:-0.01em}
.badge-android small{font-size:10px;font-weight:500;letter-spacing:.02em}
.badge-android:hover{background:#1A1A1A}
.btn-tienda{display:inline-flex;align-items:center;height:48px;padding:0 var(--e-4);border-radius:var(--r-2);border:var(--borde);font-size:13px;font-weight:600}

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie{background:var(--c-pie);color:var(--c-pie-texto);margin-top:var(--e-9);font-size:var(--t-pequeno)}
.pie-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-6);padding-top:var(--e-8);padding-bottom:var(--e-7)}
@media (min-width:768px){.pie-cols{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr))}}
.pie-marca{grid-column:1 / -1}
@media (min-width:768px){.pie-marca{grid-column:auto}}
.pie-logo{display:flex;align-items:center;gap:var(--e-2);color:#FFFFFF;font-size:18px;font-weight:700;letter-spacing:.04em}
.pie-logo img{width:26px;height:30px;object-fit:contain;display:block;background:#FFFFFF;border-radius:4px;padding:2px}
.pie-marca p{margin-top:var(--e-4);max-width:300px;line-height:1.6}
.pie-tit{color:#FFFFFF;font-size:var(--t-mini);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--e-4)}
.flink{display:block;padding:var(--e-1) 0;color:var(--c-pie-texto)}
.flink:hover{color:#FFFFFF}
.pie-fondo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e-3);padding-top:var(--e-5);padding-bottom:var(--e-6);border-top:1px solid #2A2A2A;font-size:var(--t-mini)}

.pie-descargas{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pie-descargas a{color:#FFFFFF}
.pie-descargas a:hover{text-decoration:underline}

/* ── Páginas interiores (base.html) ─────────────────────────────────── */
.web-main{padding-top:var(--e-7);padding-bottom:var(--e-8);min-height:50vh}
.web-main h1{font-size:var(--t-2);margin:0 0 var(--e-5)}
.aviso{background:var(--c-fondo-alt);border:var(--borde);border-radius:var(--r-2);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-5);font-size:var(--t-pequeno)}
.cab-pagina{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--e-4);margin-bottom:var(--e-6)}
.cab-pagina h1{margin:var(--e-2) 0 0}
.vacio-simple,.vacio{padding:var(--e-8) var(--e-4);text-align:center;color:var(--c-texto-2);border-top:var(--borde);border-bottom:var(--borde);display:flex;flex-direction:column;align-items:center;gap:var(--e-3)}
.vacio-titulo{font-size:18px;font-weight:600;color:var(--c-texto)}

/* Filtros del listado */
.filtros{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-6)}
.filtros input,.filtros select{height:44px;border:var(--borde);border-radius:var(--r-2);padding:0 var(--e-3);font-size:var(--t-pequeno);color:var(--c-texto);background:var(--c-fondo);min-width:0}
.filtros input{flex:1 1 220px}
.filtros select{flex:0 1 190px}
.filtros button{height:44px;padding:0 var(--e-5);border:0;border-radius:var(--r-2);background:var(--c-texto);color:#FFFFFF;font-size:var(--t-pequeno);font-weight:600;cursor:pointer}
@media (max-width:640px){.filtros select{flex:1 1 calc(50% - 4px)}.filtros button{flex:1 1 100%}}
.paginas{display:flex;justify-content:center;align-items:center;gap:var(--e-4);margin-top:var(--e-7);font-size:var(--t-pequeno)}
.paginas a{padding:var(--e-2) var(--e-4);border:var(--borde);border-radius:var(--r-2)}
.paginas a:hover{border-color:#C9C6C3}

/* Detalle de producto */
.det{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--e-8);align-items:start}
@media (max-width:860px){.det{grid-template-columns:minmax(0,1fr);gap:var(--e-5)}}
.det-fotos{display:grid;gap:var(--e-2)}
.det-fotos .principal{aspect-ratio:4/5;border-radius:var(--r-1);overflow:hidden;background:var(--c-fondo-alt);position:relative}
.det-fotos .principal img{width:100%;height:100%;object-fit:cover;display:block}
.det-miniaturas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--e-2)}
.det-miniaturas button{aspect-ratio:4/5;border:0;padding:0;border-radius:4px;overflow:hidden;cursor:pointer;background:var(--c-fondo-alt);opacity:.7}
.det-miniaturas button[aria-current="true"]{opacity:1;outline:1px solid var(--c-texto);outline-offset:1px}
.det-miniaturas img{width:100%;height:100%;object-fit:cover;display:block}
.det-info h1{font-size:var(--t-2);margin:var(--e-2) 0 var(--e-3)}
.det-precio{font-size:22px;font-weight:500}
.det-precio small{font-size:var(--t-pequeno);margin-left:4px;color:var(--c-texto-2)}
.det-meta{margin-top:var(--e-2);color:var(--c-texto-2);font-size:var(--t-pequeno)}
.det-desc{margin-top:var(--e-5);padding-top:var(--e-5);border-top:var(--borde);color:var(--c-texto);font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.det-acciones{display:flex;gap:var(--e-2);margin-top:var(--e-6);flex-wrap:wrap}
.det-encargo{margin:0 0 var(--e-2);font-size:var(--t-pequeno);font-weight:500}
.det-aviso{margin-top:var(--e-4);padding:var(--e-3) var(--e-4);border:var(--borde);border-radius:var(--r-2);background:var(--c-fondo-alt);font-size:13px;color:var(--c-texto)}
.det-nota{margin-top:var(--e-3);font-size:13px;color:var(--c-texto-2)}

/* Mi cuenta */
.cuenta-resumen{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-bottom:var(--e-5)}
.cuenta-dato{border:var(--borde);border-radius:var(--r-2);padding:var(--e-4) var(--e-5);min-width:150px}
.cuenta-dato b{display:block;font-size:24px;font-weight:600}
.cuenta-dato span{font-size:13px;color:var(--c-texto-2)}
.cuenta-seccion{margin-top:var(--e-8)}
.cuenta-seccion h2{font-size:var(--t-3);margin:var(--e-2) 0 var(--e-5)}
.opinion{padding:var(--e-4) 0;border-top:var(--borde)}
.opinion:last-child{border-bottom:var(--borde)}
.opinion-cab{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);font-size:var(--t-pequeno)}
.estrellas{color:var(--c-texto);letter-spacing:2px}
.opinion p{margin-top:var(--e-2);color:var(--c-texto);line-height:1.6;overflow-wrap:anywhere}
.opinion time{color:var(--c-texto-2);font-size:13px}

/* Formularios (login, registro, contraseña) */
.auth-form{max-width:420px;display:flex;flex-direction:column;gap:var(--e-1)}
.auth-form p{margin:0 0 var(--e-3);display:flex;flex-direction:column;gap:6px;font-size:var(--t-pequeno)}
.auth-form label{font-weight:500}
.auth-form input{height:46px;border:var(--borde);border-radius:var(--r-2);padding:0 var(--e-3);font-size:15px}
.auth-form input:focus{outline:2px solid var(--c-texto);outline-offset:0;border-color:transparent}
.auth-form .helptext,.auth-form ul{font-size:var(--t-mini);color:var(--c-texto-2)}
.auth-form button{align-self:flex-start}
.errorlist{color:var(--c-error);font-size:13px;padding-left:18px}
.texto-legal{max-width:720px;line-height:1.7}
.back-link{display:inline-block;margin-bottom:var(--e-4);font-size:var(--t-pequeno);color:var(--c-texto-2)}
.auth{display:flex;flex-direction:column;gap:var(--e-5);max-width:480px;margin:0 auto}
.auth-img{display:block;height:180px;border-radius:var(--r-2);overflow:hidden;background:var(--c-fondo-alt)}
.auth-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos-movil,50% 40%)}
.auth-cuerpo{min-width:0}
.auth-cuerpo h1{margin:var(--e-1) 0 var(--e-5)}
.auth-frase{margin:0 0 6px;font-size:var(--t-pequeno);color:var(--c-texto-2)}
.auth-enlaces{margin-top:var(--e-3);font-size:var(--t-pequeno);color:var(--c-texto-2)}
.auth-enlaces a{color:var(--c-texto);border-bottom:1px solid currentColor}
@media (min-width:900px){
  .auth{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--e-8);max-width:980px}
  .auth-cuerpo{order:0;flex:0 1 420px;max-width:420px}
  .auth-img{order:1;flex:0 0 auto;height:min(calc(100vh - 190px),860px);min-height:560px;aspect-ratio:9/16}
  .auth-img img{object-position:center}
}

/* Textos legales y "Acerca de" */
.legal,.acerca{max-width:720px;font-size:var(--t-cuerpo);line-height:1.7;overflow-wrap:anywhere}
.legal h1{font-size:var(--t-2);margin:0 0 6px}
.legal .updated{margin:0 0 var(--e-6);font-size:var(--t-pequeno);color:var(--c-texto-2)}
.legal h2{position:relative;font-size:19px;line-height:1.35;margin:var(--e-6) 0 var(--e-3);scroll-margin-top:90px}
.legal p,.acerca p{margin:0 0 var(--e-4)}
.legal ul{margin:0 0 var(--e-4);padding-left:22px}
.legal li{margin-bottom:var(--e-2)}
.legal strong{font-weight:600}
.legal .ancla{position:absolute;left:-22px;top:0;width:20px;color:#C9C6C3;text-decoration:none;opacity:0;transition:opacity .15s}
.legal .ancla::before{content:"#"}
.legal h2:hover .ancla,.legal .ancla:focus{opacity:1}
@media (max-width:760px){.legal .ancla{position:static;opacity:1;margin-right:6px}}

/* /android/ */
.apk{max-width:620px;margin:0 auto}
.apk h1{margin:var(--e-2) 0 var(--e-3)}
.apk-intro{font-size:17px;color:var(--c-texto-2);margin:0 0 var(--e-5)}
.apk-tiendas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);margin:var(--e-2) 0 var(--e-1)}
.btn-apk{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);height:48px;padding:0 var(--e-5);border-radius:var(--r-2);background:var(--c-acento);color:var(--c-acento-texto);font-size:15px;font-weight:600}
.btn-apk:hover{box-shadow:var(--sombra-hover)}
.btn-apk-grande{width:100%;height:56px;font-size:16px}
.apk-qr{display:flex;align-items:center;gap:var(--e-4);margin-top:var(--e-4);font-size:var(--t-pequeno);color:var(--c-texto-2)}
.apk-qr svg{width:120px;height:120px;flex-shrink:0;border:var(--borde);border-radius:var(--r-1)}
.apk-datos{display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6);margin:var(--e-5) 0 var(--e-3)}
.apk-datos dt{font-size:var(--t-mini);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-texto-2)}
.apk-datos dd{margin:2px 0 0;font-size:var(--t-cuerpo);font-weight:500}
.apk-h2{font-size:20px;margin:var(--e-6) 0 var(--e-3)}
.apk-pasos{margin:0 0 var(--e-5);padding-left:22px}
.apk-pasos li{margin-bottom:var(--e-3)}
.apk-nota{background:var(--c-fondo-alt);border:var(--borde);border-radius:var(--r-2);padding:var(--e-4);font-size:15px;margin:0 0 var(--e-5)}
.apk-antiguo{font-size:var(--t-pequeno);color:var(--c-texto-2)}
.apk-antiguo a,.apk-fuentes a{color:var(--c-texto);border-bottom:1px solid currentColor}

/* ── Ventanas (modal "Descarga Semu" y bienvenida) ──────────────────── */
.capa{position:fixed;inset:0;z-index:1000;background:rgb(17 17 17 / .45);display:flex;align-items:center;justify-content:center;padding:var(--e-4)}
.capa[hidden]{display:none !important}
/* Al abrirse, el foco va a la tarjeta (sin aro); con Tab, a la X y los botones. */
.dl-caja:focus,.bv-caja:focus{outline:none}
.dl-x{position:absolute;top:var(--e-2);right:var(--e-2);width:44px;height:44px;border:0;border-radius:var(--r-2);background:transparent;color:var(--c-texto-2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0}
.dl-x:hover{color:var(--c-texto)}
.dl-caja{position:relative;width:100%;max-width:560px;background:var(--c-fondo);border:var(--borde);border-radius:var(--r-2);padding:var(--e-7) var(--e-6) var(--e-6);box-shadow:0 8px 32px rgb(0 0 0 / .08)}
.dl-caja h2{margin:var(--e-3) 0 var(--e-2);font-size:var(--t-2)}
.dl-caja p{color:var(--c-texto-2);font-size:15px}
.dl-cuerpo{display:flex;gap:var(--e-5);align-items:center;margin-top:var(--e-5)}
.dl-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--e-2);font-size:var(--t-mini);color:var(--c-texto-2)}
.dl-qr svg{width:136px;height:136px;display:block;border:var(--borde);border-radius:var(--r-1)}
.dl-acciones{display:flex;flex-direction:column;gap:var(--e-3);min-width:0}
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);height:48px;padding:0 var(--e-4);border-radius:var(--r-2);border:var(--borde);color:var(--c-texto);font-size:15px;font-weight:500}
.btn-wa:hover{border-color:#C9C6C3}
@media (max-width:767px){
  .capa{align-items:flex-end;padding:0}
  .dl-caja{max-width:none;border-radius:var(--r-2) var(--r-2) 0 0;padding:var(--e-7) var(--e-4) var(--e-5)}
  .dl-qr{display:none}
  .dl-acciones,.btn-wa{width:100%}
}

/* Bienvenida: una sola tarjeta, imagen a sangre + contenido sobre blanco */
.bv-caja{position:relative;width:100%;max-width:880px;display:grid;grid-template-columns:1fr 1fr;background:var(--c-fondo);border:var(--borde);border-radius:var(--r-2);overflow:hidden;box-shadow:0 8px 32px rgb(0 0 0 / .08)}
.bv-foto{min-height:520px;background:var(--c-fondo-alt)}
.bv-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.bv-texto{display:flex;flex-direction:column;justify-content:center;padding:var(--e-8) var(--e-7)}
.bv-eyebrow{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--c-texto-2)}
.bv-texto h2{margin-top:var(--e-4);font-size:44px;line-height:1.02;font-weight:600;letter-spacing:var(--tracking-titular)}
.bv-sub{margin-top:var(--e-4);font-size:17px;color:var(--c-texto-2);line-height:1.5}
.bv-raya{display:block;width:24px;height:2px;background:var(--c-acento);margin-top:var(--e-5)}
.bv-tiendas{display:flex;flex-wrap:wrap;gap:var(--e-3);align-items:center;margin-top:var(--e-5)}
.bv-qr{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-2);margin-top:var(--e-5);font-size:var(--t-mini);color:var(--c-texto-2)}
.bv-qr svg{width:112px;height:112px;display:block;background:#FFFFFF}
.bv-movil{display:none}
@media (max-width:767px){
  .bv-caja{grid-template-columns:1fr;max-width:none;max-height:92vh;overflow-y:auto;border-radius:var(--r-2) var(--r-2) 0 0;border-bottom:0}
  .bv-foto{min-height:0;aspect-ratio:4/3}
  .bv-foto img{object-position:50% 22%}
  .bv-texto{padding:var(--e-5) var(--e-4) var(--e-6)}
  .bv-texto h2{font-size:34px;margin-top:var(--e-3)}
  .bv-sub{margin-top:var(--e-3);font-size:16px}
  .bv-escritorio{display:none !important}
  .bv-movil{display:flex;margin-top:var(--e-5)}
  .bv-movil .btn{width:100%}
  .bv-caja .dl-x{background:rgb(255 255 255 / .85)}
}

/* Salir a una web externa (enlaces de vendedores, ver salir.js) */
.salir-fondo{position:fixed;inset:0;background:rgb(17 17 17 / .45);display:flex;align-items:flex-end;justify-content:center;z-index:1000}
.salir-hoja{background:var(--c-fondo);width:100%;max-width:480px;border-radius:var(--r-2) var(--r-2) 0 0;padding:var(--e-5) var(--e-4) var(--e-4)}
@media (min-width:600px){.salir-fondo{align-items:center}.salir-hoja{border-radius:var(--r-2);border:var(--borde)}}
.salir-hoja h2{margin:0 0 var(--e-2);font-size:18px}
.salir-hoja p{margin:0 0 var(--e-4);color:var(--c-texto-2);font-size:var(--t-pequeno)}
.salir-botones{display:flex;gap:var(--e-2)}
.salir-botones button{flex:1;height:48px;border-radius:var(--r-2);font:inherit;font-weight:600;cursor:pointer}
.salir-cancelar{background:var(--c-fondo);border:var(--borde);color:var(--c-texto)}
.salir-continuar{background:var(--c-texto);border:0;color:#FFFFFF}
/* Perfil público /u/<usuario>/ (1.7.1) */
.perfil{display:flex;gap:var(--e-5);align-items:flex-start;padding:var(--e-6) 0 var(--e-5)}
.perfil-foto{flex:0 0 auto;width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--c-acento);color:var(--c-acento-texto);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700}
.perfil-foto img{width:100%;height:100%;object-fit:cover}
.perfil-datos{min-width:0;flex:1}
.perfil-nombre{margin:0;font-size:28px;line-height:1.15;overflow-wrap:anywhere}
.perfil-verificado{vertical-align:-2px}
.perfil-usuario{margin:var(--e-1) 0 var(--e-3)}
.perfil-cifras{list-style:none;margin:0 0 var(--e-3);padding:0;display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5);font-size:15px}
.perfil-bio{margin:0 0 var(--e-4);max-width:60ch;white-space:pre-line}
.perfil-titulo{font-size:20px;margin:var(--e-5) 0 var(--e-4)}
@media (max-width:520px){.perfil{flex-direction:column;align-items:center;text-align:center}.perfil-cifras{justify-content:center}.perfil-bio{margin-inline:auto}.perfil .btn{width:100%}}
.perfil-vacio{padding:var(--e-6) 0;text-align:center}
/* SEO (1.7.1): vendido en el detalle y listados por categoría/ciudad */
.det-vendido{color:var(--c-texto);font-weight:600}
.det-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.similares{margin-top:var(--e-7)}
.listado-filtros{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0 0 var(--e-5)}
.listado-filtros a{padding:6px 14px;border:var(--borde);border-radius:999px;color:var(--c-texto);font-size:14px;text-decoration:none}
.listado-filtros a[aria-current]{background:var(--c-texto);border-color:var(--c-texto);color:#FFFFFF}