/* styles_optimized.css — progressive enhancement, no content changes */
:root{
  --bg: #0a0c10;
  --card: #121621;
  --muted: #8a93a6;
  --text: #e8ecf3;
  --primary: #2ea043;   /* accessible green */
  --primary-contrast: #08130c;
  --link: #4ea3ff;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(0,0,0,.25);
  --maxw: 1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(46,160,67,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(78,163,255,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  font: 15px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img, video{max-width:100%; height:auto; display:block}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.container, .wrap, .wrapper, .content, .c-wrapper{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

.section, section{
  padding: clamp(32px, 7vw, 72px) 0;
}

.card, .panel, .box, .c-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px);
  backdrop-filter: blur(6px);
}

h1,h2,h3,h4{
  line-height:1.15;
  margin: 0 0 .4em 0;
  letter-spacing:.2px;
}
h1{font-size: clamp(28px, 4.4vw, 44px)}
h2{font-size: clamp(22px, 3.4vw, 34px)}
h3{font-size: clamp(18px, 3vw, 26px)}
p{margin:.6em 0 1em; color: #ccd3e0}

.lead, .subtitle, .sub, ._sub, .hero-sub, .tagline{
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--muted);
  max-width: 70ch;
}

.grid{
  display:grid;
  gap: clamp(14px, 2.4vw, 24px);
}
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 900px){
  .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr }
}

/* Buttons — also upgrade anchors that look like buttons */
button, .btn, [role="button"], .button, a.btn, a.button {
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding: 12px 18px; min-height:44px;
  font-weight:600; letter-spacing:.2px;
  border-radius: calc(var(--radius) - 6px);
  background:linear-gradient(180deg, rgba(46,160,67, .95), rgba(46,160,67, .78));
  color: #eafff1; box-shadow: 0 6px 18px rgba(46,160,67,.35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  outline: none;
}
button:hover, .btn:hover, [role="button"]:hover, .button:hover, a.btn:hover, a.button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(46,160,67,.42);
  text-decoration:none;
}
button:active, .btn:active, [role="button"]:active, .button:active, a.btn:active, a.button:active{
  transform: translateY(0);
  filter: brightness(.98);
}
.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  color:var(--text);
}
.btn-light{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  color:#0b1220;
  box-shadow: 0 6px 18px rgba(255,255,255,.22);
}

/* WhatsApp CTA heuristic */
a[href*="wa.me"], a[href*="whatsapp"], .btn-whatsapp{
  position: relative;
  background: linear-gradient(180deg, rgba(37,211,102,.98), rgba(37,211,102,.82));
  color:#05270f;
  box-shadow: 0 8px 20px rgba(37,211,102,.35);
}
a[href*="wa.me"]::after, a[href*="whatsapp"]::after, .btn-whatsapp::after{
  content:""; width:18px; height:18px;
  background: currentColor; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23000" viewBox="0 0 24 24"><path d="M12 .5C5.65.5.5 5.65.5 12c0 2.02.53 3.94 1.55 5.65L.5 23.5l6.05-1.52A11.49 11.49 0 0 0 12 23.5c6.35 0 11.5-5.15 11.5-11.5S18.35.5 12 .5zm0 20.67c-1.9 0-3.65-.5-5.2-1.42l-.37-.22-3.6.91.96-3.52-.24-.38A9.32 9.32 0 1 1 12 21.17zm5.4-6.96c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.95 1.16-.17.2-.35.23-.65.08-.3-.15-1.26-.46-2.4-1.47-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.53.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.67-1.61-.92-2.21-.24-.58-.48-.5-.67-.5l-.57-.01c-.2 0-.53.07-.8.38-.27.3-1.05 1.03-1.05 2.5 0 1.47 1.08 2.9 1.23 3.1.15.2 2.13 3.25 5.16 4.56.72.31 1.27.49 1.7.63.72.23 1.38.2 1.9.12.58-.09 1.75-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg>') center/contain no-repeat;
  display:inline-block;
  margin-left: 6px;
}

/* Forms */
input, select, textarea{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  padding: 12px 14px;
  border-radius: 12px;
  outline:none;
}
input::placeholder, textarea::placeholder{ color:#9aa3b5 }
label{ font-weight:600; margin-bottom:6px; display:block }
.form-row{ display:grid; gap:12px; grid-template-columns: 1fr 1fr }
@media (max-width: 720px){ .form-row{ grid-template-columns: 1fr } }

/* Hero heuristics */
.hero, .header-hero, .top-hero{
  padding: clamp(48px, 8vw, 108px) 0;
  position: relative;
}
.hero .container > *:not(:last-child){ margin-bottom: 10px }
.hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px }

/* Tables */
table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius: 12px }
th, td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08) }
th{ text-align:left; color:#c8d1e1; background: rgba(255,255,255,.04) }

/* Footer + legal */
footer{ padding: 36px 0; color:#9aa3b5 }
.legal, .legal-links, .footer-links{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  color:#b7c0d2;
}
.legal a, .legal-links a, .footer-links a{ color:#cfe3ff; text-decoration:underline }
small, .small, .disclaimer{ color:#9aa3b5; font-size: 12px }

/* Utilities */
.center{ text-align:center }
.stack > *{ margin: 0 0 12px 0 }
.maxw-70{ max-width:70ch }
.round{ border-radius: var(--radius) }
.shadow{ box-shadow: var(--shadow) }
.muted{ color:var(--muted) }

/* Make any over-dark backgrounds more legible for links and disclaimers */
[class*="legal"] a, [class*="legal"] { color: #dfe8ff !important }


.highlight-text { color: #7eff33 !important; }