/* ========================================================================== e-cross International — hoja de estilo compartida (hub + 12 divisiones) DIRECCION DE ARTE v2 "Manual tecnico" (fusion de las 3 propuestas, 2026-08-02) - Estructura e instrumentacion -> propuesta A (Sala de control) reticula, filete de 1px, rotulos en monoespaciada, densidad, riel 01-12. - Jerarquia y contenido -> propuesta B (Indice editorial) folio por division, medida de lectura, color administrado con avaricia. - Material y luz -> propuesta C (Materia y luz) placa con canto de luz del acento, elevacion suave. SOLO para estado/acento. Regla que evita la mezcla de metaforas: instrumentacion = layout, editorial = contenido, luz = estado. Nada de "dashboard futurista". TEMA CLARO Y OSCURO: todo color sale de un token. Prohibido escribir un hex directo en el HTML o aqui fuera de los bloques de tema de mas abajo. El tema se resuelve en (script anti-FOUC en head.html); sin atributo manda prefers-color-scheme. ACENTO POR PAGINA: build.py inyecta --accent (decorativo), --accent-ink-* (tinta legible, validada AA contra la superficie de cada tema) y --accent-soft-* (tinte de fondo). Editar aqui, NUNCA en dist\. ========================================================================== */ /* --- tema claro (default) -------------------------------------------------- */ :root { color-scheme: light; --bg: #EDECE8; --bg-alt: #E5E4DF; --surface: #F8F7F4; --surface-2: #FFFFFF; --surface-inv: #14161A; --text-inv: #F5F4F1; --border: #D3D1CA; --hairline: #E1DFD9; --text: #14161A; --text-muted: #4C5056; --text-soft: #666A6F; /* AA 4.6:1 sobre el papel — es texto pequeno */ --shadow-1: 0 1px 2px rgba(20, 22, 26, .05); --shadow-2: 0 1px 2px rgba(20, 22, 26, .06), 0 10px 26px rgba(20, 22, 26, .07); --shadow-3: 0 2px 4px rgba(20, 22, 26, .07), 0 18px 40px rgba(20, 22, 26, .10); --accent: #00D1FF; --accent-rgb: 0, 209, 255; --accent-dark: #00B0E0; --accent-ink: var(--accent-ink-light, #0E7490); --accent-soft: var(--accent-soft-light, rgba(0, 209, 255, .10)); --grid-line: rgba(20, 22, 26, .05); --scrim: rgba(237, 236, 232, .88); --step: 4px; --measure: 68ch; --ease: cubic-bezier(.2, .7, .3, 1); /* Ritmo vertical adaptado a la ALTURA del viewport, no solo al ancho. El parque real incluye laptops de 1366x768 (viewport util ~543px): con padding fijo de 96px cada seccion se comia 1.5-2 pantallas. */ --nav-h: 62px; --section-pad: clamp(2.25rem, 6.5vh, 6rem); --block-gap: clamp(1.25rem, 4vh, 3rem); } /* --- tema oscuro ----------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0A0A0A; --bg-alt: #0E0F10; --surface: #141517; --surface-2: #1A1B1E; --surface-inv: #F2F1ED; --text-inv: #14161A; --border: #2A2C30; --hairline: #1F2124; --text: #ECECEA; --text-muted: #A3A6AB; --text-soft: #82868B; --shadow-1: 0 1px 0 rgba(255, 255, 255, .03); --shadow-2: 0 1px 0 rgba(255, 255, 255, .04), 0 14px 34px rgba(0, 0, 0, .5); --shadow-3: 0 1px 0 rgba(255, 255, 255, .05), 0 22px 50px rgba(0, 0, 0, .62); --accent-ink: var(--accent-ink-dark, #67E8F9); --accent-soft: var(--accent-soft-dark, rgba(0, 209, 255, .12)); --grid-line: rgba(255, 255, 255, .045); --scrim: rgba(10, 10, 10, .9); } /* Sin eleccion guardada, manda el sistema. Mismo bloque que data-theme="dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0A0A0A; --bg-alt: #0E0F10; --surface: #141517; --surface-2: #1A1B1E; --surface-inv: #F2F1ED; --text-inv: #14161A; --border: #2A2C30; --hairline: #1F2124; --text: #ECECEA; --text-muted: #A3A6AB; --text-soft: #82868B; --shadow-1: 0 1px 0 rgba(255, 255, 255, .03); --shadow-2: 0 1px 0 rgba(255, 255, 255, .04), 0 14px 34px rgba(0, 0, 0, .5); --shadow-3: 0 1px 0 rgba(255, 255, 255, .05), 0 22px 50px rgba(0, 0, 0, .62); --accent-ink: var(--accent-ink-dark, #67E8F9); --accent-soft: var(--accent-soft-dark, rgba(0, 209, 255, .12)); --grid-line: rgba(255, 255, 255, .045); --scrim: rgba(10, 10, 10, .9); } } /* --- base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color .35s var(--ease), color .35s var(--ease); } h1, h2, h3, .display { font-family: 'Archivo', 'Inter', sans-serif; letter-spacing: -.025em } h1 { line-height: .96 } /* --- ritmo vertical: cada seccion cabe en una pantalla --------------------- .section reemplaza a los py-24/py-20 fijos de Tailwind. El padding sale de --section-pad (escala con vh), y scroll-margin-top evita que el nav fijo tape el encabezado al llegar por un ancla del menu. -------------------------------------------------------------------------- */ .section { padding-block: var(--section-pad); padding-inline: 1.5rem; scroll-margin-top: var(--nav-h); } .section-head { margin-bottom: var(--block-gap) } main > section[id] { scroll-margin-top: var(--nav-h) } /* Hero: alto exacto de una pantalla, descontando el nav fijo. min-height (no height) para que en zoom alto o textos largos pueda crecer y scrollear. */ .hero { min-height: 100svh; padding-block: calc(var(--nav-h) + clamp(.75rem, 3vh, 2rem)) clamp(1.5rem, 4vh, 3rem); padding-inline: 1.5rem; } .hero-inner { width: 100%; max-width: 64rem; margin-inline: auto } .hero-inner .badge { margin-bottom: clamp(.55rem, 1.8vh, 1.25rem) } .hero-inner h1 { font-size: clamp(1.85rem, min(4.6vw, 7.4vh), 3.75rem); margin-bottom: clamp(.6rem, 2vh, 1.5rem); } .hero-lead { max-width: 60ch; margin-inline: auto; font-size: clamp(.95rem, 1.9vh, 1.125rem); margin-bottom: clamp(.9rem, 3vh, 2.5rem); } .hero-stats { margin-top: clamp(.9rem, 4vh, 4rem) } .hero-cue { position: absolute; bottom: clamp(.5rem, 2vh, 2rem); left: 50%; z-index: 10 } /* En pantallas bajas la flecha estorba mas de lo que ayuda. */ @media (max-height: 620px) { .hero-cue { display: none } } /* Hero de division: mismo criterio, pero es de dos columnas y no se centra. */ .division-hero { padding-block: calc(var(--nav-h) + clamp(1rem, 4vh, 3.5rem)) var(--section-pad); padding-inline: 1.5rem; } .breadcrumb { font-size: .7rem; letter-spacing: .08em; margin-bottom: clamp(1rem, 3.5vh, 2.5rem) } .division-h1 { font-size: clamp(1.85rem, min(4.4vw, 7vh), 3.75rem); margin-top: clamp(.7rem, 2vh, 1.25rem); margin-bottom: clamp(.7rem, 2vh, 1.25rem); } .division-lead { font-size: clamp(.95rem, 1.9vh, 1.125rem); margin-bottom: clamp(1rem, 3.5vh, 2.25rem); } /* Rotulos, folios y metadatos: la voz de instrumentacion (propuesta A). */ .mono, .eyebrow, .folio, .rail-num, .meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-ligatures: none; } /* --- utilidades de color (reemplazan los text-white / text-gray-* de Tailwind) */ .text-ink { color: var(--text) } .text-muted { color: var(--text-muted) } .text-soft { color: var(--text-soft) } .text-accent { color: var(--accent-ink) } .hover\:text-accent:hover { color: var(--accent-ink) } .bg-accent { background: var(--accent) } /* prefijo ec- para no chocar con utilidades que genere Tailwind CDN */ .ec-surface { background: var(--surface) } .ec-surface-alt { background: var(--bg-alt) } .ec-hair { border-color: var(--hairline) } .measure { max-width: var(--measure) } .eyebrow { color: var(--accent-ink); font-size: .69rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; display: block; margin-bottom: .75rem; } /* Folio editorial (propuesta B): el numero de division, siempre en el mismo sitio. */ .folio { font-size: .69rem; letter-spacing: .14em; color: var(--text-soft); display: inline-flex; align-items: center; gap: .5rem; } .folio::before { content: ''; width: 8px; height: 8px; background: var(--accent); flex-shrink: 0; } .rule { height: 1px; background: var(--hairline); border: 0 } .rule-accent { height: 2px; width: 148px; background: var(--accent); border: 0 } .skip-link { position: absolute; top: -100px; left: 1rem; background: var(--accent); color: #000; padding: .6rem 1.2rem; border-radius: 2px; font-weight: 700; font-size: .875rem; z-index: 9999; transition: top .2s; text-decoration: none; } .skip-link:focus { top: 1rem } /* --- lienzo de instrumentacion del hero (reemplaza al vortex) --------------- */ #vortex-canvas { position: absolute; inset: 0; width: 100%; height: 100% } .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 78%); } .gradient-text { color: var(--accent-ink) } /* --- placa: la superficie base (propuesta C, sin blur ni glass) ------------- */ .plate, .glass-card { position: relative; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* El canto de luz: se enciende con el acento, nunca esta encendido de fabrica. */ .plate::after, .glass-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .32s var(--ease); } .plate:hover, .glass-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--border); } .plate:hover::after, .glass-card:hover::after { transform: scaleY(1) } /* --- navegacion ------------------------------------------------------------ */ #navbar { transition: background-color .3s var(--ease), box-shadow .3s var(--ease) } .nav-scrolled { background: var(--scrim) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border); } .nav-link { color: var(--text-muted); font-size: .82rem; font-weight: 500; transition: color .2s; text-decoration: none; } .nav-link:hover { color: var(--accent-ink) } #mobile-menu { display: none; background: var(--scrim); backdrop-filter: blur(14px) } #mobile-menu.open { display: flex } .sub-brand { display: inline-flex; align-items: baseline; gap: .45rem; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .95rem; color: var(--text); text-decoration: none; line-height: 1; } .sub-brand .sub-brand-div { color: var(--accent-ink) } .brand-wordmark { display: block; width: auto } .brand-wordmark text { font-family: 'Archivo', sans-serif } .brand-divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0 } /* Chapa de division en el nav: "CLM · 03/12" (instrumentacion, propuesta A). */ .nav-tag { display: inline-flex; align-items: center; gap: .5rem; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .1em; color: var(--text-muted); border: 1px solid var(--border); padding: .3rem .55rem; background: var(--surface); } .nav-tag .dot { width: 8px; height: 8px; background: var(--accent); flex-shrink: 0 } /* --- interruptor de tema --------------------------------------------------- */ #theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; flex-shrink: 0; } #theme-toggle:hover { color: var(--accent-ink); border-color: var(--accent) } /* en celular el objetivo tactil sube a 44px */ @media (max-width: 767px) { #theme-toggle { width: 44px; height: 44px } } #theme-toggle .icon-sun { display: none } :root[data-theme="dark"] #theme-toggle .icon-sun { display: block } :root[data-theme="dark"] #theme-toggle .icon-moon { display: none } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: block } :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none } } /* --- barra de progreso de lectura ------------------------------------------ */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); z-index: 60; pointer-events: none; } /* --- botones --------------------------------------------------------------- */ .btn-primary { display: inline-block; background: var(--accent); color: #06121A; font-weight: 600; padding: .8rem 1.7rem; border-radius: 2px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; text-decoration: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: inherit; letter-spacing: -.01em; } .btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: var(--shadow-2) } .btn-primary:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px } .btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none } .btn-outline { display: inline-block; border: 1px solid var(--border); color: var(--text); font-weight: 500; padding: .8rem 1.7rem; border-radius: 2px; transition: border-color .2s, background-color .2s, transform .2s; text-decoration: none; background: transparent; } .btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px) } .btn-outline:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px } /* --- piezas de contenido --------------------------------------------------- */ .service-icon { width: 44px; height: 44px; background: var(--accent-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; flex-shrink: 0; color: var(--accent-ink); } .stat-num { font-family: 'Archivo', sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -.03em; } .stat-plate { border-top: 2px solid var(--accent); background: var(--surface) } .cyan-divider { height: 1px; background: var(--hairline); margin: 0 1.5rem } .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin-bottom: 1.25rem; } .badge-dot { width: 7px; height: 7px; background: var(--accent); animation: pulse-dot 2.4s infinite } .chip { display: inline-block; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); padding: .35rem .85rem; font-size: .8rem; font-weight: 500; font-family: 'IBM Plex Mono', monospace; } /* --- tarjetas de division (hub) -------------------------------------------- */ .div-card { display: block; text-decoration: none; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* canto de luz de la division (usa su propio acento, no el de la pagina) */ .div-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgb(var(--div-rgb)); transform: scaleY(0); transform-origin: top; transition: transform .32s var(--ease); } .div-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(var(--div-rgb), .10) 0%, transparent 42%); opacity: 0; transition: opacity .3s var(--ease); } .div-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2) } .div-card:hover::after { transform: scaleY(1) } .div-card:hover::before { opacity: 1 } .div-card:focus-visible { outline: 2px solid rgb(var(--div-rgb)); outline-offset: 3px } .div-card .div-icon { width: 42px; height: 42px; background: var(--surface-2); border: 1px solid var(--border); color: rgb(var(--div-rgb)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .div-card .div-folio { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .12em; color: var(--text-soft); } .div-card .div-title { font-family: 'Archivo', sans-serif; color: var(--text); font-weight: 600; letter-spacing: -.02em; transition: color .25s; } .div-card:hover .div-title { color: rgb(var(--div-rgb)) } .div-card .div-arrow { color: rgb(var(--div-rgb)); opacity: .55; transition: opacity .25s, transform .25s } .div-card:hover .div-arrow { opacity: 1; transform: translateX(3px) } .div-card .div-soon { font-family: 'IBM Plex Mono', monospace; font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); border: 1px solid var(--border); padding: 2px 7px; } /* --- riel de indice 01-12 (propuesta A: siempre saber donde estas) ---------- */ #rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-right: 0; } @media (min-width: 1280px) { #rail { display: flex } } #rail a { width: 34px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-soft); font-family: 'IBM Plex Mono', monospace; font-size: .66rem; text-decoration: none; border-left: 2px solid transparent; transition: color .2s, border-color .2s, background-color .2s; } #rail a:hover, #rail a.is-current { color: var(--text); border-left-color: rgb(var(--div-rgb)); background: var(--surface-2) } /* --- formulario ------------------------------------------------------------ */ .form-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 2px; padding: .8rem 1rem; transition: border-color .2s, box-shadow .2s; outline: none; font-family: 'Inter', sans-serif; font-size: .9rem; } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) } .form-input::placeholder { color: var(--text-soft) } select.form-input option { background: var(--surface-2); color: var(--text) } /* auto-fit, no dos columnas fijas: si la fila queda con un solo campo visible (paginas de division, donde "division" es un hidden) ocupa el ancho entero. */ .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem } /* Bloque de datos de contacto: gap propio para poder apretarlo por altura. */ .contact-list { display: flex; flex-direction: column; gap: 1.25rem } .contact-social { margin-top: 1.75rem; padding-top: 1.25rem } /* --- FAB WhatsApp ---------------------------------------------------------- */ #whatsapp-fab { position: fixed; bottom: 1.75rem; right: 1.75rem; width: 54px; height: 54px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, .4); z-index: 999; transition: transform .2s var(--ease), box-shadow .2s; text-decoration: none; } #whatsapp-fab:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37, 211, 102, .5) } @media (min-width: 1280px) { #whatsapp-fab { right: 3.5rem } } /* --- animaciones ----------------------------------------------------------- */ /* Solo se oculta si hay JS (.js lo pone el script del head). Sin JS o si el observer nunca dispara, el contenido se ve igual — nada de paginas en blanco. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .js .reveal.visible { opacity: 1; transform: none } /* Barrido de calibracion: una sola vez, solo en el hero (propuesta A). */ .calibrate { position: relative; overflow: hidden } .calibrate::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(180deg, transparent, var(--accent-soft) 45%, transparent); animation: ec-sweep .9s var(--ease) .15s 1 both; } @keyframes ec-sweep { from { transform: translateY(-100%) } to { transform: translateY(110%) } } @keyframes pulse-dot { 0%, 100% { opacity: 1 } 50% { opacity: .35 } } @keyframes bounce { 0%, 100% { transform: translateY(0) translateX(-50%) } 50% { transform: translateY(8px) translateX(-50%) } } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none } .calibrate::before { display: none } .plate, .glass-card, .div-card, .btn-primary, .btn-outline, #whatsapp-fab, body { transition: none } .div-card:hover, .plate:hover, .glass-card:hover, .btn-primary:hover, .btn-outline:hover { transform: none } .badge-dot { animation: none } #scroll-progress { display: none } html { scroll-behavior: auto } } /* --- densidad para pantallas bajas ---------------------------------------- Laptop de 1366x768 => viewport ~543px. Aqui se aprieta la tipografia y el relleno de las piezas para que cada seccion entre en una pantalla. El indice de 12 divisiones y el formulario siguen necesitando algo de scroll: apretar mas rompe la lectura y el objetivo tactil. -------------------------------------------------------------------------- */ @media (max-height: 780px) { .section-head h2, .section h2 { font-size: 1.6rem } .section-head h2 { margin-bottom: .5rem } .section-head p { font-size: .85rem; line-height: 1.45 } .eyebrow { margin-bottom: .4rem } .stat-num { font-size: 1.7rem } .stat-plate.p-5 { padding: .7rem .9rem } .stat-plate .mono { margin-top: .35rem } .div-card.p-7 { padding: 1rem 1.1rem } .div-card.p-5 { padding: .7rem .85rem } .div-card .div-icon { width: 34px; height: 34px } .div-card .div-icon svg { width: 1.1rem; height: 1.1rem } /* la promesa de la division se lee en dos lineas; el resto vive en su pagina */ .div-card .div-tagline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .55rem; } .div-card .div-head { margin-bottom: .7rem } .form-input { padding: .55rem .8rem } .form-field label { margin-bottom: .25rem; font-size: .8rem } /* el textarea se declara con rows=4; en pantallas bajas vale 3 */ #contact-form textarea.form-input { height: 4.9rem } #contact-form .space-y-4 > * + * { margin-top: .7rem } #contact-form .btn-primary.py-3\.5 { padding-block: .6rem } .plate.contact-info { padding: 1.15rem } .contact-info h3 { margin-bottom: .9rem; font-size: 1rem } .contact-list { gap: .8rem } .contact-social { margin-top: 1rem; padding-top: .8rem; display: flex; align-items: center; gap: 1rem; } .contact-social .mb-3 { margin-bottom: 0 } } /* Pantalla baja PERO ancha (el caso 1366x768): los cuatro datos entran en dos columnas y la placa deja de mandar la altura de la seccion de contacto. En celular bajo se quedan apilados — dos columnas ahi no se leen. */ @media (max-height: 780px) and (min-width: 640px) { .contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem } } /* --- scrollbar ------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px } ::-webkit-scrollbar-track { background: var(--bg-alt) } ::-webkit-scrollbar-thumb { background: var(--border); border: 3px solid var(--bg-alt) } ::-webkit-scrollbar-thumb:hover { background: var(--text-soft) }