@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
    --vl-green:        #5BA318;   /* Verde ECP principal */
    --vl-green-dark:   #3d7010;   /* Verde oscuro — títulos */
    --vl-green-light:  #EAF3DE;   /* Verde claro — fondos */
    --vl-night:        #1a1a2e;   /* Azul noche — texto oscuro */
    --vl-gray:         #D5D5D5;   /* Gris ECP — bordes */
    --vl-white:        #FFFFFF;
    --vl-text:         #1a1a2e;
    --vl-text-muted:   #6b7280;
    --vl-font:         'Inter', sans-serif;

    --bg-primary: #f8f9fa; 
    --bg-card: var(--vl-white); 
    --text-primary: var(--vl-text);
    --text-secondary: #4a4a5a; 
    --text-muted: var(--vl-text-muted); 
    --accent: var(--vl-green);
    --accent-light: var(--vl-green-light); 
    --border: var(--vl-gray); 
    --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--vl-font); background:var(--bg-primary); color:var(--text-primary); line-height:1.6; }

.hero { background:linear-gradient(135deg, var(--vl-green) 0%, var(--vl-green-dark) 100%); color:#fff; padding:80px 20px; text-align:center; }
.hero-content { max-width:600px; margin:0 auto; }
.logo-big { font-size:64px; margin-bottom:16px; }
.hero h1 { font-size:32px; font-weight:800; margin-bottom:12px; letter-spacing:-0.5px; }
.tagline { font-size:16px; opacity:0.9; font-weight:400; }

.container { max-width:800px; margin:40px auto; padding:0 20px; }

.info-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:30px; margin-bottom:24px; }
.info-section h2 { font-size:20px; font-weight:700; color:var(--accent); margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--accent-light); }
.info-section p { color:var(--text-secondary); font-size:15px; }

.docs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin-top:20px; }
.doc-card { display:flex; align-items:center; gap:12px; padding:16px; background:var(--bg-primary); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text-primary); transition:all 0.2s ease; }
.doc-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 12px rgba(91,163,24,0.1); }
.doc-icon { font-size:24px; }
.doc-name { font-size:14px; font-weight:600; }

.contacto-box { background:var(--bg-primary); padding:20px; border-radius:8px; margin-top:16px; border-left:4px solid var(--accent); }
.contacto-box p { font-size:14px; margin-bottom:4px; }

.footer { text-align:center; padding:30px 20px; background:var(--bg-card); border-top:1px solid var(--border); margin-top:40px; color:var(--text-secondary); font-size:14px; }

@media(max-width:600px) {
    .hero { padding:50px 20px; }
    .hero h1 { font-size:26px; }
    .docs-grid { grid-template-columns:1fr; }
}