/* ===== Loggios VE — tema monocromático (Space Grotesk self-hosted) ===== */
/* Space Grotesk es una fuente VARIABLE: un solo fichero cubre del peso 300 al 700.
   Aquí estaba copiada CUATRO VECES con nombres distintos (400/500/600/700) y
   declarada como cuatro pesos fijos. Dos consecuencias: se descargaban 89 KB
   donde bastan 22, y como cada copia se usaba como un peso plano, el eje variable
   no se activaba nunca y las negritas salían con el mismo trazo que el texto normal.
   Comprobado: los cuatro ficheros tenían el mismo MD5, y ese MD5 es el del fichero
   variable que sirve Google Fonts.
   El subconjunto «ext» solo se descarga si la página usa algún carácter de su rango. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/space-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/space-grotesk-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#FAFAFA; --fg:#0D0D0D; --card:#FFFFFF; --primary:#141414; --primary-fg:#FAFAFA;
  --muted:#F4F4F5; --muted-fg:#71717A; --accent:#E4E4E7; --border:#DCDCDF;
  --radius:16px; --wa:#25D366; --danger:#DC2626; --ok:#16A34A; --warn:#D97706;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04); --shadow-lg:0 20px 40px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.06);
  --shadow-hover:0 20px 44px rgba(0,0,0,.16),0 8px 16px rgba(0,0,0,.08);
}
*,*::before,*::after{transition-timing-function:cubic-bezier(.4,0,.2,1)}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
/* Sobre el héroe (fondo oscuro) el anillo negro no se veía: 1,05:1 de contraste,
   y son catorce tabulaciones a ciegas para quien navega con el teclado. */
.hero :focus-visible,.hero-actions :focus-visible{outline-color:#fff;outline-width:3px}
::selection{background:var(--primary);color:var(--primary-fg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--muted-fg)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Space Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--fg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;margin:.2em 0}
.muted{color:var(--muted-fg)}
.center{text-align:center}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:12px;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;transition:.2s;font-family:inherit}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:var(--card);color:var(--fg);border-color:var(--border)}
.btn-outline:hover{background:var(--accent)}
.btn-wa{background:var(--wa);color:#062511}
.btn-danger{background:var(--danger);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Navbar flotante */
.nav{position:sticky;top:12px;z-index:50;margin:12px 16px 0}
.nav-inner{max-width:1200px;margin:0 auto;background:rgba(250,250,250,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px}
.nav-logo{display:flex;align-items:center;gap:9px}
.nav-logo img{height:42px;width:auto;object-fit:contain}
.nav-brand{font-weight:700;font-size:22px;letter-spacing:-.02em}
@media(max-width:520px){.nav-brand{display:none}}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{padding:9px 16px;border-radius:12px;font-size:14px;font-weight:600;transition:.2s}
.nav-links a:hover{background:var(--accent)}
.nav-links a.active{background:var(--primary);color:var(--primary-fg)}
.nav-actions{display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--card);border:1px solid var(--border);cursor:pointer;color:var(--fg);transition:.2s}
.icon-btn:hover{background:var(--accent)}
.icon-btn svg{display:block}
.nav.scrolled .nav-inner{box-shadow:0 8px 30px rgba(0,0,0,.12);background:rgba(250,250,250,.92)}
.badge{position:absolute;top:-6px;right:-6px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
/* Misma altura que .icon-btn (42 px): iban a 30 y se veía el escalón en la barra.
   De paso, el objetivo táctil pasa de 30 a 42 px. */
.wallet-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--accent);font-weight:700;font-size:14px}
.nav-toggle{display:none}

/* Hero / secciones */
.section{padding:48px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px}
.section-head p{margin:4px 0 0;color:var(--muted-fg)}

/* Grid de productos */
.grid{display:grid;gap:18px}
.grid-products{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
/* `minmax(0,1fr)` y `min-width:0`, y no es cosmético.
   Un `1fr` a secas NO puede encogerse por debajo del ancho mínimo de su
   contenido. Las dos columnas se quedaban en 179,4 px cada una —371 px con el
   hueco— dentro de un contenedor de 280 px a 320 px de ancho, así que la
   columna derecha se salía: 67 px cortados y el botón de carrito ENTERO fuera
   de la pantalla, sin forma de alcanzarlo.
   Y no se veía en las pruebas porque `html,body{overflow-x:hidden}` recorta el
   desbordamiento en silencio: `scrollWidth - clientWidth` daba 0 en las 110
   combinaciones medidas. Para detectarlo hay que medir la REJILLA, no el
   documento. */
.grid-products > *{min-width:0}
.pcard{min-width:0}
.grid-cats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Tarjeta producto */
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:14px;transition:.25s;display:flex;flex-direction:column}
.pcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.pcard .thumb{position:relative}
.pcard .chip{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);color:var(--fg);font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;box-shadow:var(--shadow-sm)}
.pcard .chip.feat{background:var(--primary);color:var(--primary-fg)}
.pcard .thumb{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.pcard .thumb img{width:100%;height:100%;object-fit:contain;padding:10px;transition:.3s}
.pcard:hover .thumb img{transform:scale(1.04)}
.pcard h3{font-size:15px;margin:0 0 4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .price-row{display:flex;flex-direction:column;margin-top:2px}
.pcard .price{font-weight:700;font-size:19px}
.pcard .old{color:var(--muted-fg);text-decoration:line-through;font-size:13px;margin-left:6px;font-weight:500}
.pcard .from{display:block;font-size:10px;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:1px}
.pcard .foot .btn-primary{flex:1;min-width:0}
.pcard .foot form{flex:0 0 auto}
.pcard .foot .btn-outline{flex:0 0 auto;padding:7px 11px}
.pcard .foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}

/* Tarjeta categoría — banner recortado (cover) para que el logo se vea grande y uniforme */
.ccard{display:block;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.25s}
.ccard:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.ccard img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;background:var(--muted);transition:transform .3s}
.ccard:hover img{transform:scale(1.05)}
.ccard .label{display:none}
/* Fallback cuando la categoría no tiene imagen */
.ccard-text{aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
  /* El relleno de una categoría SIN imagen. Llevaba un degradado claro escrito a
     fuego (#f4f4f5 → #e4e4e7): en una tienda de tema oscuro salían seis cajas
     BLANCAS en /categorias, la única mancha clara de todo el sitio. Ahora sale
     del propio fondo, así que sirve en claro y en oscuro. */
  background:var(--muted)}
@supports (background:color-mix(in srgb,red,blue)){
  .ccard-text{background:linear-gradient(135deg,
    color-mix(in srgb,var(--bg) 92%,var(--fg)),
    color-mix(in srgb,var(--bg) 84%,var(--fg)))}
}
.ccard-name{font-weight:700;font-size:18px;color:var(--fg);text-align:center;padding:0 14px}

/* Producto detalle */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.pd .gallery{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--muted);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pd .gallery img{width:100%;height:100%;object-fit:contain;padding:22px}
.variants{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.variant{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--border);border-radius:12px;padding:13px 16px;cursor:pointer;transition:.15s;background:var(--card)}
.variant:hover{border-color:var(--fg)}
.variant.sel{border-color:var(--primary);background:var(--primary);color:var(--primary-fg);box-shadow:var(--shadow-md)}
.variant input{display:none}
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--muted-fg)}
.breadcrumb a{color:var(--muted-fg)}
.breadcrumb a:hover{color:var(--fg)}
.breadcrumb .sep{color:var(--accent);font-size:16px}

/* Cards genéricas / formularios */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px}
.glass{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius)}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
/* `tel` y `date` faltaban: en el formulario del Pago Móvil salían con el ancho
   que le da el navegador, más estrechos que los de al lado. */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=date],input[type=url],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;background:var(--card);color:var(--fg)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:-1px}
.auth-wrap{max-width:430px;margin:60px auto;padding:0 20px}

/* Tabla */
table.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table.tbl th,table.tbl td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
/* --muted-fg sobre --muted daba 4,40:1, justo en el límite. #52525B sube a 6,4:1. */
table.tbl th{background:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#52525B}
table.tbl tr:last-child td{border-bottom:none}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.tag.pending{background:#FEF3C7;color:#92400E}
.tag.approved,.tag.delivered{background:#DCFCE7;color:#166534}
.tag.rejected{background:#FEE2E2;color:#991B1B}

/* Flash */
.flash{padding:12px 16px;border-radius:12px;margin:14px 0;font-weight:600;font-size:14px}
.flash.ok{background:#DCFCE7;color:#166534}
.flash.err{background:#FEE2E2;color:#991B1B}
.flash.info{background:#DBEAFE;color:#1E40AF}

/* WhatsApp flotante */
.wa-float{position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(37,211,102,.45);z-index:60;transition:.2s}
.wa-float:hover{transform:scale(1.08)}
/* El flotante tapaba controles de verdad: cubría el 53 % del botón «Consultar»
   y el 80 % del de «Añadir al carrito» en la columna derecha, y los enlaces del
   pie. Un botón fijo siempre tapa algo, así que se reduce en móvil y se aparta,
   y se le deja sitio al final de la página para que no se coma el pie. */
@media (max-width:720px){
  .wa-float{width:48px;height:48px;bottom:14px;right:14px}
  .wa-float svg{width:24px;height:24px}
  body{padding-bottom:76px}
}

/* Footer */
.footer{margin-top:60px;border-top:1px solid var(--border);background:var(--card)}
.footer .footer-grid{padding-top:44px;padding-bottom:40px;display:grid;
  /* Columnas al tamaño de su contenido y el bloque centrado. Con «1.7fr 1fr 1fr 1fr»
     las columnas 2-4 eran mucho más anchas que su texto, así que la tinta acababa
     134 px antes por la derecha que por la izquierda: el pie se veía escorado.
     Medido a 1280 y a 1440 px. */
  grid-template-columns:repeat(4,auto);justify-content:center;gap:24px 56px;text-align:center}
.footer .footer-grid > *{min-width:0}
.footer .footer-grid > :first-child{max-width:320px}
.footer .footer-logo{display:block;margin:0 auto 12px}
.footer .footer-desc{margin-left:auto;margin-right:auto}
.footer .pay-icons{justify-content:center}
.footer .soc{justify-content:center}
.footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin-bottom:12px}
.footer a{display:block;color:var(--muted-fg);padding:4px 0;font-size:14px}
.footer a:hover{color:var(--fg)}

/* Admin */
.admin{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
/* Fija al desplazarse: en /admin/inventario la página mide 8.190 px y al bajar
   quedaba una columna negra vacía, con el menú fuera de alcance. */
.admin-side{background:var(--primary);color:#cfcfcf;padding:20px 14px;position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto}
.admin-side .brand{color:#fff;font-weight:700;font-size:18px;padding:8px 10px 18px}
.admin-side a{display:block;padding:10px 12px;border-radius:10px;color:#cfcfcf;font-size:14px;font-weight:500;margin-bottom:2px;border-left:3px solid transparent;transition:.15s}
.admin-side a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-side a.active{background:rgba(255,255,255,.15);color:#fff;font-weight:700;border-left-color:#fff}
.admin-side .sep{height:1px;background:rgba(255,255,255,.1);margin:8px 12px}
/* Títulos de sección del menú. Antes eran dieciséis enlaces seguidos separados por
   rayas mudas: para encontrar algo había que leerlos todos. */
.admin-side .nav-group{color:rgba(255,255,255,.45);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:16px 12px 6px;margin-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.admin-side .nav-group:first-child{border-top:none;margin-top:0}
.admin-main{padding:28px 32px;overflow:auto}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:26px}
.stat{display:flex;align-items:flex-start;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;color:inherit;transition:box-shadow .2s,transform .2s}
a.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-body{flex:1;min-width:0}
.stat .n{font-size:28px;font-weight:800;line-height:1;margin-bottom:4px}
.stat .l{color:var(--muted-fg);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
/* saldos y badges admin */
.saldo-high{color:var(--ok);font-weight:700}
.saldo-mid{color:var(--warn);font-weight:700}
.saldo-zero{color:var(--muted-fg)}
.badge-admin{display:inline-block;padding:2px 9px;background:#EEF2FF;color:#4338CA;border-radius:20px;font-size:11px;font-weight:700}
/* paginador */
.pager{display:flex;gap:6px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--fg)}
.pager a:hover{background:var(--accent)}
.pager .cur{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.pager .dis{color:var(--muted-fg);opacity:.5}
/* admin móvil: hamburguesa */
.admin-burger{display:none}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
/* hover filas de tabla admin */
.admin-main table.tbl tbody tr{transition:background .1s}
.admin-main table.tbl tbody tr:hover{background:var(--muted)}
/* estado vacío */
.empty-state{text-align:center;padding:56px 20px;color:var(--muted-fg)}
.empty-state svg{color:var(--muted-fg);opacity:.35;margin:0 auto 14px}
.empty-state h3{font-size:18px;color:var(--fg);margin:0 0 6px}
.empty-state p{font-size:14px;max-width:360px;margin:0 auto}
/* tabs de filtro */
/* «Cómo comprar»: los tres pasos. */
.pasos{display:grid;gap:18px;margin-top:26px}   /* sin max-width propio: lo marca la página */
.paso{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.paso-n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--primary);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;font-weight:800}
.paso h3{margin:0 0 6px;font-size:18px}
.paso p{margin:0 0 10px}
.metodos{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px}
.metodos li{background:var(--muted);border:1px solid var(--border);border-radius:10px;padding:6px 12px;font-size:14px;font-weight:600}
@media(max-width:600px){.paso{flex-direction:column;gap:10px}}

/* Ficha de producto: lo que se pregunta quien está a punto de comprar. */
.ficha-datos{margin-top:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.ficha-datos .fd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:14px}
.ficha-datos .fd:last-child{border-bottom:0}
.ficha-datos .fd-l{color:var(--muted-fg);font-weight:600;flex:0 0 auto}
.ficha-datos .fd-v{text-align:right;font-weight:600}
.ficha-datos .fd-v a{text-decoration:underline}
@media(max-width:480px){.ficha-datos .fd{flex-direction:column;gap:2px}.ficha-datos .fd-v{text-align:left}}

/* Resumen del área de cliente: saldo, puntos y gift cards de un vistazo, en vez
   de tres cajas sueltas con el mismo emoji repetido. */
.mc-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}
.mc-dato{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;color:inherit;transition:box-shadow .2s,transform .2s}
a.mc-dato:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.mc-dato .mc-l{font-size:12px;font-weight:700;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em}
.mc-dato .mc-n{font-size:20px;font-weight:800;line-height:1.25}
.mc-dato .mc-a{font-size:12px;color:var(--muted-fg)}
/* Era `var(--accent, var(--primary))`, y el segundo valor de var() SOLO actúa si la
   variable no existe — y --accent sí existe (#E4E4E7). Resultado: «Recargar →» casi
   blanco sobre tarjeta blanca, contraste 1,27:1. */
a.mc-dato .mc-a{color:var(--primary)}
.tab-bar{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:20px;flex-wrap:wrap}
.tab-bar a{padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted-fg);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s}
.tab-bar a:hover{color:var(--fg)}
.tab-bar a.active{color:var(--fg);border-bottom-color:var(--primary)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > *{flex:1;min-width:160px}

/* Nav link underline animado */
.nav-links a{position:relative}
.nav-links a:not(.active)::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links a:not(.active):hover::after{transform:scaleX(1)}

/* Hero */
.hero{margin-top:18px;border-radius:28px;background:linear-gradient(135deg,#0d0d0d 0%,#1a1a2e 55%,#141414 100%);background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;padding:56px 44px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.10),transparent 45%)}
/* Overlay oscuro cuando hay imagen de fondo, para mantener el contraste del texto */
.hero--img::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(10,10,15,.72),rgba(18,18,32,.84))}
.hero>*{position:relative;z-index:1}
.hero-brands span,.hero-brands a{transition:.15s}
.hero-brands a:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.hero h1{font-size:44px;line-height:1.05;margin:0 0 14px;max-width:620px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero p{font-size:18px;color:#ececf0;max-width:520px;margin:0 0 26px;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-outline{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn-outline:hover{background:rgba(255,255,255,.16)}
.hero-brands{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:1}
.hero-brands span,.hero-brands a{font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:6px 13px;border-radius:20px}

/* Trust strip */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:26px 0}
.trust .t{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;min-height:74px}
.trust .t svg{flex:0 0 auto;color:var(--primary);margin-top:2px}
.trust .t b{display:block;font-size:14px}
.trust .t small{color:var(--muted-fg);font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Barra de filtros */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.filters select,.filters input{width:auto;min-width:150px}
.input-icon{position:relative;display:block}
.input-icon > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-fg);pointer-events:none}
.input-icon input{padding-left:40px;padding-right:44px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:none;border:none;color:var(--muted-fg);cursor:pointer;padding:0}
.pw-toggle svg{display:block}

/* Footer extras */
.pay-icons{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pay-icons img{height:26px;width:auto;border-radius:5px;background:#fff;padding:2px;border:1px solid var(--border)}
.footer .soc{display:flex;align-items:center;gap:8px}
.footer .soc svg{flex:0 0 auto}

/* Carrito vacío */
.cart-empty{text-align:center;padding:80px 20px;max-width:420px;margin:0 auto}
/* Hijo directo: si no, la regla alcanzaba también al icono DENTRO del botón
   «Explorar productos» y lo dejaba en 64 px de alto y con la flecha gris al 50 %. */
.cart-empty>svg{color:var(--muted-fg);opacity:.5;margin:0 auto 22px}
.cart-empty h2{font-size:24px;margin:0 0 8px}
.cart-empty p{color:var(--muted-fg);margin:0 0 22px}

/* Auth page */
.auth-wrap{background:radial-gradient(ellipse at 50% 0%,rgba(20,20,20,.05) 0%,transparent 60%)}
.auth-wrap .card{box-shadow:var(--shadow-lg)}

/* Entrada animada de tarjetas */
/* La clase .in la pone app.js. Si el JS no carga, sin este @media las tarjetas
   se quedaban en opacity:0 y la tienda se veia VACIA: cabecera, hero y pie, y ni
   un producto. Un navegador que no entienda la consulta ignora el bloque entero,
   que es justo el comportamiento seguro (se ven, sin animacion). */
@media (scripting: enabled){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
  .reveal.in{opacity:1;transform:none}
}

/* Páginas legales */
.legal{line-height:1.7}
.legal h2{font-size:19px;margin:24px 0 8px}
.legal h3{font-size:16px;margin:18px 0 6px}
.legal p,.legal li{color:var(--fg);font-size:15px}
.legal ul{padding-left:20px;margin:8px 0}
.legal li{margin:4px 0}
.legal a{color:var(--primary);text-decoration:underline}

/* Selector de tienda (Digital/Físico) */
.store-switch{display:inline-flex;background:var(--muted);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
.store-switch a{padding:6px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted-fg);white-space:nowrap}
.store-switch a.on{background:var(--primary);color:#fff}
.nav-store,.nav-store-label{display:none}
@media(max-width:860px){
  .store-switch{display:none}
  .nav-store-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);padding:8px 16px 2px}
  .nav-store{display:block}
}

/* Bienvenida — elección de tienda */
.welcome{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.welcome h1{font-size:34px;margin:14px 0 6px}
.welcome>p{color:var(--muted-fg);margin:0 0 30px;max-width:520px}
.welcome-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;width:100%}
.wcard{display:block;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:34px 26px;box-shadow:var(--shadow-md);transition:.2s;color:inherit}
.wcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.wcard .ic{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.wcard h3{font-size:20px;margin:0 0 6px}
.wcard p{font-size:14px;margin:0}
@media(max-width:600px){.welcome-cards{grid-template-columns:1fr}}

/* Modo app (WebView) — footer mínimo y contenido más al tope */
.footer-app{margin-top:36px;border-top:1px solid var(--border);background:var(--card);text-align:center;padding:16px 20px;font-size:12px;color:var(--muted-fg);line-height:1.8}
.footer-app a{color:var(--muted-fg)}
.footer-app a:hover{color:var(--fg)}
.app .hero{margin-top:6px}

/* Utilidades tipográficas */
.t-3xl{font-size:34px}.t-2xl{font-size:26px}.t-xl{font-size:20px}

@media(max-width:860px){
  .container{padding:0 16px}
  .section{padding:32px 0}
  .hero{padding:34px 22px;border-radius:20px;margin-top:14px}.hero h1{font-size:30px}.hero p{font-size:15px}
  .t-3xl{font-size:26px}.t-2xl{font-size:22px}
  .section-head{flex-wrap:wrap}
  .grid-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid-cats{grid-template-columns:repeat(2,1fr)}
  .pd{gap:22px}
  .nav-inner{padding:8px 12px}
  .pcard{padding:10px}.pcard h3{font-size:14px}.pcard .price{font-size:17px}
  .pd{grid-template-columns:1fr}
  .footer .footer-grid{grid-template-columns:1fr 1fr;gap:24px 32px}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:10px}
  .nav-links.open{display:flex}
  .nav-toggle{display:inline-flex}
  /* `align-content` por defecto es «stretch»: al pasar a una columna, el hueco que
     sobra hasta los 100vh se repartía a partes iguales entre la barra y el contenido,
     y la mitad se la comía la barra negra. En /admin/recargas medía 292 px en vez de 60. */
  .admin{grid-template-columns:1fr;align-content:start}
  .admin-side{display:block;padding:10px 14px}
  .admin-top{display:flex;align-items:center;justify-content:space-between}
  .admin-side .brand{padding:6px 4px;border:none;margin:0}
  .admin-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;border:none;cursor:pointer;font-size:18px}
  .admin-nav{display:none;margin-top:10px}
  .admin-nav.open{display:block}
  .admin-main{padding:18px 14px}
  /* Sin JavaScript, las tablas siguen desplazándose de lado como antes. */
  .admin-main table.tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* Con JavaScript (que es quien pone .tbl-cards y los data-label), cada fila se
     convierte en una tarjeta: etiqueta a la izquierda, valor a la derecha. Se acabó
     arrastrar una tabla de ocho columnas para leer un pedido. */
  table.tbl.tbl-cards{display:block;overflow:visible;white-space:normal;border:0}
  table.tbl.tbl-cards thead{display:none}
  table.tbl.tbl-cards tbody{display:block}
  table.tbl.tbl-cards tr{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:6px 14px;margin-bottom:12px}
  /* `overflow-wrap:anywhere` no es cosmética: un correo largo no tiene espacios por
     donde partirse y se salía del borde. El más largo de la base mide 37 caracteres
     y en 375 px no cabe. Con `flex-wrap` el valor baja de línea si aún así no entra. */
  table.tbl.tbl-cards td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;padding:8px 0;border:0;border-bottom:1px solid var(--border);text-align:right;white-space:normal;overflow-wrap:anywhere;min-width:0}
  table.tbl.tbl-cards tr td:last-child{border-bottom:0}
  table.tbl.tbl-cards td::before{content:attr(data-label);color:var(--muted-fg);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:0 0 auto;padding-right:8px}
  table.tbl.tbl-cards td:not([data-label])::before{content:''}
  /* La columna de acciones no lleva título: que ocupe la fila entera. */
  table.tbl.tbl-cards td[data-label=""]{justify-content:flex-end;flex-wrap:wrap;gap:8px}
  table.tbl.tbl-cards td form{display:inline}
  table.tbl.tbl-cards td img{max-width:56px;height:auto}
}
@media(max-width:480px){
  .footer .footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:25px}
  .pcard .foot .btn-primary{font-size:12px;padding:7px 8px}
}

/* ===== Movimiento en las apps (solo app-mode) ===== */
/* Carrusel de flyers */
.flyers{margin:6px 0 16px;border-radius:20px;overflow:hidden;position:relative}
.flyers-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.flyer{flex:0 0 100%;min-width:100%}
.flyer img{display:block;width:100%;aspect-ratio:12/5;object-fit:cover}
.flyers-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:7px;justify-content:center}
.flyers-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.flyers-dots button.on{background:#fff;width:22px;border-radius:5px}

/* Hero con movimiento sutil */
@keyframes heroGlow{0%,100%{transform:translate(0,0);opacity:.10}50%{transform:translate(-6%,5%);opacity:.20}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes heroShine{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.app .hero{background-size:170% 170%;animation:heroShine 16s ease-in-out infinite alternate}
.app .hero::after{animation:heroGlow 9s ease-in-out infinite}
.app .hero h1{animation:heroFloat 6.5s ease-in-out infinite}

/* Pared de productos (varias filas en movimiento, orden aleatorio por carga) */
.pwall{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.pwall .pmarquee{width:100%}
.pwall>.pcard{width:160px;flex:0 0 160px}
.pmarquee{overflow:hidden;position:relative;margin-bottom:14px}
.pmarquee-track{display:flex;gap:14px;width:max-content;animation:pmarquee 34s linear infinite}
.pmarquee-track.rev{animation-direction:reverse}
.pmarquee.paused .pmarquee-track{animation-play-state:paused}
.pmarquee .pcard{width:160px;flex:0 0 160px}
.pmarquee .pcard.reveal{opacity:1;transform:none}
@keyframes pmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  .app .hero,.app .hero::after,.app .hero h1{animation:none}
  .pmarquee-track{animation:none}
  .flyers-track{transition:none}
}

/* === Logo visible a la izquierda en móvil (corrección cliente 2026-07-02: la posición absoluta centrada quedaba OCULTA tras los botones de acción) === */
@media(max-width:860px){
  .nav-inner{position:relative}
  .nav-logo{position:static;transform:none;margin:0;flex:0 0 auto}
  .nav-actions{margin-left:auto}
}
@media(max-width:520px){.nav-logo img{height:36px}}

/* ===== FIX MÓVIL 2026-07-03 (ronda docx 034628) ===== */
@media(max-width:600px){
  html,body{overflow-x:hidden;max-width:100%}
  /* b1: saldo y puntos más pequeños en Mi Perfil */
  .stat .n{font-size:20px}
  /* b1: apilar el perfil a 1 columna en movil (override del inline grid) */
  .pd{grid-template-columns:1fr!important}
  /* b3: la fila de acciones del header no desborda */
  .nav-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .wallet-pill{padding:6px 9px;font-size:12px;gap:4px}
  /* gift card y puntos ahora viven en el menú → ocultarlos del header en móvil */
  .nav-actions .icon-btn[aria-label="Gift cards"],
  .nav-actions .wallet-pill[title="Puntos acumulados"]{display:none}
  /* b2: tabla del carrito legible; el nombre no se pega al precio */
  table.tbl th,table.tbl td{padding:8px 7px;font-size:12px}
  table.tbl td:first-child{white-space:normal;overflow-wrap:anywhere}
  /* b2: en movil, iconito del carrito mas chico para dar espacio al nombre */
  table.tbl td:first-child img{width:34px!important;height:34px!important}
  table.tbl td:nth-child(2),table.tbl td:nth-child(4){white-space:nowrap}
  table.tbl input[type=number]{width:52px}
}

/* Regresión fix 2026-07-03: Gift Cards/Puntos del menú solo en móvil (en escritorio ya están los pills) */
.menu-mobile-only{display:none}
@media(max-width:600px){.menu-mobile-only{display:inline-flex}}

/* Mis Cuentas: acordeón (Ver datos) + pedidos como tarjetas (2026-07-03) */
.acc-list,.ord-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.acc-item,.ord-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.acc-title{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acc-arrow{color:var(--muted-fg);font-size:13px;font-weight:600;white-space:nowrap}
.acc-item.open .acc-arrow{color:var(--primary)}
.acc-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.acc-badge.ok{background:#e8f5e9;color:#2e7d32}
.acc-badge.exp{background:#fdecea;color:#c0392b}
.acc-body{display:none;padding:0 16px 14px;border-top:1px solid var(--border)}
.acc-item.open .acc-body{display:block}
.acc-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:14px}
.acc-row:last-child{border-bottom:none}
.acc-row>span:first-child{color:var(--muted-fg);white-space:nowrap}
.acc-row code{word-break:break-all;text-align:right}
.ord-item{padding:14px 16px}
.ord-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ord-items{margin:8px 0;font-size:14px}
.ord-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px}

/* ── Asistente de recarga por pasos ────────────────────────────────────────
   La pantalla por la que entra el dinero. Antes lo mostraba todo a la vez;
   ahora son tres pasos y hay que verse igual de bien en un móvil de 320 px. */
.wiz{display:flex;list-style:none;padding:0;margin:16px 0;gap:6px;counter-reset:w}
.wiz li{flex:1;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted-fg);
  padding:9px 8px;border-radius:10px;background:var(--muted);min-width:0}
.wiz li>*{flex:none}
.wiz li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiz-n{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;background:var(--border);color:var(--primary);font-weight:700;font-size:11px}
.wiz li.aqui{background:var(--primary);color:#fff;font-weight:600}
.wiz li.aqui .wiz-n{background:rgba(255,255,255,.22);color:#fff}
.wiz li.hecho .wiz-n{background:#16A34A;color:#fff}
/* Por debajo de 380 px sólo cabe el número del paso en el que está. */
@media (max-width:379px){.wiz li{font-size:0;padding:8px;justify-content:center}
  .wiz li.aqui{font-size:12px}.wiz-n{font-size:11px}}

/* Los métodos de pago como tarjetas pulsables: en móvil un <select> obliga a
   abrir una lista para descubrir qué hay. Aquí se ven todos de una vez. */
.pm-list{display:grid;gap:8px;margin-top:8px}
.pm-op{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--border);
  border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;margin:0}
.pm-op:hover{border-color:var(--primary)}
.pm-op input{width:auto;margin:0;flex:none;accent-color:var(--primary)}
.pm-op:has(input:checked){border-color:var(--primary);background:rgba(0,0,0,.03)}
.pm-op:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.pm-cuerpo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;min-width:0}
.pm-nombre{font-weight:600}

/* Los datos a los que hay que pagar. Cada dato en su línea y seleccionable:
   el cliente los va a copiar uno a uno en la app de su banco. */
.pm-datos{display:grid;gap:7px;margin:10px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px}
.pm-datos>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.pm-datos strong{user-select:all;text-align:right;word-break:break-word}

.wiz-total{margin-top:14px;padding:13px 15px;border-radius:12px;background:var(--muted);
  font-size:15px;line-height:1.5;text-align:center}
.wiz-nota{margin-top:12px;padding:11px 13px;border-radius:10px;font-size:13.5px;line-height:1.5;
  background:rgba(255,180,0,.12)}
.wiz-nota.ok{background:rgba(22,163,74,.12)}

@media (prefers-color-scheme:dark){
  .pm-op:has(input:checked){background:rgba(255,255,255,.05)}
}

/* ── Pestañas para separar las dos tiendas en el panel ───────────────────── */
.tabs-tienda{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.tab-t{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
  background:var(--muted);color:var(--muted-fg);font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid transparent;transition:background .15s,color .15s}
.tab-t:hover{border-color:var(--border)}
.tab-t.on{background:var(--primary);color:#fff}
.tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;
  padding:0 6px;border-radius:999px;background:rgba(0,0,0,.10);font-size:12px;font-weight:700}
.tab-t.on .tab-n{background:rgba(255,255,255,.22)}
/* En móvil sólo cabe el icono y el número: el texto se recorta, no se apila. */
@media (max-width:520px){.tab-t{padding:9px 11px;font-size:13px}}

/* ── Teléfono con país ──────────────────────────────────────────────────────
   El <select> nativo trunca su texto a su manera y se comía el prefijo. Por eso
   va invisible ENCIMA de una caja que pinta bandera y prefijo: se lee siempre
   entero, ocupa poco, y sigue siendo un <select> de verdad —se abre con el dedo
   y con el teclado, y el lector de pantalla lo anuncia igual. */
.tel-campo{display:flex;gap:8px;align-items:stretch}
.tel-pais-caja{position:relative;display:inline-flex;align-items:center;gap:6px;
  flex:0 0 auto;padding:0 10px;border:1px solid var(--border);border-radius:12px;
  background:var(--bg,#fff);cursor:pointer;white-space:nowrap}
.tel-pais-vista{font-size:15px;font-weight:600;line-height:1}
.tel-flecha{flex:none;color:var(--muted-fg);opacity:.8}
/* El desplegable real: invisible pero completo, encima de todo lo anterior. */
.tel-pais-caja .tel-pais{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.tel-pais-caja:focus-within{border-color:var(--primary);outline:2px solid var(--primary);outline-offset:1px}
.tel-campo .tel-num{flex:1 1 auto;min-width:0}
@media (prefers-color-scheme:dark){ .tel-pais-caja{background:transparent} }

/* ── Entrar con Google ─────────────────────────────────────────────────────
   Sigue las pautas de marca de Google: fondo propio, su logo a color, y el
   texto sin adornos. Un botón «de Google» maquillado con los colores de la
   tienda desconcierta más de lo que ayuda. */
.o-bien{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted-fg);font-size:13px}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  height:46px;border:1px solid var(--border);border-radius:12px;background:#fff;color:#1F1F1F;
  font-weight:600;font-size:15px;text-decoration:none;transition:background .15s,border-color .15s}
.btn-google:hover{background:#F7F8F8;border-color:#C6C6C6}
.btn-google:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-google svg{flex:none}
@media (prefers-color-scheme:dark){
  .btn-google{background:#131314;color:#E3E3E3;border-color:#3C4043}
  .btn-google:hover{background:#1B1B1C;border-color:#5F6368}
}
:root[data-theme="light"] .btn-google{background:#fff;color:#1F1F1F;border-color:var(--border)}

/* ── «No me funciona» ───────────────────────────────────────────────────────
   Plegado a propósito: la mayoría de las veces la cuenta va bien y el botón
   sólo estorbaría. Quien lo necesita, lo encuentra. */
.acc-reponer{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.acc-reponer>summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--primary);
  list-style:none;padding:6px 0}
.acc-reponer>summary::-webkit-details-marker{display:none}
.acc-reponer>summary::before{content:"🛟 ";}
.acc-reponer>summary:hover{text-decoration:underline}
.acc-reponer[open]>summary{margin-bottom:2px}
.acc-reponer label{margin-top:10px;font-size:13px}

/* Precio «a consultar»: no es una cifra, así que no debe leerse como una cifra.
   Se pinta con el peso del texto normal y en el color apagado, para que nadie
   confunda «Consultar precio» con un importe. */
.price-consultar{font-weight:600!important;font-size:inherit!important;color:var(--muted-fg)}
.pcard .price-consultar{font-size:15px!important}

/* ── Pantallas muy estrechas (320 px) ─────────────────────────────────────
   Medido en un iPhone SE de primera generación y equivalentes, que siguen en
   la calle. Dos cosas se rompían ahí y en ningún sitio más. */
@media (max-width:359px){
  /* La barra se partía en dos filas: el botón de menú bajaba solo y la cabecera
     pasaba de 60 px a 108, comiéndose media pantalla. */
  .nav-inner{flex-wrap:nowrap;gap:6px}
  .nav-logo img{height:30px}
  .nav-actions{gap:4px}
  .nav-actions .btn{padding:7px 10px;font-size:13px}
  .icon-btn{width:34px;height:34px}

  /* El nombre de la variante no cabía en el desplegable cerrado: «Cuenta completa
     (5 perfiles) · 1 mes — $18.00» mide 326 px en 238 disponibles, así que el
     cliente no llegaba a ver el PRECIO de lo que tenía seleccionado. */
  #variantSel{font-size:12px;padding-left:8px;padding-right:26px}
}

/* ── Remates del pie y del migajón ────────────────────────────────────────── */

/* La primera columna del pie llevaba max-width:320px. Entre 321 y 390 px de
   pantalla, las otras tres medían 358 y ésta 320: como el contenido va centrado,
   el logotipo quedaba 19 px a la izquierda del resto. Se limita sólo donde hay
   varias columnas. */
.footer .footer-grid > :first-child{max-width:none}
@media (min-width:721px){ .footer .footer-grid > :first-child{max-width:320px} }

/* Los métodos de pago del pie, separados de verdad. */
.footer .pay-txt{font-size:13px;color:var(--muted-fg)}
.footer .pay-icons{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center}
.footer .pay-txt:not(:last-child)::after{content:"·";margin-left:14px;opacity:.5}

/* El separador del migajón usaba el color de acento. En una marca con acento
   claro —el cian #00C2D6 de Netpro— daba 2,13:1 sobre blanco. Es texto, así que
   va del color del texto secundario, que sí está medido. */
.breadcrumb .sep{color:var(--muted-fg)}

/* Una tarjeta de confianza recortaba su frase a media palabra y se perdía justo
   el argumento («…hechos para tu fecha»). Si el texto no cabe, que baje la
   tarjeta; no que se corte la idea. */
.trust .t small{-webkit-line-clamp:unset;display:block;overflow:visible}

/* El nombre de la categoría, encima de su imagen y siempre legible: se apoya en
   un velo oscuro propio, no en lo que traiga la foto. */
.ccard-img{position:relative;display:block}
.ccard-img img{display:block}
.ccard-img .ccard-name{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;
  color:#fff;font-weight:700;font-size:15px;line-height:1.25;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.45) 55%,rgba(0,0,0,0));
  text-shadow:0 1px 3px rgba(0,0,0,.6)}