/* Mobile readability safety net loaded after main styles. */
@media (max-width: 700px){
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .container { width:100%; max-width:100%; padding-left:18px; padding-right:18px; }
  .hero, .portal-hero, .page-hero { overflow:hidden; }
  .hero-grid, .portal-grid, .split, .footer-grid { grid-template-columns:1fr !important; width:100%; max-width:100%; }
  .readable-title, h1, .section-title { max-width:100%; overflow-wrap:break-word; word-break:normal; hyphens:auto; }
  .readable-title { font-size:38px !important; line-height:1.02 !important; letter-spacing:-0.045em !important; }
  .readable-title span, .hero h1 span { display:inline !important; }
  .readable-title .highlight { display:block !important; }
  .lead, .readable-lead, .section-desc, .portal-panel p, .card p { max-width:100%; overflow-wrap:break-word; }
  .hero-primary, .btn { max-width:100%; width:100%; white-space:normal !important; text-align:center !important; line-height:1.18 !important; overflow-wrap:break-word; min-height:48px; padding:14px 16px; }
  .portal-panel { width:100%; max-width:100%; }
  .quick-grid a, .earn-feature, .mobile-map article, .card, .widget-card, .term-card, .resource-row, .reference-card { max-width:100%; overflow-wrap:break-word; }
}
@media (max-width: 420px){
  .container { padding-left:18px; padding-right:18px; }
  .readable-title { font-size:36px !important; line-height:1.03 !important; }
  .page-hero h1 { font-size:36px !important; }
  .section-title { font-size:34px !important; }
  .portal-panel h2 { font-size:32px !important; }
  .lead, .readable-lead { font-size:17px !important; }
}

@media (max-width: 700px){
  .hero-primary { font-size:15px !important; }
  .portal-panel p, .quick-grid a, .lead, .readable-lead { overflow-wrap:anywhere; }
  .portal-panel { margin-left:0; margin-right:0; }
}
@media (max-width: 420px){
  .hero-primary { font-size:14px !important; }
  .portal-panel p { font-size:15px; line-height:1.45; }
}

@media (max-width: 700px){
  .container { max-width:100vw !important; overflow:hidden; }
  .hero-copy, .portal-panel, .widget-card, .card, .term-card, .resource-row, .reference-card, .mobile-map, .footer-grid { width:100% !important; max-width:calc(100vw - 36px) !important; }
  .portal-panel p, .hero-copy p { max-width:calc(100vw - 76px) !important; }
  .quick-grid, .hero-actions { width:100% !important; max-width:100% !important; }
}

@media (max-width: 700px){
  .portal-panel p { max-width:calc(100vw - 104px) !important; }
}
@media (max-width: 420px){
  .portal-panel p { max-width:286px !important; }
}

/* Move hero content upward on desktop so important information is visible immediately. */
.hero, .portal-hero { place-items:start center !important; }
@media (min-width: 901px){
  .hero, .portal-hero { padding-top:96px !important; padding-bottom:96px !important; }
}

/* v6 hard mobile overflow fix for Index hero/panel. */
@media (max-width:700px){
  .hero-copy, .hero-actions, .portal-panel { max-width:calc(100vw - 40px)!important; width:calc(100vw - 40px)!important; }
  .hero-actions .btn { width:100%!important; max-width:100%!important; }
  .portal-panel { overflow:hidden; padding:20px!important; }
  .quick-grid { width:100%!important; max-width:100%!important; }
  .quick-grid a { width:100%!important; max-width:100%!important; }
  .lead, .readable-lead { max-width:calc(100vw - 40px)!important; }
}

/* v7 center mobile content with safe side gutters. */
@media (max-width:700px){
  .hero-copy, .hero-actions, .portal-panel { width:min(340px, calc(100vw - 56px))!important; max-width:min(340px, calc(100vw - 56px))!important; margin-left:auto!important; margin-right:auto!important; }
  .lead, .readable-lead { width:100%!important; max-width:100%!important; }
  .hero-actions .btn { width:100%!important; }
}

/* v8 final mobile: prevent horizontal drift by anchoring hero/panel to left gutter. */
@media (max-width:700px){
  .hero-grid, .portal-grid { justify-items:start!important; }
  .hero-copy, .hero-actions, .portal-panel { width:calc(100vw - 72px)!important; max-width:318px!important; margin-left:0!important; margin-right:0!important; justify-self:start!important; }
  .hero-actions .btn { width:100%!important; max-width:100%!important; }
}

/* v9: garantir que todo conteudo seja visivel no mobile, mesmo que texto fique pequeno */
@media (max-width: 700px){
  body, html { overflow-x: hidden; width: 100%; }
  .container, .wrap { width: 100% !important; max-width: 100vw !important; padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box; }
  .grid-2, .grid-3, .grid-4, .term-grid, .reference-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .card, .term-card, .resource-card, .reference-card, .resource-row, .widget-card { width: 100% !important; max-width: calc(100vw - 36px) !important; box-sizing: border-box; }
  .card h3, .term-card h3, .resource-card h3, .reference-card h3 { font-size: 22px !important; line-height: 1.12 !important; }
  .card p, .term-card p, .resource-card p, .reference-card p { font-size: 14px !important; line-height: 1.45 !important; }
  .btn { width: 100% !important; max-width: 100% !important; text-align: center !important; white-space: normal !important; font-size: 14px !important; padding: 12px 16px !important; }
  .page-hero, .hero, .portal-hero { min-height: auto !important; padding-top: 48px !important; padding-bottom: 40px !important; }
  .page-hero h1, .portal-hero h1 { font-size: clamp(32px, 10vw, 40px) !important; }
  .section-title { font-size: clamp(28px, 8vw, 36px) !important; }
  .lead, .readable-lead, .section-desc { font-size: 16px !important; }
  .tag-row { flex-wrap: wrap; gap: 6px; }
  .tag { font-size: 11px; padding: 5px 8px; }
  .section-pad { padding: 40px 0 !important; }
  .footer-grid { grid-template-columns: 1fr !important; text-align: center; }
  .footer h2 { font-size: 32px !important; }
  .socials { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .socials a { display: inline-flex; padding: 8px 12px; font-size: 12px; }
  .luma-embed { height: 380px !important; min-height: 380px !important; }
  .row-actions { display: flex !important; flex-direction: column; gap: 8px; }
  .row-actions .btn { width: 100% !important; }
  img, iframe, figure, table { max-width: 100% !important; height: auto !important; }
  .table-wrap { overflow-x: auto; }
}

@media (max-width: 420px){
  .page-hero h1 { font-size: 28px !important; }
  .section-title { font-size: 24px !important; }
  .card h3 { font-size: 20px !important; }
  .lead { font-size: 15px !important; }
  .card p { font-size: 13px !important; }
  .btn { font-size: 13px !important; padding: 10px 14px !important; }
}