/* ============================================================
   MasterBets365 — Page-Specific Components
   betting-v1-hub.css | Editorial-Print-Digital Archetype
   ============================================================ */

/* ============================================================
   HUB INDEX — INTENT TABS PANEL
   ============================================================ */
.intent-tabs-section { /* intent tabs section wrapper */
  padding: 3rem 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.intent-tab-panel { /* intent tab content panel */
  padding: 1.5rem 0 0;
}
.intent-tab-panel .panel-dek { /* tab panel description text */
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  max-width: 60ch;
}
.intent-tab-cta { /* tab panel CTA link */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
  padding-bottom: 2px;
}
.intent-tab-cta:hover { border-bottom-color: var(--accent); color: var(--accent-strong); } /* intent CTA hover underline */

/* ============================================================
   TOPIC CARDS GRID (hub links)
   ============================================================ */
.topic-cards-section { /* hub topic cards section */
  padding: 3rem 0;
  background: var(--bg);
}
.topic-card { /* individual hub topic card */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.topic-card::before { /* accent top stripe */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.topic-card:hover::before { transform: scaleX(1); } /* reveal stripe on hover */
.topic-card:hover { box-shadow: var(--shadow); border-color: var(--accent); transform: translateY(-3px); } /* topic card lift */
.topic-card__icon { /* topic card icon area */
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  display: block;
}
.topic-card__title { /* topic card heading */
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
}
.topic-card__desc { /* topic card description */
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}
.topic-card__arrow { /* topic card arrow indicator */
  display: inline-block;
  color: var(--accent);
  margin-top: 0.75rem;
  font-weight: 700;
  transition: transform 0.2s;
}
.topic-card:hover .topic-card__arrow { transform: translateX(4px); } /* arrow slide on hover */

/* ============================================================
   PULL QUOTE RAIL
   ============================================================ */
.pull-quote-section { /* pull quote full-width section */
  padding: 3.5rem 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pull-quote-rail { /* pull quote inner rail */
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pull-quote-rail .pull-quote__text { /* center pull quote text */
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  line-height: 1.3;
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}
.pull-quote-rail .pull-quote__text::before { content: '\201C'; color: var(--accent); } /* pull quote opening */
.pull-quote-rail .pull-quote__text::after { content: '\201D'; color: var(--accent); } /* pull quote closing */
.pull-quote-rule { /* horizontal accent rule in pull quote */
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 0 auto 1.5rem;
  border: none;
}

/* ============================================================
   RESPONSIBLE GAMING SECTION
   ============================================================ */
.rg-section { /* responsible gaming compact section */
  padding: 2.5rem 0;
  background: var(--bg);
}
.rg-callout { /* responsible gaming callout box */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .rg-callout { grid-template-columns: 1fr auto; align-items: center; } /* RG callout two-column desktop */
}
.rg-links { /* responsible gaming external links list */
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rg-links a { /* responsible gaming link */
  display: inline-block;
  font-size: 0.8rem;
  font-family: var(--font-meta);
  color: var(--link);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
}
.rg-links a:hover { border-color: var(--link); background: rgba(13,92,171,0.06); } /* rg link hover */

/* ============================================================
   FAQ PREVIEW ACCORDION
   ============================================================ */
.faq-preview-section { /* FAQ preview section */
  padding: 3rem 0;
  background: var(--bg-elevated);
}
.faq-section { /* full FAQ section */
  padding: 3rem 0;
  background: var(--bg);
}

/* ============================================================
   FINAL CTA BAND
   ============================================================ */
.final-cta-band { /* closing CTA pitch band */
  background: var(--pitch);
  color: var(--text-light);
  padding: 4rem 0;
  text-align: center;
}
.final-cta-band * { color: inherit; } /* mandatory final CTA color inheritance */
.final-cta-band h2 { /* CTA band heading */
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
  color: var(--text-light);
}
.final-cta-band .supporting { /* CTA band supporting text */
  color: var(--on-pitch-muted);
  font-size: 0.9rem;
  margin-top: 1rem;
  font-family: var(--font-meta);
}

/* ============================================================
   DEPORTES — MASTHEAD HERO
   ============================================================ */
.page-masthead { /* single-column page masthead */
  background: var(--pitch);
  color: var(--text-light);
  padding: 3rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.page-masthead * { color: inherit; } /* masthead color inheritance */
.page-masthead::after { /* diagonal accent stripe */
  content: '';
  position: absolute;
  right: -40px;
  top: 0;
  bottom: 0;
  width: 120px;
  background: var(--accent);
  opacity: 0.08;
  transform: skewX(-8deg);
  pointer-events: none;
}
.fixture-label { /* meta fixture date/competition label */
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.6rem;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  color: var(--on-pitch-muted);
  margin-bottom: 1rem;
}

/* ============================================================
   DEPORTES — MARKETS GRID / TABLE
   ============================================================ */
.markets-section { /* sports markets section */
  padding: 3rem 0;
  background: var(--bg);
}
.league-cards-section { /* league cards section */
  padding: 2.5rem 0;
  background: var(--bg-elevated);
}
.league-card { /* individual league card */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
  margin-bottom: 0;
}
.league-card:hover { border-color: var(--accent); box-shadow: var(--shadow); } /* league card hover */
.league-card__badge { /* league badge icon area */
  width: 44px;
  height: 44px;
  background: var(--pitch);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.league-card__name { /* league name */
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.95rem;
}
.league-card__meta { /* league meta info */
  font-family: var(--font-meta);
  font-size: 0.72rem;
  color: var(--muted);
}

/* ============================================================
   BRIDGE CTA (mid-page)
   ============================================================ */
.bridge-cta { /* mid-page bridge CTA section */
  padding: 2.5rem 0;
  background: rgba(224,61,36,0.05);
  border-top: 1px solid rgba(224,61,36,0.15);
  border-bottom: 1px solid rgba(224,61,36,0.15);
  text-align: center;
}
.bridge-panel { /* large accent bridge card */
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: center;
}
.bridge-panel * { color: inherit; } /* bridge panel color inheritance */
.bridge-panel h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; } /* bridge panel heading */
.bridge-panel .btn-outline-light { border-color: rgba(255,255,255,0.6); margin-top: 1rem; } /* bridge panel secondary button */

/* ============================================================
   EN VIVO — FEATURE COLUMNS
   ============================================================ */
.feature-columns { /* 3-col Swiss grid feature section */
  padding: 3rem 0;
  background: var(--bg);
}
.feature-col { /* individual feature column */
  padding: 0;
}
.feature-col__num { /* feature column number accent */
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.feature-col h3 { /* feature column heading */
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}
.feature-col p { /* feature column body */
  font-size: 0.9rem;
  color: var(--muted);
}
.verify-note { /* [verify] caution note */
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid rgba(201,162,39,0.3);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
}

/* ============================================================
   CTA BAND (en-vivo style)
   ============================================================ */
.cta-band { /* mid-section accent CTA band */
  background: var(--pitch);
  color: var(--text-light);
  padding: 3rem 0;
  text-align: center;
}
.cta-band * { color: inherit; } /* cta band color inheritance */
.cta-band h2 { margin-bottom: 0.75rem; } /* cta band heading spacing */
.cta-band .secondary-link { /* secondary text link in CTA band */
  display: inline-block;
  margin-top: 1rem;
  color: var(--link-on-dark);
  font-size: 0.875rem;
  text-decoration: underline;
}
.cta-band .secondary-link:hover { color: var(--link-on-dark-hover); } /* secondary link hover */

/* ============================================================
   PROMOCIONES — PROMO ACCORDION
   ============================================================ */
.promo-section { /* promotions page section */
  padding: 3rem 0;
  background: var(--bg);
}
.promo-accordion-item { /* promo accordion item */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: var(--bg-elevated);
}
.promo-accordion-trigger { /* promo accordion toggle */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-dark);
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: background 0.15s;
}
.promo-accordion-trigger:hover { background: rgba(224,61,36,0.04); } /* promo trigger hover */
.promo-accordion-trigger .promo-icon { /* promo accordion toggle icon */
  color: var(--accent);
  font-family: var(--font-meta);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.promo-accordion-body { /* promo accordion content */
  display: none;
  padding: 0 1.25rem 1.25rem;
}
.promo-accordion-item.is-open .promo-accordion-body { display: block; } /* open promo accordion */
.promo-accordion-item.is-open .promo-icon { transform: rotate(45deg); } /* rotate promo icon */
.promo-body-cta { /* promo accordion CTA link */
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}
.promo-body-cta:hover { color: var(--accent-strong); text-decoration: underline; } /* promo body CTA hover */

/* ============================================================
   PAGOS — METHODS TABLE
   ============================================================ */
.pagos-section { /* payments section */
  padding: 3rem 0;
  background: var(--bg);
}
.hub-link-cards { /* deposit/withdrawal hub link cards */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .hub-link-cards { grid-template-columns: 1fr 1fr; } /* two-column hub link cards */
}
.hub-link-card { /* hub link card */
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.hub-link-card:hover { border-color: var(--accent); box-shadow: var(--shadow); } /* hub card hover */
.hub-link-card__icon { /* hub card icon */
  font-size: 1.75rem;
  flex-shrink: 0;
}
.hub-link-card__title { /* hub card title */
  font-weight: 600;
  color: var(--text-dark);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.25rem;
}
.hub-link-card__desc { /* hub card description */
  font-size: 0.82rem;
  color: var(--muted);
}

/* ============================================================
   APP — PLATFORM STEPS
   ============================================================ */
.platform-steps { /* app platform step section */
  padding: 3rem 0;
  background: var(--bg-elevated);
}
.step-list { /* ordered step list */
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: steps;
}
.step-list li { /* step list item */
  counter-increment: steps;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.step-list li:last-child { border-bottom: none; } /* last step no border */
.step-list li::before { /* auto-numbered step counter */
  content: counter(steps, decimal-leading-zero);
  font-family: var(--font-meta);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 2.5rem;
  padding-top: 0.1rem;
}
.step-list strong { /* step heading */
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--text-dark);
}
.step-list p { /* step body text */
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0;
}

/* ============================================================
   APP — FEATURE GRID
   ============================================================ */
.feature-grid-section { /* app feature grid section */
  padding: 2.5rem 0;
  background: var(--bg);
}
.feature-grid { /* feature bullet grid */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .feature-grid { grid-template-columns: 1fr 1fr; } /* two-column feature grid */
}
.feature-item { /* individual feature bullet */
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.feature-item__icon { /* feature icon */
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.feature-item__title { /* feature title */
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
  display: block;
  margin-bottom: 0.2rem;
}
.feature-item__desc { /* feature description */
  font-size: 0.85rem;
  color: var(--muted);
}

/* ============================================================
   JUEGO RESPONSABLE — RESOURCE CARDS
   ============================================================ */
.rg-resources { /* responsible gaming resource grid */
  padding: 2.5rem 0;
  background: var(--bg-elevated);
}
.rg-resource-grid { /* responsible gaming resource card grid */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .rg-resource-grid { grid-template-columns: 1fr 1fr; } /* 2-col resources */
}
@media (min-width: 780px) {
  .rg-resource-grid { grid-template-columns: repeat(3, 1fr); } /* 3-col resources */
}
.rg-resource-tile { /* responsible gaming resource tile */
  display: block;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.rg-resource-tile:hover { box-shadow: 0 4px 20px rgba(26,28,32,0.12); border-color: var(--gold); } /* resource tile shadow hover */
.rg-resource-tile__name { /* resource tile name */
  font-weight: 700;
  color: var(--text-dark);
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}
.rg-resource-tile__url { /* resource tile URL meta */
  font-family: var(--font-meta);
  font-size: 0.72rem;
  color: var(--link);
  display: block;
}
.rg-resource-tile__desc { /* resource tile description */
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.ext-badge { /* external link badge */
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.35rem;
  background: rgba(13,92,171,0.1);
  color: var(--link);
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
}

/* ============================================================
   TERMINOS — PROSE WITH TOC
   ============================================================ */
.terminos-section { /* terms page section */
  padding: 3rem 0;
  background: var(--bg);
}
.prose-section { /* prose content section */
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
}
.prose-section:last-child { border-bottom: none; } /* last prose section */
.prose-section h2 { /* prose h2 */
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
}
.prose-section h3 { /* prose h3 */
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
}
.gov-note { /* government links footnote */
  background: rgba(13,92,171,0.05);
  border: 1px solid rgba(13,92,171,0.15);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
}
.gov-note__heading { /* gov note heading */
  font-family: var(--font-meta);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--link);
  display: block;
  margin-bottom: 0.75rem;
}
.gov-list { /* government links list */
  list-style: none;
  padding: 0;
  margin: 0;
}
.gov-list li { /* gov list item */
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
}
.gov-list a { /* gov list link */
  color: var(--link);
  text-decoration: none;
}
.gov-list a:hover { color: var(--link-hover); text-decoration: underline; } /* gov link hover */

/* ============================================================
   REGISTRO — STEPS TIMELINE
   ============================================================ */
.registro-section { /* registration section */
  padding: 3rem 0;
  background: var(--bg-elevated);
}
.forbidden-note { /* forbidden claims caution box */
  background: rgba(201,162,39,0.07);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.forbidden-note__title { /* forbidden note title */
  font-weight: 700;
  color: #7a610f;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* ============================================================
   INICIAR SESION — ACCESS CHECKLIST
   ============================================================ */
.access-section { /* login access section */
  padding: 3rem 0;
  background: var(--bg);
}
.checklist-section { /* checklist details section */
  padding: 2.5rem 0;
  background: var(--bg-elevated);
}

/* ============================================================
   DEPOSITO — METHOD CARDS
   ============================================================ */
.method-cards-grid { /* deposit method cards grid */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .method-cards-grid { grid-template-columns: 1fr 1fr; } /* two-column methods */
}
@media (min-width: 780px) {
  .method-cards-grid { grid-template-columns: repeat(3, 1fr); } /* three-column methods */
}
.method-card__icon { /* payment method icon */
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
}
.method-card__name { /* method name heading */
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}
.method-card__meta { /* method meta details */
  font-family: var(--font-meta);
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.method-label { /* copyable method label */
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.78rem;
  background: rgba(26,28,32,0.06);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
  user-select: all;
}
.method-label:hover { background: rgba(224,61,36,0.1); color: var(--accent); } /* method label hover */
.method-label.copied { background: rgba(201,162,39,0.15); color: #7a610f; } /* copied state */

/* ============================================================
   RETIRO — CSS TIMELINE RAIL
   ============================================================ */
.retiro-section { /* withdrawal section */
  padding: 3rem 0;
  background: var(--bg);
}
.css-timeline { /* pure CSS border-left timeline */
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--accent);
  padding-left: 2rem;
}
.css-timeline__step { /* CSS timeline step */
  position: relative;
  padding-bottom: 2rem;
}
.css-timeline__step:last-child { padding-bottom: 0; } /* last step no padding */
.css-timeline__step::before { /* step bullet on rail */
  content: '';
  position: absolute;
  left: -2.5625rem;
  top: 0.25rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
}
.css-timeline__num { /* CSS timeline step number label */
  font-family: var(--font-meta);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.25rem;
}
.css-timeline__title { /* CSS timeline step title */
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 0.35rem;
}
.css-timeline__body { /* CSS timeline step body */
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============================================================
   VERIFICACION — KYC ACCORDION
   ============================================================ */
.kyc-section { /* KYC verification section */
  padding: 3rem 0;
  background: var(--bg-elevated);
}

/* ============================================================
   AFILIADOS — STICKY DISCLOSURE
   ============================================================ */
.afiliados-section { /* affiliates section */
  padding: 3rem 0;
  background: var(--bg);
}
.editorial-policy-list { /* editorial policy bullet list */
  list-style: none;
  padding: 0;
  margin: 0;
}
.editorial-policy-list li { /* policy list item */
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.editorial-policy-list li:last-child { border-bottom: none; } /* last item no border */
.editorial-policy-list li::before { /* policy list checkmark */
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ============================================================
   PRIVACIDAD — POLICY SECTIONS
   ============================================================ */
.privacy-section { /* privacy page section */
  padding: 3rem 0;
  background: var(--bg);
}

/* ============================================================
   COOKIES — CATEGORY TOGGLES
   ============================================================ */
.cookie-section { /* cookies page section */
  padding: 3rem 0;
  background: var(--bg-elevated);
}
.cookie-category { /* cookie category panel */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.cookie-category-header { /* cookie category toggle header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg);
  cursor: pointer;
  gap: 1rem;
}
.cookie-category-header:hover { background: rgba(224,61,36,0.04); } /* cookie header hover */
.cookie-category-title { /* cookie category title */
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
}
.cookie-category-toggle { /* cookie toggle icon */
  font-family: var(--font-meta);
  color: var(--accent);
  font-size: 1rem;
  transition: transform 0.2s;
}
.cookie-category.is-open .cookie-category-toggle { transform: rotate(45deg); } /* open cookie category */
.cookie-category-body { /* cookie category content */
  display: none;
  padding: 0 1.25rem 1.25rem;
  background: var(--bg-elevated);
  font-size: 0.9rem;
  color: var(--muted);
}
.cookie-category.is-open .cookie-category-body { display: block; } /* open cookie body */

/* ============================================================
   NOSOTROS — PULL QUOTE
   ============================================================ */
.nosotros-section { /* about page section */
  padding: 3rem 0;
  background: var(--bg-elevated);
}

/* ============================================================
   CONTACTO — BRIDGE PANEL
   ============================================================ */
.contacto-section { /* contact page section */
  padding: 3rem 0;
  background: var(--bg);
}
.contact-faq-links { /* contact page FAQ links grid */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .contact-faq-links { grid-template-columns: 1fr 1fr; } /* two-column contact links */
}
.contact-link-card { /* contact page link card */
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.contact-link-card:hover { box-shadow: var(--shadow); border-color: var(--accent); } /* contact link card hover */
.contact-link-card h3 { font-size: 1rem; color: var(--text-dark); margin-bottom: 0.25rem; } /* contact link card title */
.contact-link-card p { font-size: 0.85rem; color: var(--muted); margin: 0; } /* contact link card desc */

/* ============================================================
   CUENTA DEMO — COMPARE TABLE
   ============================================================ */
.demo-section { /* demo account section */
  padding: 3rem 0;
  background: var(--bg);
}
.compare-check { /* comparison table checkmark */
  color: var(--gold);
  font-weight: 700;
}
.compare-x { /* comparison table X mark */
  color: var(--muted);
  opacity: 0.5;
}

/* ============================================================
   RELATED LINKS — EDITORIAL INLINE LIST
   ============================================================ */
.related-links-section { /* related links editorial section */
  padding: 2rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.related-links-list { /* related links list */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.related-links-list li a { /* related link anchor */
  color: var(--link);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.related-links-list li a:hover { border-bottom-color: var(--link); color: var(--link-hover); } /* related link hover */

/* ============================================================
   DISCLAIMER SMALL PRINT
   ============================================================ */
.small-print { /* small print disclaimer */
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 2rem;
  font-family: var(--font-meta);
  line-height: 1.7;
}

/* ============================================================
   STILL NEED HELP (preguntas-frecuentes)
   ============================================================ */
.still-need-section { /* still need help section */
  padding: 2.5rem 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}
.still-need-grid { /* still need help two-column grid */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .still-need-grid { grid-template-columns: 1fr 1fr; } /* two-col still need grid */
}
.still-need-col { /* still need column */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.still-need-col h3 { font-size: 1.125rem; margin-bottom: 0.5rem; } /* still need heading */
.still-need-col p { font-size: 0.9rem; color: var(--muted); margin-bottom: 1rem; } /* still need body */

/* ============================================================
   DEVICE PARALLAX FRAME
   ============================================================ */
.device-frame { /* app device illustration frame */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.device-frame img { /* device frame image */
  max-height: 380px;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(26,28,32,0.18);
  will-change: transform;
}

/* ============================================================
   OPERATOR TOOLS BRIDGE
   ============================================================ */
.operator-tools { /* operator tools bridge section */
  padding: 2.5rem 0;
  background: var(--bg-elevated);
}
.tools-panel { /* operator tools info panel */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 640px) {
  .tools-panel { grid-template-columns: 1fr auto; } /* two-column tools panel */
}
.tools-list { /* operator tools bullet list */
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tools-list li { /* tools list item */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.tools-list li::before { /* tools list bullet */
  content: '→';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================================
   LIMITATIONS LIST
   ============================================================ */
.limitations-list { /* demo/feature limitations list */
  list-style: none;
  padding: 0;
  margin: 0;
}
.limitations-list li { /* limitation item */
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}
.limitations-list li:last-child { border-bottom: none; } /* last limitation no border */
.limitations-list li::before { /* limitation indicator */
  content: '—';
  color: var(--muted);
  flex-shrink: 0;
  font-family: var(--font-meta);
}

/* ============================================================
   VERIFICATION LINK ASIDE
   ============================================================ */
.verification-aside { /* verification cross-link aside */
  background: rgba(13,92,171,0.05);
  border: 1px solid rgba(13,92,171,0.2);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
}
.verification-aside p { /* verification aside text */
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.verification-aside a { /* verification aside link */
  color: var(--link);
  font-weight: 600;
}

/* ============================================================
   SCROLLSPY NAV UNDERLINE
   ============================================================ */
.scrollspy-nav a.is-active { /* scrollspy active section link */
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   TERMS NOTE MUTED PROSE
   ============================================================ */
.terms-note { /* terms & conditions note */
  background: rgba(26,28,32,0.03);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.terms-note a { color: var(--link); } /* terms note link */

/* ============================================================
   MISSION PROSE BLOCK
   ============================================================ */
.mission-section { /* about mission prose section */
  padding: 2.5rem 0;
  background: var(--bg);
}
.mission-prose { /* mission text content */
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-dark);
}

/* ============================================================
   EDITORIAL AFFILIATE NOTE MUTED
   ============================================================ */
.affiliate-muted { /* muted affiliate note */
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--font-meta);
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.affiliate-muted a { color: var(--link); } /* affiliate muted link */