/* Portada: escenario oscuro con focos de color, escena 3D (WebGL) y tarjetas de vidrio.
   Solo se animan transform y opacity; respeta reducir movimiento, transparencia y más contraste. */

/* Héroe: casi negro con focos radiales de color de marca detrás del objeto 3D. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-y;
  background:
    radial-gradient(42% 52% at 74% 46%, rgba(139, 203, 177, .42), transparent 70%),
    radial-gradient(26% 34% at 88% 74%, rgba(169, 217, 196, .24), transparent 70%),
    radial-gradient(30% 38% at 58% 18%, rgba(139, 203, 177, .16), transparent 70%),
    radial-gradient(38% 44% at 8% 4%, rgba(139, 203, 177, .10), transparent 70%),
    #DDEFE6;
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: 0; background: linear-gradient(transparent, rgba(221, 239, 230, .6)); pointer-events: none; }
.hero .shell { position: relative; z-index: 1; }
.hero-stage {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 38%;
  pointer-events: none;
  --stage-mask: radial-gradient(75% 70% at 55% 50%, #000 58%, transparent 100%);
}
/* Por defecto solo el fondo oscuro: el webp del still se parece al 3D congelado y
   provocaba el flash static→animate. El fotograma solo aparece en data-state=fallback
   (sin WebGL / reducir movimiento / error) o vía <noscript>. */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #DDEFE6;
  transition: none;
}
.hero-stage[data-state="fallback"]::before {
  background: #DDEFE6 url("/assets/hero-3d-fallback.webp") center / cover no-repeat;
}
/* Por si acaso: loading/live nunca muestran still. */
.hero-stage[data-state="loading"]::before,
.hero-stage[data-state="live"]::before,
.hero-stage.is-live::before { opacity: 0; visibility: hidden; }
/* La máscara va en cada capa y no en el contenedor: así el fundido y la deriva se componen sin
   volver a pintar una superficie enmascarada en cada cuadro. */
.hero-stage::before, .hero-canvas { -webkit-mask-image: var(--stage-mask); mask-image: var(--stage-mask); }
/* Canvas invisible hasta is-live; opacity 0 (no .01) para que no se filtre un cuadro congelado. */
.hero-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .25s cubic-bezier(.25, .6, .3, 1), visibility 0s linear .25s; }
.hero-stage.is-live .hero-canvas { opacity: 1; visibility: visible; transition: opacity .25s cubic-bezier(.25, .6, .3, 1), visibility 0s; }
.hero h1 { max-width: 100%; font-size: var(--heading-brand-size); text-shadow: 0 2px 30px rgba(139, 203, 177, .45); }

@media (max-width: 980px) {
  .hero-stage { inset: 0 0 0 22%; opacity: .9; }
}
@media (max-width: 680px) {
  .hero {
    min-height: 100svh;
    background:
      radial-gradient(70% 34% at 50% 26%, rgba(139, 203, 177, .45), transparent 72%),
      radial-gradient(40% 22% at 78% 40%, rgba(169, 217, 196, .22), transparent 70%),
      radial-gradient(60% 30% at 10% 4%, rgba(139, 203, 177, .10), transparent 70%),
      #DDEFE6;
  }
  .hero-stage {
    inset: 3.5rem 0 auto;
    height: 52svh;
    opacity: 1;
    --stage-mask: linear-gradient(#000 62%, transparent);
  }
}

/* La nav es fija (72px + borde): el contenido del héroe siempre empieza debajo de ella,
   aunque la ventana sea baja y el héroe crezca más que min-height. */
.hero { --nav-h: 73px; }
.hero .shell { padding-top: calc(var(--nav-h) + clamp(1.25rem, 4vh, 2.5rem)); }
/* Nav de escritorio: una sola fila sin cortes; en anchos intermedios pasa a dos filas. */
@media (min-width: 681px) {
  .nav-links { flex-wrap: nowrap; white-space: nowrap; }
  .nav-links > * { flex-shrink: 0; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .nav-links { gap: .75rem; }
}
@media (min-width: 681px) and (max-width: 900px) {
  .nav-inner { flex-wrap: wrap; row-gap: 0; padding-bottom: .5rem; }
  .nav-links { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-start; gap: .25rem .75rem; }
  .hero { --nav-h: 8rem; }
}
/* Ventanas bajas (laptops): título algo menor para que quepan título, texto y botones. */
@media (min-width: 681px) and (max-height: 760px) {
  .hero h1 { font-size: var(--heading-brand-size); }
  .hero .profile-lockup { margin-bottom: 1.25rem; }
  .hero .profile-lockup img { width: 88px; height: 88px; }
  .hero .hero-copy { margin-top: 1rem; font-size: clamp(1.02rem, 1.2vw + .3rem, 1.25rem); }
  .hero .hero-actions { margin-top: 1.5rem; }
  .hero .shell { padding-bottom: 2.5rem; }
}

/* Servicios (#enfoque): continúa el escenario oscuro con tarjetas de vidrio. */
#enfoque {
  --green: #356B58;
  --cyan: #356B58;
  --amber: #356B58;
  --ink: #1F1E1C;
  --ink-2: #393630;
  --muted: #40574C;
  --line: rgba(53, 107, 88, .1);
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(45% 55% at 12% 0%, rgba(139, 203, 177, .24), transparent 70%),
    radial-gradient(35% 50% at 92% 96%, rgba(169, 217, 196, .14), transparent 70%),
    radial-gradient(30% 40% at 60% 55%, rgba(139, 203, 177, .08), transparent 70%),
    #DDEFE6;
}
#enfoque .eyebrow { color: #356B58; }
#enfoque .capability {
  border: 1px solid rgba(53, 107, 88, .1);
  background: linear-gradient(180deg, rgba(255, 253, 250, .65), rgba(255, 253, 250, .35));
  box-shadow: inset 0 1px 0 rgba(244, 241, 236, .08), 0 24px 60px rgba(53, 107, 88, .10);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
#enfoque .capability svg { filter: drop-shadow(0 0 14px currentColor); }
#enfoque .capability:nth-child(1) svg { color: #356B58; }
#enfoque .capability::after { box-shadow: 0 30px 70px rgba(53, 107, 88, .16); }

/* Herramientas: vidrio claro u oscuro según el tema, sobre focos suaves. */
.section:has(> .shell > .tool-grid) {
  background:
    radial-gradient(40% 50% at 85% 10%, rgba(139, 203, 177, .10), transparent 70%),
    radial-gradient(35% 45% at 10% 90%, rgba(139, 203, 177, .10), transparent 70%),
    var(--paper);
}
.tool-card {
  border: 1px solid rgba(31, 30, 28, .08);
  background: linear-gradient(180deg, rgba(244, 241, 236, .78), rgba(244, 241, 236, .55));
  box-shadow: inset 0 1px 0 rgba(244, 241, 236, .9), 0 14px 40px rgba(31, 30, 28, .06);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
html[data-theme="dark"] .tool-card {
  border-color: rgba(244, 241, 236, .1);
  background: linear-gradient(180deg, rgba(244, 241, 236, .07), rgba(244, 241, 236, .02));
  box-shadow: inset 0 1px 0 rgba(244, 241, 236, .07), 0 20px 50px rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .section:has(> .shell > .tool-grid) {
  background:
    radial-gradient(40% 50% at 85% 10%, rgba(139, 203, 177, .18), transparent 70%),
    radial-gradient(35% 45% at 10% 90%, rgba(169, 217, 196, .10), transparent 70%),
    var(--paper);
}

/* Inclinación 3D (tilt.js) y brillo que sigue al cursor. */
[data-tilt].is-tilting { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
[data-tilt]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(22rem circle at var(--glare-x, 50%) var(--glare-y, 0%), rgba(244, 241, 236, .14), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
[data-tilt].is-tilting::before { opacity: 1; }
.tool-card[data-tilt]::before { background: radial-gradient(22rem circle at var(--glare-x, 50%) var(--glare-y, 0%), rgba(139, 203, 177, .10), transparent 60%); }
html[data-theme="dark"] .tool-card[data-tilt]::before { background: radial-gradient(22rem circle at var(--glare-x, 50%) var(--glare-y, 0%), rgba(244, 241, 236, .10), transparent 60%); }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  [data-tilt].is-tilting { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #enfoque .capability { background: #DDEFE6; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tool-card { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .tool-card { background: #23302A; }
}
@media (prefers-contrast: more) {
  #enfoque { --line: rgba(53, 107, 88, .6); --muted: #393630; }
  #enfoque .capability { background: #DDEFE6; border-color: rgba(244, 241, 236, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tool-card { background: var(--white); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .tool-card { background: #23302A; border-color: var(--line); }
  .hero-stage { opacity: .7; }
}

/* Catálogo bento asimétrico (2026): héroe MCP + Lentes de apoyo, luego filas 3 y 4.
   Tablet 2 cols; móvil 1 col. Con filtros activos, celdas uniformes. */
.projects {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6, 1.5rem);
}
@media (max-width: 680px) { .projects { grid-template-columns: 1fr; } }
.project { display: flex; flex-direction: column; min-width: 0; }
.project-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; }
.project-body .chips { margin-bottom: .25rem; }
.project-links { margin-top: auto; padding-top: var(--space-4, 1rem); gap: .75rem; }
.project-links .project-video { margin-top: 0; }
.project-body { padding: var(--space-6, 1.5rem); }

/* Destacados: borde luminoso; layout en columna (media arriba) para bento. */
.projects > .project.project-featured {
  display: flex;
  flex-direction: column;
  grid-column: auto;
  grid-template-columns: none;
  position: relative;
  border-color: rgba(53, 107, 88, .42);
  box-shadow: 0 0 0 1px rgba(53, 107, 88, .12), 0 22px 60px rgba(139, 203, 177, .16);
}
html[data-theme="dark"] .projects > .project.project-featured {
  border-color: rgba(139, 203, 177, .4);
  box-shadow: 0 0 0 1px rgba(139, 203, 177, .16), 0 26px 70px rgba(139, 203, 177, .3);
  background: linear-gradient(180deg, rgba(139, 203, 177, .1), transparent 42%), #23302A;
}
.project-featured .project-media { position: relative; height: 15rem; min-height: 13rem; aspect-ratio: auto; }
.project-featured .project-media img { object-fit: cover; }
/* Diagramas SVG (MCP): contain; nunca cover */
.project-featured .project-media img[src$=".svg"],
.project-media img[src$=".svg"] {
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: calc(100% - 1.4rem);
  max-height: calc(100% - 1.2rem);
  background: transparent;
}
.project-media img.ltv-media { padding: 0; }
.project-featured .project-body h3 { font-size: clamp(1.35rem, 1.15rem + .55vw, 1.75rem); letter-spacing: -0.02em; }
.featured-badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .35rem; min-height: 28px; padding: 0 .7rem;
  border: 1px solid rgba(53, 107, 88, .28); border-radius: 999px;
  color: #1F1E1C; background: rgba(221, 239, 230, .92);
  box-shadow: inset 0 1px 0 rgba(244, 241, 236, .18), 0 6px 20px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.featured-badge svg { width: 14px; height: 14px; fill: #356B58; filter: drop-shadow(0 0 6px rgba(139, 203, 177, .7)); }

/* Escritorio: bento 12 cols — héroe 8 + apoyo 4; fila media ×3; fila compacta ×4 */
@media (min-width: 1200px) {
  .projects { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
  .projects > .project { grid-column: span 4; }
  /* Sin filtros: asimetría intencional */
  .projects:not(:has(> .project[hidden])) > .project.project-featured:nth-child(1) {
    grid-column: span 8;
  }
  .projects:not(:has(> .project[hidden])) > .project.project-featured:nth-child(2) {
    grid-column: span 4;
  }
  .projects:not(:has(> .project[hidden])) > .project.project-featured:nth-child(1) .project-media {
    height: 18.5rem; min-height: 16rem;
  }
  .projects:not(:has(> .project[hidden])) > .project.project-featured:nth-child(2) .project-media {
    height: 18.5rem; min-height: 16rem;
  }
  .projects:not(:has(> .project[hidden])) > .project:nth-child(n+3):nth-child(-n+5) { grid-column: span 4; }
  .projects:not(:has(> .project[hidden])) > .project:nth-child(n+6) { grid-column: span 3; }
  .projects:not(:has(> .project[hidden])) > .project:nth-child(n+6) .project-body { padding: var(--space-5); }
  .projects:not(:has(> .project[hidden])) > .project:nth-child(n+6) .project-body h3 { font-size: 1.05rem; }
  /* Con filtros: celdas uniformes (no aplastar destacados visualmente: conservan borde) */
  .projects:has(> .project[hidden]) > .project { grid-column: span 4; }
  .projects:has(> .project[hidden]) > .project.project-featured .project-media { height: 15rem; }
}

/* Tablet: 2 columnas; destacados a ancho completo en secuencia */
@media (min-width: 681px) and (max-width: 1199px) {
  .projects { gap: var(--space-5); }
  .projects:not(:has(> .project[hidden])) > .project.project-featured {
    grid-column: 1 / -1;
  }
  .projects:not(:has(> .project[hidden])) > .project.project-featured .project-media {
    height: 16rem; min-height: 14rem;
  }
  .projects:not(:has(> .project[hidden])) > .project:last-child:nth-child(odd):not(.project-featured) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-5, 1.25rem)) / 2);
  }
}

@media (prefers-reduced-transparency: reduce) { .featured-badge { background: #DDEFE6; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .featured-badge { background: #DDEFE6; border-color: #356B58; } .projects > .project.project-featured { border-color: currentColor; } }

/* Mención breve de los destacados en el héroe. */
.hero-featured { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: 1.25rem; }
.hero-featured-label { color: #356B58; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-right: .15rem; }
.hero-feature {
  display: inline-flex; align-items: baseline; gap: .45rem; min-height: 36px; padding: .45rem .85rem;
  border: 1px solid rgba(53, 107, 88, .28); border-radius: 999px;
  color: #1F1E1C; background: rgba(255, 253, 250, .45); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(244, 241, 236, .12);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  font-size: .9rem; line-height: 1.2;
  transition: border-color var(--hover-duration, .2s) var(--ease-out), background-color var(--hover-duration, .2s) var(--ease-out);
}
.hero-feature strong { font-weight: 760; }
.hero-feature span { color: #40574C; font-size: .84rem; }
.hero-feature:hover { border-color: rgba(139, 203, 177, .55); background: rgba(139, 203, 177, .1); }
.hero-feature:focus-visible { outline: 2px solid #356B58; outline-offset: 2px; }
@media (min-width: 681px) and (max-height: 760px) { .hero .hero-featured { margin-top: 1rem; } }
@media (max-width: 680px) {
  .hero-featured-label { flex-basis: 100%; }
  .hero-feature { flex-direction: column; align-items: flex-start; gap: .1rem; border-radius: 14px; flex: 1 1 calc(50% - .3rem); min-width: 0; }
}
@media (prefers-reduced-transparency: reduce) { .hero-feature { background: #DDEFE6; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Herramientas: 6 tarjetas (incluida IA y seguridad) en 3×2 en escritorio. */
@media (min-width: 981px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Especialidades: 8 elementos en 4×2 (2 columnas en móvil). */
@media (min-width: 681px) { .badge-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }