@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Shared paper theme; existing content and interactions remain in their pages. */
:root, html[data-theme="light"] {
    --paper: #fafaf8;
    --surface: #ffffff;
    --ink: #191919;
    --muted: #545454;
    --line: #deded9;
    --green: #176849;
    --green-soft: #e3f3eb;
    --green-line: #9ac9b3;
    --gold: #f4cc47;
    --gold-ink: #51400c;
    --gold-soft: #fff1b5;
    --gold-line: #d9bd62;
    --radius: 4px;
    --radius-lg: 4px;
    --shadow-soft: 0 4px 10px #0000000c;
    --rule: #2525250d;
    --yellow: #f4cc47;
    --pink: #ed77a6;
    --mint: #a9ddc5;
    --blue: #2d53cf;
}
html[data-theme="dark"] {
    --paper: #202120;
    --surface: #2b2d2b;
    --ink: #f5f5ef;
    --muted: #c3c6bf;
    --line: #484b46;
    --green: #a9ddc5;
    --green-soft: #314b3d;
    --green-line: #648b75;
    --rule: #ffffff0b;
}
html { background: var(--paper); scroll-padding-top: 90px; }
body, html[data-theme] body {
    max-width: none;
    margin: 0;
    background: var(--paper) !important;
    background-image: repeating-linear-gradient(0deg, transparent 0 27px, var(--rule) 27px 28px) !important;
    border: 0;
}
html[data-theme] body [class] { letter-spacing: 0 !important; }
.container { max-width: 1200px !important; }
h1, .hero-name, .page-title, .section-title {
    font-family: "Anton", Impact, sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
.site-header {
    top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; padding: 0 154px 0 22px;
    background: var(--paper) !important; border-bottom: 1px solid var(--line) !important;
}
.site-nav { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 5px 0; gap: 0; }
.site-nav-link { border-radius: 0; color: var(--ink); padding: 14px 16px; font-size: 11px; font-family: "IBM Plex Mono", monospace; }
.site-nav-link.is-active, .site-nav-link[aria-current] { color: #191919; }
.nav-indicator { border-radius: 0; background: var(--yellow); top: 5px; height: calc(100% - 10px); }
.floating-controls { top: 8px !important; right: 18px !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; background: var(--paper) !important; }
.float-btn { min-width: 32px; min-height: 32px; font-family: "IBM Plex Mono", monospace; }
.float-btn.active { background: var(--yellow) !important; color: #191919 !important; }
.hero, .page-hero, .page-header { background: transparent !important; animation: none !important; }
.hero { min-height: 640px; margin: 0; padding: 95px 0 55px !important; }
.hero-inner { display: block; min-height: 485px; }
.hero-text { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
.hero-name {
    display: inline-block; max-width: 100%; margin: 20px 0 0;
    padding: 12px 18px; font-size: 92px !important; line-height: 1.15 !important;
    border: 1.5px solid #db7958; transform: rotate(-1deg);
    overflow-wrap: normal;
}
.hero-title { font-family: "Caveat", cursive !important; font-size: 30px; text-transform: none; margin: 18px 0 22px; color: var(--ink) !important; }
.hero-specialties { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 480px; margin: 0 auto 28px; }
.specialty-item { padding: 7px 10px; font-size: 12px; border: 0 !important; border-radius: 0 !important; background: var(--yellow) !important; color: #191919 !important; transform: rotate(-2deg); }
.specialty-item:nth-child(2) { background: var(--mint) !important; transform: rotate(2deg); }
.specialty-item:nth-child(3) { background: var(--pink) !important; }
.specialty-item i { color: #191919 !important; }
.hero-nav { justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 500px; margin: auto; }
.hero-btn, button.hero-btn { font-size: 12px !important; padding: 12px 14px; }
.hero-btn, .card-link, .proj-link, .submit-btn, .form-submit { border-radius: 0 !important; border-color: var(--ink) !important; background: var(--ink) !important; color: var(--paper) !important; }
.hero-btn:nth-child(n+2) { border-color: var(--ink) !important; color: var(--ink) !important; }
.hero-btn--direct, .hero-btn--direct:nth-child(n+2) { background: #191919 !important; color: #fff !important; box-shadow: 3px 3px 0 var(--blue) !important; }
.hero-social { justify-content: center; margin-top: 28px; }
.social-link { width: 34px; height: 34px; background: var(--yellow) !important; color: #191919 !important; border: 1px solid #19191933 !important; }
.social-link:nth-child(2) { background: var(--pink) !important; }
.social-link:nth-child(3) { background: var(--mint) !important; }
.hero-image { position: absolute; top: 244px; left: 5px; width: 165px; padding: 9px 9px 14px; background: #fff; transform: rotate(-7deg); box-shadow: 0 5px 12px #0002; z-index: 3; }
.hero-image::before, .currently-panel::before, .proj-visual::before {
    content: ""; position: absolute; z-index: 4; width: 62px; height: 22px; top: -10px; left: 28%; background: #d3d8f3b8; transform: rotate(-12deg);
}
.hero-image img { width: 100%; height: 155px; object-fit: cover; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.hero-image-meta { margin-top: 8px; gap: 4px; }
.hero-snaps { position: absolute; top: 262px; left: 178px; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.hero-snap { width: 88px; margin: 0; padding: 6px 6px 14px; background: #fff; box-shadow: 0 4px 10px #0002; transform: rotate(5deg); }
.hero-snap:nth-child(2) { margin-left: 14px; transform: rotate(-4deg); }
.hero-snap img { display: block; width: 100%; height: 92px; object-fit: cover; }
.hero-snap:first-child img { object-position: center 70%; }
.hero-role { display: block; padding: 0; font-size: 12px; background: transparent !important; border: 0; border-radius: 0; color: #292929 !important; }
.hero-companies { font-family: "Caveat", cursive; font-size: 15px; color: #545454 !important; }
.currently-panel { position: absolute; right: 0; top: 250px; width: 190px; gap: 8px; background: #fff0ab !important; padding: 18px 14px !important; border: 0 !important; border-radius: 0 !important; transform: rotate(5deg); color: #191919; }
.currently-panel::before { background: #e8dcbba8; }
.currently-label { font-family: "Caveat", cursive; font-size: 24px; text-transform: none; color: #191919 !important; }
.currently-panel .currently-item { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0; gap: 8px; box-shadow: none !important; animation: none; }
.currently-icon { width: 22px; height: 24px; font-size: 13px; border: 0 !important; background: transparent !important; color: #51400c !important; }
.currently-key { font-size: 10px; color: #51400c !important; }
.currently-val { font-size: 11px; color: #191919 !important; white-space: normal; }
.currently-panel .currently-item { flex: none; }
.hero-tech-icons { display: none; }
.section, .about-section { padding-block: 65px !important; border-radius: 0 !important; }
.section-title { font-size: 54px !important; line-height: 1.1; overflow-wrap: anywhere; }
.section-title i { display: none; }
.section-subtitle { font-size: 14px; margin-top: 12px; }
.about-section .section-header { text-align: center; }
.about-section .section-title { justify-content: center; }
.about-layout, .about-main, .about-focus-panel, .hackathon-block, .events-panel, .ethics-block, .social-section {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.about-layout { overflow: visible; gap: 48px; }
.about-main { padding: 0 !important; }
.about-main-header { display: none; }
.about-text { font-size: 15px; }
.about-text p:first-child { font-family: "Caveat", cursive; font-size: 28px; line-height: 1.45; color: var(--ink); }
.about-focus-panel { padding: 0 !important; }
.about-focus-label { font-family: "Caveat", cursive; font-size: 26px; color: var(--ink) !important; text-transform: none; }
.focus-card { border: 0 !important; border-radius: 0 !important; padding: 18px; background: var(--yellow) !important; transform: rotate(1deg); box-shadow: 2px 3px 0 #0001 !important; }
.focus-card:nth-of-type(2) { background: var(--mint) !important; transform: rotate(-2deg); }
.focus-card:nth-of-type(3) { background: var(--pink) !important; }
.focus-card-title, .focus-card-icon { color: #191919 !important; }
.focus-card-icon { background: transparent !important; border: 0 !important; }
.focus-tag { background: #ffffff66 !important; color: #191919 !important; border: 0 !important; border-radius: 0 !important; }
.tech-tags { gap: 8px; }
.tech-tag, .skill-item { border-radius: 0 !important; font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.skill-card {
    overflow: visible;
    padding: 0 0 2rem !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
}
.skill-card:hover {
    transform: none !important;
    border-color: transparent !important;
}
.skill-header {
    border-bottom: 0 !important;
    padding-bottom: .35rem !important;
    margin-bottom: 1.15rem !important;
}
.skill-list {
    gap: 18px 12px !important;
    align-items: flex-start;
}
.skill-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-width: 82px;
    min-height: 96px;
    padding: 14px 11px 12px !important;
    position: relative;
    text-align: center;
    background: #fff !important;
    border-color: #e8e1d6 !important;
    box-shadow: 0 10px 18px #19191918, 2px 2px 0 #19191918;
    transform: rotate(-1.4deg);
    transition: transform .18s ease, box-shadow .18s ease;
}
.skill-item:nth-child(2n) { transform: rotate(1.2deg); }
.skill-item:nth-child(3n) { transform: rotate(-.4deg); }
.skill-item::before {
    content: "";
    width: 34px;
    height: 14px;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    background: #dfe6ffcc;
    border: 1px solid #ffffff88;
}
.skill-card:nth-child(3n+1) .skill-item::before { background: #fff1a8cc; }
.skill-card:nth-child(3n+2) .skill-item::before { background: #ffd8eacc; }
.skill-card:nth-child(3n) .skill-item::before { background: #cdf6e4cc; }
.skill-item:hover {
    transform: translateY(-3px) rotate(0deg);
    box-shadow: 0 14px 22px #19191920, 2px 2px 0 #19191918;
}
.skill-item i {
    color: var(--green);
    font-size: 34px;
    line-height: 1;
}
.skill-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}
.about-main .tech-tag:nth-child(3n+1) { background: var(--yellow) !important; color: #191919 !important; }
.about-main .tech-tag:nth-child(3n+2) { background: var(--mint) !important; color: #191919 !important; }
.about-main .tech-tag:nth-child(3n) { background: var(--pink) !important; color: #191919 !important; }
/* Folder tabs belong to each project, including the existing generated rows. */
#pinned-projects { gap: 52px !important; }
.proj-row {
    --folder: #202020; --folder-ink: #fff; --folder-muted: #dededb;
    position: relative; padding: 36px !important; gap: 40px;
    background: var(--folder) !important; color: var(--folder-ink);
}
.proj-row:nth-child(3n+2) { --folder: #f4cc47; --folder-ink: #191919; --folder-muted: #493e1b; }
.proj-row:nth-child(3n) { --folder: #a9ddc5; --folder-ink: #191919; --folder-muted: #294b3c; }
.proj-row::before { content: ""; position: absolute; height: 30px; width: 180px; top: -29px; left: 0; background: var(--folder); clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.proj-row:nth-child(even) .proj-info, .proj-row:nth-child(even) .proj-visual { order: initial; }
.proj-row .proj-name { color: var(--folder-ink) !important; font-size: 36px !important; }
.proj-row .proj-desc, .proj-row .proj-eyebrow { color: var(--folder-muted) !important; }
.proj-row .proj-desc { font-size: 14px !important; }
.project-subtitle { font-size: 14px; line-height: 1.45; color: var(--folder-muted, var(--muted)); margin: 0; }
.proj-row[data-project] .featured-category, #pinned-projects .proj-row[data-project] .featured-category { display: block !important; color: var(--folder-muted) !important; font-size: 11px; margin: 0; }
.proj-row[data-project] .proj-link, #pinned-projects .proj-row[data-project] .card-link { color: var(--folder-ink) !important; }
.proj-eyebrow { font-family: "IBM Plex Mono", monospace; }
.proj-eyebrow-line { background: currentColor; }
.proj-row .tech-tag { color: var(--folder-ink) !important; border-color: currentColor !important; background: transparent !important; }
#pinned-projects .proj-footer .card-link--demo, #pinned-projects .proj-footer .card-link-placeholder { color: var(--folder-ink) !important; }
.proj-visual { position: relative; min-width: 0; padding: 8px; background: #fff; transform: rotate(2deg); box-shadow: 2px 6px 0 #0002; }
.proj-mock, .proj-mock--img { border: 0; border-radius: 0; margin: 0; min-height: 260px; max-width: none; box-shadow: none; background: #e9e9e6; }
.proj-mock i { font-size: 64px; color: #333; filter: none; }
.proj-mock-name { font-family: "Caveat", cursive; font-size: 27px; color: #333; text-shadow: none; text-align: center; padding: 0 12px; }
.proj-mock::after { display: none; }
.proj-mock--img .proj-mock-logo { object-fit: contain; animation: none; }
.proj-mock--img .proj-mock-name { background: #fff; color: #191919; padding: 4px 10px; font-size: 20px; text-shadow: none; left: 0; right: 0; bottom: 0; }
.featured-card, .proj-card, .skill-card, .cert-item, .accordion-item, .concept-card, .ethics-card, .rally-card, .contact-card, .form-card, .contact-form, .event-item, .vs-item { border-radius: 4px !important; box-shadow: none !important; }
.featured-grid > :nth-child(even), .project-grid > :nth-child(even), .concept-grid > :nth-child(even) { margin-top: 0; }
.featured-thumb, .proj-preview, .event-thumb, .event-thumb-combo { border-radius: 0 !important; }
.cert-item { border-left: 4px solid var(--mint) !important; }
.page-title { font-size: 76px !important; }
.page-eyebrow { border-radius: 0; }
.page-header { border-radius: 0; }
#contacto .section-title { max-width: 750px; margin-inline: auto; }
.contact-form { background: var(--gold-soft) !important; border: 0 !important; color: #191919; }
.contact-form label { color: #191919; }
.contact-form .form-error { color: #a32626; }
.contact-info { min-width: 0; overflow-wrap: anywhere; }
.contact-arrow { flex-shrink: 0; }
.form-input, .form-textarea, .form-group input, .form-group textarea { border-radius: 0 !important; }
.contact-interests li, .contact-link { border-radius: 0 !important; }
.cd-card { border-radius: 4px; }
.site-footer, footer { background: transparent !important; border-top: 1px solid var(--line) !important; color: var(--ink) !important; }
.site-footer p, .site-footer a, footer p, footer a { color: var(--ink) !important; }
.motion-reveal { opacity: 1; transform: none; }
.hero-motion-ready .hero-copy-step, .proj-row { animation: none !important; }

@media (max-width: 1100px) {
    .hero-name { font-size: 76px !important; }
    .hero-image { width: 140px; left: 0; }
    .hero-image img { height: 135px; }
    .hero-snaps { top: 250px; left: 150px; }
    .hero-snap { width: 72px; }
    .hero-snap img { height: 76px; }
    .currently-panel { width: 158px; flex-direction: column; flex-wrap: nowrap; }
    .hero-specialties, .hero-nav { max-width: 410px; }
    .site-nav-link { padding-inline: 10px; }
}
@media (max-width: 900px) {
    .hero { padding-top: 90px !important; min-height: 0; }
    .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 28px; }
    .hero-text { grid-column: 1 / -1; grid-row: 1; }
    .hero-image, .currently-panel { position: relative; top: auto; left: auto; right: auto; width: 190px; justify-self: center; grid-column: auto; grid-row: 2; }
    .hero-image img { height: 155px; }
    .currently-panel { align-self: center; }
    .hero-snaps { position: relative; top: auto; left: auto; grid-column: 1 / -1; grid-row: 3; flex-direction: row; justify-content: center; gap: 18px; }
    .hero-snap { width: 96px; }
    .hero-snap:nth-child(2) { margin: 10px 0 0; }
    .about-layout { grid-template-columns: 1fr; }
    .about-focus-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .about-focus-label { grid-column: 1 / -1; }
    .focus-card { margin: 0; }
}
@media (max-width: 760px) {
    body { margin-top: 0; border: 0; }
    html { scroll-padding-top: 110px; }
    .site-header { top: 44px; left: 0; transform: none; width: 100%; padding: 0 8px; }
    .site-nav { width: 100%; }
    .site-nav-link { padding: 12px 10px; font-size: 10px; }
    .floating-controls { top: 0 !important; right: 0 !important; width: 100%; justify-content: flex-end; padding: 5px 12px !important; }
    .hero { padding-top: 108px !important; padding-bottom: 20px !important; }
    .hero-name { font-size: 58px !important; padding: 8px 12px; }
    .hero-title { font-size: 28px; }
    .hero-nav { flex-direction: row; }
    .hero-image, .currently-panel { width: 155px; }
    .hero-image img { height: 140px; }
    .hero-image-meta { max-width: 100%; }
    .currently-panel { flex-direction: column; flex-wrap: nowrap; }
    .currently-item { width: auto; }
    .section, .about-section { padding-block: 42px !important; }
    .section-title { font-size: 40px !important; }
    .about-focus-panel { grid-template-columns: 1fr; }
    .focus-card { transform: none !important; }
    .about-text p:first-child { font-size: 26px; }
    .proj-row { grid-template-columns: 1fr; padding: 24px !important; gap: 26px; }
    .proj-row:nth-child(even) .proj-info, .proj-row:nth-child(even) .proj-visual { order: initial; }
    .proj-row .proj-name { font-size: 29px !important; }
    .proj-mock, .proj-mock--img { min-height: 220px; }
    .page-title { font-size: 54px !important; }
    .page-hero { padding-top: 5rem !important; }
    .contact-form { padding: 20px !important; }
}
@media (max-width: 380px) {
    .hero-name { font-size: 48px !important; }
    .hero-inner { gap: 30px 12px; }
    .hero-image, .currently-panel { width: 130px; }
    .hero-image img { height: 120px; }
    .currently-panel { padding: 14px 10px !important; }
    .hero-btn, button.hero-btn { padding: 10px; font-size: 11px !important; }
    .section-title { font-size: 34px !important; }
}
@media (max-width: 760px) {
    .hero-inner { gap: 22px 18px; }
    .hero-name { font-size: 48px !important; margin-top: 0; }
    .hero-title { margin: 10px 0 16px; }
    .hero-specialties { margin-bottom: 18px; }
    .hero-nav { gap: 8px; }
    .hero-btn, button.hero-btn { width: auto; padding: 10px; font-size: 10px !important; }
    .hero-social { margin-top: 12px; }
    .about-section { padding-top: 28px !important; }
    .hero-image { padding: 7px; }
    .hero-image img { height: 108px; }
    .hero-role { font-size: 10px; }
    .hero-companies { font-size: 12px; }
    .currently-panel { gap: 6px; padding: 12px 10px !important; }
    .currently-label { font-size: 21px; }
    .currently-key { font-size: 9px; }
    .currently-val { font-size: 10px; }
}

/* Two web threads suspend the name; the laptop stays anchored to the initial. */
.hero-name { position: relative; transform-origin: 50% -56px; }
.hero-motion-ready .hero-name, .hero-name { animation: name-hang 6s ease-in-out infinite !important; }
.name-surname { display: inline-block; white-space: nowrap; }
.name-gap { display: inline-block; position: relative; width: 26px; height: 1em; vertical-align: baseline; }
.name-web { position: absolute; bottom: 100%; width: 64px; height: 58px; color: var(--muted); pointer-events: none; }
.name-web--left { left: 12%; }
.name-web--right { right: 12%; }
.name-web::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid currentColor; }
.web-fan {
    position: absolute; top: 0; left: 0; width: 64px; height: 30px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 7px, currentColor 8px 9px, transparent 10px 14px);
}
.web-fan::before, .web-fan::after { content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 44px; background: currentColor; transform-origin: bottom; }
.web-fan::before { transform: rotate(-46deg); }
.web-fan::after { transform: rotate(46deg); }
.name-macbook {
    position: absolute; left: 50%; bottom: 0.1em; display: grid; place-items: center;
    width: 34px; height: 23px; border: 3px solid #bec3c8; border-radius: 3px 3px 0 0;
    background: #20252b; color: #f7f7f7; font-size: 11px; line-height: 1;
    transform-origin: center bottom; animation: macbook-hop 3s ease-in-out infinite;
    box-shadow: 0 2px 3px #0003; pointer-events: none;
}
.name-macbook::after { content: ""; position: absolute; top: 100%; left: -7px; width: 42px; height: 4px; border-radius: 0 0 5px 5px; background: #d5d9df; border-bottom: 1px solid #8b949e; }
@keyframes name-hang {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
}
@keyframes macbook-hop {
    0%, 16%, 62%, 100% { transform: translate(-50%, 0) rotate(0); }
    30% { transform: translate(-50%, -22px) rotate(-10deg); }
    44% { transform: translate(-50%, 0) rotate(5deg); }
    53% { transform: translate(-50%, -7px) rotate(-3deg); }
}
@media (max-width: 760px) {
    .hero { padding-top: 136px !important; }
    .name-gap { display: block; width: auto; height: 30px; }
    .name-web { height: 35px; width: 42px; }
    .web-fan { width: 42px; height: 22px; }
    .name-macbook { bottom: 4px; width: 26px; height: 18px; border-width: 2px; font-size: 9px; }
    .name-macbook::after { width: 32px; left: -5px; }
    @keyframes macbook-hop {
        0%, 16%, 62%, 100% { transform: translate(-50%, 0) rotate(0); }
        30% { transform: translate(-50%, -6px) rotate(-8deg); }
        44% { transform: translate(-50%, 0) rotate(4deg); }
        53% { transform: translate(-50%, -3px) rotate(-2deg); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-motion-ready .hero-name, .hero-name, .name-macbook { animation: none !important; }
    .name-macbook { transform: translateX(-50%); }
}