/* ═══════════════════════════════════════════
   CORE  —  Variables, reset, body
   ═══════════════════════════════════════════ */
:root {
    --bg:     #0A0F14;
    --bg2:    #0C1522;
    --panel:  rgba(255,255,255,.03);
    --border: rgba(255,255,255,.10);
    --border2:rgba(255,255,255,.16);
    --text:   rgba(255,255,255,.90);
    --muted:  rgba(255,255,255,.60);
    --brand:  #1FA64A;
    --brand2: #0E7A2F;
    --shadow: 0 12px 32px rgba(0,0,0,.28);
    --radius: 18px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Font size base para rem: 16px en desktop */
    font-size: 16px;
    /* Evitar que iOS agrande fuentes automáticamente */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body { height: 100%; }

body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Gradiente de fondo como pseudo-elemento fijo (sin background-attachment:fixed que mata iOS) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -10;
    background:
        radial-gradient(900px 520px at 18% -8%,  rgba(31,166,74,.18), transparent 52%),
        radial-gradient(700px 480px at 88% 5%,   rgba(31,166,74,.09), transparent 58%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    pointer-events: none;
}

a { color: inherit; text-decoration: none; }
a:hover { color: rgba(255,255,255,.95); }
img { max-width: 100%; height: auto; display: block; }

.brand { color: var(--brand); }
.muted  { color: var(--muted); }
.hr {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
    border: none;
}

/* Helpers de espaciado usados en varias secciones */
.gap-pro { gap: 20px; }

/* Evitar que contenido desborde grids y flex containers */
* { min-width: 0; }