:root {
  --bg: #0a0a0b;
  --bg-rgb: 10, 10, 11;
  --bg-elevated: #141417;
  --bg-elevated-2: #1b1b1f;
  --border: #26262b;
  --text: #f2f2f0;
  --text-muted: #9a9aa0;
  --accent: #3fae9e;
  --accent-hover: #55c4b4;

  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Chakra Petch', sans-serif;

  --max-width: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Preloader */

/* Mientras carga se bloquea el scroll y se oculta la barra. --sbw (ancho de la barra, medido en JS)
   se deja como margen para que el layout no se corra cuando la barra reaparece. */
html.is-loading {
  overflow: hidden;
  scrollbar-width: none;
  margin-right: var(--sbw, 0px);
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mismo fondo que la imagen al compartir en redes (og-image): verde azulado, más claro al centro */
  background: #060c0c radial-gradient(ellipse 85% 95% at 50% 62%, #174039 0%, #11302c 30%, #0b1e1c 58%, #060c0c 100%);
  opacity: 1;
  visibility: visible;
  /* Respaldo: si el JS falla, se oculta solo a los 9 s */
  animation: preloader-failsafe 0s linear 9s forwards;
}

/* El fade es una animación (no una transición): reemplaza al respaldo y funciona igual en Firefox y Chrome */
#preloader.hide {
  pointer-events: none;
  animation: preloader-out 0.5s ease forwards;
}

.preloader-logo {
  width: min(440px, 88vw);
  height: auto;
}

@keyframes preloader-out {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}

@keyframes preloader-failsafe {
  to { opacity: 0; visibility: hidden; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

body,
.site-header,
.nav,
.project-card,
.stack,
.service-card,
.btn-outline,
.site-footer,
.lang-btn {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
}

.nav {
  grid-column: 2;
  justify-self: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  grid-column: 3;
  justify-self: end;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  grid-column: 1;
  justify-self: start;
}

.logo-icon {
  height: 18px;
  width: auto;
  transition: filter 0.25s ease;
}

/* Versión neón: el SVG lleva margen extra para el resplandor, así que se agranda la caja
   y se compensa con margen negativo para que el icono siga ocupando lo mismo en el header. */
.logo-icon--neon {
  height: 34.6px;
  margin: -8.3px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.95rem;
}

.nav a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.nav a:hover { color: var(--text); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  display: block;
}

/* Header controls (language) */

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Buttons */

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: #06110f;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-outline {
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Hero */

.hero {
  padding: 160px 0 140px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.75) 55%, rgba(10,10,11,0.95) 100%),
    url('assets/hero.webp');
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
  /* Capa propia: el fondo queda rasterizado y no se redibuja cuando la pantalla de carga se desvanece */
  transform: translateZ(0);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  max-width: 780px;
  margin: 0 auto 20px;
  color: #f5f5f3;
}

.hero-sub {
  color: rgba(245, 245, 243, 0.75);
  font-size: 1.15rem;
  margin-bottom: 36px;
}

/* Sections */

.section {
  padding: 90px 0;
  border-top: 1px solid var(--border);
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 48px;
}

/* Project cards */

.project-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  margin-bottom: 24px;
}

.project-card:last-child { margin-bottom: 0; }

.project-body {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 32px;
  align-items: start;
}

.project-body > * { grid-column: 1; }

.project-body > .btn {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: center;
  white-space: nowrap;
}

.project-tag {
  display: inline-block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.project-body h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.project-body p {
  color: var(--text-muted);
  margin-bottom: 10px;
}

.project-role { font-size: 0.92rem; }

/* About */

.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}

.about-text {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 520px;
  margin-bottom: 16px;
}

/* Card que envuelve el texto de "Sobre mí" (mismo lenguaje que .stack y .service-card) */
.about-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
}
.about-card .about-text:last-child { margin-bottom: 0; }

.stack {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  align-self: start;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.stack:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(-3px);
}

.stack-label {
  display: block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.stack-list {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.8;
}

/* Services */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px 26px;
  transition: border-color 0.2s ease;
}

.service-card:hover { border-color: var(--accent); }

.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.service-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Contact */

.contact { text-align: center; }

.contact .section-title { margin-bottom: 14px; }

.contact-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 36px;
}

.contact-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.contact-actions .btn {
  text-align: center;
}

@media (min-width: 721px) {
  .contact-actions .btn {
    width: 180px;
  }
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}

.footer-inner {
  text-align: left;   /* a la izquierda del todo (en escritorio llega al borde de la pantalla, ver abajo) */
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Reveal animation */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Project card hover (after .reveal so its transition isn't overridden) */

.project-card.reveal {
  transition: opacity 0.6s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.25s ease;
}

.project-card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.project-card.reveal.in-view:hover {
  transform: translateY(-3px);
}

/* Responsive */

@media (max-width: 860px) {
  .project-card { padding: 22px; }
  .project-body { grid-template-columns: 1fr; }
  .project-body h3 { font-size: 1.3rem; margin-bottom: 10px; }
  .project-body p { font-size: 0.95rem; line-height: 1.55; }
  .project-body p.project-role { font-size: 0.88rem; }
  .project-body > .btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    text-align: center;
    margin-top: 18px;
    padding: 12px 20px;
  }
  .about-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav a:last-child { border-bottom: none; }
  .nav-toggle { display: flex; }
  .hero { padding: 110px 0 70px; }
  .contact-actions { flex-direction: column; }
}


/* =====================================================================
   REDISEÑO: hero con anillos y cerebros, navbar transparente, botones de cristal
   y la página como escenas de pantalla completa (escritorio). El motor está en scenes.js.
   ===================================================================== */

/* Hero a pantalla completa con escena vectorial (solo escritorio).
   Se carga después de styles.css, así que solo sobrescribe lo del hero.
   En móvil (< 861px) el hero queda como en styles.css y la escena no se muestra. */

.hero-art { display: none; }
.nav-spark { display: none; }

@media (min-width: 861px) {
  :root { --header-h: 65px; } /* header sticky: 64px de alto + 1px de borde */

  .hero {
    /* +1px: con escalas de pantalla como 125% el navegador redondea el header (64.8px en vez de 65)
       y sin este margen se asomaría una línea de la siguiente sección */
    min-height: calc(100vh + 1px);   /* respaldo para navegadores sin dvh */
    min-height: calc(100dvh + 1px);  /* el hero ahora también cubre el área del navbar (que es transparente encima) */
    margin-top: calc(-1 * var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h) + 48px) 0 48px; /* el texto sigue centrado en el área visible bajo el navbar */

    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(110% 80% at 50% 105%, #0d2623 0%, #08130f 48%, #060b0b 100%);
  }

  .hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  /* Título al tamaño original (3.2rem) en 2 líneas; solo se reduce un poco en ventanas angostas
     para que no toque los paneles */
  .hero h1 {
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    max-width: 15em; /* en em: parte siempre igual ("...sitios web" / "para negocios y marcas.") sin importar el tamaño */
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.65);
  }
  .hero-sub {
    color: rgba(245, 245, 243, 0.88);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7);
  }

  /* Escena: un "escenario" 1920x900 que cubre el hero (como background-size: cover) y escala todo junto */
  .hero-art {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    container-type: size;
  }

  .ha-stage {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--header-h) / 2);   /* la escena sigue centrada en el área bajo el navbar */
    width: max(100cqw, calc(100cqh * 2.1333));
    aspect-ratio: 1920 / 900;
    transform: translate(-50%, -50%);
  }

  .ha-stage > svg {
    position: absolute;
    display: block;
    overflow: visible;
  }

  .ha-main {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* Los destellos van en su propio SVG con viewBox en coordenadas del escenario,
     así quedan como una capa independiente y no obligan a redibujar el resto */
  .ha-p {
    left: calc(var(--x) / 1920 * 100%);
    top: calc(var(--y) / 900 * 100%);
    width: calc(var(--w) / 1920 * 100%);
    height: calc(var(--h) / 900 * 100%);
  }

  /* Viñeta oscura detrás del texto. Va POR DEBAJO de la escena (::before), si no oscurecería el cerebro de arriba */
  .hero-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 36% 32% at 50% 44%,
      rgba(4, 9, 9, 0.85) 0%,
      rgba(4, 9, 9, 0.55) 55%,
      rgba(4, 9, 9, 0) 100%
    );
  }

  /* Degradado inferior hacia el fondo de la página (solo en tema oscuro) */
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0), rgb(var(--bg-rgb)));
  }

  /* Destellos: dan vueltas por los anillos (un solo ciclo de 5 s = un destello pasa de un cerebro al otro) */
  .ha-run {
    stroke: #e6fff9;
    stroke-width: 2.6;
    stroke-dasharray: 36 264;               /* con pathLength=600 hay 2 destellos, a media vuelta uno de otro */
    animation: ha-run 5s linear infinite;
  }
  .ha-run-halo { stroke: #6fe6d1; stroke-width: 9; stroke-opacity: 0.28; }
  .ha-run-b { animation-delay: -2.5s; }    /* el anillo exterior pasa por los cerebros a medio ciclo */

  @keyframes ha-run {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -300; }
  }

  /* Los dos cerebros siempre encendidos (sin parpadeo): trazo blanco y halo verde a plena intensidad */
  .ha-hub-glow, .ha-hub-img { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .ha-run { animation: none; }
    .ha-pulse { display: none; }
  }
}


/* ================= Navbar integrado con el hero (solo escritorio) =================
   - Arriba (sobre el hero): transparente, sin borde, con colores claros fijos.
   - Al bajar (.is-scrolled): cristal oscuro con desenfoque.
   - Riel de circuito abajo + un destello que se desliza y se queda bajo la sección activa. */
@media (min-width: 861px) {
  .site-header {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
  }
  .site-header.is-scrolled {
    background: rgba(var(--bg-rgb), 0.78);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }

  /* Sobre el hero los colores del navbar son claros fijos */
  .site-header:not(.is-scrolled) {
    --text: #f5f5f3;
    --text-muted: rgba(245, 245, 243, 0.72);
    --border: rgba(159, 245, 228, 0.22);
  }

  /* Riel de circuito */
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(111, 230, 209, 0.5) 22%, rgba(111, 230, 209, 0.5) 78%, transparent 100%);
  }

  /* Destello que viaja por el riel y se queda bajo el link activo (lo posiciona scenes.js) */
  .nav-spark {
    display: block;
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: var(--w, 0px);
    transform: translateX(var(--x, 0px));
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(230, 255, 249, 0), #e6fff9 30%, #e6fff9 70%, rgba(230, 255, 249, 0));
    box-shadow: 0 0 14px 2px rgba(111, 230, 209, 0.75);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }
  .nav-spark.is-on { opacity: 1; }

  .nav a.is-active { color: var(--text); }

  @media (prefers-reduced-motion: reduce) {
    .nav-spark { transition: none; }
  }
}


/* ================= Botón "Ver proyectos": cristal (solo escritorio) =================
   Píldora translúcida con tinte verde, borde de luz, brillo interior, flecha que se desliza
   al pasar el mouse y un destello que cruza el botón cada 6 s. */
@media (min-width: 861px) {
  :is(.hero .btn-primary, .scene-next) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px 15px 34px;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    color: #eafffa;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    background:
      linear-gradient(135deg, rgba(111, 230, 209, 0.30) 0%, rgba(63, 174, 158, 0.10) 55%, rgba(111, 230, 209, 0.18) 100%);
    border: 1px solid rgba(159, 245, 228, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),          /* filo de luz arriba */
      inset 0 -12px 22px rgba(111, 230, 209, 0.10),     /* reflejo interior abajo */
      0 10px 30px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(111, 230, 209, 0.16);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }

  /* Flecha dibujada (decorativa, no la lee un lector de pantalla) */
  :is(.hero .btn-primary, .scene-next)::after {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eafffa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.25s ease;
  }

  /* Destello que cruza el botón */
  :is(.hero .btn-primary, .scene-next)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
    transform: translateX(-130%);
    animation: hf-btn-sweep 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes hf-btn-sweep {
    0%, 62%  { transform: translateX(-130%); }
    82%      { transform: translateX(130%); }
    100%     { transform: translateX(130%); }
  }

  :is(.hero .btn-primary, .scene-next):hover {
    background: linear-gradient(135deg, rgba(111, 230, 209, 0.46) 0%, rgba(63, 174, 158, 0.18) 55%, rgba(111, 230, 209, 0.30) 100%);
    border-color: rgba(190, 255, 241, 0.8);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -12px 22px rgba(111, 230, 209, 0.16),
      0 14px 36px rgba(0, 0, 0, 0.45),
      0 0 44px rgba(111, 230, 209, 0.38);
  }
  :is(.hero .btn-primary, .scene-next):hover::after { transform: translateX(5px); }
  :is(.hero .btn-primary, .scene-next):active { transform: translateY(0) scale(0.98); }
  :is(.hero .btn-primary, .scene-next):focus-visible { outline: 2px solid #9ff5e4; outline-offset: 4px; }

  @media (prefers-reduced-motion: reduce) {
    :is(.hero .btn-primary, .scene-next)::before { animation: none; display: none; }
    :is(.hero .btn-primary, .scene-next), :is(.hero .btn-primary, .scene-next)::after { transition: none; }
  }
}


/* Los iconos de los botones de contacto solo existen en escritorio; en móvil los botones quedan como estaban */
.contact-actions .btn svg { display: none; }

/* ================= Botones de contacto (WhatsApp / Email): cristal (solo escritorio) =================
   Mismo lenguaje que el botón del hero. Detrás hay un resplandor suave (verde + un toque de arena)
   para que el cristal tenga algo que refractar. WhatsApp = tinte verde (principal); Email = cristal neutro. */
@media (min-width: 861px) {
  .contact-actions { position: relative; isolation: isolate; gap: 18px; }

  .contact-actions::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 680px;
    height: 220px;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(closest-side at 32% 50%, rgba(63, 174, 158, 0.38), rgba(63, 174, 158, 0)),
      radial-gradient(closest-side at 70% 50%, rgba(192, 122, 79, 0.2), rgba(192, 122, 79, 0));
  }

  .contact-actions .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    color: #eafffa;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }

  /* WhatsApp: tinte verde */
  .contact-actions .btn-primary {
    background: linear-gradient(135deg, rgba(111, 230, 209, 0.30) 0%, rgba(63, 174, 158, 0.10) 55%, rgba(111, 230, 209, 0.18) 100%);
    border: 1px solid rgba(159, 245, 228, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      inset 0 -12px 22px rgba(111, 230, 209, 0.10),
      0 10px 30px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(111, 230, 209, 0.16);
  }
  .contact-actions .btn-primary:hover {
    background: linear-gradient(135deg, rgba(111, 230, 209, 0.46) 0%, rgba(63, 174, 158, 0.18) 55%, rgba(111, 230, 209, 0.30) 100%);
    border-color: rgba(190, 255, 241, 0.8);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -12px 22px rgba(111, 230, 209, 0.16),
      0 14px 36px rgba(0, 0, 0, 0.45),
      0 0 44px rgba(111, 230, 209, 0.38);
  }

  /* Email: cristal neutro (blanco translúcido) */
  .contact-actions .btn-outline {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -12px 22px rgba(255, 255, 255, 0.04),
      0 10px 30px rgba(0, 0, 0, 0.35);
  }
  .contact-actions .btn-outline:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(111, 230, 209, 0.10) 55%, rgba(255, 255, 255, 0.12) 100%);
    border-color: rgba(190, 255, 241, 0.7);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -12px 22px rgba(111, 230, 209, 0.10),
      0 14px 36px rgba(0, 0, 0, 0.42),
      0 0 36px rgba(111, 230, 209, 0.25);
  }

  .contact-actions .btn:hover { transform: translateY(-2px); }
  .contact-actions .btn:active { transform: translateY(0) scale(0.98); }
  .contact-actions .btn:focus-visible { outline: 2px solid #9ff5e4; outline-offset: 4px; }

  /* Iconos */
  .contact-actions .btn svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Destello que cruza el botón una vez al pasar el mouse */
  .contact-actions .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
  }
  .contact-actions .btn:hover::before { animation: hf-contact-sweep 0.9s ease; }
  @keyframes hf-contact-sweep {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .contact-actions .btn { transition: none; }
    .contact-actions .btn:hover::before { animation: none; }
  }
}


/* ================= Escenas (solo escritorio) =================
   Cada sección se vuelve una escena de pantalla completa. Los anillos y cerebros (.hero-art)
   son fijos; las escenas se deslizan por encima (scenes.js pone/quita las clases).
   En móvil (< 861px) no se aplica nada de esto: scroll normal. */
.scene-actions { display: none; }

@media (min-width: 861px) {
  html.scenes-on,
  html.scenes-on body { overflow: hidden; height: 100%; }

  /* Escenario fijo a pantalla completa; el navbar (z-index 50) queda encima */
  .scenes-on #top {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    overflow: clip;   /* clip (no hidden): ni el navegador ni un ancla (#proyectos, Atrás...) pueden desplazarlo */
    background: radial-gradient(110% 80% at 50% 105%, #0d2623 0%, #08130f 48%, #060b0b 100%);
  }
  .scenes-on .hero-art { z-index: 0; }

  .scenes-on .scene {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    min-height: 0;
    padding: var(--header-h) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(8vw, 0, 0);   /* las escenas siguientes esperan a la derecha */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease, visibility 0s linear 0.8s;
  }
  .scenes-on .scene.is-before { transform: translate3d(-8vw, 0, 0); }   /* las anteriores quedan a la izquierda */
  .scenes-on .scene.is-current {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .scenes-on .scene:focus { outline: none; }
  #top.no-anim .scene { transition: none !important; }

  .scenes-on .scene > .container { width: 100%; }
  .scenes-on .hero::after { display: none; }
  .scenes-on .reveal { opacity: 1; transform: none; }

  /* Botones de cristal que encadenan las escenas (mismo estilo que "Ver proyectos") */
  .scenes-on .scene-actions {
    position: absolute;
    right: clamp(28px, 4.2vw, 72px);
    bottom: clamp(40px, 7.5vh, 72px);
    display: flex;
    margin: 0;
  }

  /* Footer discreto, fijo abajo */
  .scenes-on .site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 5;
    padding: 0;
    border: 0;
    opacity: 0.5;
    pointer-events: none;
  }
  /* Texto pegado al borde izquierdo de la pantalla (no al del contenedor), con un margen mínimo para no tocar el borde */
  .scenes-on .site-footer .footer-inner {
    max-width: none;
    margin: 0;
    padding: 0 24px 0 clamp(20px, 2vw, 32px);
  }

  /* ---------- Escena de proyectos: cuatro tarjetas de cristal ---------- */
  .scenes-on #proyectos .container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 18px;
    max-width: 1280px;
    align-items: stretch;
  }
  .scenes-on #proyectos .section-title {
    grid-column: 1 / -1;
    margin: 0 0 6px;
    text-align: center;
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  }

  .scenes-on .project-card {
    display: flex;
    margin: 0;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.07) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -12px 22px rgba(111, 230, 209, 0.05),
      0 12px 32px rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
  }
  .scenes-on .project-card:hover {
    border-color: rgba(190, 255, 241, 0.6);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -12px 22px rgba(111, 230, 209, 0.1),
      0 16px 38px rgba(0, 0, 0, 0.42),
      0 0 34px rgba(111, 230, 209, 0.22);
  }
  .scenes-on .project-card .project-body { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .scenes-on .project-card .project-tag { margin: 0; font-size: 0.68rem; }
  .scenes-on .project-card h3 { margin: 0; font-size: 1.15rem; }
  .scenes-on .project-card p { margin: 0; font-size: 0.86rem; line-height: 1.45; color: rgba(245, 245, 243, 0.72); }
  .scenes-on .project-card .project-role { display: none; }
  .scenes-on .project-card .project-body > .btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 7px 15px;
    font-size: 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
    color: #eafffa;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.24);
  }
  .scenes-on .project-card .project-body > .btn:hover { border-color: rgba(190, 255, 241, 0.75); color: #fff; }
  .scenes-on .project-card .project-body > p:not(.project-role) { margin-bottom: 6px; }

  /* Entrada escalonada de los elementos de la escena que llega */
  .scenes-on .scene.is-current .section-title,
  .scenes-on .scene.is-current .project-card,
  .scenes-on .scene.is-current .scene-actions {
    animation: scene-item-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .scenes-on .scene.is-current .section-title { animation-delay: 0.08s; }
  .scenes-on .scene.is-current .project-card:nth-of-type(1) { animation-delay: 0.18s; }
  .scenes-on .scene.is-current .project-card:nth-of-type(2) { animation-delay: 0.26s; }
  .scenes-on .scene.is-current .project-card:nth-of-type(3) { animation-delay: 0.34s; }
  .scenes-on .scene.is-current .project-card:nth-of-type(4) { animation-delay: 0.42s; }
  .scenes-on .scene.is-current .scene-actions { animation-delay: 0.55s; }

  @keyframes scene-item-in {
    from { opacity: 0; transform: translate3d(36px, 0, 0); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .scenes-on .scene { transition: opacity 0.3s ease; transform: none !important; }
    .scenes-on .scene.is-current .section-title,
    .scenes-on .scene.is-current .project-card,
    .scenes-on .scene.is-current .scene-actions { animation: none; }
  }
}

/* Ventanas de escritorio angostas: proyectos en 2 columnas para que las tarjetas no queden minúsculas */
@media (min-width: 861px) and (max-width: 1100px) {
  .scenes-on #proyectos .container { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}


/* ================= Escenas "Sobre mí" y "Servicios": compactas y de cristal (solo escritorio) =================
   Antes usaban el diseño viejo (título grande a la izquierda, mucho margen) y se pisaban con los cerebros.
   Ahora siguen el mismo formato que Proyectos: título pequeño centrado, contenido compacto y botón al final,
   todo dentro del espacio libre entre los dos óvalos. */
@media (min-width: 861px) {
  .scenes-on :is(#sobre-mi, #servicios) .section-title {
    margin: 0 0 8px;
    text-align: center;
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  }

  /* Tarjetas de cristal (misma receta que las de proyectos) */
  .scenes-on :is(.stack, .service-card, .about-card) {
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.07) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -12px 22px rgba(111, 230, 209, 0.05),
      0 12px 32px rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .scenes-on :is(.stack, .service-card, .about-card):hover {
    border-color: rgba(190, 255, 241, 0.6);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -12px 22px rgba(111, 230, 209, 0.1),
      0 16px 38px rgba(0, 0, 0, 0.42),
      0 0 34px rgba(111, 230, 209, 0.22);
  }

  /* Sobre mí */
  .scenes-on #sobre-mi .container { max-width: 1040px; }
  .scenes-on #sobre-mi .about-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; margin-top: 18px; }
  .scenes-on #sobre-mi .about-text {
    max-width: 660px;
    margin: 0 auto 14px;
    font-size: 1.12rem;
    line-height: 1.65;
    color: rgba(245, 245, 243, 0.78);
  }
  .scenes-on #sobre-mi .stack { align-self: center; padding: 26px 30px; }
  .scenes-on #sobre-mi .about-card { max-width: 760px; padding: 30px 40px; }

  /* Servicios */
  .scenes-on #servicios .services-grid { gap: 20px; margin-top: 18px; }
  .scenes-on #servicios .service-card { padding: 24px 26px; }
  .scenes-on #servicios .service-card h3 { margin-bottom: 8px; font-size: 1.22rem; }
  .scenes-on #servicios .service-card p { font-size: 0.94rem; line-height: 1.5; color: rgba(245, 245, 243, 0.72); }

  /* Entrada escalonada (se suma a la de proyectos) */
  .scenes-on .scene.is-current .about-grid,
  .scenes-on .scene.is-current .service-card {
    animation: scene-item-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .scenes-on .scene.is-current .about-grid { animation-delay: 0.18s; }
  .scenes-on .scene.is-current .service-card:nth-child(1) { animation-delay: 0.18s; }
  .scenes-on .scene.is-current .service-card:nth-child(2) { animation-delay: 0.26s; }
  .scenes-on .scene.is-current .service-card:nth-child(3) { animation-delay: 0.34s; }

  @media (prefers-reduced-motion: reduce) {
    .scenes-on .scene.is-current .about-grid,
    .scenes-on .scene.is-current .service-card { animation: none; }
  }
}


/* Pantallas de escritorio bajas (menos de 700px de alto, p. ej. 1366x650 o 1280x600): más compacto para que todo siga cabiendo entre los cerebros */
@media (min-width: 861px) and (max-height: 700px) {
  .scenes-on .project-card .project-tag { display: none; }
  .scenes-on .project-card { padding: 12px 14px 11px; }
  .scenes-on #proyectos .section-title { font-size: 1.2rem; margin-bottom: 0; }
  .scenes-on #sobre-mi .about-text { font-size: 0.92rem; margin-bottom: 8px; }
}


/* ================= Proyectos dentro del anillo (solo escritorio) =================
   La fila de 4 tarjetas era más ancha que el espacio libre dentro del anillo y sus esquinas de abajo
   quedaban cruzadas por la línea. Ahora:
   1) el ancho máximo de la fila es proporcional al escenario (0.72 del ancho de la escena, que escala
      igual que los anillos), así que nunca se sale del anillo en ninguna pantalla;
   2) las TARJETAS (no el bloque con el título) quedan centradas en el centro del anillo, que es donde
      el anillo es más ancho: un espaciador abajo equilibra la altura del título de arriba. */
@media (min-width: 861px) {
  .scenes-on #proyectos .container {
    max-width: min(1280px, calc(0.72 * max(100vw, 213.33vh)));
  }
  .scenes-on #proyectos .container::after {
    content: "";
    grid-column: 1 / -1;
    /* = altura del título + su margen, menos 18px: baja el bloque ~9px para que el título quede centrado
       entre el óvalo del cerebro de arriba y las tarjetas (antes casi tocaba el óvalo) */
    height: calc(clamp(1.3rem, 2.1vw, 1.8rem) * 1.15 - 12px);
    pointer-events: none;
  }
  .scenes-on .project-card p { font-size: 0.84rem; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .scenes-on #proyectos .container { max-width: 760px; }
}


/* Pantallas muy bajas (menos de 620px de alto): no hay espacio vertical para el título y las tarjetas a la vez
   sin que el título roce el óvalo del cerebro. El título queda solo para lectores de pantalla (el navbar ya marca "Proyectos"). */
@media (min-width: 861px) and (max-height: 620px) {
  .scenes-on #proyectos .section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .scenes-on #proyectos .container::after { height: 0; }
}


/* ================= Escenas más arriba (solo escritorio) =================
   Sobre mí, Servicios y Contacto estaban centradas exactamente entre los dos cerebros, pero como arriba hay un
   cerebro grande y abajo solo un botón chico, se sentían bajas. Un padding abajo (6vh, ~22px de subida a 730px
   de alto) las levanta un poco, proporcional a la altura de la ventana. Proyectos no se toca: sus tarjetas
   están centradas en el centro del anillo a propósito. */
@media (min-width: 861px) {
  .scenes-on :is(#sobre-mi, #servicios, #contacto) { padding-bottom: 6vh; }
}


/* =====================================================================
   MÓVIL (< 861px): misma identidad que escritorio, con scroll normal
   Hero a pantalla completa con anillo vertical y destellos, navbar transparente que se vuelve cristal,
   botones y tarjetas de cristal. Todo vive dentro de este media query: escritorio no se toca.
   ===================================================================== */
.hero-art-m { display: none; }

@media (max-width: 860px) {
  :root { --header-h: 65px; }

  body { background: #060b0b; }

  /* ---------- Navbar ---------- */
  .site-header {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
  }
  .site-header.is-scrolled {
    background: rgba(6, 11, 11, 0.78);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }
  /* Riel de circuito */
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(111, 230, 209, 0.5) 22%, rgba(111, 230, 209, 0.5) 78%, transparent 100%);
  }
  .nav {
    justify-self: stretch;   /* el panel desplegable ocupa todo el ancho (con "center" quedaba angosto) */
    background: rgba(6, 11, 11, 0.96);
    border-bottom-color: rgba(111, 230, 209, 0.25);
  }
  .nav a { border-bottom-color: rgba(159, 245, 228, 0.12); }
  .nav a.is-active { color: var(--accent-hover); }
  .lang-btn { border-color: rgba(159, 245, 228, 0.25); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-top: calc(-1 * var(--header-h));
    min-height: 100vh;    /* respaldo */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h) + 24px) 0 40px;
    background: radial-gradient(110% 80% at 50% 105%, #0d2623 0%, #08130f 48%, #060b0b 100%);
  }
  .hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 28px;
  }
  .hero h1 {
    font-size: clamp(1.7rem, 7.6vw, 2.4rem);
    max-width: 14em;
    margin-bottom: 16px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
  }
  .hero-sub {
    font-size: 1rem;
    margin-bottom: 30px;
    color: rgba(245, 245, 243, 0.88);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7);
  }

  /* Emblema: un cerebro dentro del óvalo, encima del título */
  .hero-art-m {
    display: block;
    position: relative;
    z-index: 1;
    width: min(300px, 78vw);
    margin: 0 auto clamp(18px, 4svh, 36px);
    pointer-events: none;
  }
  .hero-art-m svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .hero-art-m .hm-pulse {
    position: absolute;
    inset: 0;
  }
  .hm-run {
    stroke: #e6fff9;
    stroke-width: 2.2;
    stroke-dasharray: 36 264;
    animation: hm-run 5s linear infinite;
  }
  .hm-run-halo { stroke: #6fe6d1; stroke-width: 8; stroke-opacity: 0.28; }
  .hm-run-b { animation-delay: -2.5s; }
  @keyframes hm-run {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -300; }
  }

  /* Teléfono horizontal: no hay alto para el emblema, queda solo el texto */
  @media (orientation: landscape) and (max-height: 520px) {
    .hero-art-m { display: none; }
    .hero { min-height: 0; padding: calc(var(--header-h) + 24px) 0 48px; }
    .hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); max-width: 18em; }
  }

  /* ---------- Botones de cristal ---------- */
  :is(.hero .btn-primary, .contact-actions .btn) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    color: #eafffa;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
  }
  .hero .btn-primary {
    padding: 14px 26px 14px 30px;
  }
  /* Flecha del botón del hero */
  .hero .btn-primary::after {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eafffa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Destello que cruza el botón */
  :is(.hero .btn-primary, .contact-actions .btn)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
    transform: translateX(-130%);
    animation: hm-btn-sweep 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes hm-btn-sweep {
    0%, 62%  { transform: translateX(-130%); }
    82%      { transform: translateX(130%); }
    100%     { transform: translateX(130%); }
  }
  /* Tinte verde */
  :is(.hero .btn-primary, .contact-actions .btn-primary) {
    background: linear-gradient(135deg, rgba(111, 230, 209, 0.30) 0%, rgba(63, 174, 158, 0.10) 55%, rgba(111, 230, 209, 0.18) 100%);
    border: 1px solid rgba(159, 245, 228, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      inset 0 -12px 22px rgba(111, 230, 209, 0.10),
      0 10px 30px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(111, 230, 209, 0.16);
  }
  :is(.hero .btn-primary, .contact-actions .btn-primary):active { transform: scale(0.98); }
  /* Cristal neutro */
  .contact-actions .btn-outline {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -12px 22px rgba(255, 255, 255, 0.04),
      0 10px 30px rgba(0, 0, 0, 0.35);
  }
  .contact-actions .btn-outline:active { transform: scale(0.98); }

  /* ---------- Secciones ---------- */
  .section {
    padding: 72px 0;
    border-top-color: rgba(111, 230, 209, 0.14);
    background: radial-gradient(120% 45% at 50% 0%, rgba(63, 174, 158, 0.08), rgba(63, 174, 158, 0) 70%);
  }
  .section-title { margin-bottom: 32px; }

  /* Tarjetas de cristal */
  :is(.project-card, .service-card, .stack, .about-card) {
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.07) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -12px 22px rgba(111, 230, 209, 0.05),
      0 12px 32px rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
  }
  .project-body p,
  .service-card p,
  .about-text { color: rgba(245, 245, 243, 0.72); }
  .project-body > .btn {
    border-radius: 999px;
    color: #eafffa;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.24);
  }

  /* ---------- Contacto ---------- */
  .contact { overflow: hidden; }
  .contact-actions {
    position: relative;
    isolation: isolate;
    align-items: center;
    gap: 14px;
  }
  .contact-actions::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    height: 240px;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(closest-side at 32% 50%, rgba(63, 174, 158, 0.38), rgba(63, 174, 158, 0)),
      radial-gradient(closest-side at 70% 50%, rgba(192, 122, 79, 0.2), rgba(192, 122, 79, 0));
  }
  .contact-actions .btn { width: min(100%, 280px); padding: 14px 28px; }
  .contact-actions .btn svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (prefers-reduced-motion: reduce) {
    .hm-run { display: none; }
    :is(.hero .btn-primary, .contact-actions .btn)::before { animation: none; display: none; }
    .site-header { transition: none; }
  }
}


/* ================= Botón de idioma: solo el icono =================
   Icono de traducción suelto, sin círculo ni fondo (mismo lenguaje que los links del navbar). Brillo verde suave
   al pasar el mouse y mientras el menú está abierto. Va al final para ganar a las reglas anteriores. */
.site-header .lang-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: rgba(245, 245, 243, 0.82);
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.65));   /* legibilidad sobre los anillos */
  cursor: pointer;
  transition: color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.site-header .lang-btn:hover,
.site-header .lang-btn[aria-expanded="true"] {
  color: #ffffff;
  filter: drop-shadow(0 0 8px rgba(111, 230, 209, 0.75)) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.6));
}
.site-header .lang-btn:active { transform: scale(0.92); }
.site-header .lang-btn:focus-visible { outline: 2px solid #9ff5e4; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .site-header .lang-btn { transition: none; }
}


/* ================= Navbar de escritorio: links sueltos, sin barra ni cápsulas =================
   Antes era una franja transparente sobre el borde oscuro del degradado (se veía negra). Ahora no hay barra, borde ni
   fondo: los links son texto con sombra suave sobre la escena, el destello se posa justo bajo el link activo y el
   botón de idioma es el único elemento de cristal. Mantiene los 65 px de alto (--header-h), así la escena no se mueve.
   Solo escritorio: en móvil el navbar conserva su estilo. */
@media (min-width: 861px) {
  .site-header,
  .site-header.is-scrolled {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header::after { display: none; }   /* sin riel */

  .nav { gap: 34px; }
  .nav a {
    color: rgba(245, 245, 243, 0.78);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);   /* legibilidad sobre las líneas de los anillos */
    transition: color 0.2s ease, text-shadow 0.2s ease;
  }
  .nav a:hover {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(111, 230, 209, 0.45), 0 1px 10px rgba(0, 0, 0, 0.65);
  }
  .nav a.is-active { color: #ffffff; }

  /* El destello queda pegado bajo el texto del link activo (antes iba en el borde inferior de la barra).
     Línea fina que se desvanece en las puntas. El brillo usa drop-shadow (sigue la forma pintada) en vez de box-shadow:
     con box-shadow el resplandor salía como una caja rectangular con las puntas grises. */
  .nav-spark {
    bottom: 17px;
    height: 2px;
    border-radius: 2px;
    box-shadow: none;
    background: linear-gradient(90deg, rgba(230, 255, 249, 0), #e6fff9 28%, #e6fff9 72%, rgba(230, 255, 249, 0));
    filter: drop-shadow(0 0 4px rgba(111, 230, 209, 0.95)) drop-shadow(0 0 10px rgba(111, 230, 209, 0.45));
  }
}


/* ================= Selector de idioma: botón de icono + píldora de cristal =================
   El botón (icono de traducción) abre debajo una píldora con ES | EN. El idioma activo lo marca una "perilla" de
   cristal que se desliza al otro idioma (data-active en #langMenu). */
.lang { position: relative; display: flex; }
.site-header .lang-btn svg { width: 18px; height: 18px; display: block; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30, 84, 75, 0.72), rgba(10, 28, 26, 0.84));
  border: 1px solid rgba(159, 245, 228, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 34px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
}
.lang-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.lang-opt {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(245, 245, 243, 0.62);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lang-opt:hover,
.lang-opt[aria-pressed="true"] { color: #ffffff; }
.lang-opt:focus-visible { outline: 2px solid #9ff5e4; outline-offset: 1px; }

.lang-thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 42px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(111, 230, 209, 0.5), rgba(63, 174, 158, 0.22));
  border: 1px solid rgba(190, 255, 241, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0 14px rgba(111, 230, 209, 0.38);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-menu[data-active="en"] .lang-thumb { transform: translateX(42px); }

@media (prefers-reduced-motion: reduce) {
  .lang-menu, .lang-menu.is-open, .lang-thumb, .lang-opt { transition: none; }
}


/* ================= Botón de música =================
   Reutiliza el estilo del botón de idioma (clase lang-btn). Apagado muestra la bocina tachada; encendido, la bocina con
   ondas y un brillo verde fijo. */
.music { position: relative; display: flex; }
.music-btn .music-on { display: none; }
.music-btn[aria-pressed="true"]:not(.is-silent) .music-on { display: inline; }
.music-btn[aria-pressed="true"]:not(.is-silent) .music-off { display: none; }
.site-header .music-btn[aria-pressed="true"] {
  color: #9ff5e4;
  filter: drop-shadow(0 0 8px rgba(111, 230, 209, 0.6)) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.6));
}

/* Píldora de volumen: aparece bajo el botón al pasar el mouse / enfocar con teclado, o con .is-open (lo pone el script en
   pantallas táctiles). El tramo lleno de la barra sigue a --v (porcentaje, lo actualiza el script). */
.music-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  width: 150px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30, 84, 75, 0.72), rgba(10, 28, 26, 0.84));
  border: 1px solid rgba(159, 245, 228, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 34px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px) scale(0.97);
  transform-origin: top center;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
}
/* Puente invisible entre el botón y la píldora para que el hover no se corte en el hueco */
.music-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.music-menu.is-open,
.music:has(:focus-visible) .music-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .music:hover .music-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.music-vol {
  --v: 45%;
  width: 100%;
  height: 20px;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.music-vol::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #9ff5e4 var(--v), rgba(245, 245, 243, 0.22) var(--v));
}
.music-vol::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(245, 245, 243, 0.22); }
.music-vol::-moz-range-progress { height: 4px; border-radius: 4px; background: #9ff5e4; }
.music-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #e6fff9;
  box-shadow: 0 0 10px rgba(111, 230, 209, 0.8);
}
.music-vol::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #e6fff9;
  box-shadow: 0 0 10px rgba(111, 230, 209, 0.8);
}
.music-vol:focus-visible { outline: 2px solid #9ff5e4; outline-offset: 4px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .music-menu, .music-menu.is-open, .music:hover .music-menu { transition: none; }
}


/* ================= Proyectos como diagrama (escritorio >= 1101px) =================
   Sin cajas de cristal: del título "Algunos Proyectos" sale un tronco que se abre en una línea horizontal y de ahí
   bajan ramas hasta cada proyecto, con un punto luminoso al final y el texto centrado debajo. Las líneas se dibujan
   al entrar a la escena. En ventanas de 861 a 1100px (2 columnas) se conservan las tarjetas de cristal.
   Geometría: --link-h es la distancia entre el título y la fila de proyectos; la línea horizontal queda a la mitad.
   Las columnas están separadas por 18px (gap del grid), por eso las líneas se extienden 9px a cada lado. */
@media (min-width: 1101px) {
  .scenes-on #proyectos .project-card {
    position: relative;
    padding: 16px 6px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: center;
  }
  /* Sin el "levantar 3px" del hover de las tarjetas: movería el punto y la rama y rompería el diagrama */
  .scenes-on #proyectos .project-card:hover { border: 0; box-shadow: none; transform: none; }
  .scenes-on #proyectos .project-card .project-body { position: relative; align-items: center; }
  .scenes-on #proyectos .project-card h3 { font-size: 1.28rem; }
  .scenes-on #proyectos .project-card .project-body > .btn { align-self: center; }
}

/* Conectores: solo si hay alto para el título (con menos de 621px de alto el título se oculta y no habría de dónde nacer) */
@media (min-width: 1101px) and (min-height: 621px) {
  .scenes-on #proyectos {
    --link-h: 46px;
    --dg: rgba(111, 230, 209, 0.62);
    --dg-hi: #bffbee;
  }
  /* El título ya no se ve (el navbar indica la sección): queda en el HTML para lectores de pantalla, como una fila de
     alto 0 que sirve de ancla al tronco del diagrama. Entre esa fila y los proyectos hay --trunk + --link-h. */
  .scenes-on #proyectos {
    --trunk: 26px;
  }
  .scenes-on #proyectos .section-title {
    position: relative;
    height: 0;
    margin: 0 0 calc(var(--trunk) + var(--link-h) - 12px);
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: visible;
  }
  /* Sin título arriba ni espaciador abajo, el árbol queda centrado entre los dos óvalos */
  .scenes-on #proyectos .container::after { height: 0; }

  /* Tronco: del punto raíz a la línea horizontal */
  .scenes-on #proyectos .section-title::after {
    content: "";
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    width: 2px;
    height: calc(var(--trunk) + var(--link-h) / 2 + 2px);
    background: var(--dg);
    filter: drop-shadow(0 0 4px rgba(111, 230, 209, 0.55));
    transform-origin: top;
    pointer-events: none;
  }
  /* Punto raíz, de donde nace todo el diagrama */
  .scenes-on #proyectos .section-title::before {
    content: "";
    position: absolute;
    left: calc(50% - 5px);
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ff5e4;
    box-shadow: 0 0 12px rgba(111, 230, 209, 0.9);
    pointer-events: none;
  }

  /* Línea horizontal: cada proyecto aporta su tramo (hasta la mitad del hueco vecino) */
  .scenes-on #proyectos .project-card::after {
    content: "";
    position: absolute;
    top: calc(var(--link-h) / -2);
    left: -9px;
    right: -9px;
    height: calc(var(--link-h) / 2);
    border-top: 2px solid var(--dg);
    filter: drop-shadow(0 0 4px rgba(111, 230, 209, 0.55));
    pointer-events: none;
    transition: border-color 0.25s ease;
  }
  /* Los dos de los extremos doblan hacia abajo con una esquina redondeada (la rama es el borde del mismo tramo) */
  .scenes-on #proyectos .project-card:nth-of-type(1)::after {
    left: calc(50% - 1px);
    border-left: 2px solid var(--dg);
    border-top-left-radius: 14px;
  }
  .scenes-on #proyectos .project-card:nth-of-type(4)::after {
    right: calc(50% - 1px);
    border-right: 2px solid var(--dg);
    border-top-right-radius: 14px;
  }
  /* Los dos del centro bajan con una rama recta */
  .scenes-on #proyectos .project-card:nth-of-type(2)::before,
  .scenes-on #proyectos .project-card:nth-of-type(3)::before {
    content: "";
    position: absolute;
    top: calc(var(--link-h) / -2);
    left: calc(50% - 1px);
    width: 2px;
    height: calc(var(--link-h) / 2);
    background: var(--dg);
    filter: drop-shadow(0 0 4px rgba(111, 230, 209, 0.55));
    transform-origin: top;
    pointer-events: none;
    transition: background-color 0.25s ease;
  }
  /* Punto luminoso donde termina cada rama, justo sobre el texto del proyecto */
  .scenes-on #proyectos .project-card .project-body::before {
    content: "";
    position: absolute;
    top: -20px;
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ff5e4;
    box-shadow: 0 0 10px rgba(111, 230, 209, 0.85);
    pointer-events: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }
  /* Al pasar el mouse por un proyecto se enciende su rama */
  .scenes-on #proyectos .project-card:hover::after { border-color: var(--dg-hi); }
  .scenes-on #proyectos .project-card:hover::before { background: var(--dg-hi); }
  .scenes-on #proyectos .project-card:hover .project-body::before {
    background: #ffffff;
    box-shadow: 0 0 16px rgba(190, 255, 241, 1);
  }

  /* Entrada: aparece el título, se dibuja el tronco, la línea horizontal desde el centro hacia los lados, las ramas
     bajan, se enciende cada punto y aparece el texto. Solo opacidad (nada se desliza) para que las líneas y el texto
     no se desalineen mientras llegan. */
  .scenes-on #proyectos.is-current .section-title::before { animation: dg-dot 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }
  .scenes-on #proyectos.is-current .section-title::after { animation: dg-down 0.3s ease-out 0.2s backwards; }

  .scenes-on #proyectos.is-current .project-card { animation: dg-fade 0.5s ease backwards; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(2),
  .scenes-on #proyectos.is-current .project-card:nth-of-type(3) { animation-delay: 0.8s; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(1),
  .scenes-on #proyectos.is-current .project-card:nth-of-type(4) { animation-delay: 1s; }

  .scenes-on #proyectos.is-current .project-card:nth-of-type(2)::after { animation: dg-bus-l 0.25s ease-out 0.45s backwards; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(3)::after { animation: dg-bus-r 0.25s ease-out 0.45s backwards; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(1)::after { animation: dg-elbow-l 0.45s ease-out 0.68s backwards; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(4)::after { animation: dg-elbow-r 0.45s ease-out 0.68s backwards; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(2)::before,
  .scenes-on #proyectos.is-current .project-card:nth-of-type(3)::before { animation: dg-down 0.2s ease-out 0.7s backwards; }
  .scenes-on #proyectos.is-current .project-card .project-body::before { animation: dg-dot 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(2) .project-body::before,
  .scenes-on #proyectos.is-current .project-card:nth-of-type(3) .project-body::before { animation-delay: 0.88s; }
  .scenes-on #proyectos.is-current .project-card:nth-of-type(1) .project-body::before,
  .scenes-on #proyectos.is-current .project-card:nth-of-type(4) .project-body::before { animation-delay: 1.1s; }

  @keyframes dg-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dg-down { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes dg-dot  { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
  /* Tramos horizontales: se revelan desde el centro del diagrama hacia fuera (clip-path; el -8px deja ver el brillo) */
  @keyframes dg-bus-l {
    from { clip-path: inset(-8px 0 calc(100% - 5px) 100%); }
    to   { clip-path: inset(-8px 0 calc(100% - 5px) -8px); }
  }
  @keyframes dg-bus-r {
    from { clip-path: inset(-8px 100% calc(100% - 5px) 0); }
    to   { clip-path: inset(-8px -8px calc(100% - 5px) 0); }
  }
  /* Extremos: primero corre la línea horizontal y al final baja la rama */
  @keyframes dg-elbow-l {
    0%   { clip-path: inset(-8px 0 calc(100% - 5px) 100%); }
    55%  { clip-path: inset(-8px 0 calc(100% - 5px) -8px); }
    100% { clip-path: inset(-8px); }
  }
  @keyframes dg-elbow-r {
    0%   { clip-path: inset(-8px 100% calc(100% - 5px) 0); }
    55%  { clip-path: inset(-8px -8px calc(100% - 5px) 0); }
    100% { clip-path: inset(-8px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .scenes-on #proyectos.is-current :is(.section-title::before, .section-title::after, .project-card, .project-card::before, .project-card::after, .project-body::before) {
      animation: none;
    }
  }
}

/* Pantallas bajas: el hueco entre el título y los proyectos se acorta */
@media (min-width: 1101px) and (min-height: 621px) and (max-height: 700px) {
  .scenes-on #proyectos { --link-h: 34px; }
}


/* ================= Títulos de escena ocultos (escritorio) =================
   "Algunos Proyectos", "Sobre mí" y "Servicios" ya están en el navbar, así que en pantalla se quitan. Siguen en el
   HTML (solo para lectores de pantalla). Contacto conserva su título. En proyectos con diagrama (>= 1101px y >= 621px
   de alto) el título es el ancla del tronco y se resuelve arriba; aquí van los demás casos. */
@media (min-width: 861px) {
  .scenes-on :is(#sobre-mi, #servicios) .section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .scenes-on #proyectos .section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .scenes-on #proyectos .container::after { height: 0; }
}


/* ================= Sobre mí: guitarras de líneas (solo escritorio) =================
   Dos guitarras dibujadas con líneas, en el mismo neón blanco con halo verde del cerebro, una a cada lado del texto
   (la izquierda es la misma en espejo). Cada trazo es un path con pathLength="1": con stroke-dasharray/offset se
   "dibuja" (offset 1 -> 0), se queda completa y se "desdibuja" (0 -> -1). Todos usan la misma animación y se escalonan
   con --i (en el HTML), así el ciclo se repite desfasado y sin saltos. Corre mientras la escena es la actual.
   El texto queda centrado en la escena (columna del medio); las guitarras usan las columnas laterales, que miden lo
   mismo, así que el conjunto es simétrico. En móvil no se muestran (el bloque se queda como estaba). */
.about-guitar { display: none; }

@media (min-width: 861px) {
  .scenes-on #sobre-mi .container { max-width: 1000px; }
  .scenes-on #sobre-mi .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px) minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    margin-top: 0;
    text-align: center;
  }
  .scenes-on #sobre-mi .about-card,
  .scenes-on #sobre-mi .about-card:hover {
    grid-column: 2;
    max-width: 540px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .scenes-on #sobre-mi .about-text {
    max-width: none;
    margin: 0 0 16px;
    text-align: center;
    font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  }
  .scenes-on #sobre-mi .about-text:last-child { margin-bottom: 0; }

  .about-guitar {
    display: block;
    grid-column: 3;
    justify-self: start;
    overflow: visible;
    aspect-ratio: 360 / 520;
    /* Alto: hasta 280px y hasta 33% del alto de la ventana, pero nunca más de lo que cabe entre el texto y el borde
       de la pantalla (50vw - media columna de texto - márgenes); 1.444 = alto/ancho del dibujo. Así crece sobre la
       columna lateral (158px) sin salirse de la pantalla en ventanas angostas. */
    height: clamp(150px, min(33vh, calc((50vw - 310px) * 1.444)), 280px);
    width: auto;
    margin-left: clamp(10px, 2.4vw, 40px);
    filter: drop-shadow(0 0 5px rgba(111, 230, 209, 0.55)) drop-shadow(0 0 16px rgba(111, 230, 209, 0.25));
  }
  /* Izquierda: la misma guitarra en espejo, pegada al texto por el otro lado */
  .about-guitar--left {
    grid-column: 1;
    justify-self: end;
    margin-left: 0;
    margin-right: clamp(10px, 2.4vw, 40px);
    transform: scaleX(-1);
  }
  .about-guitar path:not(.g-vib) {
    stroke-dasharray: 1 1.5;
    stroke-dashoffset: 1;   /* sin animación: invisible, hasta que la escena sea la actual */
    /* Extremos planos: con extremos redondos, un trazo que apenas empieza (o está por borrarse) se ve como un punto
       suelto, y con 20 trazos a la vez se veía feo. */
    stroke-linecap: butt;
  }
  .about-guitar .g-main { stroke: #e6fff9; stroke-width: 2.4; }
  .about-guitar .g-fine { stroke: #bffbee; stroke-width: 1.8; }
  .about-guitar .g-str  { stroke: #9ff5e4; stroke-width: 1; opacity: 0.7; }

  .scenes-on #sobre-mi.is-current .about-guitar path:not(.g-vib) {
    animation: guitar-loop 14s ease-in-out infinite;
    animation-delay: calc(0.6s + var(--i) * 0.13s);
  }

  /* Cuerdas vibrando: con la guitarra completa, las seis cuerdas vibran en rasgueo (una tras otra, 0,07 s entre cada
     una) y la vibración se apaga antes de que empiece el borrado. .g-vib-env regula la amplitud y la visibilidad
     (invisible el resto del ciclo); .g-vib oscila de lado a lado a ~7-9 Hz, con una frecuencia distinta por cuerda. */
  .about-guitar .g-vib {
    fill: none;
    stroke: #e6fff9;
    stroke-width: 1.3;
    transform-box: view-box;
    transform-origin: 0 0;
  }
  .about-guitar .g-vib-env {
    opacity: 0;
    transform-box: view-box;
    transform-origin: 0 0;
  }
  .scenes-on #sobre-mi.is-current .about-guitar .g-vib-env {
    animation: guitar-pluck 14s linear infinite;
    animation-delay: calc(0.6s + var(--k) * 0.07s);
  }
  .scenes-on #sobre-mi.is-current .about-guitar .g-vib {
    animation: guitar-shake calc(0.06s + var(--k) * 0.004s) ease-in-out infinite alternate;
  }
  @keyframes guitar-shake {
    from { transform: scaleX(-1); }
    to   { transform: scaleX(1); }
  }
  @keyframes guitar-pluck {
    0%, 47%  { opacity: 0; transform: scaleX(0); }
    47.6%    { opacity: 1; transform: scaleX(1); }     /* se puntea (con la guitarra ya completa) */
    55%      { opacity: 1; transform: scaleX(0.55); }
    63%      { opacity: 1; transform: scaleX(0.2); }
    67.5%    { opacity: 1; transform: scaleX(0.04); }  /* se apaga */
    68%, 100% { opacity: 0; transform: scaleX(0); }
  }
  /* Curvas: el dibujado arranca con empuje (ease-out) para que un trazo recién nacido ya tenga largo en vez de quedarse
     en una rayita; el borrado acelera (ease-in) para que no queden restos lentos al final de cada trazo. */
  @keyframes guitar-loop {
    0%   { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    25%  { stroke-dashoffset: 0; }    /* dibujada */
    70%  { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }    /* completa un rato */
    88%  { stroke-dashoffset: -1; }   /* se borra en el mismo sentido */
    100% { stroke-dashoffset: -1; }   /* reposo antes de empezar de nuevo */
  }
  @media (prefers-reduced-motion: reduce) {
    .scenes-on #sobre-mi.is-current .about-guitar path:not(.g-vib) { animation: none; stroke-dashoffset: 0; }
    .scenes-on #sobre-mi.is-current .about-guitar :is(.g-vib-env, .g-vib) { animation: none; }
  }
}


/* ================= Servicios: cards sin desenfoque de fondo (escritorio) =================
   La card del medio mostraba un parpadeo: un rectángulo de ~8x5 px se encendía un instante dentro de su esquina
   superior izquierda. Es un artefacto del desenfoque de cristal (backdrop-filter) de la tarjeta gráfica: la card cruza
   una costura entre "baldosas" de dibujo (x = 768) y, cuando cambia lo que hay detrás (el brillo del cerebro), el
   desenfoque muestra un parche sin actualizar. Detrás de estas cards solo hay un fondo difuso, así que sin el
   desenfoque se ven igual (diferencia medida: ~0.5 de 255 en brillo) y el parpadeo no puede ocurrir. */
@media (min-width: 861px) {
  .scenes-on #servicios .service-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* ================= Contacto: sin parpadeos al llegar a la escena (escritorio) =================
   Al cambiar de escena (rueda, teclado, navbar) la escena se desliza ~0.8 s. Si el puntero está en el centro, los
   botones de WhatsApp y Email pasan por debajo y su hover (brillo, destello, "levantarse") se prendía y apagaba al
   cruzar. scenes.js pone .is-moving en #top durante el deslizamiento y aquí se desactivan los eventos del puntero.
   Además se quita el desenfoque de cristal de esos botones (backdrop-filter): detrás solo hay un resplandor difuso, se
   ven igual y se evita el mismo artefacto de tarjeta gráfica que tenían las cards de Servicios. */
@media (min-width: 861px) {
  .scenes-on #top.is-moving .scene { pointer-events: none; }
  .scenes-on #contacto .contact-actions .btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* ================= Servicios: robot entre dos cards (solo escritorio) =================
   La card del medio se quita y en su lugar hay un robot de líneas con los brazos abiertos y las manos sobre los bordes
   de las cards de los lados (los dedos pasan unos píxeles sobre el borde, como agarrándolas). El SVG mide lo mismo que
   la columna del medio más los dos huecos del grid, así las manos llegan exactamente a los bordes de las cards; las
   cards se centran en vertical y las manos están a media altura del dibujo (y = 170 de 340), o sea a media altura de
   las cards. En móvil el robot no se muestra y las tres cards quedan como estaban. */
.robot { display: none; }

@media (min-width: 861px) {
  .scenes-on #servicios .services-grid {
    --svc-gap: 20px;
    gap: var(--svc-gap);
    align-items: center;
  }
  .scenes-on #servicios .service-card:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .scenes-on #servicios .service-card:nth-of-type(2) { display: none; }   /* "Sitios para negocios": sustituida por el robot */
  .scenes-on #servicios .service-card:nth-of-type(3) { grid-column: 3; grid-row: 1; }

  .robot {
    display: block;
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 2;                       /* por encima de las cards, para que los dedos se vean sobre el borde */
    width: calc(100% + 2 * var(--svc-gap));
    margin: 0 calc(-1 * var(--svc-gap));
    height: auto;
    aspect-ratio: 480 / 340;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(111, 230, 209, 0.5)) drop-shadow(0 0 16px rgba(111, 230, 209, 0.22));
  }
  .robot path {
    stroke-dasharray: 1 1.5;
    stroke-dashoffset: 1;             /* invisible hasta que la escena sea la actual */
    stroke-linecap: butt;             /* extremos planos: sin puntos sueltos al empezar a dibujarse */
  }
  .robot .g-main { stroke: #e6fff9; stroke-width: 2.4; }
  .robot .g-fine { stroke: #bffbee; stroke-width: 1.8; }

  /* Dibujado: una vez, trazo a trazo (los dos brazos a la vez), y se queda dibujado */
  .scenes-on #servicios.is-current .robot path {
    animation: robot-draw 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: calc(0.5s + var(--i) * 0.09s);
  }
  @keyframes robot-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
  }

  /* Vida: parpadeo, núcleo que late y propulsores que titilan (empiezan cuando termina de dibujarse) */
  .robot .rb-eyes, .robot .rb-core, .robot .rb-fire { transform-box: fill-box; transform-origin: center; }
  .scenes-on #servicios.is-current .robot .rb-eyes { animation: robot-blink 5.5s ease-in-out 3.4s infinite; }
  .scenes-on #servicios.is-current .robot .rb-core { animation: robot-core 2.4s ease-in-out 3.2s infinite; }
  .scenes-on #servicios.is-current .robot .rb-fire { animation: robot-fire 0.9s ease-in-out 3.2s infinite alternate; }
  @keyframes robot-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(0.08); }
  }
  @keyframes robot-core {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.8); }
  }
  @keyframes robot-fire {
    from { opacity: 1; transform: scaleY(1); }
    to   { opacity: 0.4; transform: scaleY(0.6); }
  }
  .robot .rb-fire { transform-origin: top; }

  @media (prefers-reduced-motion: reduce) {
    .scenes-on #servicios.is-current .robot path { animation: none; stroke-dashoffset: 0; }
    .scenes-on #servicios.is-current .robot :is(.rb-eyes, .rb-core, .rb-fire) { animation: none; }
  }
}