/* ========================= EcoLATAM – Under Construc SOLO CSS – versión pulida ========================= */ /* --------- Tokens --------- */ :root{ /* Colores base */ --bg-0: #06090f; --bg-1: #0a0f1a; --bg-2: #0d1422; --surface: rgba(18, 24, 36, 0.72); /* glass */ --surface-2: rgba(18, 24, 36, 0.55); --border: 1px solid rgba(255,255,255,.08); --divider: rgba(255,255,255,.08); /* Texto */ --fg: #ecf2f8; --muted: #a8b4c7; --muted-2: #94a3b8; /* Marca */ --brand: #22c55e; --brand-2: #16a34a; --brand-3: #34d399; /* Efectos */ --shadow-1: 0 10px 30px rgba(0,0,0,.35); --shadow-2: 0 18px 50px rgba(0,0,0,.45); --ring: 0 0 0 3px rgba(34,197,94,.25); /* Tipografía & layout */ --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --radius-1: 12px; --radius-2: 16px; --radius-pill: 999px; --container: 1120px; /* Ritmo vertical */ --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px; --space-7: 44px; --space-8: 56px; } /* Modo claro opcional (si algún día lo activas con ) */ html[data-theme="light"]{ --bg-0: #f7fafc; --bg-1: #f1f5f9; --bg-2: #e9eef5; --surface: rgba(255,255,255,.8); --surface-2: rgba(255,255,255,.6); --fg: #0b1220; --muted: #4b5563; --muted-2: #64748b; --divider: rgba(10,18,32,.1); } /* --------- Reset suave --------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} img{display:block;max-width:100%} a{text-decoration:none;color:var(--brand)} a:hover{text-decoration:underline} button{font:inherit} :focus-visible{outline:none; box-shadow: var(--ring)} /* --------- Base --------- */ html, body{ background: radial-gradient(1000px 700px at 12% 0%, var(--bg-1) 0, var(--bg-2) 45%, var(--bg-0) 100%); color:var(--fg); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.5; } .container{max-width:var(--container);margin:0 auto;padding:0 20px} /* --------- Header --------- */ .site-header{ position:sticky; top:0; z-index:30; background:linear-gradient(180deg, rgba(6,9,15,.95), rgba(6,9,15,.55), rgba(6,9,15,0)); backdrop-filter: blur(10px); border-bottom: var(--border); } .header-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); } .brand img{height:100px} .nav{display:flex; gap:var(--space-3); flex-wrap:wrap} .nav a{ padding:8px 10px; border-radius:10px; transition: background .2s ease; } .nav a:hover{background:rgba(255,255,255,.06); text-decoration:none} /* --------- Hero --------- */ .hero{padding: clamp(48px, 8vw, var(--space-8)) 0 var(--space-5)} .hero-inner{max-width:920px} .eyebrow{ display:inline-block; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--brand-3); background:rgba(52,211,153,.10); border:1px solid rgba(52,211,153,.25); padding:6px 10px; border-radius: var(--radius-pill); margin-bottom:var(--space-2); } h1{ margin:0 0 var(--space-2); font-size:clamp(28px, 6vw, 48px); line-height:1.08; letter-spacing:-.02em; text-shadow: 0 1px 0 rgba(0,0,0,.25); } .lead{ color:var(--muted); max-width:70ch; font-size:clamp(16px, 2.6vw, 18px); margin:0 0 var(--space-4); } /* --------- Botones --------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; padding:12px 16px; border-radius:var(--radius-1); border:1px solid transparent; box-shadow: var(--shadow-1); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; will-change: transform; } .btn-primary{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#062010; } .btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--shadow-2)} .btn-ghost{ background: rgba(255,255,255,.04); color:var(--fg); border: var(--border); } .btn-ghost:hover{background: rgba(255,255,255,.07)} /* --------- KPIs --------- */ .kpis{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin: var(--space-4) 0 var(--space-2); padding:0; list-style:none; } .kpis li{ flex:1; min-width:190px; background: var(--surface); border: var(--border); border-radius: var(--radius-1); padding: 12px 14px; box-shadow: var(--shadow-1); backdrop-filter: blur(10px); } .kpi-label{display:block; color:var(--muted-2); font-size:12px} .kpi-value{display:block; font-size:20px; font-weight:900} /* --------- Secciones --------- */ .section{padding: var(--space-7) 0} .section.alt{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.02) 38%, transparent); } /* Grids reutilizables */ .grid{display:grid; gap:var(--space-3); grid-template-columns:repeat(2, minmax(0,1fr))} .cards{display:grid; gap:var(--space-3); grid-template-columns:repeat(3, minmax(0,1fr))} /* Tarjetas */ .card{ background: var(--surface); border: var(--border); border-radius: var(--radius-2); padding: var(--space-4); box-shadow: var(--shadow-1); backdrop-filter: blur(10px); } .card h2, .card h3{margin-top:0} .muted{color:var(--muted)} /* Listas bonitas */ .tick{margin: var(--space-2) 0 0 18px} .tick li{margin: 6px 0} .roadmap{margin: var(--space-2) 0 0 18px} .roadmap li{margin: 6px 0} /* Estado en vivo */ .status{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin: var(--space-3) 0 var(--space-4); } .label{display:block; color:var(--muted-2); font-size:12px; margin-bottom:4px} .badge{ display:inline-block; padding:9px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(120, 180, 140, .35); font-weight: 900; } /* Contacto */ .contact{margin: var(--space-2) 0 0 18px} .contact li{margin:6px 0} /* Notas pequeñas */ .small-note{color:var(--muted-2); font-size:12px} /* --------- Footer --------- */ .site-footer{border-top: var(--border); background: rgba(0,0,0,.35); padding: var(--space-4) 0} .footer-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap} .footer-nav{display:flex; gap:var(--space-3)} /* --------- Responsividad --------- */ @media (max-width: 1060px){ .container{padding:0 16px} } @media (max-width: 980px){ .grid{grid-template-columns: 1fr} .cards{grid-template-columns: 1fr} .kpis li{min-width: 160px} .hero{padding-top: var(--space-7)} } @media (max-width: 520px){ .header-inner{height:auto; padding:12px 0} .nav{gap:10px} .btn{width:100%} } /* --------- Motion-safe --------- */ @media (prefers-reduced-motion: reduce){ *{animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;} }