/* Portfolio de Nahuel (index.html): la estética de los PDF DOCENCIA / GameDesign.
   Papel gris claro con íconos de juego muy tenues, títulos en píldora, paneles grises redondeados y viñetas
   en triángulo. Sin bordes ni sombras: los planos se separan solo por color.
   Una sola paleta que junta los dos PDF: el AZUL es para carteles (títulos, fechas, etiquetas) y el ROJO
   para lo que se toca (botones, enlaces, hover). */
:root, body.cv {
    --page: #f7f7f7;
    --panel: #e9e9e9;
    --panel-hi: #dfdfdf;
    --panel-ghost: rgba(233, 233, 233, 0.4); /* fondos que no se disparan: el panel, 60 % transparente */
    --ink: #2e2e2e;
    --ink-strong: #181818;
    /* carteles */
    --pill: #c4e2fc;
    --tone: #1e6eb0;
    /* acciones */
    --act: #d40003;
    --act-hi: #9c0002;
    --act-soft: #ffd6d6;
    --act-soft-hi: #ffbcbd;

    /* tokens que usa css/base.css */
    --bg: var(--page);
    --bg-card: #ffffff;
    --text: var(--ink);
    --text-dim: rgba(46, 46, 46, 0.7);
    --accent: var(--act);
    --accent-dim: rgba(212, 0, 3, 0.1);
    --red: var(--act);
    --yellow: #ffc83d;
    --green: #3fbf7f;
    --orange: #ff8c32;
    --border: var(--ink);
    --border-dim: rgba(46, 46, 46, 0.12);
    --shadow: none;
    --plane: var(--panel);
    --plane-hi: var(--panel-hi);
    --font-display: 'Raleway', sans-serif;
    --font-body: 'Raleway', sans-serif;
    --font-mono: 'Raleway', sans-serif;
}

body.cv {
    background: var(--page);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
}
body.cv b, body.cv strong { color: var(--ink-strong); font-weight: 700; }
body.cv h1, body.cv h2, body.cv h3 { font-family: var(--font-display); }
body.cv section { padding: 3.5rem 0; }
body.cv .section-container { max-width: 1180px; }

/* ---------- fondo: mosaico de íconos que deriva en diagonal (como el patrón de Placeholder) ----------
   La capa mide un mosaico de más y se corre exactamente un mosaico: al repetir, el corte no se ve.
   Solo anima transform; la flotación de cada ícono va dentro del SVG. */
.cv-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cv-bg > div {
    position: absolute; left: 0; top: 0; width: calc(100% + 224px); height: calc(100% + 224px);
    background: url('../resources/cv-pattern.svg') 0 0 / 224px 224px; /* 30 % más chico que el original */
    will-change: transform;
    animation: cv-drift 18s linear infinite;
}
@keyframes cv-drift { to { transform: translate(-224px, -224px); } }
@media (prefers-reduced-motion: reduce) { .cv-bg > div { animation: none; } }

/* ---------- nav ---------- */
body.cv nav { background: var(--page); height: 64px; }
.cv-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink-strong); font: 900 1.15rem var(--font-display); letter-spacing: 0.06em; }
.cv-dots { position: relative; display: inline-block; width: 26px; height: 26px; flex: none; }
.cv-dots i { position: absolute; width: 10px; height: 10px; border-radius: 50%; }
.cv-dots i:nth-child(1) { left: 8px; top: 0; background: #ffc83d; }
.cv-dots i:nth-child(2) { left: 0; top: 8px; background: #3f7fe0; }
.cv-dots i:nth-child(3) { right: 0; top: 8px; background: #3fbf7f; }
.cv-dots i:nth-child(4) { left: 8px; bottom: 0; background: #e8457a; }
body.cv .nav-links { gap: 1.5rem; }
body.cv .nav-links a { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
body.cv .nav-links a::after { background: var(--act); }
body.cv .nav-links a:hover { color: var(--act); }

/* ---------- píldoras de título (carteles: azul) ---------- */
/* Las de sección nacen del borde izquierdo de la ventana, a cualquier ancho: la cápsula solo se cierra
   a la derecha. El ::before la prolonga hacia la izquierda (body tiene overflow-x: hidden). */
.cv-pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.8rem;
    padding: 0.45rem 1.6rem 0.45rem 1rem; margin-bottom: 1.4rem;
    border-radius: 0 999px 999px 0; background: var(--pill); color: var(--tone);
}
.cv-pill::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: inherit; }
.cv-pill-sm { border-radius: 999px; }
.cv-pill-sm::before { display: none; }
.cv-pill h2, .cv-pill > span { margin: 0; font: 800 1.45rem/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: inherit; }
.cv-ico { width: 1.35rem; height: 1.35rem; flex: none; fill: currentColor; }
.cv-pill-sm { padding: 0.3rem 1.1rem 0.3rem 0.8rem; margin-bottom: 1rem; }
.cv-pill-sm > span { font-size: 0.95rem; }
.cv-pill-sm .cv-ico { width: 1.05rem; height: 1.05rem; }

.cv-panel { background: var(--panel); border-radius: 18px; padding: 1.6rem 1.8rem; }

/* ---------- hero: texto y cubo sueltos sobre el papel, sin caja ---------- */
.cv-hero { padding-top: 104px; padding-bottom: 1rem; }
.cv-head { display: flex; align-items: center; gap: 2.5rem; }
.cv-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel); }
.cv-nameplate { flex: 1; min-width: 0; text-align: center; }
.cv-name {
    margin: 0 0 0.9rem; padding: 0.5rem 1.5rem; border-radius: 999px; background: var(--pill);
    font: 900 clamp(2.4rem, 6.4vw, 5.2rem)/1.1 var(--font-display); letter-spacing: 0.04em; color: var(--ink);
}
.cv-roles { margin: 0; font-weight: 500; font-size: clamp(0.85rem, 1.4vw, 1.1rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.cv-roles b { font-weight: 400; color: var(--text-dim); margin: 0 0.35em; }
.cv-hero-body { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 2rem; margin-top: 1.5rem; align-items: center; }
.cv-intro { max-width: 560px; padding-left: 1rem; }
.cv-intro p { margin: 0 0 1rem; font-size: 1.1rem; }
.cv-lead { position: relative; padding-left: 1.4rem; font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.25 var(--font-display) !important; color: var(--ink-strong); }
.cv-lead::before, .cv-job h3::before, .cv-edu li::before {
    content: ''; position: absolute; left: 0; top: 0.4em; width: 0.55em; height: 0.65em;
    background: var(--tone); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.cv-lead::before { width: 0.45em; height: 0.55em; top: 0.38em; }
.cv-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.cv-btn { display: inline-block; padding: 0.75rem 1.7rem; border-radius: 999px; background: var(--act); color: #fff; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; text-decoration: none; transition: background-color 0.2s, transform 0.2s; }
.cv-btn:hover { background: var(--act-hi); }
.cv-btn-soft { background: var(--act-soft); color: var(--act-hi); }
.cv-btn-soft:hover { background: var(--act-soft-hi); }
/* burbujas (js/bubbles.js): planos de color, sin borde ni brillo; el ícono del fondo adentro */
.cv-bubbles { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: 100%; }
/* ancho para que tengan dónde rebotar y armar las formaciones; las burbujas se miden por el alto */
.bubble-field { position: relative; width: 105%; max-width: 756px; height: 475px; } /* 5 % más ancho que su columna: sobresale parejo de los dos lados */
.bubble { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
/* hitbox más grande que la burbuja (un 20 % de su ancho para cada lado): forma parte de .bubble, así que el tiro y el hover lo cuentan */
.bubble::before { content: ''; position: absolute; inset: -20%; border-radius: 50%; }
.bubble.is-popped { visibility: hidden; }
.bubble-body {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
    background: var(--bub); box-shadow: 0 9px 12px -5px rgb(0 0 0 / 0.22); /* sombra solo hacia abajo (pedido de Nahuel) */
    position: relative;
    /* el inflado va en transform: la propiedad suelta scale queda para el temblor del disparo */
    transform: scale(var(--swell, 1)); transition: transform 0.15s ease-out;
}
.bubble-body svg { width: 52%; height: 52%; fill: var(--ink); }
/* al pasar el mouse (o el hitbox) se aclara: se puede disparar. Una capa blanca que solo cambia opacidad */
.bubble-body::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.bubble:hover .bubble-body::after { opacity: 0.28; }
.bubble-ring, .bubble-drop { position: absolute; border-radius: 50%; pointer-events: none; }
/* capa fija: explosiones, íconos despedidos y viajeras que cruzan la pantalla (solo la burbuja recibe clics) */
.bubble-sky { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.bubble-sky .bubble { pointer-events: auto; }
.bubble-fly { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.bubble-hud { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.bubble-hud b { color: var(--act); }

/* ---------- experiencia: un rubro tras otro (hub con todos los espacios), tarjetas en dos columnas ---------- */
.cv-rubro { margin: 2.4rem 0 1rem; font: 800 1rem var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tone); }
.cv-rubro:first-of-type { margin-top: 0.4rem; }
.cv-rubro span { margin-left: 0.5rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); text-transform: none; }
.cv-subjects { margin: 0.5rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cv-subjects li { padding: 0.12rem 0.65rem; border-radius: 999px; background: #ffeaa3; color: #7a5600; font-size: 0.78rem; font-weight: 700; }
.cv-events { list-style: none; margin: 0; padding: 1.4rem 1.6rem; border-radius: 18px; background: var(--panel-ghost); columns: 2; column-gap: 2.5rem; }
.cv-events li { position: relative; break-inside: avoid; padding: 0 0 0.75rem 1rem; font-size: 0.93rem; line-height: 1.4; }
.cv-events li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 0.45em; height: 0.55em; background: var(--tone); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cv-events b { text-transform: uppercase; }
.cv-events span { color: var(--tone); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.cv-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cv-job { padding: 1.3rem 1.5rem 1.4rem; border-radius: 18px; background: var(--panel); }
.cv-when { display: inline-block; margin: 0 0 0.6rem; padding: 0.15rem 0.8rem; border-radius: 999px; background: #e6dbff; color: #4b2a99; font-style: italic; font-weight: 700; font-size: 0.82rem; }
.cv-job h3 { position: relative; margin: 0 0 0.45rem; padding-left: 1.1rem; font: 800 1.08rem/1.3 var(--font-display); text-transform: uppercase; color: var(--ink-strong); }
.cv-job h3 span { font-weight: 500; }
.cv-job p:last-child { margin: 0; font-size: 0.95rem; }
.cv-more { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 2rem 0 0; font: 700 1.2rem var(--font-display); }
.cv-more span { color: var(--act); font-size: 2rem; line-height: 1; }
.cv-more a { color: var(--act); letter-spacing: 0.05em; text-transform: uppercase; text-underline-offset: 4px; }
.cv-more a:hover { color: var(--act-hi); }

/* ---------- perfil: herramientas en fichas; formación, idiomas e intereses en tres tarjetas ---------- */
.cv-chips { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cv-chips li { padding: 0.4rem 1rem; border-radius: 999px; background: var(--panel); font-weight: 700; font-size: 0.9rem; color: var(--ink-strong); }
.cv-trio { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.cv-card { padding: 1.3rem 1.5rem 1.5rem; border-radius: 18px; background: var(--panel); }
.cv-card p { margin: 0; }
.cv-edu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.cv-edu li { position: relative; padding-left: 1rem; font-size: 0.93rem; line-height: 1.4; }
.cv-edu li::before { width: 0.45em; height: 0.55em; top: 0.4em; }
.cv-edu b { display: block; text-transform: uppercase; }
.cv-edu span { color: var(--tone); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.cv-langs { margin: 0; display: grid; gap: 0.8rem; }
.cv-langs dt { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-strong); }
.cv-langs dd { margin: 0; color: var(--text-dim); }

/* ---------- proyectos ---------- */
.cv-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.cv-project { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--panel); transition: background-color 0.25s, transform 0.25s; }
.cv-project:hover { background: var(--tint, var(--act-soft)); }
.cv-project img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.cv-project > div { padding: 1.1rem 1.3rem 1.3rem; }
.cv-project h3 { margin: 0 0 0.4rem; font: 800 1.1rem/1.25 var(--font-display); text-transform: uppercase; color: var(--ink-strong); }
.cv-project p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.cv-genre { font-style: italic; font-weight: 700; color: var(--tone) !important; font-size: 0.82rem !important; margin-bottom: 0.25rem !important; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 !important; }
.cv-tags span { padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--page); font-size: 0.75rem; font-weight: 700; }

/* ---------- clientes: 25 logos en 5 × 5 al medio (sin filas incompletas); en angosto, flex centrado ---------- */
.cv-clients { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; max-width: 920px; margin: 0 auto; }
.cv-clients li { flex: 0 1 calc((100% - 4 * 0.8rem) / 5); display: grid; place-items: center; aspect-ratio: 5 / 3; padding: 0.8rem; border-radius: 12px; background: var(--page); transition: background-color 0.2s; }
.cv-clients li:hover { background: #fff; }
.cv-clients img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s, opacity 0.2s; }
.cv-clients li:hover img, .cv-clients li.is-lit img { filter: none; opacity: 1; }
/* prendido a los tiros: queda a color sobre blanco hasta el próximo tiro */
.cv-clients li.is-lit { background: #fff; }
.cv-clients { transition: background-color 0.4s; }
.cv-clients.is-won { background: var(--pill); }
.cv-clients-count { margin: 1rem 0 0; text-align: center; font-weight: 800; letter-spacing: 0.06em; color: var(--tone); }
.cv-clients-count.is-won { font-size: 1.25rem; color: var(--act); }

/* ---------- contacto y pie ---------- */
.cv-contact { max-width: 760px; margin: 0 auto; text-align: center; }
.cv-contact p { margin: 0 0 1rem; }
.cv-contact .cv-lead { padding-left: 0; }
.cv-contact .cv-lead::before { display: none; }
.cv-contact .cv-social { justify-content: center; }
.cv-contact .cv-lead { font-size: 1.5rem !important; }
.cv-mail { display: inline-block; margin: 0.3rem 0 1.2rem; padding: 0.6rem 1.4rem; border-radius: 999px; background: var(--act); color: #fff; font: 800 clamp(1rem, 2.4vw, 1.5rem) var(--font-display); text-decoration: none; transition: background-color 0.2s; }
.cv-mail:hover { background: var(--act-hi); }
.cv-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 !important; }
.cv-social a { padding: 0.35rem 0.95rem; border-radius: 999px; background: var(--act-soft); color: var(--act-hi); font-weight: 700; font-size: 0.85rem; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.cv-social a:hover { background: var(--act); color: #fff; }
.cv-footer { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 2.5rem 1rem 3rem; opacity: 1; background: var(--panel-ghost); }
.cv-footer p { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
.cv-footer a { color: var(--act); }
body.cv .scroll-to-top { border-radius: 50%; background: var(--act-soft); color: var(--act-hi); }
body.cv .scroll-to-top:hover { background: var(--act-soft-hi); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .cv-hero-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .cv-intro { padding-left: 0; }
    .cv-hero .cv-lead { padding-left: 0; }
    .cv-hero .cv-lead::before { display: none; } /* centrado, el triángulo quedaba suelto a la izquierda */
    .cv-ctas { justify-content: center; }
    .bubble-field { height: 432px; }
    .cv-trio { grid-template-columns: 1fr 1fr; }
    .cv-trio > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .cv-jobs { grid-template-columns: 1fr; }
    .cv-events { columns: 1; }
    .cv-head { flex-direction: column; gap: 1.2rem; }
    .cv-photo { width: 132px; height: 132px; }
}
@media (max-width: 600px) {
    body.cv nav { padding: 0 1rem; }
    body.cv .nav-link-item { display: none; }
    .cv-brand > span:last-child { font-size: 0.95rem; white-space: nowrap; }
    body.cv .section-container { padding-left: 1rem; padding-right: 1rem; }
    .cv-pill h2 { font-size: 1.1rem; }
    .cv-name { padding: 0.4rem 1rem; }
    .cv-panel { padding: 1.2rem 1.1rem; }
    .cv-trio { grid-template-columns: 1fr; }
    .cv-clients li { flex-basis: calc((100% - 0.8rem) / 2); }
    .bubble-field { height: 367px; }
    .cv-more { font-size: 0.95rem; gap: 0.5rem; }
}

/* ---------- disparo (js/shooter.js): mira, impacto, números de daño y pedazos ---------- */
/* Mira: un punto rojo sin borde, al 80 % (el cubo conserva su mano). */
body.cv, body.cv * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5' fill='%23d40003' fill-opacity='0.8'/%3E%3C/svg%3E") 8 8, crosshair;
}
.fx-layer { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; }
.confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Número de daño: la tipografía del sitio con el contorno del juego (el trazo va debajo del relleno). */
.dmg {
    position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center;
    font: 900 var(--fs, 18px)/1 var(--font-display); white-space: nowrap; will-change: transform, opacity;
    color: var(--fill); -webkit-text-stroke: calc(var(--fs, 18px) / 4) var(--line); paint-order: stroke fill;
}
.dmg-crit { display: none; margin-bottom: -0.15em; font-size: 20px; -webkit-text-stroke-width: 5px; letter-spacing: 0.06em; }
.dmg.is-crit .dmg-crit { display: block; }
.shard { position: absolute; will-change: transform, opacity; }
.shard > * { display: flex; box-sizing: border-box; }
/* flash blanco del golpe (FLASH_TIME del juego) */
.is-hit { filter: brightness(1.45) saturate(0.6); }
.cv-when, .cv-chips li, .cv-tags span, .cv-subjects li { transition: background-color 0.15s, color 0.15s; }

/* ---------- hover: tarjetas y botones se elevan y tiran una sombra hacia abajo ----------
   Con la propiedad suelta `translate` (no transform): no pisa la entrada .reveal ni el temblor del disparo,
   que también usa `translate` pero solo mientras dura el golpe. La transición repite la de .reveal. */
body.cv :is(.cv-job, .cv-project, .cv-card, .cv-clients li, .cv-chips li, .cv-btn, .cv-social a, .cv-mail) {
    transition: opacity 0.7s ease, transform 0.7s ease, translate 0.22s ease, box-shadow 0.22s ease, background-color 0.25s, color 0.2s;
}
body.cv :is(.cv-job, .cv-project, .cv-card, .cv-clients li):hover {
    translate: 0 -6px;
    box-shadow: 0 14px 22px -8px rgba(24, 24, 24, 0.28);
}
body.cv :is(.cv-chips li, .cv-btn, .cv-social a, .cv-mail):hover {
    translate: 0 -3px;
    box-shadow: 0 8px 12px -5px rgba(24, 24, 24, 0.3);
}
@media (prefers-reduced-motion: reduce) {
    body.cv :is(.cv-job, .cv-project, .cv-card, .cv-clients li, .cv-chips li, .cv-btn, .cv-social a, .cv-mail):hover { translate: none; }
}

/* hover: las tarjetas de experiencia y perfil cambian a un celeste claro (los proyectos usan el color de su imagen) */
body.cv :is(.cv-job, .cv-card):hover { background: #dcecfb; }