/* Identidade editorial conforme KIT DA MARCA TIA NANÁ v0.4, pp. 3–6.
   Duas famílias tipográficas: Fredoka (títulos) e Comic Neue (corpo). */
:root {
  --blue:#0756A6; --coral:#F26459; --graphite:#283D4C;
  --cream:#FFFBF0; --cream-2:#FFFCF7; --white:#FFFFFF;
  --line:#E6DDD2; --blue-pale:#EEF5FB;
  --shadow:0 12px 34px rgba(40,61,76,.07);
  font-family:"Comic Neue", "Trebuchet MS", sans-serif;
  color:var(--graphite); background:var(--cream);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {min-width:280px;margin:0;background:linear-gradient(180deg,#FFFDF6 0%,var(--cream) 42%,var(--cream) 100%)}
a {color:inherit}
a:focus-visible {outline:3px solid var(--blue);outline-offset:3px}
svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip-link {position:absolute;top:-100px;left:12px;z-index:5;background:white;padding:10px 16px;border-radius:10px;color:var(--blue)}
.skip-link:focus {top:12px}
.site {width:min(calc(100% - 28px),510px);margin:0 auto;padding:20px 0 20px}
.hero {padding:18px 20px 22px;text-align:center;background:var(--cream-2);border:1px solid #F3E6DA;border-radius:26px;box-shadow:0 3px 19px rgba(40,61,76,.03);margin-bottom:18px}
.hero-logo-link {display:flex;align-items:center;justify-content:center;max-width:340px;margin:0 auto 8px;min-height:136px;padding:6px 16px;text-decoration:none}
.hero-logo {display:block;width:min(100%,252px);height:auto;object-fit:contain}
h1,h2,p {margin-top:0}
h1,h2,.eyebrow,.digital-label,.link-body strong,.price {font-family:"Fredoka", "Trebuchet MS", sans-serif}
.hero h1 {font-size:clamp(1.33rem,5vw,1.68rem);line-height:1.2;letter-spacing:.003em;font-weight:600;color:var(--blue);margin:0 auto 9px;max-width:410px}
.hero h1 span {display:block}
.hero p {font-size:.93rem;line-height:1.45;margin:0 auto;max-width:370px;color:var(--graphite)}
.feature {background:var(--white);border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);padding:18px 17px 17px;overflow:hidden}
.feature-head {display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:14px}
.eyebrow {display:inline-flex;align-items:center;gap:7px;font-size:.70rem;font-weight:600;letter-spacing:.065em;color:var(--blue)}
.eyebrow-dot {width:8px;height:8px;border-radius:50%;background:var(--coral)}
.digital-label {font-size:.67rem;color:var(--blue);background:var(--blue-pale);border-radius:99px;padding:6px 9px;white-space:nowrap}
.feature-grid {display:grid;grid-template-columns:minmax(120px,39%) minmax(0,1fr);gap:16px;align-items:center}
.cover-frame {margin:0;display:flex;align-items:center;flex-direction:column;background:var(--cream);border-radius:14px;padding:9px 9px 6px;align-self:stretch;justify-content:center}
.cover {display:block;width:100%;height:auto;object-fit:contain;max-height:250px;border-radius:8px}
.cover-note {font-size:.65rem;color:var(--graphite);margin-top:7px;text-align:center}
.feature-details {min-width:0}
.feature h2 {font-weight:600;color:var(--blue);font-size:clamp(1.1rem,4vw,1.4rem);line-height:1.15;margin-bottom:9px}
.feature-subtitle {font-size:.84rem;line-height:1.37;margin:0 0 11px}
.feature-facts {display:flex;flex-wrap:wrap;gap:5px;margin-bottom:13px}
.feature-facts span {font-size:.68rem;line-height:1.25;padding:4px 7px;border:1px solid #DDDCDC;border-radius:7px;color:var(--graphite);background:var(--cream-2)}
.price-intro {font-size:.77rem;margin:0 0 2px;color:var(--graphite)}
.price {font-size:1.52rem;color:var(--blue);font-weight:600;line-height:1.13;margin:0}
.price span {font-family:"Comic Neue",sans-serif;font-size:.73rem;color:var(--graphite);font-weight:700}
.feature-actions {margin-top:14px;display:grid;gap:7px}
.button {display:flex;gap:10px;align-items:center;justify-content:center;text-decoration:none;padding:12px 18px;border-radius:12px;font-family:"Fredoka",sans-serif;font-weight:600;font-size:1rem;min-height:51px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.button-main {background:var(--blue);color:var(--white);box-shadow:0 4px 0 #063E7A}
.button-main:hover {background:#064883;transform:translateY(-2px);box-shadow:0 6px 0 #063E7A}
.button-main:active {transform:translateY(2px);box-shadow:0 2px 0 #063E7A}
.button svg {width:19px;height:19px}
.secondary-link {display:block;color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-align:center;font-size:.82rem;font-weight:700;padding:8px 0 2px}
.quick {margin-top:23px}
.section-heading {display:flex;align-items:center;gap:12px;margin:0 4px 13px}
.section-heading span {height:1px;background:#E5DAD0;flex:1}
.section-heading h2 {font-size:1.04rem;color:var(--blue);font-weight:600;white-space:nowrap;margin:0}
.link-list {display:grid;gap:10px}
.link-card {text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:16px;min-height:69px;padding:10px 13px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(40,61,76,.03);transition:transform .18s ease,border-color .18s ease}
.link-card:hover {transform:translateY(-1px);border-color:var(--blue)}
.link-icon {width:43px;height:43px;border-radius:12px;display:grid;place-items:center;flex:none}
.link-icon.blue {background:var(--blue-pale);color:var(--blue)}
.link-icon.coral {background:#FDEAE6;color:#AC4B42}
.link-icon svg {width:23px;height:23px}
.link-body {min-width:0;flex:1}
.link-body strong {display:block;font-size:.96rem;font-weight:600;color:var(--blue);line-height:1.2}
.link-body small {display:block;margin-top:3px;color:var(--graphite);font-size:.77rem;line-height:1.25}
.chevron {color:var(--blue);width:17px;height:17px}
.footer {text-align:center;padding:25px 0 7px;color:var(--graphite)}
.footer p {font-size:.83rem;margin-bottom:9px}
.footer p span {color:var(--coral)}
.footer .legal {display:flex;align-items:center;justify-content:center;gap:10px;font-size:.76rem;margin-bottom:7px}
.footer a {color:var(--blue);text-underline-offset:3px}
.footer small {font-size:.72rem}
@media(max-width:360px) {
  .site {width:min(calc(100% - 20px),510px);padding-top:12px}
  .hero {padding:14px 13px 18px}
  .hero-logo {width:min(100%,230px)}
  .hero-logo-link {min-height:115px}
  .feature {padding:14px 12px}
  .feature-grid {gap:10px;grid-template-columns:minmax(100px,38%) minmax(0,1fr)}
  .feature h2 {font-size:1.04rem}
  .feature-subtitle {font-size:.78rem}
  .cover-frame {padding:6px 6px 5px}
  .feature-facts span {font-size:.63rem}
  .price {font-size:1.33rem}
  .digital-label {font-size:.61rem}
  .eyebrow {font-size:.62rem}
}
@media(min-width:700px) {.site {padding-top:32px} .hero {padding-top:25px}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important;scroll-behavior:auto!important}}