/* ═══════════════════════════════════════════════════
   guias.css — Guías (índice y artículos)
   Reuses the site tokens from reset.css; nav/footer come from layout/components.
   ═══════════════════════════════════════════════════ */

.guide-page {
  background: var(--deep-bg);
  -webkit-tap-highlight-color: transparent;
}
.guide-page .site-footer { margin-top: var(--space-16); }

/* ── Nav (same pattern as the calculator) ───────────── */
.guide-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.guide-nav-back {
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.guide-nav-cta { padding: 0.5em 1.1em; }
@media (hover: hover) and (pointer: fine) {
  .guide-nav-back:hover { color: var(--text-primary); }
}
@media (max-width: 560px) {
  .guide-nav-back { display: none; }
}

/* ── Header ─────────────────────────────────────────── */
.guide-hero {
  padding-top: calc(var(--nav-h) + var(--space-12));
  padding-bottom: var(--space-8);
}
.guide-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  font-size: var(--text-sm);
  color: var(--text-muted);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}
.guide-crumbs li + li::before { content: "/"; margin-right: 0.4em; opacity: 0.5; }
.guide-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-light); }
.guide-crumbs [aria-current] { color: var(--text-primary); }

.guide-title {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: var(--space-4) 0 var(--space-5);
  max-width: 15.5em; /* room for a short question on one line; em keeps the fallback font from rewrapping */
}
.guide-lead {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 42.3em; /* ≈62ch in Satoshi */
}
.guide-meta {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── Index: card grid ───────────────────────────────── */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}
.guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.guide-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 640;
  object-fit: cover;
}
.guide-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.guide-card-tag { font-size: var(--text-xs); color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }
.guide-card-title { font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }
.guide-card-text { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.guide-card-more { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover { border-color: var(--border-light); transform: translateY(-3px); }
}
.guide-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Article layout ─────────────────────────────────── */
.guide-layout {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 1000px) {
  .guide-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: start;
  }
  .guide-figure { position: sticky; top: calc(var(--nav-h) + var(--space-6)); order: 2; }
}

.guide-figure { margin: 0; }
.guide-figure-link { display: block; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); }
.guide-figure img { display: block; width: 100%; height: auto; }
.guide-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.guide-figure figcaption a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 999px) {
  .guide-figure { max-width: 520px; }
}

/* ── Article body ───────────────────────────────────── */
.guide-body { max-width: 46.4em; /* ≈68ch in Satoshi */ }
.guide-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.65rem); /* section titles fit the reading column on one line */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: var(--space-12) 0 var(--space-4);
}
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-2);
}
.guide-body p,
.guide-body li {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-secondary);
}
.guide-body p + p { margin-top: var(--space-4); }
.guide-body ul,
.guide-body ol { padding-left: 1.3em; margin: var(--space-3) 0; }
.guide-body li + li { margin-top: var(--space-2); }
.guide-body strong { color: var(--text-primary); }
.guide-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Quick summary box */
.guide-summary {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.guide-summary h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.guide-summary ul { margin: 0; }

/* Numbered steps */
.guide-steps { list-style: none; padding: 0 !important; counter-reset: step; }
.guide-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-top: var(--space-5);
}
.guide-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #050507;
  font-weight: 900;
  font-size: 0.95rem;
}
.guide-steps li > strong:first-child { display: block; font-size: var(--text-md); }

/* Warning box */
.guide-warning {
  margin-top: var(--space-6);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.guide-warning h3 { margin-top: 0; }
.guide-warning ul { margin-bottom: 0; }

/* FAQ */
.guide-faq details {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}
.guide-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.4em; line-height: 1; }
.guide-faq details[open] summary::after { content: "−"; }
.guide-faq details p { margin-top: var(--space-3); }

/* Call to action (lime block, dark ink for contrast) */
.guide-cta {
  margin-top: var(--space-12);
  background: var(--accent);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.guide-body .guide-cta h2 { color: #050507; margin: 0 0 var(--space-3); }
.guide-body .guide-cta p { color: #1a1d0a; }
.guide-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.guide-body .guide-cta a { text-decoration: none; }
.guide-cta .btn-dark,
.guide-cta .btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  padding: 0.85em 1.4em;
  border-radius: 100px;
}
.guide-body .guide-cta .btn-dark { background: #050507; color: var(--accent); }
.guide-body .guide-cta .btn-ghost-dark { border: 1.5px solid #050507; color: #050507; }
@media (hover: hover) and (pointer: fine) {
  .guide-body .guide-cta .btn-dark:hover { background: #16181f; }
  .guide-body .guide-cta .btn-ghost-dark:hover { background: rgba(5, 5, 7, 0.08); }
}

/* Back link */
.guide-more { margin-top: var(--space-10); font-size: var(--text-sm); color: var(--text-muted); }

/* Phones: the nav CTA stays visible here (no burger menu), so the wordmark shrinks to make room */
@media (max-width: 420px) {
  .guide-page .logo-wordmark { height: 42px; }
}
@media (max-width: 340px) {
  .guide-page .logo-wordmark { display: none; }
}

/* Bullets: reset.css strips list markers, bring them back in lime */
.guide-body ul { list-style: disc; }
.guide-body ul li::marker { color: var(--accent); }
.guide-faq { margin-top: var(--space-12); }

/* ═══════════════════════════════════════════════════
   Motion — only opacity/transform, nothing that moves layout.
   Reveal states are added by js/guias.js to below-the-fold elements only.
   ═══════════════════════════════════════════════════ */

/* Hero entrance: never fully transparent, so it does not delay LCP */
@keyframes guide-rise {
  from { opacity: 0.35; transform: translateY(14px); }
  to   { opacity: 1;    transform: none; }
}
.guide-hero > * { animation: guide-rise 0.7s var(--ease-out) both; }
.guide-hero > :nth-child(2) { animation-delay: 60ms; }
.guide-hero > :nth-child(3) { animation-delay: 120ms; }
.guide-hero > :nth-child(4) { animation-delay: 180ms; }
.guide-hero > :nth-child(5) { animation-delay: 240ms; }
.guide-figure { animation: guide-rise 0.8s 0.2s var(--ease-out) both; }

/* Scroll reveal */
.guides-motion [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease-out) var(--reveal-delay, 0ms);
}
.guides-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Step numbers pop in after their row */
.guides-motion .guide-steps > li[data-reveal]::before {
  transform: scale(0.4) rotate(-20deg);
  transition: transform 0.6s var(--spring-bouncy) calc(var(--reveal-delay, 0ms) + 120ms);
}
.guides-motion .guide-steps > li[data-reveal].is-in::before { transform: none; }

/* Summary: lime rule draws down when the box appears */
.guide-summary { position: relative; border-left-color: transparent; }
.guide-summary::before {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: top;
  transition: transform 0.9s var(--ease-out) 0.15s;
}
.guides-motion .guide-summary[data-reveal]:not(.is-in)::before { transform: scaleY(0); }

/* Reading progress bar under the nav */
.guide-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 999;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* FAQ: smooth open where supported (Chromium 131+), instant elsewhere */
@supports (interpolate-size: allow-keywords) {
  .guide-faq { interpolate-size: allow-keywords; }
  .guide-faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
  }
  .guide-faq details[open]::details-content { height: auto; }
}
.guide-faq summary::after { transition: transform 0.3s var(--ease-out); }
.guide-faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .guide-faq summary { transition: color 0.2s ease; }
  .guide-faq summary:hover { color: var(--accent); }
}

/* Infographic: soft 3D tilt toward the pointer + lime glow */
.guide-figure-link {
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .guide-figure-link:hover {
    border-color: rgba(214, 255, 0, 0.35);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(214, 255, 0, 0.08);
  }
}

/* Index cards: image zoom + arrow nudge */
.guide-card img { transition: transform 0.6s var(--ease-out); }
.guide-card-more { display: inline-flex; gap: 0.35em; }
.guide-card-more::after { content: "→"; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover img { transform: scale(1.04); }
  .guide-card:hover .guide-card-more::after { transform: translateX(4px); }
}
.guide-card { isolation: isolate; }

/* CTA: light sheen across the WhatsApp button on hover */
.guide-cta .btn-dark { position: relative; overflow: hidden; transition: transform 0.25s var(--ease-out), background 0.2s ease; }
.guide-cta .btn-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(214, 255, 0, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .guide-cta .btn-dark:hover { transform: translateY(-2px); }
  .guide-cta .btn-dark:hover::after { transform: translateX(120%); }
  .guide-cta .btn-ghost-dark { transition: transform 0.25s var(--ease-out), background 0.2s ease; }
  .guide-cta .btn-ghost-dark:hover { transform: translateY(-2px); }
}
.guide-cta .btn-dark:active,
.guide-cta .btn-ghost-dark:active { transform: scale(0.97); }

/* Related guides block */
.guide-related { margin-top: var(--space-12); }
.guide-related h2 { margin-top: 0; }
.guide-related .guide-grid { margin-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .guide-hero > *, .guide-figure { animation: none; }
  .guide-figure-link, .guide-card img, .guide-card-more::after,
  .guide-cta .btn-dark, .guide-cta .btn-dark::after { transition: none; }
  .guide-faq details::details-content { transition: none; }
}

/* ── Local page: hero CTA + store cards ──────────────── */
.local-hero-actions { margin-top: var(--space-6); }
.local-stores {
  list-style: none !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.local-stores li + li { margin-top: 0; }
.local-store {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.local-store img { display: block; width: 100%; height: 180px; object-fit: cover; }
.local-store-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.local-store-body h3 { margin: 0 0 var(--space-2); }
.local-store-body p { font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.local-store-body a { font-size: var(--text-sm); font-weight: 700; }


/* Official roaming pages of each company: a grid of tappable chips */
.guide-body ul.guide-links {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
  gap: var(--space-2);
}
.guide-body .guide-links li + li { margin-top: 0; }
.guide-body .guide-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.guide-body .guide-links a::after { content: '↗'; color: var(--accent); font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  .guide-body .guide-links a:hover { border-color: rgba(214, 255, 0, 0.45); color: var(--accent); }
}
.guide-note { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Novedades (news) ─────────────────────────────────
   Text cards (no image per post, so publishing weekly needs no artwork) */
.news-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr)); margin-top: var(--space-8); padding: 0; list-style: none; }
.news-card {
  display: flex; flex-direction: column; gap: var(--space-3); height: 100%;
  padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--bg-surface-alt); color: inherit; text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.news-card-meta { display: flex; gap: var(--space-3); align-items: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.news-card-tag { color: var(--accent); }
.news-card-title { font-size: var(--text-lg); line-height: 1.25; color: var(--text-primary); margin: 0; }
.news-card-text { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.news-card-more { margin-top: auto; font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .news-card:hover { border-color: rgba(214, 255, 0, 0.4); transform: translateY(-2px); }
}
/* A news post reads as a single column (no infographic) */
.news-layout { max-width: 46em; }
.news-source {
  margin: var(--space-8) 0; padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-lg);
  background: var(--surface-2); font-size: var(--text-sm); color: var(--text-secondary);
}
.news-source strong { color: var(--text-primary); }
.news-source ul { margin: var(--space-2) 0 0; }
/* Brand cover generated per post (surestelecom-interno/herramientas/portada-noticia.js) */
.news-card-img { display: block; width: calc(100% + 2 * var(--space-6)); max-width: none; height: auto; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2); border-bottom: 1px solid var(--border); aspect-ratio: 640 / 336; }
.news-card { overflow: hidden; }
.news-cover { margin: 0 0 var(--space-8); }
.news-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--border); }

/* ── Index: search + keyword chips + topic groups ───── */
.guides-finder { margin-bottom: var(--space-10); }
.guides-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 34rem;
  padding: 0 var(--space-4);
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  color: var(--text-muted);
  transition: border-color var(--transition-fast);
}
.guides-search:focus-within { border-color: var(--accent); color: var(--accent); }
.guides-search input {
  flex: 1;
  min-width: 0;
  padding: 0.85em 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px; /* 16px: iOS does not zoom the page on focus */
}
.guides-search input::placeholder { color: var(--text-muted); opacity: 0.8; }
.guides-chips-wrap { margin-top: var(--space-4); }
.guides-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.guides-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.45em 1em;
  border: 1px solid var(--border-light);
  border-radius: 100px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.guides-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .guides-chip:hover { background: var(--accent); border-color: var(--accent); color: #050507; }
}
.guides-chip:active { background: var(--accent); border-color: var(--accent); color: #050507; }
/* Phones: one row that slides sideways; the fade on the right says "there is more" */
@media (max-width: 760px) {
  .guides-chips-wrap {
    --chip-gutter: var(--space-8);
    margin-inline: calc(var(--chip-gutter) * -1);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--chip-gutter), #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--chip-gutter), #000 calc(100% - 48px), transparent);
  }
  .guides-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px var(--chip-gutter) var(--space-2);
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--chip-gutter);
  }
  .guides-chips::-webkit-scrollbar { display: none; }
  .guides-chips li { scroll-snap-align: start; flex: none; }
}
@media (max-width: 500px) {
  .guides-chips-wrap { --chip-gutter: var(--space-5); }
}
.guides-group + .guides-group { margin-top: var(--space-12); }
.guides-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
.guides-group-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #050507;
  background: var(--accent);
  border-radius: 100px;
  padding: 0.15em 0.6em;
}
.guides-group[hidden], .guide-grid li[hidden] { display: none; }
.guides-empty { margin-top: var(--space-6); color: var(--text-muted); }
.guides-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Phones: compact rows in the index (thumbnail + title) so the whole list can be scanned */
@media (max-width: 600px) {
  .guides-group .guide-grid { gap: var(--space-3); }
  .guides-group .guide-card { display: grid; grid-template-columns: 104px 1fr; align-items: center; }
  .guides-group .guide-card img { height: 100%; aspect-ratio: auto; min-height: 92px; }
  .guides-group .guide-card-body { padding: var(--space-3) var(--space-4); gap: 2px; }
  .guides-group .guide-card-title { font-size: var(--text-base); line-height: 1.3; }
  .guides-group .guide-card-text,
  .guides-group .guide-card-more,
  .guides-group .guide-card-tag { display: none; }
}

/* ── Roaming finder (guia-roaming.html) ─────────────── */
.roam-tool {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--bg-surface-alt);
  border: 1px solid rgba(214, 255, 0, 0.28);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 40px rgba(214, 255, 0, 0.05);
}
.guide-body .roam-tool h2 { margin: 0; }
.guide-body .roam-intro { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.roam-fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.roam-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.roam-field > label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.roam-field input,
.roam-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--deep-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px; /* no zoom on iOS */
  transition: border-color var(--transition-fast);
}
.roam-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6FF00' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.roam-field input:focus,
.roam-field select:focus { outline: none; border-color: var(--accent); }
.roam-result { margin-top: var(--space-5); }
.roam-card { --c: var(--accent); border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); background: rgba(255, 255, 255, 0.02); }
.roam-card.is-ok { --c: #3ddc97; }
.roam-card.is-cost { --c: #ffb547; }
.roam-card.is-unknown { --c: #9aa3b2; }
.roam-card.is-none { --c: #ff6b6b; }
.roam-card.is-mixed { --c: var(--accent); }
.roam-badge { display: inline-block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
.guide-body .roam-card-title { margin-top: var(--space-1); font-size: var(--text-lg); font-weight: 800; color: var(--text-primary); line-height: 1.3; }
.guide-body .roam-card p + p { margin-top: var(--space-2); }
.guide-body .roam-card p { font-size: var(--text-sm); line-height: 1.65; }
.guide-body ul.roam-ops { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.guide-body .roam-ops li { margin: 0; display: flex; justify-content: space-between; gap: var(--space-2); padding: 0.45em 0.7em; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); font-size: var(--text-xs); line-height: 1.4; }
.roam-ops li b { font-weight: 700; color: var(--c, var(--text-muted)); white-space: nowrap; }
.roam-ops li.is-ok { --c: #3ddc97; }
.roam-ops li.is-cost { --c: #ffb547; }
.roam-ops li.is-unknown { --c: #9aa3b2; }
.guide-body .roam-actions { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.guide-body .roam-actions a { font-weight: 700; }
.guide-body .roam-reviewed { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
@media (max-width: 600px) {
  .roam-tool { padding: var(--space-5) var(--space-4); }
  .roam-fields { grid-template-columns: 1fr; }
}
.roam-top { margin-bottom: var(--space-10); }
.roam-top .roam-tool { margin-top: 0; }
/* Country autocomplete */
.roam-combo-box { position: relative; }
.roam-combo-box input { padding-right: 84px; }
.roam-clear {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.roam-clear:hover, .roam-clear:focus-visible { color: var(--accent); background: rgba(255, 255, 255, 0.06); outline: none; }
.guide-body ul.roam-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  list-style: none; margin: 0; padding: 6px;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  background: #12141a; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.guide-body .roam-suggest li {
  margin: 0; padding: 0.7em 0.85em; border-radius: var(--radius-md);
  font-size: 16px; line-height: 1.3; color: var(--text-secondary); cursor: pointer;
}
.guide-body .roam-suggest li b { color: var(--accent); font-weight: 800; }
.guide-body .roam-suggest li[aria-selected="true"] { background: rgba(214, 255, 0, 0.12); color: var(--text-primary); }
@media (hover: hover) and (pointer: fine) {
  .guide-body .roam-suggest li[role="option"]:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
}
.guide-body .roam-suggest li:active { background: rgba(214, 255, 0, 0.16); }
.roam-suggest-to { color: var(--text-muted); font-size: 0.85em; }
.guide-body .roam-suggest .roam-suggest-empty { cursor: default; color: var(--text-muted); font-size: var(--text-sm); }
.roam-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--accent); cursor: pointer;
}
.roam-toggle svg { transition: transform var(--transition-fast); }
.roam-is-open .roam-toggle svg { transform: rotate(180deg); }
.roam-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.guide-body .roam-suggest li.is-current { color: var(--accent); font-weight: 700; }
.roam-is-open .roam-combo-box input { border-color: var(--accent); }

/* ── News hub (noticias.html): chips + featured + compact rows by month ── */
.news-hub { margin-top: var(--space-4); }
.news-filters { margin-bottom: var(--space-6); }
.news-chip { font: inherit; font-size: var(--text-sm); background: none; cursor: pointer; gap: 0.45em; }
.news-chip-n { font-size: 0.75em; font-weight: 800; color: var(--text-muted); }
.news-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #050507; }
.news-chip[aria-pressed="true"] .news-chip-n { color: #050507; }
.news-hub-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1000px) {
  .news-hub-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-10); }
  .news-feature { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
}
.news-feature-link { display: block; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-surface-alt); transition: border-color var(--transition-base); }
.news-feature-img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.news-feature-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
/* The cover already carries the headline: keep it for screen readers and Google, don't print it twice */
.news-feature-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.news-feature-text { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.55; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.news-tag { color: var(--accent); }
.news-company { color: var(--text-secondary); }
.news-new { padding: 0.15em 0.55em; margin-right: 0.3em; border-radius: 100px; background: var(--accent); color: #050507; font-weight: 800; letter-spacing: 0.04em; }
.news-month + .news-month { margin-top: var(--space-8); }
.news-month-title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-2); }
.news-month-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.news-rows { list-style: none; padding: 0; margin: 0; }
.news-rows li { border-bottom: 1px solid var(--border); margin: 0; }
.news-rows li:last-child { border-bottom: 0; }
.news-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) 0; }
.news-row-img { width: 100%; height: auto; aspect-ratio: 640 / 336; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); }
.news-row-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.news-row-title { font-size: var(--text-base); font-weight: 700; line-height: 1.3; color: var(--text-primary); margin: 0; transition: color var(--transition-fast); }
@media (hover: hover) and (pointer: fine) {
  .news-feature-link:hover { border-color: rgba(214, 255, 0, 0.4); }
  .news-row:hover .news-row-title { color: var(--accent); }
}
.news-row:focus-visible, .news-feature-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-md); }
.news-hub [hidden] { display: none !important; }
.news-empty { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.news-reset { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Inside a post */
.news-related { margin-top: var(--space-12); }
.guide-body .news-related h2 { margin: 0 0 var(--space-2); }
.guide-body .news-related ul.news-rows { padding: 0; }
.guide-body .news-related .news-rows li + li { margin-top: 0; }
.guide-body .news-related a { text-decoration: none; color: inherit; }
.guide-body .news-related .news-row-title { font-size: var(--text-base); }
@media (max-width: 420px) {
  .news-row { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); }
}
.guide-body .news-related ul.news-rows { list-style: none; }
.guide-body .news-related .news-rows li::marker { content: ''; }
.guide-body .news-related .news-rows li::before { content: none; display: none; }