/* ------------------------------ Reset + Tokens ------------------------------ */ :root{ --bg: #0f1115; --card: rgba(255,255,255,0.08); --card-plain: #ffffff; --text: #0f1222; --text-invert:#f7f8fc; --brand:#eb73c1; /* Rosa principal */ --brand-2:#7c3aed; /* Violeta de apoyo */ --accent:#00d4ff; /* Cian brillo */ --ring: rgba(235,115,193,.45); --radius: 16px; --shadow-1: 0 10px 25px rgba(16, 24, 40, .18); --shadow-2: 0 25px 60px rgba(16, 24, 40, .28); } @media (prefers-color-scheme: dark){ :root{ --bg: #0b0e13; --card: rgba(255,255,255,0.06); --text: #e6e7ee; } } *{box-sizing:border-box} html,body{ margin:0; padding:0; font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; /* Fondo oscuro a pantalla completa (sin franja blanca) */ background: radial-gradient(1200px 800px at 10% -10%, rgba(235,115,193,.14), transparent 60%), radial-gradient(1000px 700px at 120% 20%, rgba(0,212,255,.12), transparent 60%), linear-gradient(180deg, #0e1117, #0b0e13); min-height:100dvh; color: var(--text-invert); } /* Modo oscuro forzado desde tu */ body.light-grey{ background: radial-gradient(1200px 800px at 10% -10%, rgba(235,115,193,.14), transparent 60%), radial-gradient(1000px 700px at 120% 20%, rgba(0,212,255,.12), transparent 60%), linear-gradient(180deg, #0e1117, #0b0e13); color: var(--text); } /* ------------------------------ Layout ------------------------------ */ .container{ display:grid; grid-template-columns: 1fr; gap: 26px; max-width: 1200px; margin: 32px auto; padding: 20px; perspective: 1200px; /* para 3D tilt */ } /* Cards base (glass + borde glow) */ .left-column, .right-column{ position: relative; background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.78)); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow-1); border: 1px solid rgba(255,255,255,.6); overflow: hidden; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; } body.light-grey .left-column, body.light-grey .right-column{ background: linear-gradient(180deg, rgba(13,16,24,.9), rgba(15,18,27,.86)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.45); } /* Halo/brillo en borde */ .left-column::before, .right-column::before{ content:""; position:absolute; inset:-1px; border-radius: inherit; background: linear-gradient(135deg, rgba(235,115,193,.35), rgba(0,212,255,.25), rgba(124,58,237,.35)); filter: blur(18px); opacity:.35; z-index:0; pointer-events:none; } /* 3D tilt suave */ .left-column:hover, .right-column:hover{ transform: rotateX(4deg) rotateY(-4deg) translateY(-4px); box-shadow: var(--shadow-2); } /* Malla interior sutil */ .left-column::after, .right-column::after{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 14px 14px; opacity:.25; z-index:0; pointer-events:none; } /* ------------------------------ Perfil (columna izquierda) ------------------------------ */ .profile-card{ position:relative; z-index:1; display:flex; flex-direction:column; gap:18px; padding: 18px; } .profile-image{ position: relative; text-align:center; border-radius: calc(var(--radius) + 10px); overflow:hidden; isolation:isolate; } .profile-image::before{ content:""; position:absolute; inset:-2px; background: conic-gradient(from 120deg, var(--brand), var(--accent), var(--brand-2), var(--brand)); filter: blur(18px); opacity:.28; z-index:0; } .profile-image img{ position:relative; width:100%; aspect-ratio: 4/4.5; object-fit: cover; border-radius: 20px; transform: translateZ(30px); box-shadow: 0 12px 28px rgba(0,0,0,.25); } .profile-name h2{ margin: 12px 0 0; font-size: clamp(1.6rem, 2.3vw, 2.2rem); letter-spacing:.5px; color: var(--text); text-shadow: 0 1px 0 rgba(255,255,255,.24); } body.light-grey .profile-name h2{ color: var(--text-invert); text-shadow: 0 10px 30px rgba(235,115,193,.2); } .profile-details{ padding: 4px 6px 10px; } .profile-details p{ margin:10px 0; display:flex; align-items:center; gap:10px; color: var(--text); font-weight: 500; } body.light-grey .profile-details p{ color: var(--text-invert); } .profile-details p i{ color: var(--brand); } /* ------------------------------ Títulos secciones ------------------------------ */ h2{ margin: 6px 0 14px; color: var(--brand); font-size: clamp(1.2rem, 2.2vw, 1.6rem); letter-spacing:.6px; position:relative; display:inline-flex; align-items:center; gap:10px; z-index:1; } h2 i{ filter: drop-shadow(0 6px 16px rgba(235,115,193,.45)); } .section-title{ color: var(--brand); } /* Subtítulos / items */ h5{ margin: 6px 0 8px; color:#2c2f3a; font-size: clamp(1.05rem, 1.9vw, 1.35rem); } body.light-grey h5{ color:#eef0f6; } h6{ margin: 0 0 8px; color: var(--brand); font-size: .98rem; letter-spacing:.3px; } /* Párrafos de experiencias/educación */ .work-experience p, .education p{ color:#101223; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height:1.6; text-align: justify; } body.light-grey .work-experience p, body.light-grey .education p{ color:#e9ebf6; } /* Separadores elegantes */ hr{ border:0; height:1px; background: linear-gradient(90deg, transparent, rgba(235,115,193,.55), transparent); margin: 14px 0; opacity:.75; } /* ------------------------------ Skill & Language Bars (gradiente + rayas animadas) ------------------------------ */ .skill-bar, .language-bar{ --h: 22px; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(240,240,240,.8)); border-radius: 999px; overflow:hidden; box-shadow: inset 0 2px 8px rgba(15,18,27,.08); height: var(--h); position:relative; } body.light-grey .skill-bar, body.light-grey .language-bar{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); box-shadow: inset 0 2px 8px rgba(0,0,0,.28); } .skill-level, .language-level{ height: 100%; border-radius: 999px; color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; background: linear-gradient(90deg, var(--brand), var(--accent) 60%, var(--brand-2)); position:relative; overflow:hidden; text-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: inset 0 0 12px rgba(255,255,255,.18), 0 4px 12px rgba(235,115,193,.35); } .skill-level::after, .language-level::after{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px); mix-blend-mode: overlay; animation: moveStripe 2.6s linear infinite; opacity:.55; } @keyframes moveStripe{ to{ transform: translateX(16px); } } /* ------------------------------ Columnas derechas como grid ------------------------------ */ .right-column{ display:grid; gap: 22px; padding: 22px; } /* Tarjetas internas con efecto hover */ .work-experience-card, .education-card, .autoformacion-card{ background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.65); border-radius: calc(var(--radius) + 4px); padding: 18px; position:relative; overflow:hidden; transition: transform .35s ease, box-shadow .35s ease; } body.light-grey .work-experience-card, body.light-grey .education-card, body.light-grey .autoformacion-card{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .work-experience-card:hover, .education-card:hover, .autoformacion-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-1); } /* Glow diagonal decorativo */ .work-experience-card::before, .education-card::before, .autoformacion-card::before{ content:""; position:absolute; width: 220px; height: 220px; right:-80px; top:-80px; background: radial-gradient(circle at center, rgba(235,115,193,.35), transparent 70%); transform: rotate(25deg); filter: blur(12px); } /* ------------------------------ Footer + WhatsApp ------------------------------ */ .footer{ text-align:center; margin-top: 28px; padding: 28px 20px; background: linear-gradient(90deg, var(--brand), var(--accent)); color:#fff; position:relative; overflow:hidden; } .footer::after{ content:""; position:absolute; inset:0; background: radial-gradient(600px 200px at 20% -10%, rgba(255,255,255,.25), transparent 60%), radial-gradient(600px 200px at 80% 120%, rgba(255,255,255,.2), transparent 60%); pointer-events:none; } .footer i{ margin:0 10px; font-size: 1.4rem; } .footer a{ color:#fff; text-decoration:none; } .footer a:hover{ text-decoration:underline; } footer p{ font-size:1.1rem; letter-spacing:1.5px; } footer a{ font-size:1.6rem; } /* Botón flotante WhatsApp */ .whatsapp-btn{ position:fixed; right:20px; bottom:24px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, #25D366, #128C7E); color:#fff; text-decoration:none; font-size:28px; box-shadow: 0 10px 25px rgba(18,140,126,.45), inset 0 2px 8px rgba(255,255,255,.25); transform: translateZ(40px); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; z-index: 50; } .whatsapp-btn:hover{ transform: translateZ(40px) translateY(-2px) scale(1.04); box-shadow: 0 18px 40px rgba(18,140,126,.55); filter: saturate(1.15); } /* ------------------------------ Badges / Chips (current) ------------------------------ */ .current{ background: linear-gradient(90deg, #ff80ab, #ff4081); color:white; padding: 4px 8px; border-radius: 999px; font-weight:700; box-shadow: 0 6px 16px rgba(255,64,129,.35); } /* ------------------------------ Responsive ------------------------------ */ @media (min-width: 768px){ .container{ grid-template-columns: 1fr 2fr; grid-template-rows:auto; gap: 28px; } .right-column{ padding: 26px; } } /* ------------------------------ Accesibilidad / foco ------------------------------ */ a, button, .whatsapp-btn{ outline:none; } a:focus-visible, .whatsapp-btn:focus-visible{ box-shadow: 0 0 0 4px var(--ring); } /* ------------------------------ Sutilezas de entrada ------------------------------ */ .left-column, .right-column{ animation: fadeUp .6s ease both; } @keyframes fadeUp{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform: translateY(0); } }