:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #080c0b; color: #f5f5eb; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100svh; position: relative; isolation: isolate; display: flex; flex-direction: column; overflow-x: hidden; }
.botanica, .tinta, .sombra { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.botanica { background: url('botanica.png') center / 1050px repeat; filter: invert(1); opacity: .54; }
.tinta { background: linear-gradient(115deg, #72af3f 4%, #3a9782 48%, #1188ae 100%); mix-blend-mode: multiply; }
.sombra { background: radial-gradient(ellipse at 50% 47%, #080c0b 6%, rgba(8,12,11,.96) 24%, rgba(8,12,11,.78) 42%, rgba(8,12,11,.1) 78%), linear-gradient(0deg, #080c0b 0%, transparent 23%, transparent 80%, rgba(8,12,11,.65)); }
main { flex: 1; width: 100%; max-width: 1000px; margin: auto; padding: clamp(72px, 12vh, 150px) 24px 64px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.eyebrow { margin: 0 0 38px; color: #bfcbbd; text-transform: uppercase; font-size: .75rem; font-weight: 600; letter-spacing: .29em; line-height: 1.8; }
h1 { margin: 0; font-size: clamp(5rem, 12vw, 11.5rem); font-weight: 900; line-height: .88; letter-spacing: -.065em; }
h1 span { color: #f5f5eb; }
.line { width: 64px; height: 2px; margin-top: 45px; background: linear-gradient(90deg, #79b948, #2696b4); }
.closing { font-size: 1rem; line-height: 1.65; color: #c2c9c1; margin: 23px 0 0; }
footer { padding: 16px 24px 30px; text-align: center; font-size: .75rem; letter-spacing: .08em; line-height: 1.6; color: #a9b6ad; }
@media (max-width: 600px) {
  .botanica { background-size: 720px; background-position: 42% center; opacity: .56; }
  .sombra { background: radial-gradient(ellipse at 50% 45%, #080c0b 5%, rgba(8,12,11,.94) 26%, rgba(8,12,11,.72) 48%, rgba(8,12,11,.16) 100%), linear-gradient(0deg, #080c0b, transparent 25%); }
  main { padding-top: 88px; padding-bottom: 64px; }
  .eyebrow { max-width: 240px; font-size: .75rem; letter-spacing: .2em; margin-bottom: 34px; }
  h1 { font-size: clamp(4.5rem, 20vw, 7.5rem); }
  footer { max-width: 290px; margin: 0 auto; }
}
