/* =============================================================
   Frieren FAN SHOP — styles.css
   1. Tokens  2. Reset & base  3. Utilities  4. Typography
   5. Components  6. Sections  7. Effects  8. Responsive
   9. Reduced motion
   ============================================================= */

/* =============================================================
   1. Tokens
   PALETA DE PLACEHOLDER — investiga la estética real del anime
   (colores de logo/portada, tono general: cálido/oscuro/pastel/etc.)
   y sustituye --accent/--accent-2/--c1..--c6 antes de publicar.
   Los --bg-* de abajo son un neutro seguro que funciona con
   cualquier acento; solo tócalos si el anime pide un tono muy
   distinto (p.ej. paleta oscura para un shonen de terror).
   ============================================================= */
:root {
  /* surfaces — neutral warm-grey, works under any accent color */
  --bg: #f4f2ef;
  --bg-elevated: #ece8e2;
  --bg-card: #fdfcfb;
  --bg-card-hover: #f8f6f3;
  --line: #ddd6cc;
  --line-soft: #e6e0d7;

  /* ink */
  --ink: #201d18;
  --ink-dim: #665f54;
  --ink-faint: #6d6351; /* 4.9:1 on --bg-elevated — WCAG AA for small labels */

  /* brand — EDITA estos colores según la paleta real del anime */
  --accent: #2F6B5E;
  --accent-2: #B8923A;
  --accent-2-ink: #74551a; /* TEXTO oscuro del acento 2 (eyebrows, badges, migas): debe dar ≥4.5:1 sobre --bg */
  --accent-ink: #f3f7f4;
  --accent-soft: rgba(47, 107, 94, 0.12);
  --court: #e4e0d8;

  --ok: #1e7d45;
  --warn: #8a5300;

  /* the header/nav/footer keep a dark surface regardless of accent */
  --header-bg: #0c0c0e;
  --header-bg-soft: #16171b;
  --header-line: #2b2c33;
  --header-ink: #f5f3ee;
  --header-ink-dim: #b9b7b0;

  /* team palette (used by radar overlays / cards) — EDITA si quieres
     que combine mejor con el --accent elegido arriba */
  --c1: #2F6B5E;
  --c2: #6B4C9A;
  --c3: #B8412F;
  --c4: #4A78B5;
  --c5: #C9A24A;
  --c6: #7FA88A;

  --radius: 14px;
  --radius-sm: 8px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1280px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) { animation-name: fadeOutUp; }
::view-transition-new(root) { animation-name: fadeInUp; }
@keyframes fadeOutUp { to { opacity: 0; transform: translateY(-10px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.section { position: relative; padding-block: clamp(3rem, 8vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--display); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2-ink); font-size: .8rem; /* text in dark amber (5.7:1); the bar below keeps the bright orange */
  margin-bottom: .5rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 3px; background: var(--accent); border-radius: 2px;
}
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.divider-diag {
  height: 46px; background: var(--bg-elevated);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .3em .7em; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--bg-card); border: 1px solid var(--line);
  color: var(--ink-dim);
}
.badge-accent { background: var(--accent-soft); color: var(--accent-2-ink); border-color: transparent; }
.badge-sample { background: rgba(184,146,58,.18); color: var(--accent-2-ink); border-color: rgba(138,83,0,.25); }
.badge-ok { background: rgba(30,125,69,.14); color: var(--ok); border-color: rgba(30,125,69,.3); }

/* =============================================================
   4. Typography
   ============================================================= */
h1, .h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.8rem); }
h2, .h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
h3, .h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: .01em; }
h4, .h4 { font-family: var(--sans); font-weight: 800; font-size: 1.05rem; }
.lede { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--ink-dim); max-width: 62ch; }
.text-dim { color: var(--ink-dim); }
.text-faint { color: var(--ink-faint); }
.text-accent { color: var(--accent-2-ink); }

/* =============================================================
   5. Components
   ============================================================= */

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.6em; border-radius: 999px;
  font-weight: 800; font-size: .95rem; letter-spacing: .01em;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 10px 24px -10px rgba(47,107,94,.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(47,107,94,.65); }
.btn-ghost { background: var(--bg-card); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.btn-sm { padding: .55em 1.1em; font-size: .82rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* --- nav --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,12,14,.92); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--header-line);
  color: var(--header-ink);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: rgba(12,12,14,.98); } }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; color: var(--header-ink); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.nav-links { display: none; align-items: center; gap: 1.6rem; }
.nav-links a { font-weight: 700; font-size: 1.05rem; color: var(--header-ink-dim); transition: color .2s var(--ease-out); position: relative; }
.nav-links a:hover, .nav-links a.is-active { color: var(--header-ink); }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--accent);
}
.nav-cta.nav-cta { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); padding: .55em 1.2em; border-radius: 999px; font-weight: 800; }
.nav-cta.nav-cta:hover { color: var(--accent-ink); }

/* --- nav dropdown (desktop) --- */
.nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.nav-item > a { display: flex; align-items: center; gap: .32rem; }
.nav-item > a::after {
  content: ""; width: 6px; height: 6px; margin-top: -2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.nav-dropdown {
  /* Sits flush against the nav item (top:100%, no margin-top gap) on
     purpose: an earlier version added a gap + an invisible hover "bridge"
     to cover it, but the bridge had to be wider than the link itself to
     reach the panel below, and that width silently overlapped into the
     NEXT nav item's own hover area — hovering near one item's arrow could
     pop open its neighbor's dropdown. Zero gap removes the need for a
     bridge entirely, so there's nothing left to overlap. */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--header-bg); border: 1px solid var(--header-line); border-radius: 14px;
  padding: .5rem; min-width: 210px;
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  font-size: .9rem; font-weight: 600; padding: .55em .7em; border-radius: 8px; white-space: nowrap;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: rgba(255,255,255,.07); }

/* --- nav submenu (mobile) --- */
.mobile-submenu { padding-left: 1.1rem; margin-top: -.4rem; margin-bottom: .5rem; border-bottom: 1px solid var(--header-line); padding-bottom: .3rem; }
.mobile-menu .mobile-submenu a {
  font-family: var(--sans); text-transform: none; font-size: 1rem; font-weight: 600;
  color: var(--header-ink-dim); padding: .55rem 0; border-bottom: none;
}
.nav-toggle { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--header-ink); }
.nav-toggle svg { width: 22px; height: 22px; }
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: var(--header-bg); padding: 5.5rem 1.5rem 2rem;
  overflow-y: auto;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--header-line); font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; color: var(--header-ink); }

/* --- breadcrumbs (every page except home) --- */
.breadcrumbs { padding-block: .65rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-elevated), var(--bg)); }
.breadcrumbs .container { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; font-size: .84rem; }
.breadcrumbs a, .breadcrumbs span[aria-current] { display: inline-flex; align-items: center; gap: .4em; padding: .32em .7em; border-radius: 999px; line-height: 1; white-space: nowrap; }
.breadcrumbs a { color: var(--ink-dim); font-weight: 600; transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.breadcrumbs a:hover { background: var(--accent-soft); color: var(--accent-2-ink); }
.breadcrumbs a svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.breadcrumbs span[aria-current] { color: var(--ink); font-weight: 700; background: var(--bg-card); border: 1px solid var(--line); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.breadcrumb-sep { color: var(--ink-faint); font-size: 1.15em; line-height: 1; padding: 0 .15rem; }

/* --- cards: product --- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.p-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.p-card:hover { transform: translateY(-4px); border-color: rgba(47,107,94,.4); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.p-card-media {
  aspect-ratio: 1; position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 20% 0%, rgba(47,107,94,.22), transparent 60%), var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.p-card-media svg { width: 42%; height: 42%; color: var(--ink-faint); }
.p-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.p-card-media .badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: var(--accent); color: var(--accent-ink); border: none;
  font-size: .74rem; padding: .38em .85em;
  box-shadow: 0 3px 10px rgba(20,15,5,.35);
}
.p-card-media .badge-discount {
  position: absolute; top: .6rem; left: auto; right: .6rem; width: max-content; z-index: 2;
  font-size: .8rem; padding: .42em .9em;
  background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 70%, white)); color: #fff; border: none;
  font-weight: 800; box-shadow: 0 2px 8px rgba(150,20,45,.35);
}
.p-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.p-card-cat { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.p-card-name { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.p-card-link { position: absolute; inset: 0; z-index: 1; }
.p-card-desc { font-size: .82rem; line-height: 1.4; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-card-meta { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-dim); }
.stars { color: var(--accent-2); letter-spacing: 1px; }
.p-card-price-row { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; }
.price { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.price-strike { text-decoration: line-through; color: var(--ink-faint); font-size: .85rem; }
.p-card-cta { margin-top: .6rem; position: relative; z-index: 2; }

/* --- character trading card (no copyrighted art: CSS-generated) --- */
.pc-card {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pc-card:hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: 0 20px 44px -18px rgba(0,0,0,.65); }
.pc-face {
  position: relative; aspect-ratio: 3/4;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem;
  background:
    radial-gradient(120% 90% at 15% -10%, color-mix(in srgb, var(--pc1) 55%, transparent), transparent 60%),
    linear-gradient(155deg, var(--pc1), var(--pc2) 120%);
  color: #fff;
  overflow: hidden;
}
.pc-face:not(.has-photo)::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px);
  mix-blend-mode: overlay;
}
.pc-face:not(.has-photo)::after {
  content: ""; position: absolute; right: -18%; bottom: -18%; width: 75%; aspect-ratio: 1;
  border-radius: 50%; border: 3px dashed rgba(255,255,255,.16);
}
/* --- character card, real-photo variant (user-supplied images) --- */
.pc-face.has-photo { background: var(--pc1); }
.pc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pc-photo-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--pc1) 92%, black 8%) 0%,
    rgba(0,0,0,0) 40%, rgba(0,0,0,.22) 78%, rgba(0,0,0,.38) 100%);
}
.pc-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.pc-number { flex: none; font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 9vw, 4.6rem); line-height: .8; opacity: .92; text-shadow: 0 6px 18px rgba(0,0,0,.35); }
/* some positions carry the English name too ("Bloqueador central (Middle
   Blocker)") and can run well past a 2-column phone card's width — shrink
   and ellipsize instead of hard-clipping mid-word against .pc-card's
   overflow:hidden. */
.pc-position {
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(0,0,0,.28); padding: .35em .6em; border-radius: 999px;
}
.pc-ball { position: relative; width: 30%; margin-inline: auto; opacity: .9; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.pc-bottom { position: relative; }
.pc-team { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.pc-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.35rem); text-transform: uppercase; line-height: 1.02; margin-top: .15rem; }
.pc-info { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.pc-info-row { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink-dim); }
.pc-info-row b { color: var(--ink); font-weight: 700; }
.pc-cta { padding: 0 1rem 1rem; }

/* --- category tile --- */
.cat-tile {
  position: relative; border-radius: var(--radius); overflow: hidden; padding: 1.4rem;
  border: 1px solid var(--line); background: var(--bg-card);
  display: flex; flex-direction: column; gap: .6rem; min-height: 150px; justify-content: flex-end;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.cat-tile::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 100% 0%, var(--accent-soft), transparent 65%);
}
.cat-tile svg { width: 30px; height: 30px; color: var(--accent); position: relative; }
.cat-tile h3 { position: relative; font-size: 1.1rem; }
.cat-tile span { position: relative; font-size: .8rem; color: var(--ink-dim); }

/* --- category showcase card (home: full-bleed photo + scrim + centered CTA) --- */
.cat-showcase {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 4; min-height: 320px; background: var(--bg-elevated);
  border: 1px solid var(--line);
}
/* below ~496px-wide columns, aspect-ratio's natural height (width * 4/3)
   drops under the 320px floor above — browsers then solve the ratio from
   the min-height instead, which widens the card past its grid column and
   pushes it off-screen. Drop the floor once columns get that narrow, so
   aspect-ratio alone (still legible, just shorter) sizes the card. */
@media (max-width: 539px) {
  .cat-showcase { min-height: 0; }
}
.cat-showcase-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s var(--ease-out);
}
.cat-showcase-fallback { display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); }
.cat-showcase-fallback svg { width: 25%; height: 25%; color: var(--ink-faint); }
.cat-showcase:hover .cat-showcase-img { transform: scale(1.06); }
.cat-showcase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,6,3,.96) 0%, rgba(8,6,3,.88) 48%, rgba(8,6,3,.1) 82%);
}
.cat-showcase-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.6rem 1.2rem 1.8rem; text-align: center; color: #fff;
}
.cat-showcase-body h3 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.cat-showcase-body p {
  font-size: .85rem; line-height: 1.4; color: rgba(255,255,255,.9);
  margin-top: .5rem; max-width: 28ch; margin-inline: auto; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cat-showcase-btn { margin-top: 1.1rem; }

/* --- category/subcategory hero (product photo under a black scrim) --- */
.cat-hero {
  position: relative; overflow: clip; isolation: isolate; color: #fff;
  background: #0c0c0e; padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.cat-hero-bg { position: absolute; inset: 0; z-index: -1; }
.cat-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(1.1); transform: scale(1.06); }
.cat-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,6,3,.93) 0%, rgba(8,6,3,.84) 50%, rgba(8,6,3,.7) 100%);
}
.cat-hero-grid { display: grid; gap: 2rem; align-items: center; }
.cat-hero .eyebrow { color: var(--accent-2); }
.cat-hero-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .98; letter-spacing: .01em;
  font-size: clamp(2.2rem, 6vw, 4rem); margin-top: .5rem; max-width: 16ch; text-wrap: balance;
}
.cat-hero-sub { margin-top: 1rem; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55; color: rgba(255,255,255,.88); max-width: 56ch; }
.cat-hero-chips { list-style: none; padding: 0; margin: 1.3rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-hero-chips li {
  font-size: .82rem; padding: .4em .85em; border-radius: 999px; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
}
.cat-hero-chips b { color: #fff; }
.cat-hero .lede { color: rgba(255,255,255,.85); margin-top: 1.2rem; font-size: .95rem; }
.cat-hero .lede .text-accent { color: var(--accent-2); }
.cat-hero-figure {
  margin: 0; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; overflow: hidden;
  border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.cat-hero-figure img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
@media (min-width: 720px) {
  .cat-hero-grid { grid-template-columns: 1.25fr .75fr; gap: 3rem; }
  .cat-hero-figure { justify-self: end; }
}
@media (max-width: 719px) {
  .cat-hero-figure { width: min(62%, 250px); }
}

/* subcategory cards: same .cat-showcase as the home, always centred */
.cat-subcats-head { justify-content: center; text-align: center; }
.cat-showcase-row { --gap: clamp(1rem, 2.2vw, 1.5rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cat-showcase-row > .cat-showcase { flex: 0 1 calc((100% - 3 * var(--gap, 1.2rem)) / 4); min-width: 0; }
@media (max-width: 959px) {
  .cat-showcase-row > .cat-showcase { flex-basis: calc((100% - var(--gap, 1.2rem)) / 2); }
}

/* --- category "Top 3" podium (dark band, #1 highlighted) --- */
.top-picks {
  position: relative; overflow: clip; color: #fff; padding-block: clamp(2.8rem, 7vw, 4.5rem);
  background:
    radial-gradient(55% 70% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #121214, #0c0c0e);
}
.top-picks-head { justify-content: center; text-align: center; }
.top-picks-head .eyebrow { color: var(--accent-2); }
.top-picks-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.top-picks-head p { margin-top: .5rem; color: rgba(255,255,255,.78); font-size: .92rem; max-width: 60ch; margin-inline: auto; }
.top-picks-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); align-items: stretch; }
.top-pick {
  position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: #1a1b20; border: 1px solid #2b2c33;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.top-pick:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-2) 60%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.top-pick.is-first { border: 2px solid var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent), 0 24px 50px rgba(0,0,0,.5); }
.top-pick-rank {
  position: absolute; top: .8rem; left: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .45em;
  padding: .38em .8em; border-radius: 999px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(12,12,14,.86); color: #fff; border: 1px solid rgba(255,255,255,.16);
}
.top-pick-rank b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--accent-2); }
.top-pick.is-first .top-pick-rank { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border: 0; }
.top-pick.is-first .top-pick-rank b { color: var(--accent-ink); }
.top-pick-media { display: block; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.top-pick-media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: transform .45s var(--ease-out); }
.top-pick:hover .top-pick-media img { transform: scale(1.05); }
.top-pick-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.top-pick-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.top-pick-tags li {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .3em .65em; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent-2) 45%, #fff);
}
.top-pick h3 { font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.top-pick h3 a { color: #fff; }
.top-pick h3 a:hover { color: var(--accent-2); }
.top-pick-rating { font-size: .84rem; color: rgba(255,255,255,.72); }
.top-pick-rating b { color: #fff; }
.top-pick-why { font-size: .86rem; line-height: 1.45; color: rgba(255,255,255,.82); padding-left: .7rem; border-left: 3px solid var(--accent); }
.top-pick-price { margin-top: auto; display: flex; align-items: baseline; gap: .6rem; }
.top-pick-price b { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--accent-2); }
.top-pick-price s { font-size: .85rem; color: rgba(255,255,255,.5); }
.top-pick-ficha { text-align: center; font-size: .84rem; font-weight: 700; color: rgba(255,255,255,.78); }
.top-pick-ficha:hover { color: var(--accent-2); }
@media (min-width: 720px) {
  .top-picks-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .top-picks-grid { align-items: center; }
  .top-pick.is-first, .top-pick.is-first.reveal.is-visible { order: 2; transform: scale(1.04); }
  .top-pick.is-first.reveal.is-visible:hover { transform: scale(1.04) translateY(-4px); }
  .top-pick:nth-child(2) { order: 1; }
  .top-pick:nth-child(3) { order: 3; }
}

/* --- category buying guide ("Qué mirar antes de comprar") --- */
.qg-intro { max-width: 75ch; }
.qg-facts { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.qg-facts li { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--line); }
.qg-facts b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.45rem; color: var(--accent-2-ink); }
.qg-facts span { font-size: .8rem; color: var(--ink-dim); }
.qg-grid { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 720px) { .qg-grid { grid-template-columns: 1fr 1fr; } }
.qg-point { position: relative; padding: 1.4rem 1.4rem 1.4rem 4.2rem; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--line); }
.qg-num { position: absolute; left: 1.2rem; top: 1.25rem; font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--accent); }
.qg-point h3 { font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 800; font-size: 1.02rem; line-height: 1.3; }
.qg-point p { margin-top: .45rem; font-size: .92rem; line-height: 1.6; color: var(--ink-dim); }
.qg-tip {
  margin-top: 1.6rem; padding: 1.5rem 1.6rem; border-radius: var(--radius); color: #fff;
  background: linear-gradient(120deg, #16171b, #0c0c0e); border-left: 5px solid var(--accent);
  display: grid; gap: .8rem; justify-items: start;
}
.qg-tip-label { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--accent-2); }
.qg-tip p { font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 75ch; }

/* --- hero --- */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: clamp(3.5rem, 10vw, 7rem);
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(47,107,94,.16), transparent 60%),
    radial-gradient(50% 50% at 5% 90%, rgba(255,178,0,.14), transparent 60%),
    var(--bg-elevated);
}
.hero::before {
  content: ""; position: absolute; inset: -10% -10%; z-index: 1;
  background-image: repeating-linear-gradient(120deg, rgba(36,31,22,.035) 0 2px, transparent 2px 46px);
  pointer-events: none;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-elevated) 42%, rgba(241,233,214,.62) 66%, rgba(241,233,214,.15) 100%);
}
.hero-grid { position: relative; z-index: 2; display: grid; gap: 2.5rem; align-items: center; }
/* Collage de fotos de producto en el hero (hasta que haya arte propio). */
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; max-width: 520px; margin-inline: auto; width: 100%; }
.hero-collage-item { display: block; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px -22px rgba(20,35,31,.45); transition: transform .3s ease; }
.hero-collage-item:hover { transform: translateY(-4px); }
.hero-collage-item img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1; padding: .6rem; }
.hero-collage-1 { grid-row: span 2; }
.hero-collage-1 img { aspect-ratio: auto; height: 100%; object-fit: cover; padding: 0; transform: scale(1.35); }
@media (max-width: 539px) { .hero-collage { gap: .6rem; } }
.compare-promo-grid { display: grid; gap: 1.6rem; align-items: center; }
.hero-kicker { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.hero-title { max-width: 15ch; }
.hero-title em { color: var(--accent); font-style: normal; }
.hero-actions { display: flex; gap: .8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 1.6rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-stat b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--accent); }
.hero-stat span { font-size: .78rem; color: var(--ink-dim); }

/* --- trust stats band (home, right under the hero) --- */
.trust-stats-section {
  background: var(--bg-elevated); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
}
.trust-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  margin-top: 1.8rem; max-width: 980px; margin-inline: auto;
}
.trust-stat {
  padding: 1.4rem 1rem; border-radius: var(--radius-sm); background: var(--bg-card);
  border: 1px solid var(--line);
}
.trust-stat b {
  display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 2.8rem);
  /* --accent (#2F6B5E) gives ~6:1 on the card background — WCAG AA. */
  color: var(--accent); line-height: 1;
}
.trust-stat .stars { display: block; margin-top: .4rem; font-size: 1.15rem; }
.trust-stat .label { display: block; margin-top: .5rem; font-size: .82rem; color: var(--ink-dim); }
@media (max-width: 719px) { .trust-stats { grid-template-columns: repeat(2, 1fr); } }

/* --- ficha (product page) --- */
.ficha-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.gallery-main {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 100% at 20% 0%, rgba(47,107,94,.22), transparent 60%), var(--bg-elevated);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.gallery-main svg { width: 34%; height: 34%; color: var(--ink-faint); }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 1.4rem; }
.ficha-header .badge { margin-bottom: .8rem; }
.ficha-title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.ficha-brand { color: var(--ink-dim); margin-top: .3rem; }
.ficha-rating { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.ficha-price-box {
  margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.ficha-price { font-family: var(--display); font-weight: 700; font-size: 2rem; }
.price-date { font-size: .75rem; color: var(--ink-faint); margin-top: .2rem; }
.ficha-buy-repeat { margin-top: 1rem; }

.radar-wrap { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem clamp(1.2rem, 6vw, 3rem); }
.radar-wrap h3 { margin-bottom: .6rem; }
.radar-stage-toggle { display: inline-flex; gap: .3rem; padding: .25rem; background: var(--bg-elevated); border-radius: 999px; margin-bottom: 1rem; }
.radar-stage-toggle button { padding: .45em 1.1em; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ink-dim); }
.radar-stage-toggle button.is-active { background: var(--accent); color: var(--accent-ink); }
.radar-note { font-size: .76rem; color: var(--ink-faint); margin-top: .5rem; }
.radar-svg { width: 100%; max-width: 420px; height: auto; display: block; margin-inline: auto; overflow: visible; }
.radar-legend { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.radar-legend .chip { display: flex; align-items: center; gap: .4em; font-size: .78rem; color: var(--ink-dim); }
.radar-legend .dot { width: 10px; height: 10px; border-radius: 50%; }

.spec-table { margin-top: .6rem; }
.spec-group { margin-bottom: 1.2rem; }
.spec-group h4 { color: var(--accent); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.spec-row span:first-child { color: var(--ink-dim); }
.spec-row span:last-child { font-weight: 700; text-align: right; }

.pc-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.pc-columns h4 { margin-bottom: .5rem; }
.pc-columns ul li { display: flex; gap: .5em; align-items: flex-start; font-size: .9rem; padding: .3rem 0; color: var(--ink-dim); }
.pc-columns .pros li::before { content: "+"; color: var(--ok); font-weight: 900; }
.pc-columns .cons li::before { content: "–"; color: var(--accent-2); font-weight: 900; }
.ideal-para { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; font-weight: 600; }

.review-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; }

/* --- reviews carousel (category pages) --- */
.reviews-carousel {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .6rem; margin-top: 1.2rem; -webkit-overflow-scrolling: touch;
}

/* --- product carousel (home: "explora más categorías") --- */
.product-carousel {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .6rem; margin-top: 1.2rem; -webkit-overflow-scrolling: touch;
}
.product-carousel .p-card { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 720px) { .product-carousel .p-card { flex-basis: calc(50% - .5rem); } }
@media (min-width: 960px) { .product-carousel .p-card { flex-basis: calc(33.333% - .667rem); } }

/* --- carousel shell: side arrows + drag-to-scroll (product & reviews carousels) --- */
.carousel-wrap { position: relative; }
.carousel-wrap .product-carousel,
.carousel-wrap .reviews-carousel { cursor: grab; user-select: none; }
.carousel-wrap .product-carousel.is-dragging,
.carousel-wrap .reviews-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel-arrow {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.35);
  color: var(--ink); cursor: pointer; transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.carousel-arrow-prev { left: -8px; }
.carousel-arrow-next { right: -8px; }
@media (max-width: 539px) {
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow-prev { left: -4px; }
  .carousel-arrow-next { right: -4px; }
}
.review-slide {
  flex: 0 0 280px; scroll-snap-align: start;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem;
}
.review-slide-text { font-size: .9rem; color: var(--ink-dim); margin-top: .6rem; line-height: 1.5; }
.review-slide-product { font-size: .78rem; margin-top: .8rem; color: var(--ink-faint); }
.review-slide-product a { color: var(--accent-2-ink); font-weight: 600; }

/* --- FAQ accordion (category pages, rich snippet) --- */
.faq-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .2rem 1.1rem;
}
.faq-item summary {
  cursor: pointer; padding: .9rem 0; font-weight: 700; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-size: 1.2rem; color: var(--accent); transition: transform .2s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 1rem; color: var(--ink-dim); font-size: .92rem; line-height: 1.55; }

.disclosure {
  margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-dim);
}

/* --- character ficha --- */
.wiki-hero { display: grid; gap: 2rem; align-items: start; }
.wiki-card-big { max-width: 340px; }
/* single column: this now lives inside the narrow (max 340px) photo
   card, not the wide text column it used to sit in, so two columns of
   facts would be too cramped to read. */
.wiki-facts { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: 1.2rem; }
.wiki-fact { padding: .6rem .8rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wiki-fact span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }
.wiki-fact b { font-size: .88rem; }

/* Trayectoria now lives in the hero's own text column (next to the photo
   card) instead of a separate section below — otherwise, whenever the
   photo+facts column ran taller than the short intro text, the grid row
   stretched to match it and left a dead gap before the next section. */
.wiki-hero-main h3 { margin-top: 1.4rem; }

/* team path — the equipos_historial array as a connected chip trail */
.team-path { margin-top: 1.8rem; }
.team-path-track { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.team-path-chip {
  padding: .5rem .95rem; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--line);
  font-size: .86rem; font-weight: 600; color: var(--ink-dim);
}
.team-path-chip.team-path-current { background: var(--accent-soft); border-color: transparent; color: var(--accent-2-ink); }
.team-path-arrow { color: var(--ink-faint); font-size: 1rem; flex: none; }

/* popularity poll highlight — one card per poll, a bar showing how close
   to the #1 spot the rank was, and (when both polls exist) a trend line
   comparing them. */
.poll-highlight { margin-top: 1.4rem; padding: 1.1rem 1.2rem; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); }
.poll-highlight-title { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); font-weight: 700; }
.poll-cards { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .9rem; }
.poll-card { flex: 1 1 150px; min-width: 140px; }
.poll-card-label { display: block; font-size: .76rem; font-weight: 700; color: var(--ink-dim); }
.poll-card-rank { display: block; font-size: 2.2rem; font-weight: 800; color: var(--accent-2-ink); line-height: 1.15; margin-top: .1rem; }
.poll-card-rank sup { font-size: 1.1rem; top: -.6em; }
.poll-card.poll-card-top3 .poll-card-rank { color: var(--accent); }
.poll-card-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: .3rem; }
.poll-card-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.poll-card-votes { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: .35rem; }
.poll-trend { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--ink-dim); }
.poll-trend-arrow { font-size: .9rem; }
.poll-trend-up .poll-trend-arrow { color: var(--ok); }
.poll-trend-down .poll-trend-arrow { color: #c0392b; }
.poll-trend-same .poll-trend-arrow { color: var(--ink-faint); }

/* subtitle under a section heading (Ficha oficial / Más allá del manga) */
.section-lede { font-size: .9rem; color: var(--ink-dim); margin-top: .3rem; max-width: 62ch; }

/* the site header is `position: sticky`, so a plain fragment jump (TOC
   links, breadcrumb's #categorias) would land the target flush behind it
   — give every real jump target some breathing room above it. */
h1[id], h2[id], h3[id], section[id] { scroll-margin-top: 90px; }

/* character ficha's in-page table of contents */
.page-toc { margin-top: 1.8rem; padding: 1.1rem 1.3rem 1.2rem; background: var(--bg-elevated); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); max-width: 440px; }
.page-toc-title { display: inline-flex; align-items: center; gap: .5em; font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--accent-2-ink); margin-bottom: .75rem; }
.page-toc-title::before { content: ""; width: 22px; height: 3px; background: var(--accent); border-radius: 2px; }
.page-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.page-toc > ol > li { counter-increment: toc; position: relative; padding-left: 2.1rem; margin-top: .5rem; }
.page-toc > ol > li:first-child { margin-top: 0; }
.page-toc > ol > li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: .15em; font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--ink-faint); }
.page-toc a { display: inline-block; font-size: .92rem; font-weight: 700; color: var(--ink); transition: color .18s var(--ease-out), transform .18s var(--ease-out); }
.page-toc a:hover { color: var(--accent); transform: translateX(3px); }
.page-toc > ol > li > ol { margin: .45rem 0 .25rem; padding-left: .9rem; border-left: 2px solid var(--line); }
.page-toc > ol > li > ol li { margin-top: .3rem; }
.page-toc > ol > li > ol a { font-size: .84rem; font-weight: 500; color: var(--ink-dim); }
.page-toc > ol > li > ol a::before { content: "›"; margin-right: .45em; color: var(--accent); font-weight: 700; }

/* trayectoria chapter headings — the "Trayectoria" h2 uses the .h3 size
   (same as every other section title on the ficha), so bare <h3>
   chapters rendered at the exact same size and the hierarchy vanished.
   Chapters are one clear step smaller, with an accent bar as a marker. */
h3.trayectoria-chapter { display: flex; align-items: center; gap: .6em; margin-top: 1.9rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.95rem, 1.5vw, 1.1rem); color: var(--ink); }
h3.trayectoria-chapter::before { content: ""; flex: none; width: 18px; height: 3px; background: var(--accent); border-radius: 2px; }
h3.trayectoria-chapter:first-of-type { margin-top: 1.1rem; }

/* trivia cards shared by "Ficha oficial", "Más allá del manga" and
   "¿Sabías que...?" — same shape throughout, a different accent mark per
   section so the reader can tell which kind of fact they're looking at. */
.sabias-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1.1rem; }
.sabias-card {
  display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1.1rem;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.sabias-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(36,31,22,.35); }
.sabias-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; margin-top: .1rem;
}
.sabias-mark.mark-databook { background: rgba(30,125,69,.14); color: var(--ok); }
.sabias-mark.mark-medios { background: rgba(181,91,214,.16); color: var(--c3); font-size: .68rem; }
.sabias-card p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-dim); }
@media (min-width: 760px) {
  .sabias-grid { grid-template-columns: 1fr 1fr; }
}

/* --- comparator --- */
.comparator-picker { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.comparator-search { position: relative; flex: 1 1 260px; }
.comparator-search input {
  width: 100%; padding: .8em 1em; border-radius: 999px; background: var(--bg-card);
  border: 1px solid var(--line); color: var(--ink); font-size: 1rem;
}
.comparator-search-results {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 20;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 10px;
  max-height: 280px; overflow: auto; display: none; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6);
}
.comparator-search-results.is-open { display: block; }
.comparator-search-results button {
  display: flex; width: 100%; align-items: center; gap: .6rem; padding: .6rem .8rem; text-align: left; font-size: .88rem;
}
.comparator-search-results button:hover { background: var(--bg-card-hover); }

/* Character picker (VS comparator) — a photo grid, not a text list: sits
   in normal flow below the search box (pushes the page down) rather than
   floating over it, since it's meant to be browsed, not just filtered. */
[data-comparator="personajes"] .comparator-search { flex: 1 1 100%; }
[data-comparator="personajes"] .comparator-search-results {
  position: static; margin-top: .6rem; max-height: 420px;
  padding: .8rem; box-shadow: none;
}
[data-comparator="personajes"] .comparator-search-results.is-open {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem;
}
[data-comparator="personajes"] .comparator-search-results button {
  flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: .7rem .4rem; border-radius: 10px;
}
.vs-pick-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top center; background: var(--bg-card); border: 2px solid var(--line); }
.vs-pick-name { font-size: .76rem; font-weight: 700; line-height: 1.2; }
.comparator-slots { display: flex; flex-wrap: wrap; gap: .6rem; }
.slot-wrap { position: relative; padding: .4rem .4rem 0; }
.compare-chip {
  display: flex; align-items: center; gap: .5rem; padding: .45em .5em .45em .9em; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--line); font-size: .84rem; font-weight: 700;
}
.remove-badge {
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: .8rem; line-height: 1;
}
.remove-badge:hover { background: var(--accent); color: var(--accent-ink); }

.compare-table-wrap { overflow-x: auto; margin-top: 1.6rem; }
.compare-table { min-width: 640px; }
.compare-table th, .compare-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); font-size: .88rem; text-align: left; white-space: nowrap; }
.compare-table th { color: var(--ink-dim); font-weight: 700; position: sticky; top: 0; background: var(--bg); }
.compare-table td.best { color: var(--ok); font-weight: 800; }
.compare-table .row-label { color: var(--ink-dim); position: sticky; left: 0; background: var(--bg); }
.compare-head-card { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-width: 160px; }
.compare-head-card img, .compare-head-card svg { width: 46px; height: 46px; }
.compare-radar-wrap { margin-top: 2rem; }
.empty-compare { padding: 3rem 1rem; text-align: center; color: var(--ink-dim); border: 1px dashed var(--line); border-radius: var(--radius); }

/* --- character face-off (VS board) --- */
.vs-arena {
  position: relative; padding: 2.2rem clamp(1rem, 4vw, 2.4rem); border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-bg-soft) 100%); overflow: hidden;
}
.vs-arena::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background:
    radial-gradient(60% 70% at 12% 20%, rgba(47,107,94,.20), transparent 60%),
    radial-gradient(60% 70% at 88% 80%, rgba(184,146,58,.20), transparent 60%);
}
.vs-board { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 3vw, 2rem); }
@media (max-width: 639px) { .vs-board { flex-direction: column; } }
.vs-slot {
  flex: 1 1 0; position: relative; aspect-ratio: 3/4; max-width: 320px;
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
}
@media (max-width: 639px) { .vs-slot { max-width: 260px; width: 100%; } }
.vs-slot-pick {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  border: 2px dashed rgba(255,255,255,.25); border-radius: var(--radius); background: rgba(255,255,255,.04); color: rgba(255,255,255,.65);
  font-weight: 700; font-size: .9rem; transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background .2s var(--ease-out);
}
.vs-slot-pick svg { width: 34px; height: 34px; opacity: .7; }
.vs-slot-pick:hover { border-color: var(--accent); color: #fff; background: rgba(47,107,94,.12); }
.vs-slot-card {
  width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem; text-align: left; color: #fff;
  background: linear-gradient(155deg, var(--pc1, var(--accent)), var(--pc2, var(--accent-2)) 120%);
}
.vs-slot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vs-slot-card::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.05) 55%, transparent 80%);
}
.vs-slot-name, .vs-slot-team { position: relative; z-index: 1; }
.vs-slot-name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; line-height: 1.15; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.vs-slot-team { font-size: .78rem; opacity: .9; margin-top: .15rem; }
.vs-slot-remove {
  position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.3); font-size: .9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.vs-slot-remove:hover { background: var(--accent); border-color: var(--accent); }
.vs-badge {
  flex: none; position: relative; z-index: 1; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; box-shadow: 0 8px 24px -6px rgba(47,107,94,.7);
}
/* Entrance: each freshly-picked side slides in from its own edge, the
   VS badge pops in after — plays whenever the markup is (re)inserted
   (a fresh pick, or a saved matchup restored on load), skipped entirely
   for anyone who prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-vs-slot="0"] .vs-slot-card { animation: vs-in-left .5s var(--ease-out) both; }
  [data-vs-slot="1"] .vs-slot-card { animation: vs-in-right .5s var(--ease-out) both; }
  .vs-badge { animation: vs-pop .45s var(--ease-out) .12s both, vs-glow 1.6s ease-out .5s 1; }
  @keyframes vs-in-left { from { transform: translateX(-32px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes vs-in-right { from { transform: translateX(32px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes vs-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes vs-glow { 0%, 100% { box-shadow: 0 8px 24px -6px rgba(47,107,94,.7); } 50% { box-shadow: 0 8px 24px -6px rgba(47,107,94,.7), 0 0 0 14px rgba(47,107,94,.18); } }
}

/* height comparison bars, inside the face-off panel */
.height-battle { display: flex; align-items: flex-end; justify-content: center; gap: clamp(1rem, 4vw, 2.6rem); margin: 1.6rem 0 .4rem; }
.height-battle-side { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 5.5rem; }
.height-battle-val { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.height-battle-track { width: 2.1rem; height: 130px; border-radius: 999px; background: var(--bg-elevated); display: flex; align-items: flex-end; overflow: hidden; border: 1px solid var(--line); }
.height-battle-fill { width: 100%; border-radius: 999px; transition: height .5s var(--ease-out); }
.height-battle-label { align-self: flex-end; margin-bottom: 2.2rem; color: var(--ink-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

.face-off-table { min-width: 0; width: 100%; }
.face-off-table th, .face-off-table td { text-align: center; white-space: normal; }
.face-off-head th { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.face-off-head th.side-a { color: var(--face-a, var(--ink)); }
.face-off-head th.side-b { color: var(--face-b, var(--ink)); }
.face-off-label { color: var(--ink-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; width: 1%; white-space: nowrap; }
.face-off-val { font-weight: 700; }
.face-off-val.best-a { color: var(--face-a, var(--ok)); }
.face-off-val.best-b { color: var(--face-b, var(--ok)); }

.record-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 1.4rem 1rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
}
.record-tile:hover { border-color: var(--accent); }
.record-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: block; background: var(--bg-elevated); }
.record-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.record-photo svg { width: 100%; height: 100%; padding: 14px; color: var(--ink-faint); }
.record-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-top: .3rem; }
.record-name { font-weight: 800; }
.record-stat { color: var(--accent); font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

.vs-matchups { display: flex; flex-wrap: wrap; gap: .6rem; }
.vs-matchup-chip {
  display: flex; align-items: center; gap: .5rem; padding: .5em .9em .5em .5em; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--line); font-size: .86rem; font-weight: 700;
}
.vs-matchup-chip:hover { border-color: var(--accent); }
.vs-matchup-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; }
.vs-matchup-chip .vs-matchup-x { color: var(--ink-faint); font-weight: 500; }

/* --- guide / ranking --- */
.guide-body { max-width: 74ch; margin-inline: auto; }
.guide-body p { margin-block: 1rem; color: var(--ink-dim); }
.guide-body h2 { margin-top: 2.4rem; margin-bottom: .8rem; }
.rank-item {
  display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-card); margin-bottom: .8rem;
}
.rank-num { font-family: var(--display); font-weight: 700; font-size: 1.8rem; color: var(--accent); width: 2.2ch; flex: none; text-align: center; }

/* --- quick-compare table (category pages) --- */
.table-scroll { overflow-x: auto; margin-top: 1.2rem; }
.quick-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.quick-compare-table th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-faint); padding: .5rem .8rem; border-bottom: 1px solid var(--line);
}
.quick-compare-table td { padding: .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.qc-rank { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--accent); text-align: center; }
.qc-product a { display: flex; align-items: center; gap: .7rem; font-weight: 700; max-width: 32ch; }
.qc-product img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--bg-elevated); flex: none; }

/* --- filters bar --- */
.filters-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.filters-bar select, .filters-bar button {
  padding: .55em 1em; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--line);
  color: var(--ink); font-size: .84rem; font-weight: 700;
}
.filters-bar button.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* --- footer --- */
.site-footer { border-top: 1px solid var(--line-soft); padding-block: 3rem 2rem; background: var(--bg-elevated); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: .8rem; }
.footer-col a { display: block; padding: .3rem 0; font-size: .88rem; color: var(--ink-dim); }
.footer-col a:hover { color: var(--accent); }
.footer-disclosure { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); font-size: .78rem; color: var(--ink-faint); max-width: 90ch; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; font-size: .78rem; color: var(--ink-faint); }

/* --- amazon note --- */
.amazon-note { font-size: .74rem; color: var(--ink-faint); margin-top: .4rem; }

/* --- legal pages --- */
.legal-body { max-width: 74ch; margin-inline: auto; }
.legal-body h2 { margin-top: 2rem; margin-bottom: .7rem; }
.legal-body p, .legal-body li { color: var(--ink-dim); margin-bottom: .6rem; }
.legal-body li { margin-left: 1.2rem; list-style: disc; }

/* =============================================================
   7. Effects (reveal-on-scroll, chip hover, tilt-free)
   ============================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.compare-promo-grid { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .compare-promo-grid { grid-template-columns: 1.3fr 1fr; }
  .hero-bg::after {
    background: linear-gradient(100deg, var(--bg-elevated) 0%, var(--bg-elevated) 32%, rgba(241,233,214,.55) 52%, transparent 78%);
  }
  .ficha-grid { grid-template-columns: .9fr 1.1fr; }
  .wiki-hero { grid-template-columns: 320px 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
@media (max-width: 719px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pc-columns { grid-template-columns: 1fr; }
  /* Below 720px the hero text stack (kicker+title+lede+buttons+stats)
     spans nearly the section's full height, so the old full-bleed
     background photo + top-to-bottom scrim (built for the 2-column
     desktop layout) had to hide almost the whole image to keep text
     readable — which buried the main character's face under the title. Show the
     photo as its own banner above the text instead: a contained,
     non-absolute image with a shorter aspect ratio needs far less
     cropping, so both characters (face included) stay in frame with
     no scrim needed at all. */
  .hero { padding-block: 0 clamp(3rem, 8vw, 5rem); }
  .hero-bg { position: static; inset: auto; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; z-index: auto; }
  /* Sin arte propio todavía (hero-bg vacío): no reservar el hueco de 4:3. */
  .hero-bg:empty { display: none; }
  .hero .hero-grid { padding-top: 2.4rem; }
  .hero-bg-img { position: static; width: 100%; height: 100%; object-position: 76% 18%; }
  .hero-bg::after { display: none; }
  .hero-grid { padding-top: 2rem; }
}
@media (min-width: 960px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 959px) and (min-width: 540px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 539px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  /* long CTA sentences (e.g. "Ver más productos de <anime> en Amazon")
     can exceed the container width at this size — .btn is nowrap by
     design (icon+label pairs elsewhere must stay on one line), so only
     let text wrap here as a safety net instead of clipping off-screen. */
  .btn { white-space: normal; text-align: center; }
}
/* Drop the gutter only once the viewport is wider than the container plus
   both gutters (1280 + 2 × 40px); at exactly 1280px it left the content
   flush against the window edges. */
@media (min-width: 1360px) {
  .container { padding-inline: 0; }
}

/* =============================================================
   9. Reduced motion — only intrusive effects gated
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before { display: none; }
}

/* Tablas de las guías: texto largo que sí debe partirse en varias líneas. */
.guide-table { min-width: 520px; }
.guide-table th, .guide-table td { white-space: normal; vertical-align: top; }
.guide-table th[scope="row"] { font-weight: 700; min-width: 9rem; }
@media (max-width: 539px) {
  .guide-table { min-width: 0; }
  .guide-table th[scope="row"] { min-width: 5.5rem; }
}