/* Gato Lab — hoja de estilos principal */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F6F6F6;
  --ink:#111111;
  --gray-700:#4B4B4B;
  --gray-500:#7D7D7D;
  --gray-300:#D6D6D6;
  --gray-150:#EDEDED;
  --line:#E2E2E2;
  --accent:#6D28F2;
  --accent-dark:#5719D1;
  --accent-ink:#FFFFFF;
  --accent-soft:#F1E8FE;
  --radar-1:#6D28F2;
  --radar-2:#EB6834;
  --radius:6px;
  --radius-s:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0B; --surface:#141415; --surface-2:#1B1B1D; --ink:#F2F2F2;
    --gray-700:#B7B7B7; --gray-500:#8C8C8C; --gray-300:#333335; --gray-150:#1E1E20;
    --line:#2B2B2D; --accent:#A374FF; --accent-dark:#B892FF; --accent-ink:#0A0A0B; --accent-soft:#241A3B;
    --radar-1:#8C5FE0; --radar-2:#D95926;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0B; --surface:#141415; --surface-2:#1B1B1D; --ink:#F2F2F2;
  --gray-700:#B7B7B7; --gray-500:#8C8C8C; --gray-300:#333335; --gray-150:#1E1E20;
  --line:#2B2B2D; --accent:#A374FF; --accent-dark:#B892FF; --accent-ink:#0A0A0B; --accent-soft:#241A3B;
  --radar-1:#8C5FE0; --radar-2:#D95926;
}

*{box-sizing:border-box;}
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:'Archivo','Helvetica Neue',Arial,sans-serif; line-height:1.45; }
.page{ padding:0 18px; max-width:1280px; margin:0 auto; }
h1,h2,h3{ margin:0; }
.display{ font-family:'Anton','Arial Narrow',Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:.96; }
.display em{ font-style:normal; color:var(--accent); }
.mono{ font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace; font-variant-numeric:tabular-nums; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gray-500); display:flex; align-items:center; gap:8px; }
.eyebrow::before{ content:""; width:8px; height:8px; background:var(--accent); flex:none; }
a{ color:var(--accent); }
a:hover{ color:var(--accent-dark); }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
[hidden]{ display:none !important; }
img{ max-width:100%; }

.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:16px;
  padding:16px 0; margin:0 -18px; padding-inline:18px; background:var(--bg); border-bottom:2px solid var(--ink);
}
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand-mark{ width:28px; height:28px; color:var(--ink); flex:none; }
.brand-mark svg{ width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; line-height:1.02; }
.brand-name{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.28rem; letter-spacing:.01em; white-space:nowrap; }
.brand-name em{ font-style:normal; color:var(--accent); }
.brand-tagline{ font-family:'JetBrains Mono',monospace; font-size:.56rem; text-transform:uppercase; letter-spacing:.11em; color:var(--gray-500); white-space:nowrap; margin-top:1px; }
.main-nav{ display:flex; gap:2px; flex:0 0 auto; }
.main-nav button{
  border:none; background:transparent; color:var(--gray-500); cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 10px; border-bottom:2px solid transparent; margin-bottom:-2px;
}
.main-nav button:hover{ color:var(--ink); }
.main-nav button[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--accent); font-weight:700; }
.searchbox{ position:relative; flex:1 1 240px; min-width:0; max-width:440px; }
.searchbox svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--gray-500); pointer-events:none; }
.searchbox input{ width:100%; padding:10px 14px 10px 36px; border-radius:var(--radius-s); border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); font-size:.92rem; font-family:'Archivo',sans-serif; }
.searchbox input::placeholder{ color:var(--gray-500); }
.lang-switch{ display:flex; gap:2px; flex:0 0 auto; margin-left:auto; border:1.5px solid var(--ink); border-radius:var(--radius-s); padding:2px; }
.lang-switch button{
  border:none; background:transparent; color:var(--gray-500); cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.03em;
  padding:5px 8px; border-radius:2px;
}
.lang-switch button:hover{ color:var(--ink); }
.lang-switch button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); font-weight:700; }
.search-toggle{ display:none; flex:none; width:34px; height:34px; align-items:center; justify-content:center; border:1.5px solid var(--ink); border-radius:var(--radius-s); background:var(--surface); color:var(--ink); cursor:pointer; padding:0; }
.search-toggle svg{ width:15px; height:15px; }
.search-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.search-toggle[aria-expanded="true"]{ background:var(--ink); color:var(--bg); }
@media (max-width:760px){
  /* Cabecera más compacta en móvil: se oculta el eslogan y la búsqueda
     pasa a ser un icono que despliega el campo, en vez de ocupar
     siempre una fila entera — así queda más sitio para el contenido. */
  .topbar{ flex-wrap:wrap; row-gap:8px; padding-block:10px; }
  .brand-tagline{ display:none; }
  .main-nav{ order:1; }
  .search-toggle{ display:flex; order:2; }
  .lang-switch{ order:3; }
  .searchbox{ display:none; order:4; flex:1 1 100%; max-width:100%; margin-top:2px; }
  .searchbox.mobile-open{ display:flex; }
}

.hero{ padding-block:38px 22px; max-width:760px; }
.hero h1{ font-size:clamp(2.6rem,10vw,5.2rem); margin-top:10px; }
.hero p{ margin:14px 0 0; color:var(--gray-700); font-size:1.02rem; max-width:62ch; }
.hero p strong{ color:var(--ink); font-family:'JetBrains Mono',monospace; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.use-chip{ border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); border-radius:var(--radius-s); padding:7px 12px; font-size:.78rem; cursor:pointer; display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }
.use-chip:hover{ border-color:var(--accent); color:var(--accent); }
.use-chip[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.use-chip[aria-pressed="true"]:hover{ color:var(--accent-ink); }
.use-chip .n{ opacity:.65; font-size:.9em; }
.use-chip-kids{ border-color:var(--radar-2); }
.use-chip-kids:hover{ border-color:var(--radar-2); color:var(--radar-2); }
.use-chip-kids[aria-pressed="true"]{ background:var(--radar-2); border-color:var(--radar-2); color:var(--accent-ink); }
.use-chip-kids[aria-pressed="true"]:hover{ color:var(--accent-ink); }

.ad-slot{ border:1px dashed var(--gray-300); border-radius:var(--radius-s); color:var(--gray-500); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--surface-2); margin-block:18px; }
.ad-leaderboard{ min-height:90px; }
.ad-infeed{ min-height:110px; grid-column:1 / -1; }
/* Huecos in-feed insertados dentro de la propia rejilla del catálogo (cada
   CATALOG_AD_INTERVAL fichas, ver js/app.js): sin margin-block propio, para
   que el "gap" de la rejilla marque el espaciado igual que entre tarjetas. */
.ad-infeed-catalog{ margin-block:0; }
.ad-footer{ min-height:90px; margin-block:18px 0; }

.layout{ display:grid; grid-template-columns:220px 1fr; gap:26px; align-items:start; }
@media (max-width:760px){ .layout{ grid-template-columns:1fr; } }
.filters{ background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:18px; }
.filters h2{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.05rem; letter-spacing:.01em; }
.filter-group{ display:flex; flex-direction:column; gap:8px; }
.filter-group h3{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500); font-family:'JetBrains Mono',monospace; font-weight:600; }
.filter-row{ display:flex; align-items:center; gap:8px; font-size:.88rem; cursor:pointer; }
.filter-row input{ accent-color:var(--accent); width:15px; height:15px; }
.filter-row .cnt{ margin-left:auto; color:var(--gray-500); font-size:.74rem; font-family:'JetBrains Mono',monospace; }
.chipset{ display:flex; flex-wrap:wrap; gap:6px; }
.chipset button{ border:1px solid var(--gray-300); background:var(--surface); color:var(--ink); border-radius:var(--radius-s); padding:5px 10px; font-size:.76rem; cursor:pointer; font-family:'JetBrains Mono',monospace; }
.chipset button:hover{ border-color:var(--accent); color:var(--accent); }
.chipset button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.chipset button[aria-pressed="true"]:hover{ color:var(--accent-ink); }
#resetFilters{ border:1px solid var(--gray-300); background:transparent; color:var(--gray-700); border-radius:var(--radius-s); padding:8px; font-size:.82rem; cursor:pointer; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }
#resetFilters:hover{ color:var(--ink); border-color:var(--ink); }
.filters-toggle{ display:none; }
@media (max-width:760px){
  .filters-toggle{ display:flex; width:100%; justify-content:space-between; align-items:center; border:1.5px solid var(--ink); background:var(--surface); border-radius:var(--radius-s); padding:10px 14px; font-size:.85rem; margin-bottom:10px; cursor:pointer; color:var(--ink); font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }
  .filters.collapsed{ display:none; }
}

.catalog{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; align-content:start; padding-bottom:10px; }
@media (max-width:680px){
  /* En móvil, dos zapatillas por fila en vez de una a pantalla completa. */
  .catalog{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .card-photo{ aspect-ratio:1/1; }
  .card-photo svg{ width:44%; }
  .card-body{ padding:9px; gap:6px; }
  .card-brand{ font-size:.6rem; letter-spacing:.05em; }
  .card-model{ font-size:.92rem; line-height:1.08; }
  .card-chips{ gap:3px; }
  .tag{ font-size:.58rem; padding:2px 5px; }
  .card-mini-specs{ gap:3px; font-size:.7rem; }
  .card-mini-specs div{ padding-top:3px; }
  .card-mini-specs span:first-child{ font-size:.58rem; }
  .card-foot{ padding-top:7px; }
  .card-price{ font-size:.82rem; }
  .card-price span{ font-size:.55rem; }
  .card-level-flag{ font-size:.55rem; padding:2px 5px; top:6px; right:6px; }
  .card-kids-flag{ font-size:.55rem; padding:2px 5px; top:6px; left:6px; }
}
.card{ background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--radius); display:flex; flex-direction:column; cursor:pointer; position:relative; overflow:hidden; transition:border-color .12s; }
.card:hover{ border-color:var(--accent); }
.card-photo{ aspect-ratio:4/3; background:var(--surface-2); border-bottom:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; color:var(--ink); position:relative; overflow:hidden; }
.card-photo svg{ width:52%; height:auto; }
.card-photo img.shoe-photo{ width:100%; height:100%; object-fit:contain; padding:12px; }
.card-level-flag{ position:absolute; top:8px; right:8px; font-family:'JetBrains Mono',monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; padding:3px 7px; border-radius:var(--radius-s); background:var(--surface); border:1px solid var(--ink); }
.card-level-flag.level-Avanzado{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.card-kids-flag{ position:absolute; top:8px; left:8px; font-family:'JetBrains Mono',monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; padding:3px 7px; border-radius:var(--radius-s); background:var(--radar-2); color:var(--accent-ink); border:1px solid var(--radar-2); }
.card-body{ padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-brand{ font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500); }
.card-model{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.28rem; line-height:1.05; }
.card-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.tag{ font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; padding:3px 7px; border-radius:var(--radius-s); background:var(--surface-2); color:var(--gray-700); border:1px solid var(--gray-300); }
.tag.level-Avanzado{ background:var(--accent-soft); color:var(--accent-dark); border-color:var(--accent); }
.tag.level-Intermedio{ background:var(--surface); color:var(--ink); border-color:var(--ink); }
.tag.tag-kids{ background:var(--radar-2); color:var(--accent-ink); border-color:var(--radar-2); }
.card-mini-specs{ display:flex; flex-direction:column; gap:4px; font-size:.8rem; }
.card-mini-specs div{ display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding-top:4px; }
.card-mini-specs span:first-child{ color:var(--gray-500); font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.card-mini-specs span:last-child{ font-weight:600; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1.5px solid var(--ink); }
.card-price{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.02rem; }
.card-price span{ font-size:.68rem; color:var(--gray-500); font-weight:400; text-transform:uppercase; }
.add-compare{ border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); border-radius:var(--radius-s); padding:6px 10px; font-size:.72rem; cursor:pointer; display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }
.add-compare:hover{ background:var(--ink); color:var(--bg); }
.add-compare[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.add-compare[aria-pressed="true"]:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.add-compare svg{ width:12px; height:12px; }
.empty-state{ grid-column:1/-1; text-align:center; padding:50px 16px; color:var(--gray-500); font-family:'JetBrains Mono',monospace; }
.empty-state-mark{ width:34px; height:34px; margin:0 auto 14px; color:var(--gray-300); }
.empty-state-mark svg{ width:100%; height:100%; }
.catalog-loading .empty-state-mark{ animation:catalogPulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .catalog-loading .empty-state-mark{ animation:none; } }
@keyframes catalogPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }

.bars{ display:inline-flex; gap:3px; align-items:center; vertical-align:middle; }
.bars .seg{ width:14px; height:7px; background:var(--surface); border:1px solid var(--gray-300); }
.bars .seg.on{ background:var(--ink); border-color:var(--ink); }
.bars.accent .seg.on{ background:var(--accent); border-color:var(--accent); }
.bar-row{ display:flex; align-items:center; gap:10px; }
.bar-row .bars{ flex:none; }

.modal-overlay{ position:fixed; inset:0; background:rgba(10,10,10,.6); display:flex; align-items:flex-end; justify-content:center; z-index:100; }
@media (min-width:640px){ .modal-overlay{ align-items:center; padding:24px; } }
.modal{ background:var(--surface); width:100%; max-width:520px; max-height:88vh; overflow-y:auto; border-radius:var(--radius) var(--radius) 0 0; padding:24px; position:relative; border:1.5px solid var(--ink); }
@media (min-width:640px){ .modal{ border-radius:var(--radius); } }
.modal-wide{ max-width:920px; }
.modal-close{ position:absolute; top:16px; right:16px; z-index:5; width:32px; height:32px; border-radius:var(--radius-s); border:1.5px solid var(--ink); background:var(--surface); box-shadow:0 1px 6px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.modal-close:hover{ background:var(--ink); color:var(--bg); }
.modal-close svg{ width:15px; height:15px; }

/* Visor de fotos a pantalla completa (lightbox). Fondo casi negro fijo
   (no depende de claro/oscuro) para que la foto sea el centro de atención;
   los controles usan blanco/negro fijos por el mismo motivo. */
.lightbox-overlay{ background:rgba(8,8,9,.94); padding:0; }
.lightbox{ position:relative; width:100%; height:100%; max-width:1100px; max-height:92vh; background:transparent; border:none; padding:0; display:flex; align-items:center; justify-content:center; overflow:visible; }
@media (min-width:640px){ .lightbox{ padding:0 64px; } }
.lightbox-img{ max-width:100%; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:2px; }
.lightbox-close{ position:fixed; top:18px; right:18px; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); color:#fff; }
.lightbox-close:hover{ background:#fff; color:#0a0a0a; }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5); background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-nav:hover{ background:#fff; color:#0a0a0a; }
.lightbox-nav svg{ width:20px; height:20px; }
.lightbox-prev{ left:8px; } .lightbox-next{ right:8px; }
@media (min-width:640px){ .lightbox-prev{ left:12px; } .lightbox-next{ right:12px; } }
.lightbox-counter{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); font-family:'JetBrains Mono',monospace;
  font-size:.78rem; letter-spacing:.04em; color:#fff; background:rgba(255,255,255,.14); border-radius:var(--radius-s);
  padding:5px 10px;
}
.detail-photo-main{ aspect-ratio:4/3; max-height:300px; background:var(--surface-2); border:1.5px solid var(--ink); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--ink); overflow:hidden; margin-right:40px; position:relative; }
@media (max-width:640px){ .detail-photo-main{ margin-right:0; width:100%; } }
.detail-photo-main svg{ width:34%; height:auto; }
.detail-photo-main img.shoe-photo{ width:100%; height:100%; object-fit:contain; padding:16px; }
.photo-zoomable{ cursor:zoom-in; }
.photo-zoom-hint{
  position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%;
  background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center;
  opacity:.88; pointer-events:none;
}
.photo-zoom-hint svg{ width:15px; height:15px; }
.detail-photo-main:hover .photo-zoom-hint, .detail-photo-main:focus-visible .photo-zoom-hint{ opacity:1; }
.detail-photo-main:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.detail-photo-gallery{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:2px; }
.detail-photo-thumb{
  flex:0 0 76px; aspect-ratio:1/1; background:var(--surface-2); border:1.5px solid var(--ink);
  border-radius:var(--radius-s); overflow:hidden; padding:0; cursor:pointer; font:inherit;
}
.detail-photo-thumb img{ width:100%; height:100%; object-fit:contain; padding:6px; display:block; }
.detail-photo-thumb:hover{ border-color:var(--accent); }
.detail-photo-thumb.active{ border-color:var(--accent); border-width:2px; background:var(--accent-soft); }
.detail-photo-thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.detail-head{ display:flex; gap:16px; align-items:flex-start; margin-top:16px; }
.detail-badge{ width:76px; height:76px; border-radius:var(--radius); background:var(--surface-2); color:var(--ink); display:flex; align-items:center; justify-content:center; flex:none; border:1.5px solid var(--ink); }
.detail-badge svg{ width:48px; height:auto; }
.detail-title h3{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.55rem; margin-top:2px; line-height:1; }
.detail-summary{ margin-top:16px; color:var(--gray-700); font-size:.94rem; }
.spec-grid{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
@media (max-width:420px){ .spec-grid{ gap:10px 12px; } }
.spec-item{ border-top:1.5px solid var(--ink); padding-top:8px; }
/* Las filas con barra visual (asimetría, rigidez, sensibilidad) necesitan
   más ancho para no partirse mal — ocupan las dos columnas incluso en móvil. */
.spec-item:has(.bar-row){ grid-column:1 / -1; }
.spec-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); font-family:'JetBrains Mono',monospace; }
.spec-value{ font-size:.95rem; margin-top:3px; font-weight:600; }
.detail-features{ margin-top:20px; padding-top:16px; border-top:1.5px solid var(--ink); }
.detail-features h4{ font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); }
.detail-features ul{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.detail-features li{ font-size:.88rem; color:var(--gray-700); padding-left:16px; position:relative; }
.detail-features li::before{ content:"—"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.detail-parawho{ margin-top:16px; background:var(--surface-2); border:1.5px solid var(--ink); border-radius:var(--radius); padding:14px 16px; }
.detail-parawho .spec-label{ margin-bottom:4px; display:block; }
.detail-parawho p{ margin:0; font-size:.9rem; color:var(--ink); }
.detail-actions{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
.btn-primary{ background:var(--ink); color:var(--bg); border:1.5px solid var(--ink); border-radius:var(--radius-s); padding:11px 18px; font-size:.85rem; font-weight:700; cursor:pointer; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-secondary{ background:var(--surface); color:var(--ink); border:1.5px solid var(--gray-300); border-radius:var(--radius-s); padding:11px 18px; font-size:.85rem; cursor:pointer; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

.compare-tray{ position:fixed; left:0; right:0; bottom:0; z-index:90; padding:12px 18px; background:var(--surface); border-top:2px solid var(--ink); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tray-items{ display:flex; gap:8px; flex:1; overflow-x:auto; }
.tray-item{ flex:none; display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--gray-300); border-radius:var(--radius-s); padding:5px 6px 5px 10px; font-size:.78rem; white-space:nowrap; font-family:'JetBrains Mono',monospace; }
.tray-item button{ border:none; background:transparent; cursor:pointer; color:var(--gray-500); width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.tray-item button:hover{ background:var(--ink); color:var(--bg); }
.tray-item button svg{ width:11px; height:11px; }
.tray-hint{ font-size:.76rem; color:var(--gray-500); font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }

.compare-scroll{ overflow-x:auto; margin-top:6px; }
table.compare{ border-collapse:collapse; width:100%; min-width:560px; }
table.compare th, table.compare td{ padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:.87rem; vertical-align:middle; }
table.compare thead th{ border-bottom:2px solid var(--ink); padding-top:0; }
table.compare th .model-name{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.05rem; }
table.compare td.row-label{ color:var(--gray-500); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; font-family:'JetBrains Mono',monospace; }
table.compare td.diff{ background:var(--accent-soft); font-weight:700; }
table.compare td.diff .row-value{ color:var(--accent-dark); }
table.compare .col-brand{ font-size:.68rem; text-transform:uppercase; color:var(--gray-500); font-family:'JetBrains Mono',monospace; font-weight:600; display:block; letter-spacing:.05em; }
table.compare .price-cell{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1rem; }

.site-footer{ margin-top:34px; padding-block:22px 40px; border-top:2px solid var(--ink); }
.site-footer p{ color:var(--gray-500); font-size:.8rem; max-width:70ch; font-family:'JetBrains Mono',monospace; line-height:1.6; }
.footer-brand{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.footer-mark{ width:20px; height:20px; color:var(--ink); flex:none; opacity:.55; }
.footer-mark svg{ width:100%; height:100%; }
.footer-brand-name{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:.95rem; letter-spacing:.01em; color:var(--gray-500); }
.footer-brand-name em{ font-style:normal; color:var(--accent); }
.site-footer nav{ display:flex; gap:14px; margin-top:10px; font-size:.82rem; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em; }

/* =====================================================================
   COMPARADOR (Duel) — sección dedicada de comparación 1 vs 1
   ===================================================================== */
.duel-hero{ padding-block:34px 8px; max-width:760px; }
.duel-hero h1{ font-size:clamp(2rem,6vw,3rem); margin-top:8px; }
.duel-hero p{ margin:12px 0 0; color:var(--gray-700); font-size:1rem; max-width:64ch; }

.compare-tabs{ display:inline-flex; gap:4px; border:2px solid var(--ink); border-radius:var(--radius); padding:4px; margin:22px 0 32px; }
.compare-tab{
  font-family:'JetBrains Mono',monospace; font-size:1rem; letter-spacing:.04em; text-transform:uppercase;
  padding:16px 36px; border:none; border-radius:calc(var(--radius) - 2px); background:none; color:var(--gray-500); cursor:pointer;
  font-weight:700; transition:background .15s,color .15s;
}
.compare-tab:hover{ color:var(--ink); }
.compare-tab[aria-selected="true"]{ background:var(--accent); color:var(--accent-ink); }
.compare-tab[aria-selected="true"]:hover{ color:var(--accent-ink); }
@media (max-width:680px){ .compare-tabs{ display:flex; width:100%; } .compare-tab{ flex:1; padding:16px 12px; font-size:.9rem; } }

.picker-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; margin-top:24px; }
@media (max-width:720px){ .picker-row{ grid-template-columns:1fr; } }
.picker-vs{
  align-self:center; font-family:'Anton',sans-serif; font-size:1rem; color:var(--gray-500);
  background:var(--surface-2); border:1.5px solid var(--ink); border-radius:50%;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:none;
}
@media (max-width:720px){ .picker-vs{ margin:0 auto; } }
.picker{ border:1.5px solid var(--ink); border-radius:var(--radius); padding:16px; background:var(--surface); display:flex; flex-direction:column; gap:10px; min-height:104px; }
.picker-label{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.08em; color:var(--gray-500); text-transform:uppercase; }
.picker-search{ position:relative; }
.picker-search input{
  width:100%; padding:10px 14px; border-radius:var(--radius-s); border:1.5px solid var(--ink);
  background:var(--surface); color:var(--ink); font-size:.92rem; font-family:'Archivo',sans-serif;
}
.picker-suggestions{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; background:var(--surface);
  border:1.5px solid var(--ink); border-radius:var(--radius-s); max-height:280px; overflow-y:auto;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.25);
}
.suggestion-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:10px 12px; border:none; background:transparent; text-align:left; cursor:pointer;
  border-bottom:1px solid var(--line); font-family:'Archivo',sans-serif;
}
.suggestion-item:last-child{ border-bottom:none; }
.suggestion-item:hover{ background:var(--surface-2); }
.suggestion-main{ display:flex; flex-direction:column; gap:1px; }
.suggestion-brand{ font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); }
.suggestion-model{ font-weight:700; font-size:.92rem; }
.suggestion-tag{ font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; color:var(--gray-500); white-space:nowrap; }
.suggestion-empty{ padding:14px 12px; color:var(--gray-500); font-size:.85rem; font-family:'JetBrains Mono',monospace; }
.picker-chosen{ display:flex; align-items:center; gap:10px; }
.picker-chosen .mini-badge{ width:44px; height:44px; border-radius:var(--radius-s); background:var(--surface-2); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none; overflow:hidden; }
.picker-chosen .mini-badge svg{ width:70%; height:auto; }
.picker-chosen .mini-badge img.shoe-photo{ width:100%; height:100%; object-fit:contain; padding:3px; }
.picker-chosen .mini-text{ flex:1; min-width:0; }
.picker-chosen .mini-brand{ font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; color:var(--gray-500); }
.picker-chosen .mini-model{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.05rem; line-height:1.05; }
.picker-change{
  border:1.5px solid var(--gray-300); background:transparent; color:var(--gray-700);
  border-radius:var(--radius-s); padding:6px 9px; font-size:.68rem; cursor:pointer; flex:none;
  font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.03em;
}
.picker-change:hover{ border-color:var(--accent); color:var(--accent); }

.duel-empty{ text-align:center; padding:50px 16px; color:var(--gray-500); font-family:'JetBrains Mono',monospace; border:1.5px dashed var(--gray-300); border-radius:var(--radius); margin-top:24px; }

.duel-result{ margin-top:30px; }
.duel-photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; }
.duel-photo{ aspect-ratio:1/1; background:var(--surface-2); border:1.5px solid var(--ink); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--ink); overflow:hidden; position:relative; }
.duel-photo svg{ width:46%; height:auto; }
.duel-photo img.shoe-photo{ width:100%; height:100%; object-fit:contain; padding:14px; }
.duel-photo.photo-zoomable:hover .photo-zoom-hint, .duel-photo.photo-zoomable:focus-visible .photo-zoom-hint{ opacity:1; }
.duel-photo.photo-zoomable:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.vs-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:.85rem;
  border:3px solid var(--bg);
}
.duel-info-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; text-align:center; }
.duel-info-brand{ font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); }
.duel-info-model{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.7rem; line-height:1; margin-top:2px; }
.duel-info-desc{ margin-top:8px; color:var(--gray-700); font-size:.88rem; }
.duel-features{ margin-top:12px; display:flex; flex-direction:column; gap:5px; text-align:left; }
.duel-feature{ font-size:.78rem; color:var(--gray-700); padding-left:14px; position:relative; }
.duel-feature::before{ content:"—"; position:absolute; left:0; color:var(--accent); font-weight:700; }

.duel-rows{ margin-top:30px; border-top:2px solid var(--ink); }
.duel-row{
  display:grid; grid-template-columns:1fr 180px 1fr; grid-template-areas:"a label b";
  align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);
}
.duel-row .col-a{ grid-area:a; text-align:right; }
.duel-row .col-label{ grid-area:label; text-align:center; font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); }
.duel-row .col-b{ grid-area:b; text-align:left; }
.duel-row .col-a .bar-row{ justify-content:flex-end; }
.duel-row .col-b .bar-row{ justify-content:flex-start; }
.duel-row .val{ font-size:.95rem; font-weight:600; }
.duel-row.is-diff .col-a .val, .duel-row.is-diff .col-b .val{ color:var(--accent-dark); }
.duel-row.is-diff{ background:var(--accent-soft); border-radius:var(--radius-s); border-bottom:1px solid var(--accent-soft); }
.duel-sub{ font-size:.68rem; color:var(--gray-500); margin-top:2px; font-family:'JetBrains Mono',monospace; }
@media (max-width:680px){
  .duel-row{
    grid-template-columns:1fr 1fr; grid-template-areas:"label label" "a b";
    row-gap:8px; padding:14px 4px;
  }
  .duel-row .col-a{ text-align:left; }
  .duel-row .col-label{ text-align:left; }
  .duel-row .col-a .bar-row, .duel-row .col-b .bar-row{ justify-content:flex-start; }
  .duel-photo-row{ gap:8px; }
  .duel-info-model{ font-size:1.3rem; }
}
.duel-side-tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--gray-500); border:1px solid var(--gray-300); border-radius:2px; padding:1px 5px; margin-right:6px; vertical-align:middle; }
.duel-note{ margin-top:16px; color:var(--gray-500); font-size:.8rem; font-family:'JetBrains Mono',monospace; }

/* =====================================================================
   NEWS — editorial section (listing + article detail)
   ===================================================================== */
.news-hero{ padding-block:34px 6px; max-width:760px; }
.news-hero h1{ font-size:clamp(2rem,6vw,3rem); margin-top:8px; }
.news-hero p{ margin:12px 0 0; color:var(--gray-700); font-size:1rem; max-width:64ch; }

.news-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.news-filters button{
  border:1px solid var(--gray-300); background:var(--surface); color:var(--ink);
  border-radius:var(--radius-s); padding:7px 12px; font-size:.76rem; cursor:pointer;
  font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.04em;
}
.news-filters button:hover{ border-color:var(--accent); color:var(--accent); }
.news-filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

.news-empty{ text-align:center; padding:50px 16px; color:var(--gray-500); font-family:'JetBrains Mono',monospace; border:1.5px dashed var(--gray-300); border-radius:var(--radius); margin-top:24px; }

/* Featured (most recent) */
.news-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; margin-top:26px;
  border:1.5px solid var(--ink); border-radius:var(--radius); overflow:hidden; cursor:pointer; background:var(--surface);
  transition:border-color .12s;
}
.news-featured:hover{ border-color:var(--accent); }
.news-featured:hover .news-featured-title{ color:var(--accent); }
@media (max-width:760px){ .news-featured{ grid-template-columns:1fr; } }
.news-featured-photo{
  aspect-ratio:16/11; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.news-featured-photo svg{ width:34%; height:auto; opacity:.92; }
.news-featured-photo img{ width:100%; height:100%; object-fit:cover; }
.news-featured-photo::after{
  content:"NEWS"; position:absolute; bottom:12px; left:14px; font-family:'JetBrains Mono',monospace;
  font-size:.62rem; letter-spacing:.14em; color:var(--bg); opacity:.55;
}
.news-featured-body{ padding:26px 28px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.news-featured-eyebrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.news-cat-tag{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-dark); background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-s); padding:3px 8px;
}
.news-date{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--gray-500); }
.news-featured-title{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.04; }
.news-featured-model{ font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; }
.news-featured-excerpt{ color:var(--gray-700); font-size:.94rem; max-width:52ch; }
.news-read-link{ font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); margin-top:4px; }
.news-featured:hover .news-read-link{ color:var(--accent); }

/* Card grid */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin-top:22px; }
.news-card{
  background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--radius);
  display:flex; flex-direction:column; cursor:pointer; overflow:hidden; transition:border-color .12s;
}
.news-card:hover{ border-color:var(--accent); }
.news-card:hover .news-card-title{ color:var(--accent); }
.news-card-photo{
  aspect-ratio:4/3; background:var(--surface-2); border-bottom:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; color:var(--ink); overflow:hidden;
}
.news-card-photo svg{ width:40%; height:auto; }
.news-card-photo img{ width:100%; height:100%; object-fit:cover; }
.news-card-body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.news-card-eyebrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.news-card-title{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.12rem; line-height:1.08; }
.news-card-model{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.03em; }
.news-card-excerpt{ color:var(--gray-700); font-size:.84rem; flex:1; }
.news-card .news-read-link{ margin-top:auto; padding-top:6px; font-size:.72rem; }

/* Article detail page */
.article-page{ max-width:760px; margin:0 auto; padding-block:30px 40px; }
.article-eyebrow-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.article-title{ font-size:clamp(2rem,6vw,3.1rem); margin-top:12px; }
.article-subtitle{ margin-top:12px; color:var(--gray-700); font-size:1.05rem; max-width:62ch; }
.article-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.03em; }
.article-hero-photo{
  margin-top:24px; aspect-ratio:16/9; background:var(--ink); color:var(--bg); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.article-hero-photo svg{ width:26%; height:auto; opacity:.92; }
.article-hero-photo img{ width:100%; height:100%; object-fit:cover; }
.article-body{ margin-top:26px; color:var(--gray-700); font-size:1rem; display:flex; flex-direction:column; gap:16px; }
.article-body p{ margin:0; }

.article-section{ margin-top:38px; padding-top:22px; border-top:2px solid var(--ink); }
.article-section h2{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.3rem; letter-spacing:.01em; }
.article-section > p.section-lead{ margin-top:10px; color:var(--gray-700); font-size:.94rem; }

.article-spec-grid{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
@media (max-width:480px){ .article-spec-grid{ grid-template-columns:1fr; } }

.article-features{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.article-feature{ font-size:.92rem; color:var(--gray-700); padding-left:16px; position:relative; }
.article-feature::before{ content:"—"; position:absolute; left:0; color:var(--accent); font-weight:700; }

.article-proscons{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:480px){ .article-proscons{ grid-template-columns:1fr; } }
.proscons-col h3{ font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); margin-bottom:10px; }
.proscons-col ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.proscons-col li{ font-size:.88rem; color:var(--gray-700); padding-left:22px; position:relative; }
.proscons-col.pros li::before{ content:"+"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.proscons-col.contras li::before{ content:"–"; position:absolute; left:0; color:var(--gray-500); font-weight:700; }

.article-verdict{
  margin-top:18px; background:var(--accent-soft); border:1.5px solid var(--accent); border-radius:var(--radius);
  padding:20px 22px; color:var(--ink); font-size:.96rem; display:flex; flex-direction:column; gap:10px;
}
.article-verdict .verdict-tag{ font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-dark); }
.article-verdict p{ margin:0; color:var(--ink); }

.article-links{ margin-top:16px; display:flex; flex-direction:column; gap:6px; }
.article-links a{ font-size:.88rem; font-family:'JetBrains Mono',monospace; }

.article-product-card{
  margin-top:18px; display:flex; align-items:center; gap:16px; border:1.5px solid var(--ink);
  border-radius:var(--radius); padding:16px; background:var(--surface);
}
.article-product-card .mini-badge{ width:56px; height:56px; border-radius:var(--radius-s); background:var(--surface-2); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none; overflow:hidden; }
.article-product-card .mini-badge svg{ width:70%; height:auto; }
.article-product-card .mini-badge img.shoe-photo{ width:100%; height:100%; object-fit:contain; padding:4px; }
.article-product-card .mini-text{ flex:1; min-width:0; }
.article-product-card .mini-brand{ font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; color:var(--gray-500); letter-spacing:.04em; }
.article-product-card .mini-model{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.2rem; line-height:1.05; }
.article-product-card .mini-specs{ margin-top:4px; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--gray-500); }

.article-back{ margin-top:40px; padding-top:20px; border-top:2px solid var(--ink); }

.related-news{ margin-top:18px; display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:1.5px solid var(--ink); }
.related-news h4{ font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); }
.related-news-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  padding:8px 0; border-bottom:1px solid var(--line); background:none; border-top:none; border-left:none; border-right:none;
  width:100%; text-align:left; font-family:'Archivo',sans-serif; color:var(--ink);
}
.related-news-item:last-child{ border-bottom:none; }
.related-news-item:hover .related-news-title{ color:var(--accent); }
.related-news-title{ font-size:.88rem; font-weight:700; }
.related-news-arrow{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--gray-500); flex:none; }

/* Banner de consentimiento de cookies (necesario para AdSense/GDPR) */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:560px; margin:0 auto; background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.cookie-banner p{ margin:0; font-size:.85rem; color:var(--gray-700); }
.cookie-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ==========================================================================
   Comparador de tallas
   ========================================================================== */
#sizesPickerRow{ grid-template-columns:1fr 1fr; }
@media (max-width:720px){ #sizesPickerRow{ grid-template-columns:1fr; } }
.size-select{
  border:1.5px solid var(--ink); border-radius:var(--radius-s); background:var(--surface); color:var(--ink);
  padding:10px 12px; font-size:.92rem; font-family:'Archivo',sans-serif; width:100%;
}
.size-results{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:24px; }
.size-result-card{ border:1.5px solid var(--ink); border-radius:var(--radius); padding:16px; background:var(--surface); text-align:center; }
.size-result-origin{ border-color:var(--accent); background:var(--accent-soft,var(--surface-2)); }
.size-result-brand{ font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); }
.size-result-value{ font-family:'Anton',sans-serif; font-size:2rem; line-height:1.1; margin-top:4px; }
.size-approx{ color:var(--gray-500); font-size:1.1rem; margin-right:2px; }
.size-result-cm{ font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--gray-500); margin-top:2px; }
.size-disclaimer{ margin-top:24px; font-size:.82rem; color:var(--gray-500); max-width:64ch; }

/* ==========================================================================
   Sobre nosotros / contacto
   ========================================================================== */
.about-content{ max-width:64ch; margin-top:8px; }
.about-content p{ color:var(--gray-700); font-size:1rem; margin:0 0 14px; }
.contact-form{ max-width:480px; margin-top:36px; display:flex; flex-direction:column; gap:14px; padding:22px; border:1.5px solid var(--ink); border-radius:var(--radius); background:var(--surface); }
.contact-form h2{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.15rem; margin:0; }
.contact-row{ display:flex; flex-direction:column; gap:6px; }
.contact-row label{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); }
.contact-row input, .contact-row textarea{
  border:1.5px solid var(--ink); border-radius:var(--radius-s); background:var(--surface); color:var(--ink);
  padding:10px 12px; font-size:.92rem; font-family:'Archivo',sans-serif; resize:vertical;
}
.contact-form .btn-primary{ align-self:flex-start; }
.contact-hint{ margin:0; font-size:.78rem; color:var(--gray-500); }

/* Página legal simple */
.legal{ max-width:70ch; padding-block:40px 60px; }
.legal h1{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.9rem; margin-bottom:14px; }
.legal h2{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.2rem; margin-top:28px; margin-bottom:8px; }
.legal p, .legal li{ color:var(--gray-700); font-size:.95rem; }
.legal a{ color:var(--accent); }

/* ==========================================================================
   Radar / tela de araña — huella visual de características (ficha y duelo)
   ========================================================================== */
.radar-card{ margin-top:22px; padding-top:18px; border-top:1.5px solid var(--ink); }
.radar-card h4{ margin:0 0 10px; font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); font-weight:600; }
.radar-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.radar-svg{ width:100%; max-width:280px; height:auto; overflow:visible; }
.radar-svg .radar-grid{ fill:none; stroke:var(--line); stroke-width:1; }
.radar-svg .radar-axis{ stroke:var(--line); stroke-width:1; }
.radar-svg .radar-axis-label{ font-family:'JetBrains Mono',monospace; font-size:6.6px; fill:var(--gray-500); }
.radar-svg .radar-axis-value{ font-family:'JetBrains Mono',monospace; font-size:6.2px; font-weight:600; }
.radar-svg .radar-poly{ fill-opacity:.16; stroke-width:2; }
.radar-svg .radar-dot{ stroke:var(--surface); stroke-width:1.5; }
.radar-svg .radar-dot-manual{ stroke:var(--ink); stroke-width:1.5; stroke-dasharray:1.2 1; }
.radar-legend{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.radar-legend-item{ display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--gray-700); }
.radar-legend-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.radar-note{ margin:2px 0 0; font-size:.76rem; color:var(--gray-500); text-align:center; max-width:52ch; }
@media (max-width:680px){ .radar-svg{ max-width:230px; } }