/* ================================================
   RESET.CSS — Reset, base, tipografía, layout, utilidades y botones
   Proyecto: SmartDaga Landing
   Autor: e-DAGA Systems
================================================ */

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-main); background: #fff; color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; line-height: 1.6; }
[id] { scroll-margin-top: 68px; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* ── Tipografía ── */
h1,h2,h3 { color: var(--dark); line-height: 1.2; }
h1 { font-size: clamp(2rem,5vw,3.4rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem,3.5vw,2.2rem); font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }

/* ── Layout ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.section    { padding: 5rem 0; background: #fff; }
.s-alt      { background: var(--bg2); }
.s-dark     { background: var(--navy); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.tc { text-align: center; }

/* ── Labels ── */
.lbl   { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: .4rem; }
.lbl-w { color: rgba(255,255,255,.55); }

/* ── Helpers de sección ── */
.section-header    { margin-bottom: 3rem; }
.section-header-sm { margin-bottom: 1rem; }
.section-header-xs { margin-bottom: .5rem; }
.section-sub    { color: #6B7280; margin: .75rem auto 0; max-width: 520px; font-size: 1rem; }
.section-sub-sm { color: #6B7280; margin: .5rem auto 0; max-width: 480px; font-size: .95rem; }
.mt-cta   { margin-top: 2.5rem; }
.plan-note { margin-top: 1.5rem; font-size: .82rem; color: #9CA3AF; }
.text-accent { color: var(--orange); }

/* ── Animación scroll ── */
.fade-up         { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── Botones ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; transition: all .2s; font-family: var(--font-main); }
.btn-green   { background: var(--green); color: #fff; padding: .875rem 2rem; font-size: 1rem; }
.btn-green:hover  { background: var(--green2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,176,80,.35); }
.btn-ghost   { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); padding: .85rem 1.75rem; font-size: .95rem; }
.btn-ghost:hover  { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); }
.btn-orange  { background: var(--orange); color: #fff; padding: .875rem 2rem; font-size: 1rem; }
.btn-orange:hover { background: #ea580c; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(249,115,22,.35); }
.btn-wa      { background: #25D366; color: #fff; padding: .8rem 1.6rem; font-size: .9rem; }
.btn-wa:hover     { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,211,102,.35); }
.btn-outline-d    { background: transparent; color: var(--dark); border: 2px solid var(--border); padding: .75rem 1.5rem; font-size: .9rem; }
.btn-outline-d:hover { border-color: var(--navy); color: var(--navy); }
.btn-wa-block { width: 100%; justify-content: center; }