/* Trial: devPatuel «cristal» look layered over style.css (only overrides; remove this file to go back). */
:root {
  --bg: #e9eef4;
  --bg-2: rgba(255, 255, 255, 0.55);
  --text: #0b1220;
  --text-dim: rgba(11, 18, 32, 0.64);
  --accent: #0a9e63;
  --accent-deep: #0a9e63;
  --on-accent-deep: #ffffff;
  --warm: #b86e00;
  --border: rgba(11, 18, 32, 0.12);
  --box-fill: rgba(255, 255, 255, 0.6);
  --selected-fill: rgba(10, 158, 99, 0.14);
  --tarjeta-grad: transparent;
  --cristal: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45));
  --cristal-borde: rgba(255, 255, 255, 0.9);
  --cristal-brillo: inset 0 1px 0 #ffffff;
  --sombra: 0 20px 50px rgba(20, 40, 70, 0.14);
  --puntos: rgba(11, 18, 32, 0.12);
  --halo-verde: #19d38a;
  --halo-azul: #1b5fd6;
  --fondo-centro: #f8fbff;
}
:root[data-tema="oscuro"] {
  --bg: #05070b;
  --bg-2: rgba(255, 255, 255, 0.07);
  --text: #f2f6fb;
  --text-dim: rgba(242, 246, 251, 0.62);
  --accent: #3dffa8;
  --accent-deep: #3dffa8;
  --on-accent-deep: #04110b;
  --warm: #ffb020;
  --border: rgba(255, 255, 255, 0.14);
  --box-fill: rgba(255, 255, 255, 0.06);
  --selected-fill: rgba(61, 255, 168, 0.14);
  --cristal: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  --cristal-borde: rgba(255, 255, 255, 0.18);
  --cristal-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --sombra: 0 20px 50px rgba(0, 0, 0, 0.45);
  --puntos: rgba(255, 255, 255, 0.11);
  --fondo-centro: #0f1a24;
}

/* Backdrop: gradient on <html>, dot grid and halos as fixed pseudo-elements (no extra markup, CSP-safe). */
html { background: radial-gradient(ellipse at 50% 0%, var(--fondo-centro), var(--bg) 70%) fixed var(--bg); }
body { background: transparent; }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { inset: -48px; background-image: radial-gradient(var(--puntos) 1.5px, transparent 2px); background-size: 32px 32px;
  animation: cristal-deriva 40s linear infinite; }
body::after {
  background:
    radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--halo-verde) 22%, transparent), transparent 38%),
    radial-gradient(ellipse at 95% 55%, color-mix(in srgb, var(--halo-azul) 16%, transparent), transparent 42%);
}
@keyframes cristal-deriva { to { transform: translate(32px, 32px); } }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }

/* floating glass pill header */
.site-header { top: 12px; margin: 12px auto 0; max-width: calc(var(--max-w) + 2 * var(--pad)); width: calc(100% - 32px);
  border: 1px solid var(--cristal-borde); border-radius: 999px; box-shadow: var(--sombra), var(--cristal-brillo); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header { background: var(--cristal); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
}
@media (max-width: 480px) { .site-header { border-radius: 26px; } }
.site-header-inner { max-width: none; padding: 0.35rem 0.6rem 0.35rem 1.4rem; }
.wordmark { font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.tema-toggle { border-radius: 999px; }

/* glass surfaces */
.tarjeta-enlace, .stack-card, .certificado, .cv-embed, .nota {
  background: var(--cristal); border: 1px solid var(--cristal-borde); box-shadow: var(--sombra), var(--cristal-brillo);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
}
.tarjeta-enlace { border-radius: 26px; transition: transform 0.25s ease, border-color 0.25s ease; }
.tarjeta-enlace:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--cristal-borde)); }
.tarjeta-cuerpo { border-top-color: var(--cristal-borde); }
.tarjeta-media.diagram.arch { background: transparent; }
.stack-card { border-radius: 999px; box-shadow: var(--cristal-brillo); }
.stack-card-solido { background: var(--badge-bg); }
.certificado { border-radius: 22px; }
.flujo-paso { background: var(--cristal); border-color: var(--cristal-borde); border-radius: 999px; }

/* pill buttons; the primary one glows like the video CTAs */
.btn { border-radius: 999px; background: var(--cristal); border-color: var(--cristal-borde); box-shadow: var(--cristal-brillo);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-weight: 600; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent-deep);
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn-primary:hover { background: var(--accent); color: var(--on-accent-deep); box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 55%, transparent); }

/* hero photo: glass ring + green halo */
.hero-foto { border: 3px solid var(--cristal-borde); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent),
  0 0 90px color-mix(in srgb, var(--accent) 30%, transparent), var(--sombra); }
.hero-firma { text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 25%, transparent); }

/* timeline dots glow */
.hito.is-encendido::before { box-shadow: 0 0 16px var(--accent); }

@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
:root[data-tema="oscuro"] { --tarjeta-grad: transparent; }
.badge { border-radius: 999px; }

/* brand colours for the logos added with the sprite (img/logos.svg); near-black marks follow the theme text colour */
.badge-claude { --badge-bg: #d97757; }
.badge-meta { --badge-bg: #0467df; }
.badge-flyway { --badge-bg: #cc0200; }
.badge-githubactions { --badge-bg: #2088ff; }
.badge-sqlite { --badge-bg: #0f80cc; }
.badge-javascript { --badge-bg: #e8c600; }
.badge-css { --badge-bg: #1572b6; }
.badge-jwt, .badge-anthropic, .badge-github { --badge-bg: var(--text); }

/* logo + name under it (project cards and the Stack row of each project page) */
.tech-logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 1rem 0.5rem; }
.tech-logo { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; }
.tech-logo svg { width: 28px; height: 28px; fill: var(--badge-bg); transition: transform 0.2s ease; }
.tech-logo > span:last-child { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.25; color: var(--text-dim); }
.tarjeta-enlace:hover .tech-logo svg { transform: translateY(-2px); }
.logo-texto { width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 7px;
  font: 800 0.55rem/1 var(--font-mono); color: var(--text); }
.ficha-datos .tech-logos { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

/* home Stack: one glass panel, a row per category, each technology says where it was used */
.stack-tabla { border-radius: 22px; padding: 0.4rem 1.6rem; background: var(--cristal); border: 1px solid var(--cristal-borde);
  box-shadow: var(--sombra), var(--cristal-brillo); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.stack-fila { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--border); }
.stack-fila:first-child { border-top: none; }
.stack-fila h3 { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm); margin: 0.3rem 0 0; }
.stack-items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.stack-items .tech-logo { flex-direction: row; align-items: flex-start; text-align: left; gap: 0.75rem; }
.stack-items .tech-logo svg, .stack-items .logo-texto { width: 24px; height: 24px; flex: none; margin-top: 0.1rem; }
.stack-items b { display: block; font-weight: 600; font-size: 0.95rem; }
.stack-items small { color: var(--text-dim); font-size: 0.8rem; }
@media (max-width: 560px) { .stack-fila { grid-template-columns: 1fr; gap: 0.6rem; } .stack-tabla { padding: 0.4rem 1.1rem; } }

/* project facts (Cuándo, Rol, Stack, Enlaces): one glass panel with dividers instead of one box per row */
.ficha-datos { gap: 0; padding: 0.4rem 1.6rem; border-radius: 22px; background: var(--cristal); border: 1px solid var(--cristal-borde);
  box-shadow: var(--sombra), var(--cristal-brillo); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.ficha-datos > div { padding: 1rem 0; align-items: center; }
.ficha-datos > div:first-child { border-top: none; }

/* project pages: larger, wider reading text */
.ficha-cabecera .lede, .ficha-seccion p, .ficha-seccion .feature-list { max-width: 74ch; font-size: 1.12rem; line-height: 1.7; }
.ficha-seccion .feature-list { color: var(--text); }

/* "Ver proyecto" as a pill like .btn-primary */
.tarjeta-cta { border-radius: 999px; background: var(--accent); color: var(--on-accent-deep); font-family: var(--font-body); font-weight: 600;
  padding: 0.55em 1.2em; box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 35%, transparent); }
.stack-items .tech-logo > span:last-child { font-family: var(--font-body); font-size: 1rem; color: var(--text); }
/* dark brand blues (Java, Dart, Flutter, .NET…) get lost on the dark background; lift them a bit */
:root[data-tema="oscuro"] .tech-logo svg { fill: color-mix(in srgb, var(--badge-bg) 70%, #ffffff); }

/* phones: initials instead of the full name so the whole nav fits on one line of the pill */
.wordmark-corto { display: none; }
@media (max-width: 560px) {
  .wordmark-largo { display: none; }
  .wordmark-corto { display: inline; }
  .site-header-inner { padding-left: 1.1rem; gap: 0.6rem; }
  .main-nav { gap: 0.75rem; }
  .main-nav a { font-size: 0.88rem; padding: 0; }
}
@media (max-width: 560px) {
  .main-nav { flex-wrap: nowrap; }
  [id] { scroll-margin-top: 5rem; }
}
@media (max-width: 400px) { .main-nav { gap: 0.55rem; } .main-nav a { font-size: 0.84rem; } }
@media (max-width: 359px) { .site-header-inner { padding-left: 0.9rem; gap: 0.4rem; } .main-nav { gap: 0.4rem; } .main-nav a { font-size: 0.76rem; } }