/* =============================================================
   seo.css — páginas de ciudad, categoría y producto
   Usa los tokens de styles.css
   ============================================================= */
.page-seo { background: #fff; }
.seo-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 90% at 90% 0%, rgba(247,156,20,.22), transparent 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(36,65,126,.55), transparent 65%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  padding-block: clamp(2rem, 5vw, 3.6rem) clamp(2.4rem, 5.5vw, 4rem);
}
.seo-hero--slim { padding-block: 1.2rem; background: var(--navy); }
.seo-hero .eyebrow { color: var(--orange); }
.seo-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 24ch; margin-bottom: 1rem; }
.seo-lead { max-width: 62ch; font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255,255,255,.8); }
.seo-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.seo-crumbs { display: flex; flex-wrap: wrap; gap: .55rem; font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: 1.2rem; }
.seo-crumbs a { color: rgba(255,255,255,.88); }
.seo-crumbs a:hover { color: var(--orange); }
.seo-hero--slim .seo-crumbs { margin: 0; }

.seo-section { padding-block: clamp(2.2rem, 5vw, 4rem); }
.seo-alt { background: var(--bg-soft); }
.seo-section h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.seo-sub { color: var(--ink-soft); margin: -.4rem 0 1.6rem; max-width: 70ch; }
.seo-narrow { max-width: 820px; }
.seo-narrow p { color: var(--ink-soft); margin-bottom: 1rem; }
.seo-two { display: grid; gap: 2rem; }
.seo-two p { color: var(--ink-soft); margin-bottom: .9rem; }
@media (min-width: 900px) { .seo-two { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.seo-steps { display: flex; flex-direction: column; gap: .9rem; counter-reset: s; }
.seo-steps li { counter-increment: s; position: relative; padding-left: 2.6rem; color: var(--ink-soft); }
.seo-steps li::before { content: counter(s); position: absolute; left: 0; top: -.05rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--orange); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-family: var(--disp); font-size: .9rem; }
.seo-steps a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.seo-more { margin-top: 1.4rem; font-weight: 600; }
.seo-more a { color: var(--navy); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.cat-card { display: flex; flex-direction: column; gap: .25rem; padding: 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.cat-card strong { font-family: var(--disp); color: var(--navy); }
.cat-card span { font-size: .85rem; color: var(--ink-mute); }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--orange); }

.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
.prod-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.prod-img { display: block; aspect-ratio: 1; background: #fff; }
.prod-img img { width: 100%; height: 100%; object-fit: contain; }
.prod-body { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1.1rem; border-top: 1px solid var(--line); }
.prod-brand { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); font-weight: 600; }
.prod-name { font-weight: 600; font-size: .93rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prod-price { font-family: var(--disp); font-weight: 700; color: var(--navy); margin-top: auto; padding-top: .3rem; }
.prod-price small { font-family: var(--sans); font-weight: 500; color: var(--ink-mute); font-size: .75rem; }

.prod-detail { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .prod-detail { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.prod-media { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.prod-media img { width: 100%; height: auto; display: block; }
.prod-info h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .6rem; }
.prod-meta { color: var(--ink-mute); font-size: .92rem; margin-bottom: 1.2rem; }
.prod-pricebox { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; background: var(--bg-soft); border-radius: var(--radius-md); margin-bottom: 1.2rem; }
.prod-price-lg { font-family: var(--disp); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--navy); }
.prod-price-lg small { font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--ink-mute); }
.prod-note { font-size: .82rem; color: var(--ink-mute); }
.prod-perks { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.6rem; }
.prod-perks li { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-size: .95rem; }
.prod-perks svg { width: 20px; height: 20px; color: var(--orange-dark); flex: none; }
.prod-specs { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prod-specs th, .prod-specs td { text-align: left; padding: .65rem .2rem; border-bottom: 1px solid var(--line); font-size: .93rem; }
.prod-specs th { color: var(--ink-mute); font-weight: 500; width: 42%; }
.prod-specs td { font-weight: 600; color: var(--ink); }

.seo-faq { display: flex; flex-direction: column; gap: .7rem; }
.seo-faq details { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; padding: 0 1.1rem; }
.seo-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--navy); }
.seo-faq details p { padding-bottom: 1rem; color: var(--ink-soft); margin: 0; }

.seo-linkband { background: var(--bg-soft); padding-block: 2.2rem; border-top: 1px solid var(--line); }
.seo-links { display: grid; gap: 1.6rem; }
@media (min-width: 800px) { .seo-links { grid-template-columns: 1.3fr 1fr 1fr; } }
.seo-links h2 { font-family: var(--mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .7rem; font-weight: 600; }
.seo-links div { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.seo-links h2 { flex-basis: 100%; }
.seo-links a { padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .86rem; color: var(--navy); font-weight: 500; transition: border-color .2s, color .2s; }
.seo-links a:hover { border-color: var(--orange); color: var(--orange-dark); }

.seo-links--zonas { grid-template-columns: 1fr !important; }

.seo-steps{list-style:none;padding-left:0;margin-left:0}
.seo-section .prod-perks{margin-bottom:1rem}