:root {
  color-scheme: light;
  --brand: #dc2626;
  --ink: #18181b;
  --muted: #52525b;
  --line: #e4e4e7;
  --canvas: #faf8f5;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin: 0; }
.shell { width: min(1080px, calc(100% - 64px)); margin-inline: auto; }
.header { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 24px; font-weight: 750; letter-spacing: -1px; }
.brand span { color: var(--brand); }
nav { display: flex; gap: 30px; }
nav a,.login,footer { font-size: 13px; }
nav a { color: var(--muted); }
.login { font-weight: 600; }
.login span { margin-left: 8px; }
a:hover { color: var(--brand); }
.label { font-size: 11px; letter-spacing: .12em; font-weight: 650; color: var(--muted); }
.hero { padding: 112px 0 108px; text-align: center; }
.hero .label { color: var(--brand); }
h1 { font-size: clamp(44px, 5.5vw, 72px); font-weight: 600; line-height: 1.09; letter-spacing: -.055em; margin: 25px auto; }
.intro { max-width: 530px; margin: 0 auto 32px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; background: var(--brand); color: white; padding: 16px 24px; border-radius: 6px; font-size: 14px; font-weight: 600; min-height: 52px; }
.button:hover { color: white; background: #b91c1c; }
.note { font-size: 12px; color: var(--muted); margin-top: 17px; }
.section { padding-block: 88px; }
#recursos { border-top: 1px solid var(--line); }
h2 { font-size: clamp(30px, 3.5vw, 43px); letter-spacing: -.045em; line-height: 1.16; font-weight: 550; margin-top: 20px; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.section-description { max-width: 580px; font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 24px; }
.feature-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.feature-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 26px; scroll-margin-top: 24px; }
.feature-card h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.025em; }
.feature-card>p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-top: 12px; }
.feature-card ul { border: 0; padding: 0; margin-top: 20px; }
.feature-card li { font-size: 13px; line-height: 1.6; padding-block: 5px; }
.feature-card li:before { color: var(--brand); }
.getting-started { border-top: 1px solid var(--line); }
.start-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding: 0; margin: 44px 0 0; }
.start-steps li { padding: 0; }
.start-steps li:before { content: none; }
.start-steps span { color: var(--brand); font-size: 12px; }
.start-steps h3 { margin: 18px 0 10px; }
.start-steps p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.plan>p:not(.price) { color: var(--muted); line-height: 1.6; font-size: 14px; }
.plans-wrap { background: white; border-block: 1px solid var(--line); }
.plans { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; gap: 24px; }
.plan { border: 1px solid var(--line); border-radius: 8px; padding: 34px; }
.starter { border-top: 2px solid var(--brand); }
.plan-heading { display: flex; align-items: center; justify-content: space-between; }
.plan-heading h3 { font-size: 24px; }
.availability { font-size: 11px; color: var(--brand); }
.soon { color: var(--muted); }
.plan>p:not(.price):not(.unavailable) { font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.price { font-size: 52px; letter-spacing: -.055em; margin: 26px 0; font-weight: 550; }
.price>span { font-size: 18px; letter-spacing: 0; font-weight: 400; }
.price small { font-size: 14px; letter-spacing: 0; color: var(--muted); margin-left: 5px; font-weight: 400; }
.plan .button { display: flex; }
.unavailable { background: #f4f4f5; color: #71717a; border-radius: 6px; text-align: center; padding: 16px; min-height: 52px; font-size: 14px; }
ul { padding: 25px 0 0; margin: 26px 0 0; list-style: none; border-top: 1px solid var(--line); }
li { font-size: 14px; line-height: 1.65; padding: 6px 0 6px 22px; position: relative; }
li:before { content: "✓"; position: absolute; left: 0; color: #71717a; font-size: 12px; }
.faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 22px 24px 22px 0; font-size: 15px; font-weight: 550; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary:after { content: "+"; position: absolute; right: 0; font-weight: 400; color: var(--muted); }
details[open] summary:after { content: "−"; }
details p { color: var(--muted); font-size: 14px; line-height: 1.8; padding-bottom: 22px; }
.closing { text-align: center; padding: 88px 0 100px; border-top: 1px solid var(--line); }
.closing .button { margin-top: 32px; }
footer { border-top: 1px solid var(--line); padding-block: 30px; display: flex; align-items: center; justify-content: space-between; }
footer p { color: var(--muted); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }
.skip { position: fixed; top: -60px; background: white; padding: 12px; z-index: 5; }
.skip:focus { top: 10px; left: 10px; }
@media(max-width:900px) {
  .feature-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-steps { gap: 24px; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
  .plan { padding: 26px; }
  .hero { padding-block: 76px; }
  nav { gap: 18px; }
}
@media(max-width:600px) {
  .shell { width: calc(100% - 40px); }
  .header { height: auto; min-height: 72px; flex-wrap: wrap; gap: 0; padding-top: 20px; }
  .header nav { order: 3; width: 100%; justify-content: center; gap: 28px; border-bottom: 1px solid var(--line); margin-top: 20px; padding-bottom: 16px; }
  .header nav a { min-height: 28px; display: flex; align-items: center; }
  .brand { font-size: 22px; }
  .login { font-size: 12px; min-height: 32px; display: flex; align-items: center; }
  h1 { font-size: clamp(32px, 8.4vw, 44px); line-height: 1.15; letter-spacing: -.045em; margin-block: 20px; }
  .hero { padding: 48px 0 52px; }
  .hero h1 br { display: none; }
  .intro { font-size: 15px; line-height: 1.7; margin-bottom: 24px; max-width: 360px; }
  .label { font-size: 10px; letter-spacing: .1em; }
  .note { font-size: 11px; line-height: 1.6; }
  .button { font-size: 14px; min-height: 48px; padding: 14px 20px; }
  .section { padding-block: 48px; }
  h2 { font-size: 27px; line-height: 1.2; margin-top: 12px; letter-spacing: -.035em; }
  .section-description { font-size: 14px; line-height: 1.7; margin-top: 16px; }
  .feature-details { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .feature-card { padding: 22px; }
  .feature-card h3 { font-size: 17px; }
  .feature-card>p { font-size: 14px; margin-top: 10px; }
  .feature-card ul { margin-top: 14px; }
  .start-steps { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .start-steps li { padding-left: 38px; }
  .start-steps span { position: absolute; left: 0; top: 2px; }
  .start-steps h3 { margin: 0 0 8px; font-size: 16px; }
  .start-steps p { line-height: 1.7; }
  .plans { grid-template-columns: 1fr; margin-top: 28px; gap: 16px; }
  .plan { padding: 24px; }
  .plan-heading h3 { font-size: 22px; }
  .price { font-size: 42px; margin-block: 22px; }
  .faq { gap: 16px; }
  summary { font-size: 14px; line-height: 1.5; padding-block: 18px; }
  .closing { padding-block: 48px; }
  .closing .button { margin-top: 24px; }
  footer { gap: 16px; padding-block: 24px; }
  footer p { display: none; }
}