/* Variables globales de diseño: colores de marca, tipografías, ancho máximo del contenido y radios de borde. Se usan en todo el sitio mediante var(--nombre) */ :root{ /* Paleta TechCodex (logo Propuesta A) */ --blue:#1E56C8; --blue-dark:#16409A; --teal:#00A896; --ink:#0E1B2C; --slate:#5A6B80; --bg:#FFFFFF; --bg-soft:#F4F7FB; --line:#E2E9F2; --shadow:0 10px 30px rgba(14,27,44,0.08); --sans:'Inter', system-ui, sans-serif; --display:'Plus Jakarta Sans', var(--sans); --maxw:1120px; --radius:14px; } /* ================= RESET Y BASE ================= */ /* Reset básico: quita márgenes/rellenos por defecto de todos los elementos */ *{box-sizing:border-box;margin:0;padding:0} /* Activa desplazamiento suave al hacer clic en enlaces con anclas (#sobre, #proyectos, etc.) */ html{scroll-behavior:smooth} /* Respeta la preferencia de "reducir movimiento" del sistema operativo del usuario */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } /* Estilos base del : fondo, color de texto y tipografía de todo el sitio */ body{ background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:16.5px;line-height:1.7; } /* Color del texto seleccionado (resaltado al hacer doble clic o arrastrar el mouse) */ ::selection{background:var(--blue);color:#fff} /* Los enlaces heredan el color del texto en vez de usar el azul por defecto del navegador */ a{color:inherit} /* Las imágenes nunca desbordan su contenedor */ img{max-width:100%;display:block} /* .wrap: contenedor centrado que limita el ancho del contenido en cada sección (usado dentro de header, hero, sobre, proyectos, contenido, creador, contacto, footer) */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} /* Contorno de accesibilidad visible al navegar con teclado (Tab) sobre enlaces y botones */ a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px} /* ================= NAV —
(barra de navegación superior) ================= */ /* Barra fija en la parte superior de la página, con fondo translúcido y desenfoque (efecto "glass") */ header.nav{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } /* .nav-inner: fila interna del header que distribuye el logo a la izquierda y los enlaces a la derecha */ .nav-inner{ max-width:var(--maxw);margin:0 auto;padding:13px 26px; display:flex;align-items:center;justify-content:space-between;gap:20px; } /* .brand: enlace del logo "TechCodex" (ícono SVG + texto) en la esquina izquierda del nav */ .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .brand svg{width:34px;height:34px} .brand span{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-0.02em} /* Resalta en azul la parte "Codex" del nombre de marca (la dentro de .brand span) */ .brand span b{color:var(--blue)} /* nav.links: lista de enlaces de navegación (Sobre, Proyectos, Contenido, Creador, Contáctame) */ nav.links{display:flex;gap:28px;align-items:center} nav.links a{ text-decoration:none;font-size:0.92rem;font-weight:500;color:var(--slate); transition:color .15s ease; } nav.links a:hover{color:var(--ink)} /* a.cta: botón destacado "Contáctame" dentro del nav */ nav.links a.cta{ background:var(--blue);color:#fff;padding:9px 20px;border-radius:8px;font-weight:600; transition:background .15s ease; } nav.links a.cta:hover{background:var(--blue-dark);color:#fff} /* En pantallas angostas oculta los enlaces normales del nav y deja solo el botón "Contáctame" */ @media(max-width:860px){nav.links a:not(.cta){display:none}} /* ================= HERO —
(banner principal de inicio) ================= */ /* Sección hero completa: fondo con degradados decorativos y separación inferior */ .hero{ position:relative;overflow:hidden; background: radial-gradient(720px 420px at 88% -10%, rgba(30,86,200,0.08), transparent 65%), radial-gradient(540px 380px at -5% 110%, rgba(0,168,150,0.07), transparent 65%), var(--bg); padding:104px 0 92px; border-bottom:1px solid var(--line); } /* Grid de 2 columnas dentro del hero: texto/CTA a la izquierda, tarjeta del logo a la derecha */ .hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center} /* En pantallas angostas apila las 2 columnas del hero en una sola */ @media(max-width:900px){.hero .wrap{grid-template-columns:1fr}} /* .kicker: etiqueta pequeña arriba del título ("Plataforma de ingeniería informática") */ .kicker{ display:inline-flex;align-items:center;gap:9px; font-size:0.82rem;font-weight:600;color:var(--blue); background:rgba(30,86,200,0.08);border-radius:999px; padding:7px 16px;margin-bottom:26px; } /* Puntito de color dentro del .kicker */ .kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--teal)} /* Título principal

del hero */ .hero h1{ font-family:var(--display);font-weight:800; font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.1;letter-spacing:-0.03em; } /* Palabra/frase resaltada en azul dentro del

(envuelta en ) */ .hero h1 em{font-style:normal;color:var(--blue)} /* Párrafo de introducción (

) debajo del título del hero */ .hero p.lead{margin-top:22px;max-width:540px;font-size:1.12rem;color:var(--slate)} /* .hero-cta: fila que contiene los botones "Explorar proyectos" y "Contenido académico" */ .hero-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap} /* .btn: estilo base compartido por todos los botones tipo enlace del sitio (btn-primary y btn-ghost) */ .btn{ display:inline-flex;align-items:center;gap:8px;text-decoration:none; font-weight:600;font-size:0.95rem;padding:14px 28px;border-radius:10px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } /* .btn-primary: botón azul relleno (ej. "Explorar proyectos") */ .btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(30,86,200,0.28)} .btn-primary:hover{transform:translateY(-2px);background:var(--blue-dark);box-shadow:0 10px 24px rgba(30,86,200,0.34)} /* .btn-ghost: botón con borde y fondo blanco (ej. "Contenido académico") */ .btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:#fff} .btn-ghost:hover{border-color:var(--blue);color:var(--blue)} /* .hero-logo: columna derecha del hero que centra la tarjeta con el logo grande */ .hero-logo{ display:flex;justify-content:center; } /* .hero-logo .card: tarjeta blanca con sombra que envuelve el logo, nombre y etiqueta */ .hero-logo .card{ background:#fff;border:1px solid var(--line);border-radius:20px; box-shadow:var(--shadow);padding:44px 40px;text-align:center;max-width:340px;width:100%; } .hero-logo svg{width:150px;height:auto;margin:0 auto 20px} .hero-logo .name{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-0.02em} .hero-logo .name b{color:var(--blue)} /* Etiqueta pequeña "INGENIERÍA INFORMÁTICA" debajo del nombre en la tarjeta del hero */ .hero-logo .tag{font-size:0.78rem;letter-spacing:0.28em;color:var(--slate);margin-top:4px;text-transform:uppercase} /* ================= SECCIONES GENÉRICAS (aplican a todas las

: sobre, proyectos, contenido, creador, contacto) ================= */ /* Espaciado vertical estándar de cada
del sitio */ section{padding:92px 0} /* .eyebrow: etiqueta pequeña en mayúsculas que antecede a cada

de sección (ej. "Sobre TechCodex", "Portafolio") */ .eyebrow{ font-size:0.8rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase; color:var(--teal);margin-bottom:12px; } /* Título

genérico de cada sección */ h2{ font-family:var(--display);font-weight:800;letter-spacing:-0.025em; font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:16px; } /* .section-intro: párrafo descriptivo que va debajo del

de cada sección */ .section-intro{max-width:660px;color:var(--slate);margin-bottom:48px} /* ================= SOBRE —
(pilares de TechCodex) ================= */ /* Fondo gris claro que distingue esta sección de las secciones con fondo blanco */ .about{background:var(--bg-soft)} /* .pillars: grid responsivo que contiene las 4 tarjetas .pillar */ .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} /* .pillar: cada tarjeta individual (Proyectos de software, Ideas y conocimiento, Contenido académico, Hardware y electrónica) */ .pillar{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:30px 28px;transition:transform .18s ease, box-shadow .18s ease; } .pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)} /* .pillar .ic: ícono/insignia cuadrada de cada tarjeta (, { }, A+, ⚡) */ .pillar .ic{ width:46px;height:46px;border-radius:11px; display:flex;align-items:center;justify-content:center; font-family:var(--display);font-weight:700;font-size:1rem; margin-bottom:18px;color:#fff; } /* Alterna el color de fondo del ícono entre azul y verde-azulado según la posición de la tarjeta */ .pillar:nth-child(odd) .ic{background:var(--blue)} .pillar:nth-child(even) .ic{background:var(--teal)} .pillar h3{font-family:var(--display);font-size:1.1rem;font-weight:700;margin-bottom:8px} .pillar p{font-size:0.93rem;color:var(--slate)} /* ================= PROYECTOS —
(portafolio de proyectos) ================= */ /* .projects: grid responsivo que contiene las tarjetas .project (Proyecto 01, 02, 03...) */ .projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} /* .project: tarjeta individual de un proyecto (imagen + título + descripción) */ .project{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;transition:transform .18s ease, box-shadow .18s ease; display:flex;flex-direction:column; } .project:hover{transform:translateY(-4px);box-shadow:var(--shadow)} /* .project .shot: contenedor de la captura/imagen del proyecto (16:9), con degradado de fondo mientras carga */ .project .shot{ aspect-ratio:16/9;overflow:hidden;position:relative; background:linear-gradient(135deg,#EAF0F9,#DFF3F0); border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:center; } /* Símbolo "" que se muestra de fondo en .shot cuando aún no hay imagen visible */ .project .shot::before{ content:"";position:absolute; font-family:var(--display);font-weight:800;font-size:2rem;color:rgba(30,86,200,0.25); } /* La real del proyecto, una vez cargada, cubre todo el contenedor .shot */ .project .shot img{position:relative;width:100%;height:100%;object-fit:cover;object-position:top} /* .project .body: zona de texto (título + descripción) debajo de la imagen de cada tarjeta */ .project .body{padding:22px 24px 26px} .project h3{font-family:var(--display);font-size:1.08rem;font-weight:700;margin-bottom:6px} .project p{font-size:0.92rem;color:var(--slate)} /* ================= CONTENIDO ACADÉMICO —
(rutas de aprendizaje) ================= */ /* Fondo gris claro que distingue esta sección */ .edu{background:var(--bg-soft)} /* .tracks: grid responsivo que contiene las tarjetas .track (Fundamentos, Programación I, II, Electrónica) */ .tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px} /* .track: tarjeta individual de un módulo/curso, con borde superior de color */ .track{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:28px;border-top:4px solid var(--blue); transition:transform .18s ease, box-shadow .18s ease; } .track:hover{transform:translateY(-4px);box-shadow:var(--shadow)} /* La 4ta tarjeta (Electrónica Básica) usa el color verde-azulado en su borde superior en vez del azul */ .track:nth-child(4){border-top-color:var(--teal)} /* .track .mod: etiqueta pequeña "Módulo 01 · Software" encima del título de cada tarjeta */ .track .mod{ font-size:0.72rem;font-weight:700;letter-spacing:0.1em;color:var(--slate); display:block;margin-bottom:12px;text-transform:uppercase; } .track h3{font-family:var(--display);font-size:1.12rem;font-weight:700;margin-bottom:8px} .track p{font-size:0.92rem;color:var(--slate)} /* .badge: etiqueta "Próximamente" al final de cada tarjeta .track */ .badge{ display:inline-flex;align-items:center;gap:7px;margin-top:18px; font-size:0.76rem;font-weight:600;border-radius:999px;padding:5px 14px; color:#8A6D1F;background:#FBF3DC; } /* Puntito de color dentro del .badge */ .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#D9A62E} /* ================= EL CREADOR —
(biografía y formación académica) ================= */ /* .creator-grid: grid de 2 columnas: biografía a la izquierda, tarjeta .cred (formación) a la derecha */ .creator-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start} /* En pantallas angostas apila las 2 columnas en una sola */ @media(max-width:880px){.creator-grid{grid-template-columns:1fr}} .creator-grid p{color:var(--slate)} .creator-grid p+p{margin-top:16px} /* Resalta en negrita/color oscuro los dentro de los párrafos de biografía */ .creator-grid p strong{color:var(--ink);font-weight:600} /* .cred: tarjeta "Formación académica" con encabezado oscuro y lista de títulos */ .cred{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden; } /* .cred .head: encabezado oscuro de la tarjeta ("Formación académica") */ .cred .head{ background:var(--ink);color:#fff;padding:16px 24px; font-family:var(--display);font-weight:700;font-size:0.95rem; } /* .cred .item: cada fila de la lista (año + título obtenido) */ .cred .item{ display:flex;gap:18px;align-items:baseline; padding:15px 24px;border-bottom:1px solid var(--line);font-size:0.92rem; } .cred .item:last-child{border-bottom:none} /* .cred .yr: el año dentro de cada fila (ej. 2024, 2020...) */ .cred .yr{font-weight:700;color:var(--blue);min-width:46px;font-size:0.85rem} /* .cred .deg: el nombre del título/certificación dentro de cada fila */ .cred .deg{font-weight:600;color:var(--ink)} /* Texto secundario (institución) dentro de .deg */ .cred .deg small{display:block;font-weight:400;color:var(--slate);font-size:0.83rem} /* .creator-links: fila con los enlaces a GitHub y LinkedIn debajo de la biografía */ .creator-links{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap} .creator-links a{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-size:0.88rem;font-weight:600;color:var(--ink); border:1.5px solid var(--line);border-radius:9px;padding:11px 18px; transition:border-color .15s ease, color .15s ease; } .creator-links a:hover{border-color:var(--blue);color:var(--blue)} /* ================= CONTACTO —
(panel final de contacto) ================= */ /* .contact: espaciado inferior extra de la sección de contacto (es la última antes del footer) */ .contact{padding-bottom:100px} /* .contact-panel: panel oscuro con degradado que envuelve todo el bloque de contacto */ .contact-panel{ background:linear-gradient(135deg, var(--ink) 0%, #14304F 100%); color:#fff;border-radius:22px; padding:56px 52px;display:grid;grid-template-columns:1.25fr 1fr;gap:46px;align-items:center; position:relative;overflow:hidden; } /* Resplandor decorativo (degradado radial verde-azulado) superpuesto en la esquina del panel */ .contact-panel::before{ content:"";position:absolute;inset:0; background:radial-gradient(460px 300px at 92% 0%, rgba(0,168,150,0.22), transparent 70%); pointer-events:none; } /* En pantallas angostas apila el panel de contacto en una sola columna */ @media(max-width:780px){.contact-panel{grid-template-columns:1fr;padding:40px 30px}} /* Asegura que el texto quede por encima del resplandor decorativo (::before) */ .contact-panel>div{position:relative} /* Ajustes de color del .eyebrow,

y

específicos dentro del panel oscuro de contacto */ .contact-panel .eyebrow{color:#5FD3C6} .contact-panel h2{color:#fff} .contact-panel p{color:#B9C6D6;max-width:440px} /* .contact-list: columna derecha del panel con los enlaces de Correo, GitHub y LinkedIn */ .contact-list{display:grid;gap:13px} .contact-list a{ display:flex;align-items:center;gap:14px;text-decoration:none; background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:11px; padding:15px 20px;transition:border-color .15s ease, background .15s ease; } .contact-list a:hover{border-color:var(--teal);background:rgba(0,168,150,0.12)} /* .contact-list .ico: insignia de texto a la izquierda de cada enlace de contacto (@, git, in) */ .contact-list .ico{ font-family:var(--display);color:#5FD3C6;font-weight:700;font-size:0.8rem; border:1px solid rgba(95,211,198,0.4);border-radius:7px;padding:6px 9px;flex-shrink:0; } /* .contact-list .lbl: bloque de texto de cada enlace (etiqueta pequeña + valor, ej. "Correo" / "edgaraah126@gmail.com") */ .contact-list .lbl small{display:block;font-size:0.68rem;color:#8FA2B5;text-transform:uppercase;letter-spacing:0.1em;font-weight:600} .contact-list .lbl span{font-size:0.92rem;font-weight:500} /* .loc: línea "Localización" con ícono ◎, debajo del texto introductorio del panel */ .loc{ margin-top:20px;font-size:0.85rem;color:#8FA2B5; display:flex;align-items:center;gap:9px; } .loc::before{content:"◎";color:var(--teal)} /* ================= FOOTER —