/* TrucosMovil: shared components and page layouts. */
.nav-dropdown { display: none !important; }
:root {
  --bg: #000000;
  --bg-elev: #0d0d0d;
  --bg-card: #0d0d0d;
  --bg-soft: #141414;
  --bg-well: #1a1a1a;
  --ink: #f2f2f2;
  --muted: #8a8a8a;
  --muted-2: #a3a3a3;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --accent-soft: rgba(29, 155, 240, 0.14);
  --accent-ring: rgba(29, 155, 240, 0.32);
  --brand: #1d9bf0;
  --brand-2: #1d9bf0;
  --brand-soft: rgba(29, 155, 240, 0.14);
  --ok: #3dd68c;
  --ok-soft: rgba(61, 214, 140, 0.12);
  --warn: #f5c518;
  --warn-soft: rgba(245, 197, 24, 0.12);
  --danger: #ff5a5f;
  --danger-soft: rgba(255, 90, 95, 0.12);
  --info-bg: #0d0d0d;
  --info-ink: #a3a3a3;
  --info-line: rgba(255, 255, 255, 0.1);
  --info-bar: #1d9bf0;
  --neon: var(--accent);
  --neon-2: var(--ok);
  --neon-dim: var(--accent-soft);
  --neon-ring: var(--accent-ring);
  --shadow: none;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1440px;
  --max-wide: var(--max);
  --control-h: 48px;
  --ease: 140ms ease;
  --fs-body: 1.125rem;      /* 18px — más legible */
  --fs-h2: 1.5rem;
  --fs-lead: 1.3125rem;    /* 21px */
  --fs-h1: 2.75rem;
  --fs-small: 1rem;
  --fs-label: 0.875rem;
  --lh: 1.65;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #eef0f4;
  --bg-well: #e6e9ef;
  --ink: #0f1419;
  --muted: #536471;
  --muted-2: #3d4a56;
  --line: rgba(15, 20, 25, 0.1);
  --line-strong: rgba(15, 20, 25, 0.18);
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --accent-soft: rgba(29, 155, 240, 0.12);
  --accent-ring: rgba(29, 155, 240, 0.28);
  --brand: #1d9bf0;
  --brand-2: #1d9bf0;
  --brand-soft: rgba(29, 155, 240, 0.12);
  --ok: #137a55;
  --ok-soft: rgba(19, 122, 85, 0.1);
  --warn: #a94f31;
  --warn-soft: rgba(169, 79, 49, 0.09);
  --danger: #b53638;
  --danger-soft: rgba(181, 54, 56, 0.08);
  --info-bg: #ffffff;
  --info-ink: #3d4a56;
  --info-line: rgba(15, 20, 25, 0.1);
  --info-bar: #1d9bf0;
  --neon: var(--accent);
  --neon-2: var(--ok);
  --neon-dim: var(--accent-soft);
  --neon-ring: var(--accent-ring);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* cqw measures the usable page width, excluding a classic Windows scrollbar. */
html {
  font-size: 16px;
  scroll-behavior: auto;
  container-type: inline-size;
  background-color: var(--bg);
  color-scheme: dark light;
}
html[data-theme="light"] {
  background-color: #f5f6f8;
  color-scheme: light;
}
html[data-theme="dark"] {
  background-color: #000000;
  color-scheme: dark;
}
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg);
  line-height: var(--lh);
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Kill blue flash on menu navigation (UA tap + accent focus) */
/* Header icon buttons: no round focus flash on click */
.icon-btn:focus,
.icon-btn:active,
.header-actions .icon-btn:focus,
.header-actions .icon-btn:active {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.icon-btn:focus:not(:focus-visible) {
  background: transparent;
}
.icon-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: transparent;
}
.icon-btn:active {
  background: var(--bg-soft);
  transform: none;
}

html { -webkit-tap-highlight-color: transparent; }
a:focus:not(:focus-visible) { outline: none; }
.nav-desktop a:focus,
.nav-desktop a:active,
.nav-drawer a:focus,
.nav-drawer a:active,
.brand:focus,
.brand:active {
  color: var(--ink);
  outline: none;
  background: transparent;
  text-decoration: none;
}
.nav-desktop a:focus-visible,
.nav-drawer a:focus-visible,
.brand:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { width: min(var(--max), calc(100% - 2.5rem)); margin: 0 auto; }
.wrap-hub { width: min(var(--max-wide), calc(100% - 2.5rem)); }
.site-header .wrap, .site-footer .wrap { width: min(var(--max), calc(100% - 2.5rem)); }

/* One content width for every page (home + interiors) */
.wrap,
.site-header .wrap,
.site-footer .wrap {
  width: min(var(--max), calc(100% - 2.5rem));
  max-width: var(--max);
}
@media (min-width: 768px) {
  .wrap,
  .site-header .wrap,
  .site-footer .wrap {
    width: min(var(--max), calc(100% - 5rem));
  }
}
code, .mono, .code {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
kbd {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.2em 0.55em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--ink);
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 3.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--ink);
  line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 1.85rem; height: 1.85rem; display: block; flex: 0 0 auto;
  border-radius: 0.45rem;
}
.brand-text {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.04em;
  color: var(--ink);
}
.brand-text > span { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: .3rem; }
.icon-btn {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.icon-btn:hover {
  color: var(--ink);
  background: var(--bg-soft);
  border-color: var(--line);
}
.nav-desktop { display: flex; gap: .2rem; align-items: center; }
.nav-desktop a {
  text-decoration: none; color: var(--muted); font-size: .9375rem; font-weight: 500;
  padding: .45rem .7rem; border-radius: var(--radius-pill);
  transition: color var(--ease);
  min-height: 40px; display: inline-flex; align-items: center;
}
.nav-desktop a:hover { color: var(--ink); text-decoration: none; }
.nav-desktop a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
}
.nav-toggle { display: none; }
.nav-drawer {
  display: none; border-top: 1px solid var(--line); padding: .5rem 0 1rem;
}
.nav-drawer.open { display: block; }
.nav-drawer a {
  display: flex; align-items: center; text-decoration: none; color: var(--ink); font-weight: 500;
  padding: 1rem .2rem; border-bottom: 1px solid var(--line); font-size: 1.0625rem;
  min-height: 48px;
}
.nav-drawer a:hover { text-decoration: none; color: var(--accent); }
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Hero — full-bleed + split telemetry (taller digital) */
.hero-bleed {
  width: 100%;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 42%),
    var(--bg);
  padding: 1.75rem 0 2.75rem;
}
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .hero-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
    gap: 3rem;
    align-items: center;
  }
}
.hero-copy { max-width: 40rem; }
.mission-label {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.mission-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex: 0 0 auto;
}
.hero-copy h1 {
  margin: 0 0 1.35rem;
  font-size: var(--fs-h1);
  letter-spacing: -.05em; line-height: 1.04; font-weight: 700;
}
.hero-copy h1 .accent { color: var(--accent); }
.hero-lead {
  margin: 0; color: var(--muted-2); max-width: 48ch;
  font-size: 1.25rem; line-height: 1.5; font-weight: 400;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.25rem;
}

/* Telemetry panel — asymmetric character */
.hero-telemetry {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.hero-telemetry::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.telemetry-head {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: 1.15rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--line);
}
.telemetry-mark {
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  display: block;
}
.telemetry-mark svg { width: 100%; height: 100%; display: block; }
.telemetry-title {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.2;
}
.telemetry-title span { color: var(--accent); }
.telemetry-sub {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: .2rem;
}
.telemetry-grid {
  margin: 0; display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1.1rem;
}
.telemetry-row { margin: 0; }
.telemetry-row dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .25rem;
}
.telemetry-row dd {
  margin: 0; font-family: var(--mono); font-weight: 600;
  font-size: 1.05rem; letter-spacing: .02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.telemetry-foot {
  margin: 1.15rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--muted); line-height: 1.45;
}

/* Legacy .hero (tool pages keep older class) */
.hero { padding: 5.5rem 0 2.75rem; }
.hero-body { max-width: 52rem; }
.hero h1 {
  margin: 0 0 1.35rem;
  font-size: var(--fs-h1);
  letter-spacing: -.05em; line-height: 1.05; font-weight: 700;
}
.hero h1 .accent { color: var(--accent); }

/* Hub — wide product bay */
.hub-main { padding-top: 2.25rem; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin: 0 0 1.35rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.section-head-left { display: flex; flex-direction: column; gap: .35rem; }
.section-head h2 {
  margin: 0; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em;
}
.section-head .hint {
  font-size: var(--fs-label); color: var(--muted); font-weight: 500;
  font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-bottom: 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.panel .hub-grid,
.hub-grid-compact {
  padding-bottom: 0;
}
@media (min-width: 700px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
.tool-card {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  grid-template-rows: auto auto;
  column-gap: .85rem;
  row-gap: .4rem;
  align-items: start;
  text-decoration: none; color: inherit;
  padding: 1.5rem 1.4rem 1.5rem 1.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: background var(--ease), border-color var(--ease);
  min-height: 7.5rem;
  position: relative;
  overflow: hidden;
}
.tool-card .tool-rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: transparent;
  transition: background var(--ease);
}
.tool-card:hover .tool-rail { background: var(--accent); }
.tool-card:last-child { border-bottom: 1px solid var(--line); }
.tool-card:hover {
  background: var(--bg-soft);
  border-color: var(--line-strong);
  transform: none;
  text-decoration: none;
}
.tool-card .tool-num {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  margin-top: .15rem;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tool-card:hover .tool-num { color: var(--accent); }
.tool-card .tool-id {
  display: inline-block;
  font-size: var(--fs-label); color: var(--accent); font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--mono);
  margin-bottom: .25rem;
}
.tool-card h3 {
  grid-column: 2;
  margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.025em;
  color: var(--ink); line-height: 1.25;
}
.tool-card p {
  grid-column: 2;
  margin: 0; color: var(--muted-2); font-size: 1.02rem; line-height: 1.5;
}
.tool-card .tool-go {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  font-size: 1.35rem; color: var(--muted); font-weight: 500;
  white-space: nowrap;
}
.tool-card:hover .tool-go,
.tool-card:hover h3 { color: var(--accent); }
@media (max-width: 560px) {
  .tool-card {
    grid-template-columns: 2.25rem 1fr auto;
    padding: 1.25rem 1.1rem;
    min-height: 0;
  }
  .tool-card .tool-num {
    grid-column: 1; grid-row: 1 / -1; align-self: start; margin-top: .15rem;
  }
  .tool-card h3 { grid-column: 2; font-size: 1.1rem; }
  .tool-card p { grid-column: 2; font-size: .95rem; }
  .tool-card .tool-go { grid-column: 3; grid-row: 1 / -1; }
}

/* Panels — solid fitted bays */
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.6rem;
  margin: 0 0 1.15rem;
}
.panel-neon {
  border-color: var(--line);
  box-shadow: none;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1.2rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.panel-head h2 {
  margin: 0; font-size: 1.2rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
.panel-tag {
  font-size: var(--fs-label); color: var(--muted); font-weight: 600;
  font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase;
}

/* Notices */
.notice {
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--info-bg); color: var(--info-ink);
  border: 1px solid var(--info-line); border-radius: var(--radius);
  border-left: 3px solid var(--info-bar);
  padding: 1.1rem 1.2rem; margin: 0 0 1.15rem; font-size: 1rem;
  line-height: 1.55;
}
.notice strong { color: var(--ink); }
.notice-warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.notice-ok {
  border-left-color: var(--ok);
  background: var(--ok-soft);
}
.notice-icon {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .1rem;
}

/* Tool page */
.tool-hero { padding: 3.25rem 0 1.5rem; }
.tool-hero .breadcrumb {
  font-size: var(--fs-small); color: var(--muted);
  margin-bottom: .9rem;
}
.tool-hero .breadcrumb a { color: var(--muted); text-decoration: none; }
.tool-hero .breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.tool-hero h1 {
  margin: 0 0 .7rem;
  font-size: 2.5rem;
  letter-spacing: -.035em; line-height: 1.15; font-weight: 700;
}
.tool-hero .lead {
  margin: 0; color: var(--muted-2); max-width: 48ch;
  font-size: var(--fs-lead); line-height: 1.55;
}
.conclusion {
  margin: 0 0 1.35rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  font-size: 1.05rem;
  color: var(--muted-2);
  line-height: 1.55;
}
.conclusion strong { color: var(--ink); font-weight: 700; }

/* Forms */
label.field {
  display: block; margin: 0 0 .5rem;
  font-size: var(--fs-label); font-weight: 600; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--mono);
}
.field-hint { margin: .55rem 0 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.imei-limit-note { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.field-error {
  margin: .55rem 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--danger);
  display: none;
}
.field-error.is-visible { display: block; }
input[type="text"], input[type="tel"], textarea, select {
  width: 100%; height: var(--control-h); min-height: var(--control-h);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 1.0625rem;
  padding: 0 1.1rem;
  transition: border-color var(--ease), box-shadow var(--ease);
  letter-spacing: .04em;
}
textarea {
  height: auto; min-height: 5.5rem; resize: vertical; padding: .95rem 1.1rem;
  font-family: var(--font); letter-spacing: 0; font-size: var(--fs-body);
  border-radius: var(--radius);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
input[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.btn {
  appearance: none; border: 0; border-radius: var(--radius-pill); padding: .8rem 1.35rem;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px;
  transition: background var(--ease), border-color var(--ease), color var(--ease), opacity var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent); color: #ffffff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
  font-weight: 600;
}
.btn-secondary:hover {
  border-color: var(--muted); background: var(--bg-soft);
}
.btn-ghost {
  background: transparent; color: var(--muted-2); border: 1px solid transparent;
  font-size: .95rem; font-weight: 600;
}
.btn-ghost:hover {
  color: var(--ink); background: var(--bg-soft); border-color: var(--line);
}
.btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Result telemetry */
.result-box {
  margin-top: 1.3rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--mono); font-size: 1rem;
  min-height: 3.5rem;
  letter-spacing: .02em;
}
.result-box[data-status="ok"] {
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line));
  color: var(--ok);
  background: var(--ok-soft);
}
.result-box[data-status="bad"] {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
  color: var(--danger);
  background: var(--danger-soft);
}
.result-box[data-status="warn"] {
  border-color: color-mix(in srgb, var(--warn) 50%, var(--line));
  color: var(--warn);
  background: var(--warn-soft);
}
.result-label {
  display: block; font-size: .75rem; color: var(--muted);
  font-family: var(--mono); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem;
}
.result-value { font-size: 1.1rem; word-break: break-all; line-height: 1.45; font-weight: 500; }

/* IMEI breakdown */
.imei-breakdown {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: .75rem;
}
.imei-parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .6rem;
  font-family: var(--font-sans);
}
.imei-part-card {
  padding: .65rem .75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.imei-part-label {
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--mono);
  margin-bottom: .25rem;
}
.imei-part-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--mono);
}
.imei-part-desc {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .2rem;
  line-height: 1.35;
}
.imei-quick-copy {
  margin-top: .75rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Ficha de terminal detectado por TAC */
.imei-device-card {
  margin-top: .85rem;
  padding: .95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.imei-device-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.imei-device-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(29, 155, 240, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.imei-device-meta {
  flex: 1;
  min-width: 140px;
}
.imei-device-brand {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.imei-device-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.imei-device-year {
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--mono);
  padding: .2rem .55rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted-2);
  align-self: flex-start;
}
.imei-device-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .78rem;
}
.device-spec-pill {
  padding: .25rem .55rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-weight: 500;
}
.imei-blacklist-guide {
  margin-top: .85rem;
  padding: .85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
}
.blacklist-guide-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
}
.blacklist-guide-title svg {
  color: var(--accent);
  flex-shrink: 0;
}
.blacklist-guide-p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: .6rem;
}
.blacklist-operator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.op-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: all 120ms ease;
}
.op-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.op-chip-highlight {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(29, 155, 240, 0.06);
}

/* Pruebas rápidas y detección en tiempo real de IMEI */
.imei-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .65rem;
}
.imei-samples-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.chip-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 120ms ease;
  line-height: 1.3;
}
.chip-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(29, 155, 240, 0.08);
}
.chip-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.imei-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  padding: .35rem .75rem;
  background: rgba(29, 155, 240, 0.08);
  border: 1px solid rgba(29, 155, 240, 0.25);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--ink);
  max-width: 100%;
  flex-wrap: wrap;
}
.imei-live-badge .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2);
  animation: pulseDot 2s infinite ease-in-out;
  flex-shrink: 0;
}
.imei-live-badge .live-brand {
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
}
.imei-live-badge .live-model {
  color: var(--ink);
}
.imei-live-badge .live-tac {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  background: var(--surface);
  padding: .1rem .35rem;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.device-catalog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .55rem;
  padding: .5rem .85rem;
  background: rgba(29, 155, 240, 0.08);
  border: 1px solid rgba(29, 155, 240, 0.25);
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: all 120ms ease;
}
.device-catalog-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.device-catalog-btn svg {
  flex-shrink: 0;
  transition: transform 120ms ease;
}
.device-catalog-btn:hover svg {
  transform: translateX(3px);
}


/* Ficha de operador detectado por prefijo CNMC */
.operator-detected-card {
  margin-top: .85rem;
  padding: .95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--carrier-color, var(--accent));
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.operator-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.operator-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.operator-card-tag {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .55rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted-2);
}
.operator-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .55rem;
}
.operator-spec-item {
  padding: .55rem .7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.operator-spec-lbl {
  font-size: .68rem;
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .2rem;
}
.operator-spec-val {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.operator-portability-box {
  padding: .75rem .85rem;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 6px;
  font-size: .82rem;
  color: var(--ink);
  line-height: 1.45;
}
.operator-portability-box strong {
  color: #b45309;
}
[data-theme="dark"] .operator-portability-box strong {
  color: #facc15;
}
.operator-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .25rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--line);
}

/* Prose */
.prose-hero {
  padding-top: 2.75rem;
  padding-bottom: 0;
  margin: 0;
}
.prose-hero .breadcrumb { margin-bottom: .85rem; }
.prose {
 padding: 2.75rem 0 3.75rem; max-width: 60ch; }
.prose h1 { margin: 0 0 1.1rem; font-size: 2.25rem; letter-spacing: 0; font-weight: 700; line-height: 1.15; }
.prose h2 {
  margin: 2.15rem 0 .7rem; font-size: 1.25rem;
  color: var(--ink); letter-spacing: -.02em; font-weight: 700;
}
.prose p, .prose li { color: var(--muted-2); font-size: 1.0625rem; line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin: .45rem 0; }
.prose strong { color: var(--ink); font-weight: 700; }

.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.steps li {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) !important; gap: 0.85rem !important;
  padding: 1.15rem 0 !important;
  border-bottom: 1px solid var(--line);
  background: transparent; font-size: 1.05rem; color: var(--muted-2);
  line-height: 1.55;
}
.steps li:last-child { border-bottom: 0; }
.steps li > span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.steps .n {
  font-size: .875rem; color: var(--accent);
  font-weight: 700; padding-top: .15rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono); letter-spacing: .04em;
}

/* Prefix table */
.prefix-table {
  width: 100%; border-collapse: collapse; font-size: 1rem;
  margin: .5rem 0 0;
}
.prefix-table th, .prefix-table td {
  text-align: left; padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.5;
}
.prefix-table th {
  font-size: var(--fs-label); color: var(--muted);
  font-weight: 600; font-family: var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
}
.prefix-table td:first-child, .prefix-table .mono-cell {
  font-family: var(--mono); color: var(--ink); font-weight: 500;
}

/* Screen test */
.screen-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem;
}
.screen-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#pixelCanvas, #touchGrid { display: block; width: 100%; }
#pixelCanvas { height: min(62vh, 480px); cursor: crosshair; }
#touchGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px; padding: 2px;
  min-height: min(62vh, 480px);
  background: #111;
}
.touch-cell {
  background: #1a1a1a; border: 1px solid #333;
  min-height: 48px; cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
}
.touch-cell.hit {
  background: var(--ok); border-color: var(--ok);
}
.screen-status {
  margin-top: .85rem;
  font-size: var(--fs-small); color: var(--muted);
  font-family: var(--mono);
}
.fullscreen-active .site-header,
.fullscreen-active .site-footer,
.fullscreen-active .tool-hero,
.fullscreen-active .notice,
.fullscreen-active .panel-head ~ *:not(.screen-wrap),
.fullscreen-active .breadcrumb { display: none !important; }
.fullscreen-active .screen-wrap { margin: 0; border-radius: 0; }
.fullscreen-active main.wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
.fullscreen-active .panel { border: 0; border-radius: 0; padding: 0; margin: 0; background: #000; }

.screen-stage:fullscreen,
.screen-stage:-webkit-full-screen,
.screen-stage.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
}
.screen-stage:fullscreen #pixelCanvas,
.screen-stage:-webkit-full-screen #pixelCanvas,
.screen-stage.is-fullscreen #pixelCanvas {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
}
.screen-stage:fullscreen #touchGrid,
.screen-stage:-webkit-full-screen #touchGrid,
.screen-stage.is-fullscreen #touchGrid {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  padding: 0 !important;
}
.screen-stage:fullscreen #multiCanvas,
.screen-stage:-webkit-full-screen #multiCanvas,
.screen-stage.is-fullscreen #multiCanvas {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* Checklist */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.check-item {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: background var(--ease);
}
.check-item:hover { background: rgba(255, 255, 255, 0.02); }
.check-item:has(input:checked) .check-title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}
.check-item input {
  margin-top: .25rem; width: 1.25rem; height: 1.25rem;
  accent-color: var(--accent); flex: 0 0 auto;
}
.check-item .check-body { flex: 1; min-width: 0; }
.check-item .check-title { font-weight: 600; font-size: 1.05rem; color: var(--ink); line-height: 1.35; }
.check-item .check-desc { font-size: 0.975rem; color: var(--muted); margin-top: .3rem; line-height: 1.5; }
.check-progress-wrapper {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.check-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.check-progress {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 700;
  font-family: var(--mono);
}
.check-progress-tag {
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(29, 155, 240, 0.12);
  color: var(--accent);
}
.check-progress-track {
  width: 100%;
  height: 8px;
  background: var(--surface-subtle);
  border-radius: 999px;
  overflow: hidden;
}
.check-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d9bf0, #10b981);
  transition: width .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.check-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-label);
  color: var(--muted);
  font-weight: 600;
  margin: 1.6rem 0 .4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.check-group-badge {
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--surface-subtle);
  color: var(--muted);
}
.check-group-badge.is-complete {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* Footer */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* —— Footer producto (columnas + redes) —— */
.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 2.75rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 2rem 1.75rem;
  align-items: start;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
.footer-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--ink); margin-bottom: .85rem;
}
.footer-brand:hover { text-decoration: none; }
.footer-brand .brand-mark { width: 1.6rem; height: 1.6rem; border-radius: .35rem; }
.footer-brand .brand-text { font-weight: 700; font-size: 1.05rem; letter-spacing: -.03em; color: var(--ink); }
.footer-brand .brand-text > span { color: var(--accent); }
.footer-tagline {
  margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; max-width: 28ch;
}
.footer-heading {
  margin: 0 0 .75rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-family: var(--mono);
}
.footer-nav { display: flex; flex-direction: column; gap: .35rem; }
.footer-nav a {
  color: var(--ink); text-decoration: none; font-size: .95rem;
  min-height: 40px; display: inline-flex; align-items: center;
}
.footer-nav a:hover { color: var(--accent); text-decoration: none; }
.footer-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 .85rem; border: 1px solid var(--line);
  border-radius: 4px; color: var(--ink); text-decoration: none; font-size: .875rem; font-weight: 600;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.footer-note { margin: .85rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; max-width: 28ch; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem;
  margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .85rem;
}
.footer-bottom p { margin: 0; }
.footer-meta { font-variant-numeric: tabular-nums; }

/* —— IMEI silo: deep-links + operator nav —— */
.deeplink-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 0.85rem !important;
  margin: 1.15rem 0 0.5rem !important;
  padding: 0 !important;
  list-style: none !important;
}
.deeplink-grid > li {
  display: flex !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.deeplink-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 1.15rem 1.25rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--bg-elev) !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  transition: border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease) !important;
}
html[data-theme="light"] .deeplink-card {
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.04) !important;
}
.deeplink-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  background: var(--bg-soft) !important;
  text-decoration: none !important;
}
html[data-theme="light"] .deeplink-card:hover {
  box-shadow: 0 8px 20px rgba(15, 20, 25, 0.08) !important;
}
.deeplink-card .dl-op {
  display: block !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
  margin-top: 0.15rem !important;
  word-break: break-word !important;
}
.deeplink-card .dl-meta {
  display: block !important;
  font-size: 0.86rem !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin-top: 0.25rem !important;
  margin-bottom: auto !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
.deeplink-card .dl-go {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-top: 0.75rem !important;
  font-weight: 600 !important;
}
.official-btns .deeplink-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}
.official-btns .deeplink-card {
  width: auto !important;
  min-width: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.7rem 1.15rem !important;
}
.op-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .85rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.op-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  background: transparent;
}
.op-nav a:hover {
  color: var(--accent);
  text-decoration: none;
}
.op-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}
.hub-silo-links a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* —— Home: SaaS entry card —— */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.home-wrap {
  max-width: none;
  width: auto;
  padding-bottom: 5rem;
}
.home-hero,
.home-entry {
  padding: 2.75rem 0 2.25rem;
}
.home-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 860px) {
  .home-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    gap: 2.5rem 3rem;
  }
}
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-eyebrow-dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex: 0 0 auto;
}
.home-copy h1 {
  margin: 0 0 1rem;
  font-size: 3.65rem;
  letter-spacing: 0;
  line-height: 1.05;
  font-weight: 700;
}
.home-copy h1 .accent { color: var(--accent); }
.home-hero h1 {
  margin: 0 0 1rem;
  font-size: 3.65rem;
  letter-spacing: 0;
  line-height: 1.05;
  font-weight: 700;
}
.home-hero .lead,
.home-copy .lead {
  margin: 0;
  color: var(--muted-2);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 36rem;
}
.home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.75rem;
}
/* Vector phone + IMEI mark */
.home-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.imei-mark {
  width: min(100%, 280px);
  aspect-ratio: 280 / 320;
  position: relative;
}
.imei-mark-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(29, 155, 240, 0.08));
}
@media (max-width: 859px) {
  .home-visual { display: none; }
  .home-copy h1, .home-hero h1 { font-size: 2.5rem; }
}

/* Elevated IMEI product surface */
#imei-tool { scroll-margin-top: 5rem; }
.panel-tool {
  margin-bottom: 2.75rem;
  padding: 1.85rem 1.55rem 1.95rem;
}
.panel-elevated {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--bg-elev)) 0%, var(--bg-elev) 42%),
    var(--bg-elev);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
    0 24px 48px -28px rgba(29, 155, 240, 0.22);
}
.panel-elevated .panel-head {
  border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}
.panel-elevated .result-box {
  margin-top: 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 1rem 1.1rem;
}
html[data-theme="light"] .panel-elevated {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    0 20px 40px -24px rgba(29, 155, 240, 0.18);
}

/* Feature strip — 3 quiet steps */
.feature-strip {
  margin: 0 0 3rem;
  padding: 0;
}
.feature-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .feature-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .feature-row li + li {
    border-left: 1px solid var(--line);
  }
}
.feature-row li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.35rem 1.1rem 1.35rem 0;
}
@media (min-width: 720px) {
  .feature-row li { padding: 1.5rem 1.25rem; }
  .feature-row li:first-child { padding-left: 0; }
  .feature-row li:last-child { padding-right: 0; }
}
.feature-n {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent);
  flex: 0 0 auto;
  padding-top: .15rem;
}
.feature-row strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .3rem;
}
.feature-row p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 28ch;
}

.home-section {
  margin: 0 0 2.75rem;
  padding: 0;
  border: 0;
}
.home-section h2 {
  margin: 0 0 1.15rem;
  font-size: 1.375rem;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--ink);
}
.section-lead {
  margin: -.35rem 0 1.15rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 48ch;
}
.section-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 58ch;
}
.op-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.op-row a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.op-row a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* Premium mini-cards */
.home-tools {
  margin: 3.25rem 0 0;
}
.home-tools-title {
  margin: 0 0 1.15rem;
  font-size: 1.375rem;
  letter-spacing: -.025em;
  font-weight: 700;
}
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  padding-bottom: 0;
  border: 0;
  background: transparent;
}
@media (min-width: 700px) {
  .hub-grid,
  .hub-grid-compact { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .hub-grid .tool-card-wide,
  .hub-grid .tool-card:last-child { grid-column: auto; }
}
.hub-grid-premium {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .hub-grid-premium { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
.hub-grid-compact .tool-card {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  grid-template-rows: auto auto;
  column-gap: .75rem;
  row-gap: .35rem;
  padding: 1.4rem 1.3rem;
  min-height: 0;
  overflow: visible;
  border-radius: var(--radius-lg);
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.hub-grid-premium .tool-card {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  gap: .65rem;
  padding: 1.6rem 1.45rem 1.5rem;
  min-height: 11.5rem;
  align-content: start;
}
.hub-grid-premium .tool-card .tool-num {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .15rem;
}
.hub-grid-premium .tool-card h3 {
  grid-column: 1;
  font-size: 1.1rem;
  margin: 0;
}
.hub-grid-premium .tool-card p {
  grid-column: 1;
  font-size: 0.9375rem;
  color: var(--muted-2);
  margin: 0;
  line-height: 1.45;
}
.hub-grid-premium .tool-card .tool-go {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  margin-top: .35rem;
  font-size: 1.15rem;
  color: var(--muted);
}
.hub-grid-premium .tool-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  transform: translateY(-1px);
}
.hub-grid-compact .tool-card .tool-rail,
.hub-grid-compact .tool-card .tool-id { display: none; }
.hub-grid-compact .tool-card .tool-num {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  font-size: .9rem;
  color: var(--muted);
}
.hub-grid-compact .tool-card h3 {
  grid-column: 2;
  font-size: 1.1rem;
}
.hub-grid-compact .tool-card p {
  grid-column: 2;
  font-size: .975rem;
  color: var(--muted);
}
.hub-grid-compact .tool-card .tool-go {
  grid-column: 3;
  grid-row: 1 / -1;
  font-size: 1.15rem;
}
@media (min-width: 700px) {
  .hub-grid-compact .tool-card { grid-column: auto; }
}

/* SEO / FAQ — editorial, not wall of H2s */
.seo-block {
  margin: 3rem 0 0;
  padding: 2.25rem 0 0;
  border-top: 1px solid var(--line);
}
.seo-editorial {
  margin-top: 2.5rem;
}
.seo-block h2 {
  margin: 0 0 1.1rem;
  font-size: 1.5rem;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--ink);
}
.seo-block h3,
.seo-sub {
  margin: 1.75rem 0 .75rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
}
.seo-block p, .seo-block li {
  color: var(--muted-2);
  font-size: 1.05rem;
  line-height: 1.7;
}
.seo-block p { margin: 0 0 1.05rem; max-width: 62ch; }
.seo-block ul, .seo-block ol { margin: 0 0 1.1rem; padding-left: 1.2rem; max-width: 62ch; }
.seo-block li { margin: .45rem 0; }
.seo-block strong { color: var(--ink); font-weight: 600; }
.seo-official {
  font-size: .98rem !important;
  line-height: 1.7 !important;
}
.seo-official a {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.seo-official a:hover { border-bottom-color: var(--accent); }
.seo-trust {
  font-size: .95rem !important;
  color: var(--muted) !important;
  max-width: 58ch;
}
.seo-faq { margin-top: 2.75rem; padding-top: 2rem; }

.faq-list { margin: 0; padding: 0; list-style: none; max-width: 42rem; }
.faq-list details {
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  padding: 1rem 0;
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: color var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.1rem;
}
.faq-list details[open] summary::after { content: "−"; color: var(--accent); }
.faq-list summary:hover { color: var(--accent); }
.faq-list .faq-a {
  padding: 0 0 1.15rem;
  color: var(--muted-2);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 58ch;
}

/* Legacy op-matrix → quiet list if still used */
.op-matrix {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.op-matrix a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  min-height: 48px;
}
.op-matrix a:hover { color: var(--accent); text-decoration: none; }
.op-matrix .op-name { font-weight: 600; }
.op-matrix .op-meta { font-size: .9rem; color: var(--muted); }

/* Tool pages: aligned to entry language */
.tool-hero { padding: 2.75rem 0 1.75rem; }
.tool-hero .lead { max-width: 42rem; }
.tool-hero h1 {
  letter-spacing: -.04em;
}
.panel.panel-tool {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}
.conclusion {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 52ch;
}
.conclusion strong { color: var(--ink); font-weight: 600; }

/* Steps: more air */
.steps li {
  padding: 1.25rem 0;
  font-size: 1.0625rem;
}
.home-section .steps {
  border-top: 1px solid var(--line);
}
.home-section .steps li:first-child { padding-top: 1.35rem; }

/* Footer quieter */
.site-footer {
  margin-top: 4.5rem;
  padding: 2.75rem 0 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

/* UI chrome mocks & tool guides (encontrar-mi-movil, etc.) */
.ui-chrome {
  margin: 1.25rem 0 1.75rem;
  max-width: 32rem;
}
.ui-chrome-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  background: var(--bg-card);
}
html[data-theme="light"] .ui-chrome-svg {
  box-shadow: 0 10px 24px rgba(15, 20, 25, 0.07);
  background: var(--bg-elev);
}

/* Theme-adaptive wireframe fills */
.ui-chrome-bg { fill: var(--bg-card); }
.ui-chrome-bar { fill: var(--bg-soft); }
.ui-chrome-card { fill: var(--bg); }
.ui-chrome-subtle { fill: var(--bg-soft); }
.ui-chrome-text { fill: var(--ink); }
.ui-chrome-muted { fill: var(--muted); }
.ui-chrome-btn-outline { fill: var(--bg-elev); }

html[data-theme="light"] .ui-chrome-bg {
  fill: var(--bg-elev);
  stroke: color-mix(in srgb, var(--accent) 35%, var(--line));
}
html[data-theme="light"] .ui-chrome-card {
  fill: var(--bg-soft);
  stroke: var(--line);
}
html[data-theme="light"] .ui-chrome-subtle {
  fill: var(--bg);
  stroke: color-mix(in srgb, var(--accent) 25%, var(--line));
}
html[data-theme="light"] .ui-chrome-btn-outline {
  fill: #ffffff;
  stroke: var(--line-strong);
}

/* Ecosystem & Deeplink Badges */
.dl-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  line-height: 1;
  margin-bottom: 0.4rem;
  border: 1px solid transparent;
}
.dl-badge-apple {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="light"] .dl-badge-apple {
  background: rgba(15, 20, 25, 0.06);
  color: var(--ink);
  border-color: rgba(15, 20, 25, 0.12);
}
.dl-badge-google {
  background: rgba(29, 155, 240, 0.14);
  color: var(--accent);
  border-color: rgba(29, 155, 240, 0.3);
}
.dl-badge-samsung {
  background: rgba(61, 214, 140, 0.14);
  color: var(--ok);
  border-color: rgba(61, 214, 140, 0.3);
}

/* Directorio pro cards + fichas (v0.2.9) — guía telefónica accesible */
.hub-grid-premium .tool-card.dir-card,
.hub-grid-compact .tool-card.dir-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 1.85rem 1.65rem 1.6rem;
  min-height: 15rem;
  grid-template-columns: unset;
  grid-template-rows: unset;
  text-decoration: none;
  color: inherit;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .hub-grid-premium .tool-card.dir-card,
html[data-theme="light"] .hub-grid-compact .tool-card.dir-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.hub-grid-premium .tool-card.dir-card:hover,
.hub-grid-compact .tool-card.dir-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-2px);
}
.hub-grid-premium .tool-card.dir-card .tool-num,
.hub-grid-compact .tool-card.dir-card .tool-num {
  grid-column: unset;
  grid-row: unset;
  align-self: start;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0;
  font-weight: 700;
}
.hub-grid-premium .tool-card.dir-card h3,
.hub-grid-compact .tool-card.dir-card h3 {
  grid-column: unset;
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 750;
}
.hub-grid-premium .tool-card.dir-card h3 a,
.hub-grid-compact .tool-card.dir-card h3 a {
  color: inherit;
  text-decoration: none;
}
.hub-grid-premium .tool-card.dir-card h3 a:hover,
.hub-grid-compact .tool-card.dir-card h3 a:hover {
  color: var(--accent);
}
.hub-grid-premium .tool-card.dir-card p,
.hub-grid-compact .tool-card.dir-card p,
.dir-card-meta {
  grid-column: unset;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted-2);
}
.hub-grid-premium .tool-card.dir-card .tool-go,
.hub-grid-compact .tool-card.dir-card .tool-go {
  display: none;
}

.dir-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.dir-card-head .tool-num {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
}

.dir-card-phones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.15rem 0 0;
}

/* Hero phone on index cards — huge, high contrast */
.dir-phone {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-decoration: none;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  color: #ffffff;
  background: #0a0a0a;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}
.dir-phone:hover,
.dir-phone:focus-visible {
  border-color: var(--accent);
  background: #111111;
  color: #ffffff;
  outline: none;
  text-decoration: none;
  transform: scale(1.01);
}
html[data-theme="light"] .dir-phone {
  color: #0a0a0a;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .dir-phone:hover,
html[data-theme="light"] .dir-phone:focus-visible {
  border-color: var(--accent);
  color: #0a0a0a;
  background: #f3f8fc;
}

.dir-card-extra {
  margin: 0 !important;
  font-size: 0.875rem !important;
  color: var(--muted-2) !important;
}
.dir-phone-label {
  margin: 0 !important;
  color: var(--muted-2);
  font-size: .875rem !important;
  font-weight: 600;
}

.phone-search {
  display: grid;
  gap: .5rem;
  max-width: 34rem;
  margin: 1.5rem 0 2rem;
}
.phone-search label { font-weight: 700; }
.phone-search input {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
}
.phone-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.phone-search p { margin: 0; color: var(--muted-2); }
#phoneList [hidden], #phoneSearchEmpty[hidden] { display: none !important; }

/* Clear action buttons on cards */
.dir-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.15rem;
}
.dir-card-actions-solo {
  margin-top: 0.35rem;
}
.dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.65rem 1.05rem;
  border-radius: var(--radius-pill);
  font-size: 0.975rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.dir-btn-primary {
  background: var(--accent);
  color: #ffffff;
  border: 1px solid transparent;
}
.dir-btn-primary:hover,
.dir-btn-primary:focus-visible {
  background: var(--accent-hover);
  color: #ffffff;
  outline: none;
  text-decoration: none;
}
.dir-btn-call {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.dir-btn-call:hover,
.dir-btn-call:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
  text-decoration: none;
}
.dir-btn-wa {
  background: #15803d;
  color: #ffffff;
  border: 1px solid transparent;
}
.dir-btn-wa:hover,
.dir-btn-wa:focus-visible {
  background: #166534;
  color: #ffffff;
  outline: none;
  text-decoration: none;
}
.dir-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.dir-card-locator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.dir-card-locator:hover {
  border-color: var(--accent);
  text-decoration: underline;
}
a.dir-card-extra {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
a.dir-card-extra:hover {
  text-decoration: underline;
}
.dir-btn-web {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.dir-btn-web:hover,
.dir-btn-web:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
  text-decoration: none;
}
.dir-btn-ghost {
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.dir-btn-ghost:hover,
.dir-btn-ghost:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
  text-decoration: none;
}
.dir-btn-inline {
  margin-top: auto;
  width: fit-content;
  align-self: flex-start;
}

/* Legacy clear CTA (solo enlace) */
.dir-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.15rem 0;
  padding: 0.75rem 1.2rem;
  min-height: 48px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.dir-cta:hover,
.dir-cta:focus-visible {
  background: var(--accent-hover);
  color: #ffffff;
  text-decoration: none;
  outline: none;
}

.dir-card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
}
a.dir-card:hover .dir-card-more,
.dir-card-more:hover {
  text-decoration: underline;
}

.dir-card-simple {
  min-height: 12.5rem;
}
.dir-card-simple .dir-card-meta {
  flex: 1;
}

/* ——— Detail ficha: guided flow ——— */
.ficha-panel,
.ficha-guide {
  margin: 1.5rem 0 2rem;
  padding: 1.75rem 1.65rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-elev);
  max-width: 46rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
html[data-theme="light"] .ficha-panel,
html[data-theme="light"] .ficha-guide {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.ficha-panel h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  color: var(--ink);
}

.ficha-step-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.ficha-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  flex-shrink: 0;
}

.ficha-hero-phone {
  padding: 0 0 1.35rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.ficha-hero-phone .ficha-phone-label {
  margin: 0 0 0.5rem;
  display: block;
}
.ficha-phone-hero {
  display: inline-flex !important;
  margin: 0 0 1rem;
  font-size: 3rem !important;
  padding: 0.9rem 1.15rem !important;
}

.ficha-other-phones {
  margin: 0 0 1.35rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.ficha-phones {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
.ficha-phones li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.ficha-phones li:last-child { border-bottom: 0; }
.ficha-phone-label {
  color: var(--muted-2);
  min-width: 0;
  flex: 1 1 100%;
  font-size: 1rem;
  font-weight: 600;
}
.ficha-phone {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 1.15;
  letter-spacing: 0.045em;
  color: #ffffff;
  text-decoration: none;
  padding: 0.65rem 0.95rem;
  border-radius: 14px;
  background: #0a0a0a;
  border: 2px solid rgba(255, 255, 255, 0.28);
}
.ficha-phone:hover,
.ficha-phone:focus-visible {
  border-color: var(--accent);
  color: #ffffff;
  text-decoration: none;
  outline: none;
}
html[data-theme="light"] .ficha-phone {
  color: #0a0a0a;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .ficha-phone:hover,
html[data-theme="light"] .ficha-phone:focus-visible {
  border-color: var(--accent);
  color: #0a0a0a;
  background: #f3f8fc;
}

.btn-call {
  min-width: 10rem;
}
.btn-call-sm {
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  font-size: 0.9375rem;
}

.ficha-official {
  margin: 0 0 1.25rem;
}
.ficha-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.35rem 0 0;
}
.ficha-actions .btn { margin: 0; }

.ficha-tip {
  margin: 0;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  background: var(--warn-soft);
  color: var(--ink);
  font-size: 0.975rem;
  line-height: 1.5;
}
.ficha-tip strong {
  color: var(--ink);
  font-weight: 750;
}

.ficha-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
}

/* ——— Guía telefónica rica (v0.2.9) ——— */
.ficha-phone-meta {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.9375rem;
  color: var(--muted-2);
  flex: 1 1 100%;
}
.ficha-hero-phone .ficha-phone-meta {
  margin-top: 0.15rem;
}
.ficha-phone-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--muted-2);
}
.ficha-phone-free {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.ficha-whatsapp {
  margin: 0 0 1.35rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.ficha-whatsapp .ficha-phone {
  margin: 0 0.65rem 0.5rem 0;
}
.ficha-emails {
  margin: 0 0 1.35rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.ficha-emails h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}
.ficha-emails ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.ficha-emails li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}
.ficha-emails li span { color: var(--muted-2); }
.ficha-emails li a { overflow-wrap: anywhere; }
.ficha-tip-list {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;
}
.ficha-tip-list li {
  margin: 0.35rem 0;
}

/* Spain-first utility layout */
/* letter-spacing libre para tipografia legible */
.header-actions .icon-btn { color: var(--ink); font-size: 1.25rem; }
.header-actions .nav-toggle { font-size: 1.4rem; }
.home-wrap { max-width: none; }
.home-hero,
.home-entry { padding: 2rem 0 1.2rem; }
.home-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
.home-eyebrow { margin-bottom: .55rem; color: var(--accent); font-family: var(--font); font-size: .875rem; text-transform: none; }
html[data-theme="light"] .home-eyebrow-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.home-copy h1,
.home-hero h1 { margin-bottom: .5rem; font-size: 3rem; line-height: 1.1; }
.home-hero .lead,
.home-copy .lead { max-width: 45rem; font-size: 1.0625rem; line-height: 1.5; }
#imei-tool { scroll-margin-top: 4.5rem; }
.panel-tool { margin-bottom: 0; padding: 1.45rem; }
.panel-elevated,
html[data-theme="light"] .panel-elevated { background: var(--bg-elev); border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); box-shadow: none; border-radius: 6px; }
.panel-elevated .panel-head { margin-bottom: .9rem; padding-bottom: .7rem; }
.panel-elevated .panel-head h2 { font-size: 1.125rem; }
.panel-elevated input[type="text"] { min-height: 56px; background: var(--bg-elev); font-size: 1.125rem; }
.panel-elevated .result-box { margin-top: 1rem; padding: .75rem 1rem; border-radius: 5px; background: var(--bg-soft); }
#imei-tool .result-box[data-status=""] { display: none; }
.tool-hero + .seo-block { margin-top: .75rem; padding-top: 1.2rem; }
.btn,
.dir-btn,
.dir-cta { border-radius: 5px; }
.home-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.35rem 0 2.25rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.home-paths a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 64px; padding: .85rem 1rem; color: var(--ink); font-size: .9375rem; font-weight: 650; text-decoration: none; }
.home-paths a + a { border-left: 1px solid var(--line); }
.home-paths a span:last-child { color: var(--accent); font-size: 1.2rem; }
.home-paths a:hover { background: var(--bg-soft); color: var(--accent); }
.feature-strip { margin-bottom: 2.25rem; }
html[data-theme="light"] .feature-n,
html[data-theme="light"] .tool-card .tool-num { color: var(--accent); }
.home-tools { margin-top: 2.5rem; }
.home-tools-title { font-size: 1.375rem; }
.tool-card { border-radius: 6px; }
#phoneList .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.hub-grid-premium .tool-card.dir-card,
.hub-grid-compact .tool-card.dir-card,
html[data-theme="light"] .hub-grid-premium .tool-card.dir-card,
html[data-theme="light"] .hub-grid-compact .tool-card.dir-card {
  min-height: 0;
  padding: 1.45rem 1.35rem 1.25rem;
  gap: 0.85rem;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hub-grid-premium .tool-card.dir-card:hover,
.hub-grid-compact .tool-card.dir-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.hub-grid-premium .tool-card.dir-card h3,
.hub-grid-compact .tool-card.dir-card h3 {
  font-size: 1.35rem;
  font-weight: 750;
  margin: 0;
}
.dir-card-phones {
  gap: 0.35rem;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html[data-theme="light"] .dir-phone,
html[data-theme="dark"] .dir-phone {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 1.85rem;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1.2;
}
html[data-theme="light"] .dir-phone:hover,
html[data-theme="light"] .dir-phone:focus-visible,
html[data-theme="dark"] .dir-phone:hover,
html[data-theme="dark"] .dir-phone:focus-visible {
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  text-decoration: underline;
  transform: none;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.dir-card-phones .ficha-phone-meta {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
}
.dir-card-actions {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}
.dir-card-actions-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}
.dir-card-actions-sub .dir-btn {
  flex: 1 1 0;
  min-width: 75px;
  padding: 0.55rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.phone-search {
  margin: 0.75rem 0 1.25rem;
  max-width: 100%;
}
.phone-search label {
  font-size: 0.95rem;
  font-weight: 600;
}
.phone-search input {
  background: var(--bg-elev);
  width: 100%;
  max-width: 100%;
  font-size: 1.1rem;
  padding: 0.8rem 1.1rem;
  box-sizing: border-box;
}
.phone-search-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
#phoneList.home-tools {
  margin-top: 1.75rem;
}
#phoneList .home-tools-title {
  margin-bottom: 0.9rem;
  font-size: 1.3rem;
  font-weight: 750;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 0.45rem;
}
#phoneList .hub-grid + .home-tools-title {
  margin-top: 2.75rem;
}

body[data-section="telefonos"] .ficha-panel,
body[data-section="telefonos"] .ficha-locator-section,
body[data-section="telefonos"] .seo-block,
body[data-section="telefonos"] .tool-hero {
  max-width: 1200px;
}
.tool-hero { padding: 1.8rem 0 1rem; }
.tool-hero h1 { font-size: 2.25rem; line-height: 1.15; }
.tool-hero .lead { font-size: 1.0625rem; line-height: 1.5; }
.ficha-panel,
.ficha-guide,
html[data-theme="light"] .ficha-panel,
html[data-theme="light"] .ficha-guide {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  max-width: 100%;
  padding: 1.5rem 1.4rem;
  background: var(--bg-elev);
}
.ficha-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 860px) {
  .ficha-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.25fr);
    gap: 1.75rem;
    align-items: start;
  }
}
.ficha-col-primary,
.ficha-col-secondary {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
}
.ficha-hero-phone {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 1.35rem 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
html[data-theme="light"] .ficha-hero-phone {
  background: #f7faf8;
}
.ficha-hero-phone .ficha-phone-hero {
  font-size: 2.75rem !important;
  line-height: 1.15;
  margin: 0.25rem 0 0.4rem;
  word-break: break-word;
}
.ficha-hero-phone .btn-call {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 0.65rem;
  padding: 0.85rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 750;
  box-sizing: border-box;
}
.ficha-whatsapp {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
  margin: 0;
}
html[data-theme="light"] .ficha-whatsapp {
  background: #f7faf8;
}
.ficha-whatsapp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.ficha-other-phones {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 0.5rem;
  margin: 0;
}
html[data-theme="light"] .ficha-other-phones {
  background: #f7faf8;
}
.ficha-phones {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
.ficha-phones li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.ficha-phones li:last-child {
  border-bottom: 0;
}
.ficha-phone-entry {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.ficha-phone-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem;
}
.ficha-phones .btn-call-sm {
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
}
.ficha-official {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
  margin: 0;
}
html[data-theme="light"] .ficha-official {
  background: #f7faf8;
}
.ficha-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.45rem;
}
.ficha-tip {
  margin: 0;
  padding: 1.15rem 1.25rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  background: var(--warn-soft);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.directory-source {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
html[data-theme="light"] .ficha-phone,
html[data-theme="dark"] .ficha-phone { padding: .2rem 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); }
html[data-theme="light"] .ficha-phone:hover,
html[data-theme="light"] .ficha-phone:focus-visible,
html[data-theme="dark"] .ficha-phone:hover,
html[data-theme="dark"] .ficha-phone:focus-visible { border: 0; background: transparent; color: var(--accent-hover); text-decoration: underline; outline: 2px solid var(--accent); outline-offset: 3px; }
.ficha-phone-hero { font-size: 3rem !important; }

@media (max-width: 699px) {
  .home-hero,
  .home-entry { padding: 1.4rem 0 .9rem; }
  .home-copy h1,
  .home-hero h1 { font-size: 2.15rem; }
  .panel-tool { padding: 1rem; }
  .panel-elevated .panel-head { align-items: flex-start; }
  .panel-tag { font-size: .75rem; text-align: right; }
  .home-paths { grid-template-columns: 1fr; margin: 1rem 0 1.75rem; }
  .home-paths a { min-height: 48px; padding: .6rem .35rem; }
  .home-paths a + a { border-left: 0; border-top: 1px solid var(--line); }
  .ficha-phone-hero { font-size: 2rem !important; }
  .ficha-panel,
  .ficha-guide { margin-top: .8rem; padding: 1rem; }
}
@media (max-width: 420px) {
  .ficha-phone-hero { font-size: 1.85rem !important; }
}

/* Directory: compact scanning surfaces, independent from the mobile tool hub. */
.directory-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .5rem 0 2rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
@media (min-width: 1100px) { .directory-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.directory-summary div { display: flex; align-items: baseline; gap: .75rem; padding: 1.1rem .9rem; }
.directory-summary div + div { border-left: 1px solid var(--line); }
.directory-summary strong { color: var(--accent); font-size: 1.75rem; line-height: 1; }
.directory-summary span { color: var(--muted); font-size: .875rem; }
.directory-controls { display: grid; gap: .65rem; max-width: none; margin: 1rem 0; }
.directory-controls label { font-weight: 700; }
.directory-controls input,
.directory-controls select { width: 100%; min-height: 48px; padding: .65rem .85rem; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 5px; font: inherit; }
.directory-controls input:focus-visible,
.directory-controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.directory-controls p { margin: 0; color: var(--muted); font-size: .875rem; }
.directory-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.directory-filter { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .45rem .7rem; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 5px; font: inherit; font-size: .875rem; cursor: pointer; }
.directory-filter span { color: var(--muted); }
.directory-filter[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.directory-filter[aria-pressed="true"] span { color: #fff; }
.directory-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.directory-source { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.branch-controls { max-width: 40rem; }
.branch-list { margin: 1.5rem 0 2.5rem; border-top: 1px solid var(--line-strong); }
.branch-row { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1rem .25rem; border-bottom: 1px solid var(--line); }
.branch-row[hidden], #branchEmpty[hidden] { display: none !important; }
.branch-row-main { min-width: 0; }
.branch-brand { color: var(--accent); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.branch-row h2 { margin: .15rem 0 .2rem; font-size: 1.0625rem; line-height: 1.3; }
.branch-row p { margin: 0; color: var(--muted); font-size: .875rem; }
.branch-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; min-width: 10rem; font-weight: 700; white-space: nowrap; }
.directory-locators { margin: 2rem 0 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.directory-locators h2 { font-size: 1.25rem; }
.directory-locators p { max-width: 44rem; color: var(--muted); }
.directory-locator-links { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.branch-detail { max-width: 52rem; margin: .75rem 0 2rem; padding: 1.5rem; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 6px; }
.branch-detail dl { margin: 0 0 1.5rem; }
.branch-detail dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.branch-detail dt { color: var(--muted); font-weight: 600; }
.branch-detail dd { margin: 0; font-weight: 650; }
.branch-detail address { font-style: normal; }
.branch-detail-phone { font-size: 1.25rem; }
.directory-back { margin: 0 0 3rem; }

@media (max-width: 699px) {
  .directory-summary { grid-template-columns: 1fr; }
  .directory-summary div { padding: .65rem .25rem; }
  .directory-summary div + div { border-left: 0; border-top: 1px solid var(--line); }
  .branch-row { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .branch-row-actions { justify-content: flex-start; min-width: 0; }
  .branch-detail { padding: 1rem; }
  .branch-detail dl > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* TrucosMovil brand: noche tech (no bosque / no terracota) */
:root { --signal: #1d9bf0; }
html[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-elev: #ffffff;
  --bg-soft: #eef0f4;
  --bg-well: #e6e9ef;
  --ink: #0f1419;
  --muted: #536471;
  --muted-2: #3d4a56;
  --line: rgba(15, 20, 25, 0.12);
  --line-strong: rgba(15, 20, 25, 0.2);
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --accent-soft: rgba(29, 155, 240, 0.12);
  --accent-ring: rgba(29, 155, 240, 0.28);
  --brand: #1d9bf0;
  --brand-2: #1d9bf0;
  --signal: #1d9bf0;
  --info-bar: #1d9bf0;
}
html[data-theme="dark"] {
  --bg: #000000;
  --bg-elev: #0d0d0d;
  --bg-soft: #16181c;
  --bg-well: #1c1f24;
  --ink: #e7e9ea;
  --muted: #8b98a5;
  --muted-2: #aab2bb;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #1d9bf0;
  --accent-hover: #4db2f5;
  --accent-soft: rgba(29, 155, 240, 0.16);
  --accent-ring: rgba(29, 155, 240, 0.35);
  --brand: #1d9bf0;
  --brand-2: #1d9bf0;
  --signal: #1d9bf0;
  --info-bar: #1d9bf0;
}
.site-header {
  background: var(--bg-elev);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line-strong);
}
.header-row { min-height: 4rem; }
.brand-text { font-weight: 800; font-size: 1.25rem; }
.nav-desktop a { border-radius: 0; border-bottom: 2px solid transparent; }
.nav-desktop a[aria-current="page"] { border-bottom-color: var(--signal); }

.home-wrap .home-hero {
  position: relative;
  width: 100cqw;
  min-height: 300px;
  margin-left: calc(50% - 50cqw);
  padding: 3.1rem 0 3.6rem;
  overflow: hidden;
  border-bottom: 4px solid var(--signal);
  background: #e7eceb url("../assets/diagnostico-movil.webp") center center / cover no-repeat;
}
.home-wrap .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 250, 249, .16);
}
html[data-theme="dark"] .home-wrap .home-hero::before { background: rgba(9, 24, 24, .8); }
.home-hero .home-split {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
}
.home-hero .home-copy { max-width: 34rem; }
.home-hero .home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .8rem;
  padding: .3rem .55rem .3rem 0;
  color: #18403b;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  background: rgba(247, 250, 249, .75);
}
.home-hero .home-eyebrow-dot { background: var(--signal) !important; box-shadow: none !important; }
html[data-theme="dark"] .home-hero .home-eyebrow { color: #e5f3ed; background: transparent; }
.home-hero h1 {
  margin: 0 0 .7rem;
  color: #152c2a;
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
}
.home-hero h1 .accent { color: var(--accent); }
.home-hero .lead {
  max-width: 31rem;
  margin: 0;
  color: #183b37;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.48;
}
html[data-theme="dark"] .home-hero h1,
html[data-theme="dark"] .home-hero .lead { color: var(--ink); }
html[data-theme="dark"] .home-hero h1 .accent { color: var(--accent); }

.home-fresh-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted-2);
  margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.home-fresh-badge .fresh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.2);
  display: inline-block;
  flex-shrink: 0;
}
.home-fresh-badge strong {
  color: var(--ink);
  font-weight: 700;
}

#imei-tool {
  position: relative;
  z-index: 2;
  margin-top: -2rem;
  border-top: 4px solid var(--signal);
  box-shadow: 0 13px 35px rgba(13, 47, 42, .1);
}
.panel-elevated .panel-head h2 { font-size: 1.35rem; }
.panel-elevated .panel-tag { color: var(--signal); }
.home-paths { margin-top: 1.65rem; }
.home-paths a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .7rem;
  background: var(--bg-elev);
}
.home-paths a .path-index {
  color: var(--signal);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
}
.home-paths a span:last-child { color: var(--accent); }
.home-wrap .home-tools-title {
  padding-left: .8rem;
  border-left: 4px solid var(--signal);
  font-size: 1.5rem;
}
.home-wrap .hub-grid-premium .tool-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: .6rem;
  row-gap: .2rem;
  align-content: center;
  min-height: 0;
  padding: 1.2rem .1rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.home-wrap .hub-grid-premium .tool-card:hover { background: var(--bg-soft); transform: none; }
.home-wrap .hub-grid-premium .tool-card .tool-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: .12rem 0 0;
  color: var(--signal);
  font-family: var(--mono);
}
.home-wrap .hub-grid-premium .tool-card h3 { grid-column: 2; grid-row: 1; font-size: 1.08rem; }
.home-wrap .hub-grid-premium .tool-card p { grid-column: 2; grid-row: 2; }
.home-wrap .hub-grid-premium .tool-card .tool-go {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--accent);
}

#directorio-home {
  width: 100cqw;
  margin-left: calc(50% - 50cqw);
  padding: 2.7rem max(1.25rem, calc((100cqw - 960px) / 2)) 3rem;
  color: #f2f7f4;
  background: var(--bg-soft);
  border-top: 4px solid var(--signal);
}
#directorio-home .home-tools-title { color: #f2f7f4; }
#directorio-home .section-note { color: #c9dad4; }
#directorio-home .tool-card { border-top-color: rgba(235, 247, 242, .22); }
#directorio-home .tool-card:hover { background: rgba(255, 255, 255, .08); }
#directorio-home .tool-card h3,
#directorio-home .tool-card p { color: #f2f7f4; }
#directorio-home .tool-card .tool-num { color: var(--signal); }
#directorio-home .tool-card .tool-go { color: var(--signal); }

.tool-hero { border-top: 3px solid var(--signal); margin-top: 1.5rem; }
.tool-hero h1 { font-weight: 800; }
@media (max-width: 699px) {
  .home-wrap .home-hero {
    min-height: 244px;
    padding: 1.7rem 0 2.45rem;
    background-position: 63% center;
  }
  .home-wrap .home-hero::before { background: rgba(248, 250, 249, .76); }
  html[data-theme="dark"] .home-wrap .home-hero::before { background: rgba(9, 24, 24, .82); }
  .home-hero h1 { font-size: 2.8rem; }
  .home-hero .lead { font-size: 1rem; line-height: 1.45; }
  #imei-tool { margin-top: -1rem; }
  #imei-tool .panel-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
  #imei-tool .panel-tag { text-align: left; }
  .home-paths a { padding: .65rem .75rem; }
  #directorio-home { padding-top: 2rem; padding-bottom: 2.2rem; }
}
@media (max-width: 360px) {
  .home-hero h1 { font-size: 2.5rem; }
  .panel-elevated .panel-head h2 { font-size: 1.15rem; }
}

/* Mobile catalogue: searchable index and source-backed comparisons. */
.model-finder, .model-comparison, .model-specs { margin: 1.25rem 0 2.5rem; }
.model-comparison, #model-comparison-h { scroll-margin-top: 5.5rem; }
.model-finder { border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
.model-finder h2, .model-comparison h2, .model-specs h2 { margin: 0 0 .7rem; font-size: 1.4rem; }
.model-controls { grid-template-columns: minmax(0, 2fr) minmax(11rem, 1fr); gap: .8rem; }
.model-controls > div { display: grid; gap: .4rem; min-width: 0; }
.model-controls label { font-size: .875rem; }
#modelCount { margin: 1rem 0 .5rem; color: var(--muted); font-size: .875rem; }
.model-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.model-row { min-width: 0; border-bottom: 1px solid var(--line); }
.model-row[hidden], #modelEmpty[hidden] { display: none !important; }
.model-row a { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .75rem .2rem; color: var(--ink); text-decoration: none; }
.model-row a:hover strong, .model-row a:focus-visible strong { color: var(--accent); text-decoration: underline; }
.model-row strong { min-width: 0; font-size: .98rem; }
.model-row span { flex-shrink: 0; color: var(--muted); font-size: .77rem; text-align: right; }
.model-more { margin-top: 1rem; }
#modelMore[hidden] { display: none !important; }
.model-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; border-top: 3px solid var(--signal); padding-top: 1.15rem; }
.model-section-head .home-eyebrow { margin: 0 0 .3rem; }
.model-section-head > span { color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* Trucos has its own compact, device-led visual language. */
.tricks-hero {
  position: relative;
  width: auto;
  margin: 1.25rem 0 0;
  padding: 1.35rem 0 1.5rem;
  color: var(--ink);
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
  overflow: visible;
}
.tricks-hero::before { display: none; content: none; }
.tricks-hero > * { position: relative; z-index: 1; }
.tricks-hero .breadcrumb,
.tricks-hero .breadcrumb a { color: var(--muted); }
.tricks-hero .breadcrumb a:hover { color: var(--accent); }
.tricks-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.tricks-hero-copy { padding-top: 0; }
.tricks-kicker {
  margin: 0 0 .55rem;
  color: var(--accent);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.tricks-hero h1 {
  max-width: 22ch;
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 750;
  line-height: 1.1;
  color: var(--ink);
}
.tricks-hero h1 span { color: var(--accent); }
.tricks-hero-copy > p:last-child {
  max-width: 54ch;
  margin: 0;
  color: var(--muted-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}
/* Keep the device markup for a11y/aria-hidden, but don't sell a second template */
.tricks-device { display: none; }
.tricks-device-screen,
.tricks-device-top,
.tricks-device-battery,
.tricks-device-core,
.tricks-device-target,
.tricks-device-pulse,
.tricks-device-cross,
.tricks-device-modes { display: none; }
@keyframes tricks-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tricks-device-pulse { animation: none; } }

.tricks-jump { display: flex; gap: 0 1.6rem; flex-wrap: wrap; border-bottom: 1px solid var(--line-strong); }
.tricks-jump a { display: block; padding: 1rem 0; color: var(--ink); font-size: .9rem; font-weight: 700; border-bottom: 2px solid transparent; }
.tricks-jump a:hover, .tricks-jump a:focus-visible { color: var(--accent); border-bottom-color: var(--signal); text-decoration: none; }
.tricks-section { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: 2.5rem; padding: 3rem 0; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 5rem; }
.tricks-section-head > span { color: var(--signal); font: 700 .75rem/1.4 var(--mono); }
.tricks-section-head h2 { margin: .55rem 0 .6rem; font-size: 1.75rem; line-height: 1.16; }
.tricks-section-head p { margin: 0; color: var(--muted); font-size: .95rem; }
.trick-list { min-width: 0; border-top: 2px solid var(--ink); }
.trick-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 1.5rem; gap: 1rem; align-items: start; padding: 1.15rem .25rem; border-bottom: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.trick-row:hover, .trick-row:focus-visible { background: var(--bg-soft); text-decoration: none; }
.trick-row:hover .trick-row-arrow, .trick-row:focus-visible .trick-row-arrow { transform: translateX(.25rem); }
.trick-row-label { padding-top: .16rem; color: var(--signal); font: 700 .73rem/1.4 var(--mono); }
.trick-row-main { display: grid; gap: .3rem; min-width: 0; }
.trick-row-main strong { font-size: 1.05rem; line-height: 1.28; }
.trick-row-main > span { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.trick-row-arrow { color: var(--accent); font-size: 1.3rem; line-height: 1; text-align: right; }
.tricks-games .tricks-section-head > span, .tricks-games .trick-row-label { color: var(--section-accent); }
html[data-theme="dark"] .tricks-games .tricks-section-head > span, html[data-theme="dark"] .tricks-games .trick-row-label { color: var(--accent); }
.tricks-bottom { padding: 1.7rem 0 3rem; }
.tricks-bottom p { margin: 0; color: var(--muted); }
.trick-article { padding-bottom: 3rem; }
.trick-article-hero { max-width: 50rem; }
.trick-article-hero h1 { max-width: 22ch; }
.trick-article .conclusion { max-width: 50rem; }
.trick-toc { display: flex; gap: .45rem 1.25rem; flex-wrap: wrap; max-width: 52rem; margin: 1.5rem 0 2rem; padding: .8rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.trick-toc a { font-size: .88rem; font-weight: 700; }
.trick-step { scroll-margin-top: 5rem; }
.trick-sources { max-width: 50rem; margin: 2.5rem 0 1rem; padding-top: 1rem; border-top: 2px solid var(--line-strong); }
.trick-sources h2 { margin: 0 0 .65rem; font-size: 1.15rem; }
.trick-sources ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.trick-sources li { margin: .25rem 0; font-size: .9rem; }
.trick-sources p { color: var(--muted); font-size: .875rem; }
.trick-next { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.5rem; max-width: 50rem; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 700; }
.home-tricks-band { width: 100cqw; margin: 2rem 0 0 calc(50% - 50cqw); padding: 2.2rem max(1.25rem, calc((100cqw - 960px) / 2)); background: #e6f0eb; border-top: 4px solid var(--signal); scroll-margin-top: 4rem; }
#directorio-home { margin-top: 1.25rem; }
html[data-theme="dark"] .home-tricks-band { background: var(--bg-soft); }
.home-tricks-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: end; margin-bottom: 1.2rem; }
.home-tricks-heading p { grid-column: 1 / -1; margin: 0; color: var(--signal); font: 700 .75rem/1.4 var(--mono); }
html[data-theme="dark"] .home-tricks-heading p { color: var(--signal); }
.home-tricks-heading h2 { margin: 0; font-size: 1.7rem; line-height: 1.2; }
.home-tricks-heading > a { font-size: .88rem; font-weight: 700; white-space: nowrap; }
.home-tricks-links { border-top: 2px solid var(--ink); }
.home-tricks-links a { display: grid; grid-template-columns: 8.7rem minmax(0, 1fr) 1.3rem; gap: 1rem; align-items: baseline; padding: .85rem .1rem; border-bottom: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.home-tricks-links a:hover { background: rgba(255,255,255,.3); text-decoration: none; }
.home-tricks-links a > span:first-child { color: var(--signal); font: 700 .72rem/1.4 var(--mono); }
html[data-theme="dark"] .home-tricks-links a > span:first-child { color: var(--signal); }
.home-tricks-links a strong { font-size: 1rem; }
.home-tricks-links a > span:last-child { color: var(--accent); text-align: right; }
@media (max-width: 700px) {
  .tricks-hero { padding-top: 1rem; padding-bottom: 1.8rem; }
  .tricks-hero-grid { grid-template-columns: minmax(0, 1fr) 8rem; gap: .75rem; }
  .tricks-hero-copy { padding-top: .6rem; }
  .tricks-hero h1 { font-size: 2.1rem; }
  .tricks-device { width: 7.6rem; height: 9.5rem; padding: .3rem; }
  .tricks-device-screen { padding: .4rem; }
  .tricks-device-target { width: 4.7rem; height: 4.7rem; }
  .tricks-device-modes { font-size: .34rem; }
  .tricks-section { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 2.2rem 0; }
  .tricks-section-head p { max-width: 42ch; }
  .home-tricks-heading { grid-template-columns: minmax(0, 1fr); }
  .home-tricks-heading > a { margin-top: .3rem; }
}
@media (max-width: 500px) {
  .tricks-hero::after { position: absolute; top: 2.3rem; right: 1.3rem; width: 3.5rem; height: 3.5rem; content: ''; border: 1px solid rgba(142, 230, 212, .7); border-radius: 50%; box-shadow: 0 0 0 .55rem rgba(142, 230, 212, .09), inset 0 0 0 .7rem rgba(142, 230, 212, .08); pointer-events: none; }
  .tricks-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tricks-device { display: none; }
  .tricks-jump { gap: 0 1rem; }
  .tricks-jump a { padding: .75rem 0; font-size: .81rem; }
  .trick-row { grid-template-columns: minmax(0, 1fr) 1.2rem; gap: .4rem .5rem; }
  .trick-row-label { grid-column: 1; }
  .trick-row-main { grid-column: 1; }
  .trick-row-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .tricks-hero h1 { font-size: 2rem; }
  .home-tricks-links a { grid-template-columns: minmax(0, 1fr) 1.2rem; gap: .25rem .5rem; }
  .home-tricks-links a > span:first-child, .home-tricks-links a strong { grid-column: 1; }
  .home-tricks-links a > span:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.model-comparison-intro { max-width: 68ch; margin: 0 0 1.4rem; color: var(--muted); }
.model-compare-controls { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.model-compare-controls > div { display: grid; gap: .4rem; min-width: min(100%, 16rem); }
.model-compare-controls label { font-size: .875rem; }
.model-compare-controls p { margin: 0; color: var(--muted); font-size: .875rem; }
.model-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.model-compare-item { min-width: 0; padding: 1.1rem; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 6px; }
.model-compare-brand { margin: 0 0 .25rem; color: var(--signal); font-family: var(--mono); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.model-compare-item h3 { margin: 0 0 .8rem; font-size: 1.2rem; }
.model-compare-item h3 a { color: var(--ink); }
.model-compare-item dl, .model-specs dl { margin: 0; }
.model-compare-item dl > div, .model-specs dl > div { display: grid; gap: .15rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.model-compare-item dt, .model-specs dt { color: var(--muted); font-size: .77rem; }
.model-compare-item dd, .model-specs dd { margin: 0; color: var(--ink); font-weight: 650; }
.model-compare-note { min-height: 4.5em; margin: .9rem 0; font-size: .875rem; line-height: 1.5; }
.model-source { font-size: .875rem; font-weight: 700; }
.model-specs { max-width: 52rem; }
.model-specs dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 1rem 0; }
.model-specs p { max-width: 68ch; }
.model-photo { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); }
.model-photo img { display: block; width: 100%; height: auto; max-height: 25rem; object-fit: contain; }
.model-photo figcaption { padding: .5rem .75rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.model-photo figcaption a { color: var(--accent); }
.model-photo-compare { margin: -.35rem -.35rem .9rem; }
.model-photo-compare img { height: 10rem; object-fit: contain; }
.model-photo-detail { width: min(100%, 36rem); margin: .25rem 0 1.3rem; }
.model-photo-detail img { max-height: 29rem; }
.model-featured { margin: 1.2rem 0 2.5rem; }
.model-featured > p { max-width: 64ch; color: var(--muted); }
.model-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.model-feature-card { min-width: 0; padding: .55rem .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); }
.model-feature-card .model-photo { border: 0; background: transparent; }
.model-photo-feature img { height: 8.5rem; object-fit: contain; }
.model-photo-feature figcaption { padding: .3rem .15rem; font-size: .7rem; }
.model-feature-card > p { margin: .45rem .35rem .1rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.model-feature-card h3 { margin: 0 .35rem; font-size: .94rem; line-height: 1.3; }
.model-feature-card h3 a { color: var(--ink); }
@media (max-width: 760px) { .model-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .model-feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .model-compare-grid { grid-template-columns: 1fr; }
  .model-compare-note { min-height: 0; }
}
@media (max-width: 600px) {
  .model-controls, .model-list, .model-specs dl { grid-template-columns: 1fr; }
  .model-row a { align-items: center; }
  .model-section-head { align-items: flex-start; flex-direction: column; gap: .15rem; }
}

/* Buying decisions read as a comparison sheet, not a product ranking. */
#mundo-movil { border-top: 3px solid var(--accent); padding-top: 1.5rem; }
.choose-hero { max-width: 54rem; }
.choose-jump { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: .25rem 0 2rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.choose-jump a { display: inline-block; padding: .85rem 0; color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration: none; }
.choose-jump a:hover, .choose-jump a:focus-visible { color: var(--accent); text-decoration: underline; }
.choose-shortlist { margin: 2.5rem 0; scroll-margin-top: 5rem; }
.choose-shortlist .section-note { max-width: 67ch; }
.choose-rows { display: grid; gap: 1rem; margin: 1.5rem 0; }
.choose-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
  padding: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg-elev);
}
.choose-row > div { min-width: 0; }
.choose-model > span { color: var(--accent); font: 700 .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.choose-model h3 { margin: .4rem 0 .5rem; font-size: 1.2rem; line-height: 1.35; }
.choose-model h3 a { color: var(--ink); }
.choose-model small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.choose-row strong { display: block; color: var(--ink); font-size: .85rem; line-height: 1.5; }
.choose-row p { margin: .5rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.choose-row-actions { margin-top: .85rem; }
.choose-row-actions a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; font-size: .85rem; font-weight: 650; }
.choose-checklist li { margin-bottom: .8rem; }
@media (max-width: 760px) {
  .choose-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .choose-model { grid-column: 1 / -1; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .choose-row { grid-template-columns: minmax(0, 1fr); padding: 1.2rem; }
}

/* Shared page rhythm: one structure for indexes, reading pages and tools. */
:root { --section-accent: var(--signal); --section-gap: 2.4rem; }
body[data-section="moviles"] { --section-accent: #1d9bf0; }
body[data-section="guias"] { --section-accent: #1d9bf0; }
body[data-section="trucos"] { --section-accent: #1d9bf0; }
body[data-section="directorio"], body[data-section="telefonos"], body[data-section="servicios"] { --section-accent: #1d9bf0; }
html[data-theme="dark"] body[data-section="moviles"] { --section-accent: #1d9bf0; }
html[data-theme="dark"] body[data-section="guias"],
html[data-theme="dark"] body[data-section="trucos"],
html[data-theme="dark"] body[data-section="directorio"],
html[data-theme="dark"] body[data-section="telefonos"],
html[data-theme="dark"] body[data-section="servicios"] { --section-accent: #1d9bf0; }
.nav-desktop a[aria-current="page"] { border-bottom-color: var(--section-accent); }
.tool-hero {
  max-width: 54rem;
  margin: 1.25rem 0 0;
  padding: 1.35rem 0 1.45rem;
  border-top: 2px solid var(--section-accent);
}
.tool-hero .breadcrumb { margin-bottom: .75rem; font-size: .875rem; line-height: 1.45; }
.tool-hero .home-eyebrow { margin: 0 0 .55rem; font-size: .8rem; }
.tool-hero h1 { max-width: 27ch; margin-bottom: .55rem; font-size: 2.5rem; line-height: 1.1; }
.tool-hero .lead { max-width: 65ch; font-size: 1.0625rem; line-height: 1.52; }
.home-tools, .seo-block, .model-finder, .model-comparison, .choose-shortlist {
  margin-top: var(--section-gap);
}
.home-tools-title, .seo-block h2, .model-finder h2, .model-comparison h2, .model-specs h2 {
  font-size: 1.4rem;
  line-height: 1.22;
}
.seo-block { padding-top: 2.25rem; }
.model-finder { padding-top: 1.55rem; }
.model-section-head { border-top-width: 2px; border-top-color: var(--section-accent); }

/* Linked indexes read as one continuous list. Data records and tools stay framed. */
.hub-grid.hub-link-list { display: block; border-top: 1px solid var(--line-strong); }
.hub-grid.hub-link-list .tool-card,
.hub-grid.hub-link-list .tool-card.dir-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
  grid-template-rows: auto auto;
  gap: .28rem .85rem;
  align-content: center;
  align-items: start;
  min-height: 0;
  margin: 0;
  padding: 1.1rem 1.15rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  transform: none;
}
.hub-grid.hub-link-list .tool-card:hover,
.hub-grid.hub-link-list .tool-card:focus-visible,
.hub-grid.hub-link-list .tool-card.dir-card:hover,
.hub-grid.hub-link-list .tool-card.dir-card:focus-visible {
  background: var(--bg-soft);
  border-bottom-color: var(--line-strong);
  box-shadow: none;
  transform: none;
  text-decoration: none;
}
.hub-grid.hub-link-list .tool-card .tool-num,
.hub-grid.hub-link-list .tool-card.dir-card .tool-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin: .2rem 0 0;
  color: var(--section-accent);
  font: 700 .75rem/1.4 var(--mono);
}
.hub-grid.hub-link-list .tool-card h3,
.hub-grid.hub-link-list .tool-card.dir-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.28;
}
.hub-grid.hub-link-list .tool-card p,
.hub-grid.hub-link-list .tool-card.dir-card p,
.hub-grid.hub-link-list .tool-card .dir-card-meta {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.45;
}
.hub-grid.hub-link-list .tool-card .tool-go,
.hub-grid.hub-link-list .tool-card.dir-card .tool-go {
  display: block;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  margin: 0;
  color: var(--accent);
  font-size: 1.15rem;
}

/* Prose is continuous; only an interactive device or a contact record gets a box. */
main > .panel:not(.panel-tool) {
  max-width: 52rem;
  margin: 0;
  padding: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
main > .panel:not(.panel-tool) .panel-head { margin-bottom: .8rem; padding-bottom: 0; border-bottom: 0; }
main > .panel:not(.panel-tool) .panel-head h2 { font-size: 1.35rem; line-height: 1.25; }
main > .panel:not(.panel-tool) .panel-tag { color: var(--section-accent); }
main > .conclusion { max-width: 52rem; }

.directory-summary { margin-bottom: 0; }
.directory-summary strong { color: var(--section-accent); }
@media (max-width: 1050px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 699px) {
  .tool-hero { margin-top: 1rem; padding: 1.1rem 0 1.2rem; }
  .tool-hero h1 { font-size: 2.05rem; line-height: 1.13; }
  .tool-hero .lead { font-size: 1rem; }
  .directory-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .directory-summary div { display: block; padding: .7rem .4rem; }
  .directory-summary div + div { border-top: 0; border-left: 1px solid var(--line); }
  .directory-summary strong { display: block; margin-bottom: .3rem; font-size: 1.4rem; }
  .directory-summary span { display: block; font-size: .75rem; line-height: 1.3; }
  .hub-grid.hub-link-list .tool-card,
  .hub-grid.hub-link-list .tool-card.dir-card { grid-template-columns: 1.65rem minmax(0, 1fr) 1.2rem; gap: .25rem .55rem; padding: .95rem 1rem; }
  .hub-grid.hub-link-list .tool-card h3,
  .hub-grid.hub-link-list .tool-card.dir-card h3 { font-size: 1rem; }
  .hub-grid.hub-link-list .tool-card p,
  .hub-grid.hub-link-list .tool-card.dir-card p { font-size: .875rem; }
}
@media (max-width: 350px) { .tool-hero h1 { font-size: 1.9rem; } }

/* ==========================================================================
   WIDGETS Y HERRAMIENTAS INTERACTIVAS DEL DIRECTORIO
   ========================================================================== */
.dir-tools-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
.dir-tool-card {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dir-tool-card h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink);
}
.dir-tool-card p {
  margin: 0;
  font-size: 0.925rem;
  color: var(--muted-2);
  line-height: 1.45;
}

/* Localizador Cerca de mí */
.ficha-locator-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.locator-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.locator-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.locator-select {
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  min-width: 200px;
}
.locator-status {
  font-size: 0.925rem;
  color: var(--ink);
  line-height: 1.4;
  margin: 0.25rem 0 0;
}
.locator-result-link {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  margin-top: 0.35rem;
}

/* Comprobador de tarifas */
.cost-checker-box {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.75rem 0;
}
.cost-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0.85rem 0 0.5rem;
}
.cost-input {
  flex: 1 1 240px;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
}
.cost-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cost-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.cost-quick-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.825rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.cost-quick-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cost-result-card {
  margin-top: 1.15rem;
  padding: 1.15rem;
  border-radius: 6px;
  background: var(--bg);
  border-left: 5px solid var(--line-strong);
}
.cost-result-card.cost-free {
  border-left-color: #16a34a;
}
.cost-result-card.cost-flat {
  border-left-color: #2563eb;
}
.cost-result-card.cost-warn {
  border-left-color: #d97706;
}
.cost-result-card.cost-danger {
  border-left-color: #dc2626;
}
.cost-result-card.cost-gov {
  border-left-color: #475569;
}
.cost-badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.cost-badge-free { background: #dcfce7; color: #166534; }
.cost-badge-flat { background: #dbeafe; color: #1e40af; }
.cost-badge-warn { background: #fef3c7; color: #92400e; }
.cost-badge-danger { background: #fee2e2; color: #991b1b; }
.cost-badge-gov { background: #f1f5f9; color: #334155; }
.cost-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  color: var(--ink);
}
.cost-desc {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}
.cost-legal {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-2);
  line-height: 1.45;
}

/* Generador de escritos */
.claim-generator-box {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
}
.claim-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}
.claim-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.claim-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.claim-field input,
.claim-field select {
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
.claim-field input:focus-visible,
.claim-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.claim-preview {
  width: 100%;
  min-height: 220px;
  padding: 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.claim-preview:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.claim-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.claim-feedback {
  font-size: 0.9rem;
  font-weight: 600;
  color: #16a34a;
}

/* ==========================================================================
   Centralita Telefónica Interactiva (Hub de Contacto Pro UX)
   ========================================================================== */
.ficha-panel.ficha-hub-container,
.ficha-panel.ficha-centralita {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
}

@media (min-width: 768px) {
  .ficha-panel.ficha-hub-container,
  .ficha-panel.ficha-centralita {
    padding: 2rem !important;
  }
}

.ficha-hub-heading {
  margin-bottom: 1.5rem !important;
}

.ficha-hub-title {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 0.4rem !important;
  letter-spacing: -0.01em !important;
}

.ficha-hub-lead {
  font-size: 0.95rem !important;
  color: var(--muted-2) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Grid principal del Hub: 2 columnas en pantallas amplias */
.hub-main-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 860px) {
  .hub-main-grid.hub-split {
    display: grid !important;
    grid-template-columns: minmax(320px, 380px) 1fr !important;
    gap: 1.75rem !important;
    align-items: start !important;
  }
}

.hub-col-featured {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  min-width: 0 !important;
}

.hub-col-dept {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 1. Tarjeta Hero Principal */
.hub-hero-card {
  background: var(--bg) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 12%, transparent) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  box-sizing: border-box !important;
}

.hub-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.hub-badge-primary {
  display: inline-flex !important;
  align-items: center !important;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg)) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
}

.hub-badge-free {
  display: inline-flex !important;
  align-items: center !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
}

.hub-badge-tag {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bg-soft) !important;
  color: var(--muted-2) !important;
  border: 1px solid var(--line) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
}

.hub-hero-title-wrap {
  margin: 0.2rem 0 !important;
}

.hub-hero-label {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
}

.hub-hero-num-row {
  text-align: center !important;
  margin: 0.4rem 0 !important;
}

.hub-hero-number {
  display: block !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  line-height: 1.15 !important;
  transition: opacity 0.15s ease !important;
}

.hub-hero-number:hover {
  text-decoration: underline !important;
  opacity: 0.9 !important;
}

.hub-hero-card .ficha-phone-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem 0.6rem !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: var(--muted-2) !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.hub-hero-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.6rem !important;
  margin-top: 0.5rem !important;
}

.hub-btn-call {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 0.75rem 1rem !important;
  text-align: center !important;
  border-radius: 10px !important;
  text-decoration: none !important;
}

.hub-btn-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 0.75rem !important;
  text-align: center !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
}

/* 2. Tarjeta WhatsApp Oficial */
.hub-wa-card {
  background: color-mix(in srgb, #25d366 5%, var(--bg)) !important;
  border: 1.5px solid rgba(37, 211, 102, 0.45) !important;
  border-radius: 16px !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
}

.hub-badge-wa {
  display: inline-flex !important;
  align-items: center !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
}

.hub-wa-label {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.hub-wa-num-row {
  text-align: center !important;
  margin: 0.2rem 0 !important;
}

.hub-wa-number {
  display: block !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #15803d !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.hub-wa-number:hover {
  text-decoration: underline !important;
}

.hub-wa-meta {
  font-size: 0.82rem !important;
  color: var(--muted-2) !important;
  margin: 0 !important;
  text-align: center !important;
}

.hub-wa-actions {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 0.5rem !important;
  margin-top: 0.25rem !important;
}

.hub-btn-wa {
  background: #25d366 !important;
  color: #ffffff !important;
  border-color: #25d366 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  padding: 0.7rem 0.8rem !important;
  border-radius: 10px !important;
  text-decoration: none !important;
}

.hub-btn-wa:hover {
  background: #20ba5a !important;
  border-color: #20ba5a !important;
}

/* 3. Panel de Departamentos y Líneas Directas (Columna Derecha) */
.hub-dept-panel {
  background: var(--bg) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

.hub-dept-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--line) !important;
}

.hub-dept-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.hub-dept-row {
  list-style: none !important;
  list-style-type: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem 1rem !important;
  padding: 0.85rem 1rem !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease !important;
}

.hub-dept-row:hover {
  border-color: var(--accent) !important;
  background: var(--bg-well) !important;
  transform: translateY(-1px) !important;
}

.hub-dept-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  min-width: 180px !important;
  flex: 1 !important;
}

.hub-dept-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
}

.hub-dept-sub {
  font-size: 0.82rem !important;
  color: var(--muted-2) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.hub-row-hours {
  font-size: 0.8rem !important;
  color: var(--muted-2) !important;
}

.hub-row-badge-free {
  display: inline-flex !important;
  align-items: center !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}

.hub-dept-num {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
}

.hub-dept-phone {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 6px !important;
  transition: color 0.15s ease !important;
}

.hub-dept-phone:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

.hub-dept-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.hub-dept-btn-call {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 8px !important;
}

.hub-dept-btn-copy {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
}

/* Copiado interactivo en 1 clic feedback */
.btn-copy,
.hub-btn-copy,
.hub-dept-btn-copy {
  cursor: pointer !important;
  user-select: none !important;
}

.btn-copy.is-copied,
.hub-btn-copy.is-copied,
.hub-dept-btn-copy.is-copied,
.is-copied {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35) !important;
}

/* 4. Fila inferior: Canales oficiales + Consejos */
.ficha-hub-bottom {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  gap: 1.5rem !important;
  margin-top: 1.75rem !important;
  padding-top: 1.75rem !important;
  border-top: 1px solid var(--line) !important;
}

.ficha-hub-card {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

.ficha-hub-card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.ficha-tips-card .ficha-tip {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Media query para móviles estrechos (< 600px) */
@media (max-width: 600px) {
  .hub-dept-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .hub-dept-num {
    text-align: center !important;
  }
  .hub-dept-phone {
    font-size: 1.5rem !important;
  }
  .hub-dept-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }
  .hub-dept-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hub-hero-number {
    font-size: 2.2rem !important;
  }
}

/* ==========================================================================
   STORE LOCATOR & INTERACTIVE MAP (SUCURSALES)
   ========================================================================== */
.store-locator-app {
  margin: 1.75rem 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.locator-toolbar {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line-strong, #e2e8f0);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.locator-gps-box {
  display: flex;
  align-items: center;
}

.btn-locator-near {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.85rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--accent, #1d9bf0);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(29, 155, 240, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-locator-near:hover {
  background: #1a8cd8;
  transform: translateY(-1px);
}

.btn-locator-near:active {
  transform: translateY(0);
}

.btn-locator-near.loading {
  opacity: 0.75;
  cursor: wait;
}

.locator-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0.85rem;
  align-items: flex-end;
}

.locator-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.locator-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.locator-select,
.locator-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 8px;
  background: var(--bg, #f8fafc);
  color: var(--ink, #0f172a);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.locator-select:focus,
.locator-input:focus {
  outline: none;
  border-color: var(--accent, #1d9bf0);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}

.locator-status-bar {
  background: var(--bg-soft, #f1f5f9);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 0.75rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink, #1e293b);
}

.locator-status-bar strong {
  color: var(--ink-strong, #0f172a);
}

.status-loading {
  color: var(--accent, #1d9bf0);
  font-weight: 600;
}

.status-success {
  color: #059669;
  font-weight: 600;
}

.status-warning {
  color: #d97706;
  font-weight: 600;
}

/* Grilla principal */
.locator-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Panel del mapa */
.locator-map-panel {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line-strong, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.locator-map-header {
  padding: 0.85rem 1.15rem;
  background: var(--bg-soft, #f8fafc);
  border-bottom: 1px solid var(--line, #e2e8f0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-header-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

.locator-count-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: var(--line, #e2e8f0);
  color: var(--muted, #475569);
}

.locator-map-canvas {
  width: 100%;
  height: 440px;
  background: #e5e7eb;
}

.locator-map-legend {
  padding: 0.65rem 1rem;
  background: var(--bg-soft, #f8fafc);
  border-top: 1px solid var(--line, #e2e8f0);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--muted, #475569);
}

.locator-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-user {
  background: #00ba7c;
  border: 2px solid #1d9bf0;
}

.dot-nearest {
  background: #00ba7c;
  box-shadow: 0 0 0 2px rgba(0, 186, 124, 0.3);
}

.dot-store {
  background: #0a0a0a;
  border: 1px solid #1d9bf0;
}

/* Panel de resultados */
.locator-results-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.locator-results-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0;
}

.locator-results-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 0.35rem;
}

/* Tarjeta de sucursal */
.store-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.store-card:hover {
  border-color: var(--accent, #1d9bf0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.store-card-nearest {
  border: 2px solid #00ba7c !important;
  background: linear-gradient(to bottom, var(--bg-card, #ffffff), var(--bg-soft, #f8fafc)) !important;
  box-shadow: 0 4px 16px rgba(0, 186, 124, 0.15) !important;
  position: relative;
}

.store-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.store-brand-tag {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--bg-soft, #f1f5f9);
  color: var(--ink, #1e293b);
  border: 1px solid var(--line, #cbd5e1);
}

.store-dist-badge {
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--mono, monospace);
  color: var(--muted, #475569);
  background: var(--bg-soft, #f1f5f9);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
}

.badge-nearest {
  background: #00ba7c !important;
  color: #ffffff !important;
}

.dist-icon {
  font-size: 0.9em;
}

.store-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.store-title a {
  color: var(--ink, #0f172a);
  text-decoration: none;
}

.store-title a:hover {
  color: var(--accent, #1d9bf0);
  text-decoration: underline;
}

.store-address {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

.store-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* Botón Google Maps */
.btn-gmaps {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.85rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-gmaps:hover {
  background: #1e293b !important;
  transform: translateY(-1px);
}

.store-card-nearest .btn-gmaps {
  background: #00ba7c !important;
}

.store-card-nearest .btn-gmaps:hover {
  background: #009f69 !important;
}

.store-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: var(--mono, monospace);
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: var(--bg-soft, #f1f5f9);
  color: var(--ink, #1e293b);
  border: 1px solid var(--line, #cbd5e1);
  text-decoration: none;
  transition: background 0.15s ease;
}

.store-call-btn:hover {
  background: var(--line, #e2e8f0);
}

.btn-store-detail {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.65rem;
  color: var(--muted, #64748b);
  text-decoration: none;
  border-radius: 6px;
  margin-left: auto;
}

.btn-store-detail:hover {
  color: var(--accent, #1d9bf0);
  text-decoration: underline;
}

.locator-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bg-soft, #f8fafc);
  border: 1px dashed var(--line, #cbd5e1);
  border-radius: 12px;
  color: var(--muted, #64748b);
}

.locator-empty-hint {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* Leaflet popup styling */
.map-popup-card {
  padding: 0.25rem 0.1rem;
  font-family: inherit;
}

.map-popup-brand {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1d9bf0;
  display: block;
}

.map-popup-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  display: block;
  margin: 0.15rem 0;
}

.map-popup-address {
  font-size: 0.82rem;
  color: #475569;
  margin: 0.2rem 0 0.5rem;
  line-height: 1.35;
}

.map-popup-dist {
  font-size: 0.8rem;
  color: #059669;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.map-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.btn-popup-gmaps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  background: #0f172a;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
}

.btn-popup-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  background: #f1f5f9;
  color: #0f172a !important;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  text-decoration: none;
}

/* Media queries responsivas */
@media (max-width: 860px) {
  .locator-main-grid {
    grid-template-columns: 1fr;
  }
  .locator-map-canvas {
    height: 320px;
  }
  .locator-filters {
    grid-template-columns: 1fr 1fr;
  }
  .locator-field-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .locator-filters {
    grid-template-columns: 1fr;
  }
  .locator-toolbar {
    padding: 1rem;
  }
  .btn-locator-near {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
  }
  .store-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-gmaps,
  .store-call-btn {
    width: 100%;
    justify-content: center;
  }
  .btn-store-detail {
    margin-left: 0;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .locator-toolbar {
    padding: 0.75rem;
  }
  .store-card {
    padding: 0.9rem;
  }
  .btn-locator-near {
    font-size: 0.88rem;
  }
}

/* ============================================================
   HOME SKIN v2 — una sola piel, IMEI compacto, sin bandas rotas
   ============================================================ */

/* IMEI: nunca más ancho que un número real (~15 dígitos) */
#imei-tool input[type="text"],
#imeiInput {
  max-width: 22rem;
  width: 100%;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
#imei-tool .actions {
  margin-top: 0.9rem;
}
#imei-tool {
  margin-top: 1rem;
  box-shadow: none;
}

/* Hero simple, sin foto full-bleed pelea */
.home-wrap .home-hero {
  width: auto !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  padding: 1.75rem 0 1.25rem !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
.home-wrap .home-hero::before {
  display: none !important;
  content: none !important;
}
.home-wrap .home-hero .home-split {
  width: auto !important;
  margin: 0 !important;
}
.home-wrap .home-hero h1 {
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
}
.home-wrap .home-hero .lead {
  max-width: 36rem;
  font-size: 1.05rem !important;
}

/* Ritmo vertical home */
.home-wrap {
  padding-bottom: 2.5rem;
}
.home-wrap .home-tools {
  margin-top: 2.5rem;
}
.home-wrap .home-tools + .home-tools {
  margin-top: 2.75rem;
}
.home-wrap .home-tools-title {
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--signal);
  font-size: 1.35rem;
}
.home-wrap .section-note {
  margin: 0 0 1rem !important;
  max-width: 40rem;
  color: var(--muted);
}

/* Cards home: mismo estilo en TODAS las secciones (incl. directorio) */
.home-wrap .hub-grid-premium,
.home-wrap .hub-grid-compact {
  gap: 0.75rem;
}
.home-wrap .hub-grid-premium .tool-card,
.home-wrap .hub-grid-compact .tool-card,
#directorio-home .tool-card {
  display: grid !important;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 0.6rem !important;
  row-gap: 0.15rem !important;
  align-content: center !important;
  min-height: 0 !important;
  padding: 1rem 0.85rem !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  border-top: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--ink) !important;
}
.home-wrap .hub-grid-premium .tool-card:hover,
.home-wrap .hub-grid-compact .tool-card:hover,
#directorio-home .tool-card:hover {
  background: var(--bg-soft) !important;
  transform: none !important;
}
.home-wrap .hub-grid-premium .tool-card .tool-num,
.home-wrap .hub-grid-compact .tool-card .tool-num,
#directorio-home .tool-card .tool-num {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  margin: 0.12rem 0 0 !important;
  color: var(--signal) !important;
  font-family: var(--mono) !important;
}
.home-wrap .hub-grid-premium .tool-card h3,
.home-wrap .hub-grid-compact .tool-card h3,
#directorio-home .tool-card h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}
.home-wrap .hub-grid-premium .tool-card p,
.home-wrap .hub-grid-compact .tool-card p,
#directorio-home .tool-card p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
}
.home-wrap .hub-grid-premium .tool-card .tool-go,
.home-wrap .hub-grid-compact .tool-card .tool-go,
#directorio-home .tool-card .tool-go {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  color: var(--accent) !important;
}

/* Matar bandas de color full-bleed: misma piel que el resto */
#directorio-home,
.home-tricks-band {
  width: auto !important;
  margin: 2.5rem 0 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border-top: 0 !important;
  border: 0 !important;
}
#directorio-home .home-tools-title,
#directorio-home .section-note {
  color: inherit !important;
}
#directorio-home .section-note {
  color: var(--muted) !important;
}
.home-tricks-heading p,
.home-tricks-links a > span:first-child {
  color: var(--signal) !important;
}
html[data-theme="dark"] .home-tricks-heading p,
html[data-theme="dark"] .home-tricks-links a > span:first-child {
  color: var(--signal) !important;
}
.home-tricks-links {
  border-top: 1px solid var(--line-strong) !important;
}
.home-tricks-links a {
  border-bottom: 1px solid var(--line) !important;
}
.home-tricks-links a:hover {
  background: var(--bg-soft) !important;
}

/* SEO / FAQ pie home */
.home-wrap .seo-block {
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-strong);
}
.home-wrap .seo-block h2 {
  margin: 0 0 0.9rem;
  font-size: 1.4rem;
}
.home-wrap .seo-block p {
  margin: 0 0 0.9rem;
  max-width: 40rem;
  line-height: 1.6;
}
.home-wrap .seo-block + .seo-block {
  margin-top: 2.5rem;
}
.home-wrap .faq-list {
  max-width: 40rem;
}
.home-wrap .faq-list details {
  margin: 0 0 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
body[data-section="inicio"] .site-footer {
  margin-top: 3rem;
}

/* ============================================================
   LAYOUT: gutters con padding (nada pegado al borde)
   ============================================================ */
.wrap,
.wrap-hub,
.site-header .wrap,
.site-footer .wrap,
main.wrap,
main.wrap.home-wrap,
.home-wrap {
  width: 100% !important;
  max-width: var(--max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  .wrap,
  .wrap-hub,
  .site-header .wrap,
  .site-footer .wrap,
  main.wrap,
  main.wrap.home-wrap,
  .home-wrap {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

/* Listas hub: aire interno real */
.hub-grid.hub-link-list .tool-card,
.hub-grid.hub-link-list .tool-card.dir-card {
  padding-left: 1.15rem !important;
  padding-right: 1.15rem !important;
}


/* Theme toggle icon via CSS — sin reescribir texto = sin parpadeo */
#themeToggle {
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--ink);
}
#themeToggle::before {
  content: "\263E"; /* moon — modo claro activo → ir a oscuro */
  font-size: 1.25rem;
  line-height: 1;
}
html[data-theme="dark"] #themeToggle::before {
  content: "\2609"; /* sun — modo oscuro activo → ir a claro */
}

/* Anti-parpadeo focus/tap en iconos y nav */
.icon-btn,
.icon-btn:hover,
.icon-btn:active,
.icon-btn:focus,
.header-actions .icon-btn,
.header-actions .icon-btn:hover,
.header-actions .icon-btn:active,
.header-actions .icon-btn:focus {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-color: transparent !important;
  transition: none !important;
  transform: none !important;
}
.icon-btn:focus-visible,
.header-actions .icon-btn:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px !important;
}
.nav-desktop a,
.nav-drawer a,
.nav-desktop a:hover,
.nav-desktop a:active,
.nav-desktop a:focus,
.nav-drawer a:hover,
.nav-drawer a:active,
.nav-drawer a:focus {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  background: transparent !important;
  transition: color 0s, border-color 0s !important;
}
.nav-desktop a:focus-visible,
.nav-drawer a:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   FACTORY POLISH — tipografía legible + acabado profesional
   ============================================================ */
html { font-size: 17px; }
@media (min-width: 900px) {
  html { font-size: 18px; }
}

body {
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}

h1, .home-hero h1, .tool-hero h1, .home-copy h1 {
  font-size: clamp(2.1rem, 4.2vw, 2.75rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

h2, .home-tools-title, .home-tricks-heading h2 {
  font-size: var(--fs-h2) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 750 !important;
}

.lead, .home-hero .lead, .home-copy .lead, .tool-hero .lead {
  font-size: var(--fs-lead) !important;
  line-height: 1.55 !important;
  max-width: 38rem;
  color: var(--muted-2);
}
/* Nav desktop unificado abajo */

.site-header {
  border-bottom: 1px solid var(--line) !important;
}
.header-row {
  min-height: 3.75rem !important;
}
.brand-text {
  font-size: 1.15rem !important;
  letter-spacing: -0.02em !important;
}

/* Cards / listas: acabado limpio, aire interno */
.hub-grid.hub-link-list {
  border-top: 1px solid var(--line) !important;
}
.hub-grid.hub-link-list .tool-card,
.hub-grid.hub-link-list .tool-card.dir-card {
  padding: 1.2rem 1.2rem !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.hub-grid.hub-link-list .tool-card h3,
.hub-grid.hub-link-list .tool-card.dir-card h3 {
  font-size: 1.12rem !important;
  font-weight: 700 !important;
}
.hub-grid.hub-link-list .tool-card p,
.hub-grid.hub-link-list .tool-card .dir-card-meta {
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
}

.home-wrap .hub-grid-premium .tool-card,
.home-wrap .hub-grid-compact .tool-card,
#directorio-home .tool-card {
  padding: 1.2rem 1.2rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
}

.panel-tool, #imei-tool.panel-tool {
  border-radius: 12px !important;
  border: 1px solid var(--line-strong) !important;
  padding: 1.5rem !important;
}
#imei-tool {
  border-top: 2px solid var(--accent) !important;
  box-shadow: none !important;
}
#imei-tool input[type="text"],
#imeiInput {
  max-width: 22rem;
  font-size: 1.15rem !important;
  min-height: 3.1rem !important;
}

.btn, .btn-primary, .btn-secondary {
  font-size: 1rem !important;
  font-weight: 650 !important;
  min-height: 2.85rem;
  padding: 0.7rem 1.25rem !important;
  border-radius: 9999px !important;
}

.home-paths a {
  padding: 1rem 1.1rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  font-size: 1.02rem !important;
}

.seo-block h2 { font-size: 1.45rem !important; }
.seo-block p, .faq-list { font-size: 1.05rem !important; line-height: 1.65 !important; }
.faq-list details summary {
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  padding: 0.35rem 0;
}

.site-footer {
  margin-top: 3.5rem !important;
  padding-top: 2.5rem !important;
  border-top: 1px solid var(--line) !important;
}
.site-footer a, .footer-grid a {
  font-size: 0.98rem !important;
}
.footer-meta {
  font-size: 0.9rem !important;
  color: var(--muted) !important;
}

/* Menos “manual de campo”: rayas gruesa → acento fino */
.home-wrap .home-tools-title {
  border-left-width: 3px !important;
  border-left-color: var(--accent) !important;
  padding-left: 0.85rem !important;
  margin-bottom: 1.15rem !important;
}
.tool-hero {
  border-top: 2px solid var(--accent) !important;
}

/* Ritmo de secciones */
.home-wrap .home-tools,
.home-wrap .home-tools + .home-tools,
#directorio-home,
.home-tricks-band {
  margin-top: 2.75rem !important;
}
main.wrap > .tool-hero + *,
main.wrap > header + section {
  margin-top: 1.75rem;
}

/* ============================================================
   SAAS TECH SHELL — sólida, nativa, firme
   ============================================================ */
:root {
  --radius: 10px;
  --radius-lg: 14px;
  --ease: 0ms;
  --shadow: 0 0 0 1px var(--line);
}

/* App chrome */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-theme="dark"] .site-header {
  background: rgba(0, 0, 0, 0.82) !important;
}
.header-row {
  min-height: 3.65rem !important;
  gap: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.brand-text { font-weight: 800 !important; letter-spacing: -0.03em !important; }
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex-shrink: 0 !important;
}

/* Nav desktop 4 pilares + dropdowns */
.nav-desktop {
  display: flex !important;
  gap: 0.35rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}
.nav-desktop .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-desktop .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  text-decoration: none !important;
  color: var(--muted) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  padding: 0.42rem 0.65rem !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  transition: color var(--ease), background var(--ease);
  line-height: 1.2 !important;
  cursor: pointer;
}
.nav-desktop .nav-link:hover {
  color: var(--ink) !important;
  background: var(--bg-soft) !important;
  text-decoration: none !important;
}
.nav-desktop .nav-link[aria-current="page"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-bottom-color: transparent !important;
}
.nav-desktop .nav-arrow {
  font-size: 0.68rem;
  opacity: 0.65;
  transition: transform 0.18s ease;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.nav-desktop .nav-item:hover .nav-arrow,
.nav-desktop .nav-item:focus-within .nav-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown flotante */
.nav-dropdown {
  display: none !important;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  z-index: 120;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-desktop .nav-item:hover .nav-dropdown,
.nav-desktop .nav-item:focus-within .nav-dropdown {
  display: flex !important;
}
.nav-dropdown a {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: background var(--ease), color var(--ease) !important;
  white-space: nowrap !important;
  border-bottom: none !important;
  min-height: auto !important;
}
.nav-dropdown a:hover {
  background: var(--bg-soft) !important;
  color: var(--accent) !important;
  text-decoration: none !important;
}
html[data-theme="dark"] .nav-dropdown {
  background: #11151a;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .nav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

/* Firm controls */
.btn, .btn-primary, .btn-secondary, button.btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  transition: none !important;
}
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
}
.btn-primary:hover { background: var(--accent-hover) !important; filter: none !important; }
.btn-secondary {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
}
input[type="text"], input[type="tel"], input[type="search"], select, textarea {
  border-radius: 10px !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--bg-elev) !important;
  font-size: 1.05rem !important;
  transition: none !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px !important;
  border-color: var(--accent) !important;
}

/* Surfaces tipo app */
.panel, .panel-tool, #imei-tool {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-elev) !important;
  padding: 1.5rem 1.65rem !important;
  box-sizing: border-box !important;
  margin-bottom: 1.5rem !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  .panel, .panel-tool, #imei-tool {
    padding: 1.25rem 1.15rem !important;
    margin-bottom: 1.15rem !important;
  }
}
#imei-tool { border-top: 2px solid var(--accent) !important; }

.hub-grid.hub-link-list .tool-card,
.hub-grid.hub-link-list .tool-card.dir-card {
  border-radius: 0 !important;
  transition: none !important;
}
.hub-grid.hub-link-list .tool-card:active,
.home-paths a:active,
.tool-card:active {
  opacity: 0.85;
}

.home-wrap .hub-grid-premium .tool-card,
.home-wrap .hub-grid-compact .tool-card {
  border-radius: 14px !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  transition: none !important;
}

/* Tipografía SaaS legible (refuerzo) */
html { font-size: 17px; }
@media (min-width: 900px) { html { font-size: 18px; } }
body { -webkit-font-smoothing: antialiased; }

/* ============================================================
   SITEWIDE POLISH — SaaS tech en home, hubs, fichas, footer
   ============================================================ */

/* Tipografía más legible en TODO el sitio */
.tool-card h3,
.dir-card h3,
.hub-grid.hub-link-list .tool-card h3 {
  font-size: 1.14rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}
.tool-card p,
.dir-card-meta,
.hub-grid.hub-link-list .tool-card p,
.feature-row p,
.section-note {
  font-size: 1.02rem !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
}
.tool-card .tool-num,
.hub-grid.hub-link-list .tool-card .tool-num,
.feature-n,
.path-index {
  color: var(--accent) !important;
  font-weight: 750 !important;
}

/* Cards unificadas (home + interiores) */
.tool-card,
.dir-card,
.deeplink-card,
.model-compare-item,
.ficha-panel,
.ficha-guide {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-elev) !important;
  box-shadow: none !important;
  transition: none !important;
}
.tool-card:hover,
.dir-card:hover,
.deeplink-card:hover,
.model-compare-item:hover {
  border-color: var(--line-strong) !important;
  background: var(--bg-soft) !important;
  transform: none !important;
}

/* Listas hub: filas firmes, no pegadas */
.hub-grid.hub-link-list {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--bg-elev) !important;
}
.hub-grid.hub-link-list .tool-card,
.hub-grid.hub-link-list .tool-card.dir-card {
  padding: 1.2rem 1.25rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: 4.25rem !important;
}
.hub-grid.hub-link-list .tool-card:last-child {
  border-bottom: 0 !important;
}

/* Home paths + feature strip */
.home-paths {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  border: 0 !important;
  margin: 1.5rem 0 2rem !important;
}
.home-paths a {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--bg-elev) !important;
  min-height: 3.75rem !important;
  padding: 1rem 1.15rem !important;
  font-size: 1.02rem !important;
}
.home-paths a + a { border-left: 1px solid var(--line) !important; }
@media (max-width: 720px) {
  .home-paths { grid-template-columns: 1fr !important; }
  .home-paths a + a { border-left: 1px solid var(--line) !important; }
}

.feature-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 1.5rem 0 2rem !important;
}
.feature-row li {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--bg-elev) !important;
  padding: 1.15rem 1.2rem !important;
  margin: 0 !important;
}
.feature-row li + li { border-left: 1px solid var(--line) !important; }
.feature-row strong { font-size: 1.05rem !important; }
@media (max-width: 720px) {
  .feature-row { grid-template-columns: 1fr !important; }
}

/* Directory summary bar */
.directory-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  border: 0 !important;
  margin: 0 0 1.75rem !important;
}
.directory-summary div {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--bg-elev) !important;
  padding: 1.15rem 1.2rem !important;
}
.directory-summary div + div { border-left: 1px solid var(--line) !important; }
.directory-summary strong {
  color: var(--accent) !important;
  font-size: 1.85rem !important;
  letter-spacing: -0.03em !important;
}
.directory-summary span { font-size: 0.98rem !important; }

/* Tool hero / breadcrumbs interiors */
.tool-hero {
  border-top: 0 !important;
  padding-top: 1.5rem !important;
  margin-top: 0.5rem !important;
}
.tool-hero h1 {
  font-size: clamp(1.9rem, 3.5vw, 2.4rem) !important;
  letter-spacing: -0.03em !important;
}
.breadcrumb, .tool-hero .breadcrumb {
  font-size: 0.95rem !important;
  margin-bottom: 0.85rem !important;
}

/* Controles más “app” */
.btn, .btn-primary, .btn-secondary {
  min-height: 3rem !important;
  padding: 0.75rem 1.35rem !important;
  font-size: 1.02rem !important;
  border-radius: 12px !important;
}
input[type="text"], input[type="tel"], input[type="search"], select {
  min-height: 3.1rem !important;
  font-size: 1.08rem !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
}
#imei-tool {
  padding: 1.6rem !important;
  border-radius: 16px !important;
}
#imei-tool .panel-head h2 { font-size: 1.35rem !important; }

/* FAQ más legible y consistente */
.faq-list, .seo-faq { max-width: 44rem !important; }
.faq-list details, .seo-faq details, details.faq-item {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--bg-elev) !important;
  margin: 0 0 0.65rem !important;
  padding: 0 !important;
  overflow: hidden;
  transition: border-color var(--ease);
}
.faq-list details + details, .seo-faq details + details {
  border-top: 1px solid var(--line) !important;
}
.faq-list summary, .seo-faq summary {
  padding: 1rem 1.15rem !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  cursor: pointer;
  list-style: none;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  color: var(--ink);
  transition: color var(--ease);
}
.faq-list summary::-webkit-details-marker,
.seo-faq summary::-webkit-details-marker {
  display: none !important;
}
.faq-list summary::after,
.seo-faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq-list details[open] summary::after,
.seo-faq details[open] summary::after {
  content: "−";
  color: var(--accent);
}
.faq-list summary:hover,
.seo-faq summary:hover {
  color: var(--accent);
}
.faq-list .faq-a, .seo-faq .faq-a, .seo-faq details p {
  padding: 0 1.15rem 1.1rem !important;
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
  color: var(--muted-2);
  margin: 0;
}

/* KPI Cards para casos de uso y guías */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  padding: 1.15rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  box-sizing: border-box;
}
html[data-theme="light"] .kpi-card {
  background: var(--bg-elev);
}
.kpi-num {
  font-family: var(--mono, monospace);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.kpi-label {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted-2);
}
.kpi-label strong {
  color: var(--ink);
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

/* Footer más compacto y tech */
.site-footer {
  margin-top: 3.5rem !important;
  padding: 2.5rem 0 1.5rem !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--line) !important;
}
.footer-grid {
  gap: 1.75rem !important;
}
.footer-heading, .site-footer .footer-heading {
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 0.75rem !important;
}
.site-footer a {
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
}
.footer-bottom {
  margin-top: 2rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--line) !important;
}

/* Fichas (telefonos/sucursales) */
.ficha-hero-phone, .ficha-phone, .dir-phone {
  border-radius: 12px !important;
  font-size: 1.15rem !important;
  font-weight: 750 !important;
}
.ficha-tips-card, .ficha-hub-card {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-elev) !important;
}

/* SEO prose */
.seo-block h2 { font-size: 1.5rem !important; letter-spacing: -0.02em !important; }
.seo-block p, .prose p, .prose li {
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
}

/* ============================================================
   DARK LOCATOR FIX + no flash blanco
   ============================================================ */
html, body {
  background-color: var(--bg) !important;
}

:root { --bg-card: var(--bg-elev); }
html[data-theme="light"] { --bg-card: var(--bg-elev); }
html[data-theme="dark"] { --bg-card: var(--bg-elev); }

/* Sucursales: nunca cards blancas con texto claro */
.locator-toolbar,
.locator-map-panel,
.locator-results-panel,
.store-card,
.store-card-nearest {
  background: var(--bg-elev) !important;
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.store-card-nearest {
  background: var(--bg-elev) !important;
  border: 2px solid var(--ok) !important;
}
.locator-map-header,
.locator-map-legend,
.locator-status-bar {
  background: var(--bg-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.locator-status-bar a,
.locator-status-bar strong {
  color: var(--accent) !important;
}
.locator-field label,
.locator-map-legend,
.locator-count-badge,
.store-address,
.store-dist-badge,
.map-header-title {
  color: var(--muted) !important;
}
.store-title,
.store-title a,
.map-header-title,
.locator-results-header h2 {
  color: var(--ink) !important;
}
.store-brand-tag,
.store-dist-badge,
.locator-count-badge {
  background: var(--bg-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.locator-select,
.locator-input {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
}
.locator-select:focus,
.locator-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.locator-map-canvas {
  background: var(--bg-well) !important;
  filter: none;
}
.locator-map-notice {
  padding: 1rem;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
}
.locator-map-notice p {
  margin: 0 0 .75rem;
}
html[data-theme="dark"] .locator-map-canvas {
  /* leaflet tiles stay light; soften the clash */
  background: #1a1a1a !important;
}
html[data-theme="dark"] .locator-map-canvas .leaflet-tile {
  filter: brightness(0.65) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.75);
}
.btn-gmaps {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
html[data-theme="dark"] .btn-gmaps {
  background: var(--accent) !important;
  color: #fff !important;
}
.store-card:hover {
  transform: none !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   COMPLETE POLISH 0.12.15 - chrome + hubs + fichas + android
   ============================================================ */

/* Logo siempre visible y perfectamente adaptado a modo claro/oscuro (sin bloque negro duro en modo claro) */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}
.brand-mark {
  width: 1.85rem !important;
  height: 1.85rem !important;
  flex: 0 0 auto !important;
  display: block !important;
  border-radius: 0.45rem !important;
  overflow: hidden;
}
.brand-text {
  font-weight: 800 !important;
  font-size: 1.22rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
}
.brand-text > span {
  color: var(--accent) !important;
}

/* Cabecera con ancho unificado: comparte el mismo ancho y alineación vertical que el cuerpo */
.site-header .wrap {
  width: 100% !important;
  max-width: var(--max) !important;
}

/* Heroes / hubs / android: mismo ritmo que home */
.tool-hero {
  padding: 1.75rem 0 1.25rem !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 1.75rem !important;
}
.tool-hero .breadcrumb {
  font-size: 0.92rem !important;
  color: var(--muted) !important;
  margin-bottom: 0.75rem !important;
}
.tool-hero .breadcrumb a { color: var(--muted) !important; }
.tool-hero .breadcrumb a:hover { color: var(--accent) !important; }
.tool-hero h1 {
  font-size: clamp(1.65rem, 2.4vw, 2.05rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  margin: 0 0 0.65rem !important;
}
.tool-hero .lead,
.lead {
  font-size: 1.08rem !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  max-width: 42rem !important;
}

.home-tools { margin: 0 0 2.25rem !important; }
.home-tools-title {
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.85rem !important;
}

/* SEO / cuerpo interior */
.seo-block {
  margin: 0 0 2rem !important;
  padding: 1.35rem 1.4rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--bg-elev) !important;
}
.seo-block h2 {
  font-size: 1.15rem !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.65rem !important;
}
.seo-block p,
.seo-block li {
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}
.seo-block p { color: var(--muted) !important; }

/* Fichas / directorio cards: padding firme */
.dir-card,
.ficha-panel {
  padding: 1.15rem 1.2rem !important;
}
.ficha-guide { padding: 1.25rem 1.3rem !important; }

/* Footer coherente */
.site-footer {
  margin-top: 3rem !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 2.25rem !important;
}
.footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Dark: heroes y seo sin flash */
html[data-theme="dark"] .tool-hero,
html[data-theme="dark"] .seo-block {
  background: var(--bg-elev) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .tool-hero {
  background: transparent !important;
  border-bottom-color: var(--line) !important;
}

@media (max-width: 720px) {
  .tool-hero { padding-top: 1.25rem !important; }
  .seo-block { padding: 1.1rem 1.05rem !important; }
  .brand-text { font-size: 1.1rem !important; }
}
/* === end COMPLETE POLISH === */

/* === COMPARADOR MÓVILES UX 0.12.18 === */
.cmp-hero { margin: 1.25rem 0 1rem; }
.cmp-hero h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.15rem);
  margin: 0.25rem 0 0.45rem;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.cmp-hero .lead { color: var(--muted); font-size: 1.05rem; max-width: 38rem; line-height: 1.5; }
.cmp-meta { font-size: 0.88rem; color: var(--muted); margin-top: 0.4rem; }
.cmp-howto {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}
.cmp-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  vertical-align: -0.1em;
}
.cmp-panel {
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  margin-bottom: 1.35rem;
}
.cmp-panel h2 { font-size: 1.15rem; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
.cmp-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.cmp-presets button {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-weight: 650;
  font-size: 0.92rem;
  cursor: pointer;
}
.cmp-presets button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cmp-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.cmp-slot label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.cmp-slot select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
}
.cmp-muted { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.cmp-empty {
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
}
.cmp-flow { display: flex; flex-direction: column; gap: 1.35rem; }
.cmp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}
.cmp-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  padding: 1rem 0.9rem 1.05rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.cmp-card img {
  width: 72px;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  margin-bottom: 0.25rem;
}
.cmp-card-img-real { width: 100%; }
.cmp-card-img-real img { width: 100%; height: 8.5rem; max-height: none; object-fit: contain; border-radius: 8px; }
.cmp-card-img small { display: block; color: var(--muted); font-size: .68rem; line-height: 1.3; }
.cmp-card-brand {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.cmp-card h3 { font-size: 1.05rem; margin: 0; letter-spacing: -0.02em; line-height: 1.2; }
.cmp-card-status { margin: .15rem 0; padding: .3rem .5rem; border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: .8rem; line-height: 1.4; }
.cmp-card-source { font-size: .83rem; font-weight: 700; }
.cmp-stars { display: inline-flex; align-items: center; gap: 0.1rem; color: #f5a524; font-size: 0.95rem; }
.cmp-star-empty, .cmp-star-half { opacity: 0.35; }
.cmp-stars-num { margin-left: 0.35rem; color: var(--muted); font-size: 0.85rem; font-weight: 650; }
.cmp-score-big {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.cmp-score-big span { font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.cmp-card-best { font-size: 0.9rem; color: var(--muted); line-height: 1.35; margin: 0.15rem 0 0.35rem; }
.cmp-card-link { font-size: 0.9rem; font-weight: 700; color: var(--accent); }
.cmp-verdict {
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 1.15rem 1.2rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
}
.cmp-verdict h2 { margin: 0 0 0.55rem; font-size: 1.2rem; letter-spacing: -0.02em; }
.cmp-verdict-lead { font-size: 1.05rem; line-height: 1.5; margin: 0 0 0.5rem; }
.cmp-verdict-note { color: var(--muted); margin: 0 0 0.75rem; line-height: 1.45; }
.cmp-highlight-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; list-style: none; padding: 0; margin: .8rem 0 1rem; }
.cmp-highlight-list li { padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); line-height: 1.45; }
.cmp-highlight-list strong { display: block; margin-bottom: .25rem; }
.cmp-highlight-list span { color: var(--muted); }
.cmp-facts { display: grid; gap: .5rem; }
.cmp-fact-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: .55rem; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; }
.cmp-fact-row > div { display: grid; gap: .35rem; min-width: 0; }
.cmp-fact-row span { overflow-wrap: anywhere; }
@media (max-width: 600px) { .cmp-fact-row { grid-template-columns: 1fr; } }
.cmp-verdict-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cmp-verdict-cats p { margin: 0; font-size: 0.9rem; }
.cmp-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.35rem;
}
.cmp-section h2 { font-size: 1.15rem; margin: 0 0 0.55rem; letter-spacing: -0.02em; }
.cmp-note { font-size: 0.92rem; margin: 0 0 0.75rem; }
.cmp-scores { display: flex; flex-direction: column; gap: 0.55rem; }
.cmp-score-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.55rem;
  align-items: center;
}
.cmp-score-label { font-size: 0.88rem; font-weight: 700; color: var(--muted); }
.cmp-score-bars { display: flex; flex-direction: column; gap: 0.28rem; }
.cmp-bar-wrap {
  position: relative;
  height: 1.35rem;
  border-radius: 6px;
  background: var(--bg-soft, var(--bg));
  border: 1px solid var(--line);
  overflow: hidden;
}
.cmp-bar {
  height: 100%;
  background: color-mix(in srgb, var(--accent) 55%, #7dd3fc);
  border-radius: 5px;
}
.cmp-bar-win .cmp-bar { background: var(--accent); }
.cmp-bar-val {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--ink);
}
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cmp-table th, .cmp-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.cmp-table th { background: var(--bg-soft, var(--bg)); font-size: 0.82rem; }
.cmp-table tr:last-child td { border-bottom: 0; }
.cmp-td-win { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }
.cmp-win-mark { color: var(--accent); font-weight: 800; }
.cmp-more-specs { margin-top: 0.75rem; }
.cmp-more-specs summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent);
  padding: 0.5rem 0;
  list-style: none;
}
.cmp-more-specs summary::-webkit-details-marker { display: none; }
.cmp-more-specs[open] summary { margin-bottom: 0.5rem; }
.cmp-proscons h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
.cmp-pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}
.cmp-pc-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  background: var(--bg-elev);
}
.cmp-pc-card h3 { margin: 0 0 0.55rem; font-size: 1rem; }
.cmp-pc-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.45rem 0 0.25rem; }
.cmp-pc-pro { color: #059669; }
.cmp-pc-con { color: #dc2626; }
.cmp-pc-card ul { margin: 0; padding-left: 1.1rem; }
.cmp-pc-card li { margin: 0.2rem 0; font-size: 0.92rem; line-height: 1.4; }
.cmp-source { font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 0; }
.cmp-method { margin: 1.75rem 0 1rem; }
@media (max-width: 820px) {
  .cmp-slots { grid-template-columns: 1fr; }
  .cmp-score-row { grid-template-columns: 1fr; gap: 0.25rem; }
}
html[data-theme="dark"] .cmp-verdict {
  background: color-mix(in srgb, var(--accent) 14%, #0a0a0a);
}
html[data-theme="dark"] .cmp-bar-wrap { background: #111; }
/* === end COMPARADOR UX === */
/* === PROFESSIONAL HAMBURGER 0.12.19 === */
.nav-burger {
  position: relative;
  width: 1.15rem;
  height: 0.85rem;
  display: block;
}
.nav-burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 140ms ease, top 180ms ease;
}
.nav-burger i:nth-child(1) { top: 0; }
.nav-burger i:nth-child(2) { top: calc(50% - 1px); }
.nav-burger i:nth-child(3) { top: calc(100% - 2px); }
#navToggle[aria-expanded="true"] .nav-burger i:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
#navToggle[aria-expanded="true"] .nav-burger i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
#navToggle[aria-expanded="true"] .nav-burger i:nth-child(3) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.nav-drawer.open ~ .nav-scrim,
body.nav-open .nav-scrim:not([hidden]),
.nav-scrim:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
/* scrim is BEFORE drawer in DOM — when open show it */
body.nav-open .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  display: block !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(20.5rem, 88vw);
  max-width: 100%;
  border: 0 !important;
  padding: 0 !important;
  background: transparent;
  transform: translateX(105%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.nav-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
}
.nav-drawer-panel {
  height: 100%;
  background: var(--bg-elev, var(--bg));
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 1.15rem 1.25rem 0.85rem;
  background: color-mix(in srgb, var(--bg-elev, var(--bg)) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-drawer-kicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.65rem 1.5rem;
}
.nav-drawer a,
.nav-drawer-nav a {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none !important;
  color: var(--ink) !important;
  font-weight: 650 !important;
  font-size: 1.05rem !important;
  padding: 0.9rem 0.85rem !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 10px !important;
  min-height: 48px;
  transition: background 120ms ease, color 120ms ease;
}
.nav-drawer a:hover,
.nav-drawer-nav a:hover {
  background: var(--bg-soft, var(--bg)) !important;
  color: var(--accent) !important;
}
.nav-drawer a[aria-current="page"],
.nav-drawer-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: var(--accent) !important;
}

body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* Only show toggle / panel behavior under breakpoint — desktop keeps drawer off-screen unused */
@media (min-width: 821px) {
  .nav-toggle { display: none !important; }
  .nav-scrim { display: none !important; }
  .nav-drawer {
    display: none !important;
    transform: none;
    pointer-events: none;
  }
}
@media (max-width: 820px) {
  .nav-desktop { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
}

html[data-theme="dark"] .nav-drawer-panel {
  background: #0a0a0a;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .nav-scrim {
  background: rgba(0, 0, 0, 0.62);
}
/* === end PROFESSIONAL HAMBURGER === */


/* === HAMBURGER Z-FIX 0.12.20 === */
.nav-scrim {
  z-index: 400 !important;
}
.nav-drawer {
  z-index: 410 !important;
  /* when closed, fully hide so nothing peeks under header */
}
.nav-drawer:not(.open) {
  visibility: hidden;
  pointer-events: none !important;
}
.nav-drawer.open {
  visibility: visible;
}
body.nav-open .site-header {
  /* keep header below overlay */
  z-index: 50 !important;
}
/* === end HAMBURGER Z-FIX === */
/* === RESPONSIVE 100% + MENU RICH 0.12.21 === */

/* Kill horizontal scroll site-wide */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
.site-header, .site-footer, main, .wrap, .home-wrap {
  max-width: 100%;
}

/* Richer drawer */
.nav-drawer-panel {
  background: var(--bg-elev, #fff) !important;
}
.nav-drawer-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.9rem !important;
}
.nav-drawer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}
.nav-drawer-brand .brand-mark {
  width: 1.55rem !important;
  height: 1.55rem !important;
}
.nav-drawer-brand .brand-text > span { color: var(--accent); }
.nav-drawer-close {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.nav-drawer-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.nav-drawer-kicker { display: none !important; }
.nav-drawer-section {
  margin: 0.85rem 0.85rem 0.35rem;
  padding: 0.35rem 0 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-drawer-section:first-child { margin-top: 0.35rem; }
.nav-drawer-nav a {
  position: relative;
  padding-right: 2rem !important;
}
.nav-drawer-nav a::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--line-strong, var(--line));
  border-bottom: 2px solid var(--line-strong, var(--line));
  transform: translateY(-60%) rotate(-45deg);
  opacity: 0.7;
}
.nav-drawer-nav a[aria-current="page"]::after {
  border-color: var(--accent);
}
.nav-drawer-foot {
  margin-top: auto;
  padding: 0.85rem 1rem 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- 380px and below: phone-first ---- */
@media (max-width: 380px) {
  .wrap,
  .wrap-hub,
  .site-header .wrap,
  .site-footer .wrap,
  main.wrap,
  main.wrap.home-wrap,
  .home-wrap {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .header-row { min-height: 3.15rem !important; gap: 0.45rem !important; }
  .brand-text { font-size: 1.05rem !important; }
  .brand-mark { width: 1.55rem !important; height: 1.55rem !important; }
  .icon-btn { width: 2.35rem !important; height: 2.35rem !important; }

  .home-wrap .home-hero { padding: 1.15rem 0 0.85rem !important; }
  .home-wrap .home-hero h1,
  .home-hero h1,
  .tool-hero h1 {
    font-size: clamp(1.55rem, 8.5vw, 1.95rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    word-break: break-word;
  }
  .home-wrap .home-hero .lead,
  .tool-hero .lead,
  .lead {
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
  }
  .home-eyebrow { font-size: 0.78rem !important; }

  .home-paths {
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
  }

  #imei-tool input[type="text"],
  #imeiInput {
    max-width: 100% !important;
    font-size: 1rem !important;
  }
  #imei-tool .actions,
  .actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #imei-tool .actions .btn,
  .actions .btn {
    width: 100%;
  }

  .hub-grid,
  .hub-grid.hub-link-list,
  .hub-grid-premium {
    grid-template-columns: 1fr !important;
  }

  .model-list { grid-template-columns: 1fr !important; }
  .model-controls { grid-template-columns: 1fr !important; }
  .model-section-head {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .directory-summary {
    grid-template-columns: 1fr !important;
  }
  .directory-summary div + div {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
  }

  .cmp-slots { grid-template-columns: 1fr !important; }
  .cmp-cards { grid-template-columns: 1fr !important; }
  .cmp-pc-grid { grid-template-columns: 1fr !important; }
  .cmp-score-row { grid-template-columns: 1fr !important; }
  .cmp-table { font-size: 0.85rem !important; }
  .cmp-table th, .cmp-table td { padding: 0.5rem 0.45rem !important; }

  .locator-map-canvas,
  .leaflet-container {
    min-height: 220px !important;
    height: 240px !important;
  }

  .panel, .seo-block, .ficha-panel {
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
  }

  .choose-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .choose-jump a {
    font-size: 0.85rem;
  }

  .nav-drawer {
    width: min(100% - 2.5rem, 20rem) !important;
  }
}

/* ---- tablet-ish squeeze ---- */
@media (max-width: 720px) {
  .hero-split,
  .home-split {
    grid-template-columns: 1fr !important;
  }
  .model-list { grid-template-columns: 1fr !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .cmp-table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* Safety: any minmax grids that force overflow */
@media (max-width: 380px) {
  [class*="grid"],
  .dir-tools-hub,
  .feature-row,
  .home-paths {
    min-width: 0 !important;
  }
  .tool-card, .dir-card, .deeplink-card {
    min-width: 0 !important;
  }
}
/* === REPAIR GUIDES DIAGRAMS & VIDEO CARDS === */
.guide-schematic {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.guide-schematic-svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}
.guide-schematic-caption {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
  margin: 0;
}
/* Video panels & responsive embeds */
.panel.video-panel {
  margin: 1.5rem 0;
}
.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.video-embed-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-takeaways {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}
.video-takeaways strong {
  color: var(--ink);
}
/* === end RESPONSIVE 100% === */

/* === Model Specs & Device Tricks === */
.model-specs {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.model-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
}
.model-section-head h2 {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
}
.model-section-head span {
  font-size: 0.85rem;
  color: var(--muted);
  font-family: var(--mono);
}
.model-specs dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.model-specs dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.model-specs dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}

/* Model Tricks Section */
.model-tricks-section {
  margin: 2.5rem 0;
}
.model-tricks-section .section-lead {
  font-size: 1.05rem;
  color: var(--muted-2);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.model-tricks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.model-trick-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.model-trick-card:hover {
  border-color: var(--line-strong);
}
.model-trick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.model-trick-num {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
}
.model-trick-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--muted);
}
.model-trick-card h3 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--ink);
  line-height: 1.35;
}
.model-trick-card > p {
  font-size: 0.925rem;
  color: var(--muted-2);
  line-height: 1.55;
  margin: 0;
}
.model-trick-steps {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line);
}
.model-trick-steps strong {
  display: block;
  font-size: 0.825rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.model-trick-steps ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--muted-2);
  line-height: 1.5;
}
.model-trick-steps li {
  margin-bottom: 0.4rem;
}
.model-trick-steps li:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .model-tricks-grid {
    grid-template-columns: 1fr;
  }
  .model-specs dl {
    grid-template-columns: 1fr;
  }
}

/* Shared spacing and footer — 0.12.23 */
main :is(h1, h2, h3) { text-wrap: balance; overflow-wrap: anywhere; }
main :is(.panel, .seo-block, .ficha-panel, .ficha-guide, .model-compare-item, .model-feature-card, .dir-card, .tool-card, .deeplink-card) {
  min-width: 0;
  overflow-wrap: anywhere;
}
main :is(.panel, .seo-block, .ficha-panel, .ficha-guide) {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
main :is(.panel, .seo-block, .ficha-panel, .ficha-guide) > :first-child { margin-top: 0; }
main :is(.panel, .seo-block, .ficha-panel, .ficha-guide) > :last-child { margin-bottom: 0; }
main :is(.panel, .seo-block, .ficha-panel, .ficha-guide) h2 { line-height: 1.3; }
.model-compare-item { padding: 1.4rem; }
.model-feature-card { padding: .85rem; }
.model-compare-item dl > div, .model-specs dl > div { padding-block: .75rem; }
.model-specs dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.model-specs :is(dt, dd), .model-compare-item :is(dt, dd) { overflow-wrap: anywhere; }
.model-section-head { flex-wrap: wrap; row-gap: .6rem; }
.section-note { margin-block: 1rem; }
.seo-block { scroll-margin-top: 6rem; }

.site-footer {
  margin-top: clamp(3rem, 6vw, 5rem) !important;
  padding: 2.5rem 0 0 !important;
  background: var(--bg-elev) !important;
}
.site-footer .footer-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 2rem;
}
.site-footer .footer-about { min-width: 0; }
.site-footer .footer-brand { gap: .6rem; }
.site-footer .footer-brand .brand-mark { width: 2rem; height: 2rem; flex: 0 0 2rem; }
.site-footer .footer-brand .brand-text { font-size: 1.25rem; }
.site-footer .footer-tagline { max-width: none; margin: .6rem 0 0; font-size: .9rem; line-height: 1.6; }
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  padding-top: 1.5rem;
  padding-bottom: 1.75rem;
}
.site-footer .footer-col { min-width: 0; }
.site-footer .footer-heading {
  font: 700 .88rem/1.5 var(--font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  margin: 0 0 .85rem !important;
}
.site-footer .footer-nav { gap: .25rem; }
.site-footer .footer-nav a {
  padding-block: .35rem;
  font-size: .9rem !important;
  line-height: 1.5 !important;
  color: var(--muted-2);
  overflow-wrap: anywhere;
}
.site-footer a:hover { color: var(--accent); }
.site-footer .footer-social { gap: .4rem; }
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .35rem .65rem;
  font-size: .8rem !important;
  line-height: 1.5 !important;
  background: var(--bg);
  border-radius: 8px;
}
.site-footer .footer-more { padding: 0; border-block: 1px solid var(--line); }
.site-footer .footer-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  color: var(--muted-2);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.site-footer .footer-more > summary::-webkit-details-marker { display: none; }
.site-footer .footer-more > summary span { font-size: 1.35rem; line-height: 1; }
.site-footer .footer-more[open] > summary span { transform: rotate(45deg); }
.site-footer .footer-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 1rem 0 1.5rem; }
.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  border: 0 !important;
  margin-top: 0 !important;
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem;
  font-size: .8rem;
}
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer .footer-legal a { display: inline-block; padding-block: .4rem; font-size: .8rem !important; line-height: 1.5 !important; }
@media (max-width: 760px) {
  .site-footer .footer-intro { align-items: flex-start; flex-direction: column; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem !important; }
  .site-footer .footer-more-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 460px) {
  .model-specs dl { grid-template-columns: minmax(0, 1fr); }
  .site-footer .footer-grid { gap: 1.5rem 1rem !important; }
  .site-footer .footer-nav a { min-height: 2.75rem; display: flex; align-items: center; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* One roomy page width; prose keeps a comfortable line length. */
.tool-hero, .choose-hero, .model-specs, .branch-detail,
main > .panel:not(.panel-tool), main > .conclusion { max-width: 100%; }
main.prose > :is(p, ul, ol), .panel > :is(p, ul, ol) { max-width: 72ch; }
.phone-content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: var(--section-gap); }
.phone-content-grid > section { min-width: 0; max-width: 100%; margin: 0 !important; }
@media (min-width: 1100px) {
  .phone-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 2rem; }
}
@media (min-width: 1200px) {
  .hub-main-grid.hub-split { grid-template-columns: minmax(320px, .85fr) minmax(0, 2fr) !important; }
  .hub-dept-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .hub-dept-row { min-width: 0; align-content: start; }
  .hub-dept-info { min-width: 0 !important; flex-basis: 100% !important; }
}
/* Product photography and official operator identities — v0.12.25 */
.home-wrap .home-entry .home-split { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center; gap: clamp(1.5rem, 4vw, 4rem) !important; }
.home-device-showcase { min-width: 0; }
.home-device-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.home-device { display: flex; flex-direction: column; gap: .65rem; min-width: 0; color: var(--ink); font-size: .78rem; line-height: 1.4; }
.home-device img { display: block; width: 100%; aspect-ratio: 1; height: auto; padding: 0; object-fit: contain; border-radius: 0; background: transparent; }
.home-device span { font-weight: 650; }
.home-device-showcase > p { margin: 1rem 0 0; color: var(--muted); font-size: .75rem; }
.model-photo-choice { margin: 0 0 1rem; }
.model-photo-choice img { height: 12rem; padding: 0; background: transparent; }
.brand-model-gallery { margin: 1.5rem 0 2rem; }
.phone-brand-hero { display: flow-root; }
.operator-logo { float: right; display: grid; place-items: center; gap: .65rem; width: 13rem; margin: 0 0 1rem 2rem; padding: 1.4rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.operator-logo img { display: block; width: auto; max-width: 100%; height: 4rem; object-fit: contain; }
.operator-logo figcaption { color: #454b53; font-size: .75rem; }
.operator-logo figcaption a { color: #006bac; }
@media (max-width: 1000px) {
  .home-wrap .home-entry .home-split { grid-template-columns: minmax(0, 1fr) !important; }

}
@media (max-width: 520px) {
  .home-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  .operator-logo { float: none; width: fit-content; min-width: 9rem; margin: 0 0 1rem; padding: 1rem; }
  .operator-logo img { max-width: 9rem; height: 3rem; }
}

.choose-row { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); align-items: start; }
.choose-row .model-photo-choice { margin: 0; min-width: 0; }
@media (min-width: 641px) and (max-width: 1000px) {
  .choose-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choose-row .choose-model { grid-column: auto; border: 0; padding: 0; }
}
@media (max-width: 640px) {
  .choose-row { grid-template-columns: minmax(0, 1fr); }
}

/* Cutout photography belongs to the page surface, without inset picture boxes. */
.home-device-showcase { padding: 1.1rem 0; border-block: 1px solid var(--line); }
.home-device-grid { gap: clamp(.7rem, 1.5vw, 1.5rem); align-items: start; }
.home-device { gap: .85rem; text-align: center; }
.home-device span { display: block; min-height: 2.8em; font-size: .8rem; line-height: 1.4; text-wrap: balance; }
.home-device-showcase > p { margin-top: 1rem; text-align: center; line-height: 1.6; }
.home-device:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 6px; }
.model-photo { border: 0; border-radius: 0; background: transparent; }
.model-photo img { background: transparent; object-fit: contain; padding: 0; }
.model-photo figcaption { padding: .65rem .2rem 0; font-size: .7rem; line-height: 1.5; color: var(--muted); }
.model-photo-feature img { height: 12rem; }
.model-photo-compare img, .cmp-card-img-real img { height: 12rem; border-radius: 0; background: transparent; }
.model-photo-detail { max-width: 30rem; }
.model-feature-card { display: flex; flex-direction: column; }
.model-feature-card .model-photo { flex: 1; margin-bottom: .85rem; }
.operator-logo { border: 0; border-radius: 0; background: transparent; }
.operator-logo figcaption { color: var(--muted); }
.operator-logo figcaption a { color: var(--accent); }
@media (max-width: 520px) {
  .home-device-showcase { padding: 1rem 0; }
  .home-device-grid { gap: 1rem .85rem; }
  .model-photo-feature img { height: 10rem; }
}

.home-device img, .model-photo img, .cmp-card-img-real img { transform: scale(var(--photo-scale, 1)); transform-origin: center; }

/* Shared product framing: fit the visible phone, including assets with transparent margins. */
.product-visual { position: relative; display: block; width: min(100%, 17rem); aspect-ratio: 1; margin: 0 auto; overflow: hidden; flex: none; }
.product-visual > img { position: absolute; display: block; width: var(--product-w, 84%) !important; height: var(--product-h, 84%) !important; left: var(--product-x, 8%); top: var(--product-y, 8%); max-width: none !important; max-height: none; padding: 0 !important; margin: 0; object-fit: contain; transform: none !important; background: transparent; border-radius: 0; }
.model-photo-detail .product-visual { width: min(100%, 25rem); }
.model-photo-choice .product-visual { width: min(100%, 12rem); }
.model-photo figcaption { min-height: 3em; }
.model-photo-compare figcaption { min-height: 4.5em; box-sizing: content-box; }
.product-visual-pending { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; color: var(--muted); text-align: center; }
.product-visual-pending small { max-width: 12rem; font-size: .75rem; }
.partner-mark { display: inline-flex; align-items: center; justify-content: center; width: 7rem; height: 2.5rem; flex: none; }
.partner-mark img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-mark-icon img, .operator-logo .partner-mark-icon img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.topic-brand { margin: 0 0 1.3rem; }
.partner-mark-mono img { filter: brightness(0); }
html[data-theme="dark"] .partner-mark-mono img { filter: brightness(0) invert(1); }
.partner-mark-surface-light img { background: #fff; border-radius: .25rem; }
.partner-mark-surface-dark img { background: #17232d; border-radius: .25rem; }
/* A shortcut logo occupies the existing leading icon column, never an extra row. */
.tool-card[data-card-brand] > .tool-num { display: none; }
.tool-card[data-card-brand] > .card-brand { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start; justify-self: center; width: 2.25rem; height: 2.25rem; margin: .1rem 0 0; }
.tool-card[data-card-brand] > h3 { grid-column: 2 !important; grid-row: 1 !important; }
.tool-card[data-card-brand] > p { grid-column: 2 !important; grid-row: 2 !important; }
.brand-wordmark { display: inline-block; max-width: 12rem; font-size: .9rem; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.operator-logo .partner-mark { width: 10rem; height: 4rem; }
.operator-logo .partner-mark img { max-width: 100%; max-height: 100%; height: auto; }
.dir-card-head { min-width: 0; flex-wrap: wrap; }
.dir-card-head .partner-mark { width: 5rem; height: 2rem; }
.model-row > a { display: flex; align-items: center; gap: 1rem; width: 100%; min-width: 0; }
.model-row .product-visual { width: 5.5rem; margin: 0; }
.model-row-copy { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.model-row-copy strong { overflow-wrap: anywhere; }
.model-brand-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; }
.model-brand-cards .dir-card-simple { display: flex !important; flex-direction: column; align-items: stretch; justify-content: start; gap: .8rem; width: auto; min-width: 0; padding: 1.2rem !important; }
.model-brand-cards .dir-card-simple .product-visual { width: min(100%, 12rem); }
.model-brand-cards .dir-card-simple .dir-card-head { flex-direction: column; align-items: start; }
.cmp-card-img .product-visual { width: min(100%, 15rem); }
@media (max-width: 900px) { .model-brand-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) {
  .model-brand-cards { grid-template-columns: minmax(0, 1fr) !important; }
  .model-row .product-visual { width: 4.5rem; }
  .model-row > a { gap: .65rem; }
}

.cmp-card-img { width: 100%; min-height: 15rem; }
.cmp-card-img img { display: block; width: 100%; height: 12rem; object-fit: contain; background: transparent; }
.cmp-card-img small { min-height: 2.6em; }

/* Shared page-title scale and brand imagery rhythm — 0.12.33 */
html body main :is(h1, .tool-hero h1, .home-hero h1, .home-wrap .home-hero h1, .home-copy h1, .hero h1, .hero-copy h1, .prose h1, .cmp-hero h1, .choose-hero h1, .tricks-hero h1, .trick-article-hero h1) {
  max-width: 34ch !important;
  margin: 0 0 .8rem !important;
  font-size: clamp(2.1rem, 3.3vw, 3rem) !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: -.015em !important;
  text-align: start;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

@media (max-width: 699px) {
  html body main :is(h1, .tool-hero h1, .home-hero h1, .home-wrap .home-hero h1, .home-copy h1, .hero h1, .hero-copy h1, .prose h1, .cmp-hero h1, .choose-hero h1, .tricks-hero h1, .trick-article-hero h1) {
    font-size: clamp(1.9rem, 5vw, 2.4rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.012em !important;
  }
}

@media (max-width: 380px) {
  html body main :is(h1, .tool-hero h1, .home-hero h1, .home-wrap .home-hero h1, .home-copy h1, .hero h1, .hero-copy h1, .prose h1, .cmp-hero h1, .choose-hero h1, .tricks-hero h1, .trick-article-hero h1) {
    font-size: clamp(1.75rem, 8vw, 1.9rem) !important;
  }
}

/* Editorial product photography for the five recovered guide pages — 0.12.35 */
.legacy-guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
}
.legacy-guide-hero-copy { min-width: 0; max-width: 52rem; }
.legacy-guide-hero-copy h1 { max-width: 25ch; }
.legacy-guide-hero-visual { min-width: 0; margin: 0; }
.legacy-guide-hero-stage {
  position: relative;
  display: grid;
  min-height: 21rem;
  aspect-ratio: 1.12;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-strong);
  border-radius: 1.5rem;
  background:
    radial-gradient(ellipse at 50% 56%, color-mix(in srgb, var(--guide-image-accent, var(--accent)) 18%, transparent), transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--guide-image-accent, var(--accent)) 7%, var(--surface)), var(--bg-elev));
}
.legacy-guide-hero-stage::before,
.legacy-guide-hero-stage::after {
  position: absolute;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--guide-image-accent, var(--accent)) 16%, transparent);
  border-radius: 50%;
  content: "";
}
.legacy-guide-hero-stage::after { width: 88%; opacity: .45; }
.legacy-guide-hero-stage .product-visual { z-index: 1; width: min(80%, 24rem); }
.legacy-guide-hero-label {
  position: absolute;
  z-index: 2;
  top: .9rem;
  left: .9rem;
  padding: .42rem .68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, var(--guide-image-accent, var(--accent)) 10%);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}
.legacy-guide-hero-visual figcaption { display: grid; gap: .2rem; margin: .65rem .15rem 0; color: var(--muted); }
.legacy-guide-photo-caption { color: var(--ink); font-size: .78rem; font-weight: 650; line-height: 1.4; }
.legacy-guide-hero-visual figcaption small { font-size: .72rem; line-height: 1.45; }
.legacy-guide-hero-visual figcaption a { color: var(--accent); }
@media (max-width: 760px) {
  .legacy-guide-hero { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .legacy-guide-hero-stage { min-height: 0; aspect-ratio: 1.28; border-radius: 1.2rem; }
  .legacy-guide-hero-stage .product-visual { width: min(72%, 19rem); }
}
@media (max-width: 380px) {
  .legacy-guide-hero-stage { aspect-ratio: 1.36; }
  .legacy-guide-hero-label { top: .7rem; left: .7rem; font-size: .68rem; }
}

.tool-hero > .section-note { margin-block: .75rem .5rem; }
.topic-brand { display: flex; align-items: center; margin: 0 0 .75rem; }
.topic-brand .partner-mark,
.tool-card[data-card-brand] > .card-brand {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: .38rem;
  border: 1px solid color-mix(in srgb, var(--mark-tone, var(--accent)) 24%, var(--line));
  border-radius: .85rem;
  background: color-mix(in srgb, var(--mark-tone, var(--accent)) 11%, var(--bg-elev));
}
.topic-brand .partner-mark img,
.tool-card[data-card-brand] > .card-brand img {
  display: block;
  width: 1.8rem !important;
  height: 1.8rem !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.tool-card[data-card-brand] {
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: .75rem;
  row-gap: .45rem;
}
.tool-card[data-card-brand] > .card-brand { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start; justify-self: center; margin: .05rem 0 0; }
.tool-card[data-card-brand] > h3 { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; }
.tool-card[data-card-brand] > p { grid-column: 2 !important; grid-row: 2 !important; min-width: 0; }
.tool-card[data-card-brand] > .tool-go { grid-column: 3 !important; grid-row: 1 / span 2 !important; }
.hub-grid-premium .tool-card[data-card-brand] { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-rows: auto auto; }

[data-card-brand="whatsapp"], [data-topic-brand="whatsapp"] { --mark-tone: #25d366; }
[data-card-brand="telegram"], [data-topic-brand="telegram"] { --mark-tone: #229ed9; }
[data-card-brand="xiaomi"], [data-topic-brand="xiaomi"] { --mark-tone: #ff6900; }
[data-card-brand="youtube"], [data-topic-brand="youtube"] { --mark-tone: #ff0033; }
[data-card-brand="cloudflare"], [data-topic-brand="cloudflare"] { --mark-tone: #f38020; }
[data-card-brand="protonvpn"], [data-topic-brand="protonvpn"] { --mark-tone: #6d4aff; }
[data-card-brand="nordvpn"], [data-topic-brand="nordvpn"] { --mark-tone: #4687ff; }
[data-card-brand="surfshark"], [data-topic-brand="surfshark"] { --mark-tone: #00a9e0; }
[data-card-brand="openai"], [data-topic-brand="openai"] { --mark-tone: #55766e; }

@media (max-width: 560px) {
  .tool-card[data-card-brand] { grid-template-columns: 2.75rem minmax(0, 1fr) 1.2rem; column-gap: .55rem; }
  .tool-card[data-card-brand] > .card-brand { justify-self: start; }
}