/* ============================================================ Tagos · global.css — Paleta B: crema + amarillo ============================================================ */ /* Fuentes cargadas desde el de cada layout */ :root { --bg: #f5f4f1; --surface: #ffffff; --surface2: #efede8; --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.14); --text: #181714; --muted: #6b6a65; --hint: #9e9d97; --accent: #f0c800; --accent-d: #c9a800; --accent-bg:#fdf7d6; --accent-border: rgba(240,200,0,0.3); --dark: #181714; --dark-d: #2e2c28; --green: #0F6E56; --green-bg: #E1F5EE; --amber: #854F0B; --amber-bg: #FAEEDA; --red: #A32D2D; --red-bg: #FCEBEB; --gray: #5F5E5A; --gray-bg: #F1EFE8; --font: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-h: 'Nunito', -apple-system, sans-serif; --radius: 12px; --radius-sm: 7px; --radius-lg: 16px; --container: 1100px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; } :focus-visible { outline: 2px solid var(--accent-d); outline-offset: 3px; } .container { width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; } /* ── Botones ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; font-family: var(--font); border: none; cursor: pointer; transition: all .18s ease; white-space: nowrap; text-decoration: none; line-height: 1.3; } .btn-primary { background: var(--accent); color: var(--text); box-shadow: 0 1px 3px rgba(240,200,0,.3); } .btn-primary:hover { background: var(--accent-d); box-shadow: 0 4px 14px rgba(240,200,0,.35); transform: translateY(-1px); } .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border2); } .btn-secondary:hover { border-color: var(--accent-d); background: var(--accent-bg); } .btn-dark { background: var(--dark); color: #fff; } .btn-dark:hover { background: var(--dark-d); transform: translateY(-1px); } .btn-lg { padding: 13px 28px; font-size: 15px; } /* ── Header ──────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(245,244,241,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display:flex; align-items:center; gap:32px; height:72px; } .logo { display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none; } .logo-name { font-family:var(--font-h); font-size:19px; font-weight:700; color:var(--text); letter-spacing:-.3px; } .main-nav { display:flex; gap:4px; margin-left:auto; } .main-nav a { font-size: 14px; font-weight: 500; color: var(--muted); padding: 6px 12px; border-radius: var(--radius-sm); transition: all .15s; text-decoration: none; } .main-nav a:hover { color: var(--text); background: var(--surface2); } .header-cta { margin-left: 8px; } .header-cta .btn { padding: 7px 16px; font-size: 13px; } /* ── Menú móvil ──────────────────────────────────────────────── */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; margin-left: auto; border-radius: var(--radius-sm); } .nav-toggle:hover { background: var(--surface2); } .nav-toggle span { display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:all .2s; } .mobile-nav { display: flex; flex-direction: column; padding: 12px 16px 16px; gap: 2px; border-top: 1px solid var(--border); background: var(--surface); } .mobile-nav.is-hidden { display: none; } .mobile-nav a { padding:10px 12px; font-size:15px; font-weight:500; color:var(--muted); border-radius:var(--radius-sm); transition:all .15s; } .mobile-nav a:hover { color:var(--text); background:var(--surface2); } .mobile-nav .btn { margin-top:8px; justify-content:center; width:100%; } .mobile-nav-section { font-size:10px; font-family:var(--font-h); text-transform:uppercase; letter-spacing:1.5px; color:var(--hint); font-weight:700; padding:12px 12px 4px; } /* ── Dropdown nav ────────────────────────────────────────────── */ .nav-link { font-size:14px; font-weight:500; color:var(--muted); padding:6px 12px; border-radius:var(--radius-sm); transition:all .15s; text-decoration:none; } .nav-link:hover { color:var(--text); background:var(--surface2); } .nav-dropdown { position: relative; } .nav-dropdown-btn { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:500; color:var(--muted); padding:6px 10px; border-radius:var(--radius-sm); white-space:nowrap; background:none; border:none; cursor:pointer; font-family:var(--font); transition:all .15s; } .nav-dropdown-btn:hover, .nav-dropdown-btn[aria-expanded="true"] { color:var(--text); background:var(--surface2); } .nav-dropdown-arrow { transition:transform .2s ease; flex-shrink:0; } .nav-dropdown-btn[aria-expanded="true"] .nav-dropdown-arrow { transform:rotate(180deg); } .nav-dropdown-menu { position:absolute; top:100%; left:0; /* padding-top crea área invisible que une botón y menú, evitando que mouseleave se dispare al bajar el ratón */ padding-top:10px; background:transparent; min-width:280px; z-index:200; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; transform:translateY(-4px); } .nav-dropdown-menu.is-open { opacity:1; transform:translateY(0); pointer-events:all; } .nav-dropdown-menu-inner { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06); padding:8px; } .nav-dropdown-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm); text-decoration:none; transition:background .15s; } .nav-dropdown-item:hover { background:var(--surface2); } .ndi-icon { font-size:20px; width:36px; height:36px; background:var(--bg); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ndi-text { display:flex; flex-direction:column; gap:1px; } .ndi-text strong { font-size:13px; font-weight:600; color:var(--text); } .ndi-text em { font-size:11px; color:var(--hint); font-style:normal; } .nav-dropdown-divider { height:1px; background:var(--border); margin:6px 4px; } /* ── Footer ──────────────────────────────────────────────────── */ .site-footer { background:var(--surface); border-top:1px solid var(--border); padding:52px 0 28px; margin-top:80px; } .footer-grid { display:grid; grid-template-columns:1fr auto; gap:48px; margin-bottom:36px; } .footer-brand .logo { margin-bottom:10px; } .footer-tagline { font-size:13px; color:var(--hint); max-width:220px; line-height:1.55; } .footer-links { display:flex; gap:48px; } .footer-col { display:flex; flex-direction:column; gap:8px; } .footer-col h4 { font-size:11px; font-family:var(--font-h); text-transform:uppercase; letter-spacing:1px; color:var(--hint); margin-bottom:4px; font-weight:600; } .footer-col a { font-size:13px; color:var(--muted); transition:color .15s; } .footer-col a:hover { color:var(--text); } .footer-kitdigital { padding:20px 0; border-top:1px solid var(--border); opacity:.7; transition:opacity .2s; } .footer-kitdigital:hover { opacity:1; } .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid var(--border); font-size:12px; color:var(--hint); } /* ── Secciones ───────────────────────────────────────────────── */ .section { padding: 72px 0; } .section-sm { padding: 44px 0; } .section-label { display:inline-block; font-size:11px; font-family:var(--font-h); letter-spacing:2px; text-transform:uppercase; color:var(--amber); margin-bottom:12px; font-weight:600; } .section-title { font-family:var(--font-h); font-size:clamp(26px,3.5vw,40px); font-weight:700; line-height:1.15; color:var(--text); letter-spacing:-.5px; } .section-subtitle { font-size:17px; color:var(--muted); margin-top:14px; max-width:540px; line-height:1.6; } .text-center { text-align:center; } .text-center .section-subtitle { margin-left:auto; margin-right:auto; } /* ── Prose ───────────────────────────────────────────────────── */ .prose { color:var(--muted); font-size:16px; line-height:1.75; } .prose p { margin-bottom:16px; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { .main-nav, .header-cta { display: none; } .nav-toggle { display: flex; } .footer-grid { grid-template-columns:1fr; gap:28px; } .footer-links { flex-wrap:wrap; gap:28px; } .footer-bottom { flex-direction:column; gap:6px; text-align:center; } .section { padding: 52px 0; } /* Features: una columna en móvil */ .features-grid { grid-template-columns: 1fr !important; } }