/* ============================================================
   Colores y medidas (cambia aquí la paleta de todo el sitio)
   ============================================================ */
:root {
  --fondo: #f7f8fb;
  --fondo-alt: #eef1f7;
  --superficie: #ffffff;
  --superficie-2: #f3f5fa;
  --texto: #0f1729;
  --texto-suave: #5b6478;
  --borde: #e3e7ef;
  --borde-fuerte: #cdd4e1;
  --acento: #4169e1;          /* azul rey */
  --acento-fuerte: #2f52c9;
  --acento-suave: #e9eefc;
  --sobre-acento: #ffffff;    /* texto encima del color de acento */
  --verde: #16a34a;
  --sombra: 0 1px 2px rgb(15 23 41 / .04), 0 8px 24px rgb(15 23 41 / .06);
  --sombra-alta: 0 2px 4px rgb(15 23 41 / .04), 0 24px 48px rgb(15 23 41 / .12);
  --radio: 18px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --titulos: "Manrope", "Inter", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #090d16;
    --fondo-alt: #0e1321;
    --superficie: #111726;
    --superficie-2: #171e30;
    --texto: #e8ecf4;
    --texto-suave: #98a2b8;
    --borde: #1f2840;
    --borde-fuerte: #2d3854;
    --acento: #6f8ff0;
    --acento-fuerte: #8ea8f6;
    --acento-suave: #172149;
    --sobre-acento: #090d16;
    --verde: #4ade80;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .3);
    --sombra-alta: 0 2px 4px rgb(0 0 0 / .3), 0 30px 60px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #090d16;
  --fondo-alt: #0e1321;
  --superficie: #111726;
  --superficie-2: #171e30;
  --texto: #e8ecf4;
  --texto-suave: #98a2b8;
  --borde: #1f2840;
  --borde-fuerte: #2d3854;
  --acento: #6f8ff0;
  --acento-fuerte: #8ea8f6;
  --acento-suave: #172149;
  --sobre-acento: #090d16;
  --verde: #4ade80;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .3);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / .3), 0 30px 60px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.sin-scroll { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--titulos); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
::selection { background: var(--acento); color: var(--sobre-acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

.ico { width: 18px; height: 18px; flex-shrink: 0; }
.contenedor { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Aparición suave (solo si hay JavaScript) */
/* Usa "translate" para no chocar con el "transform" de los efectos al pasar el mouse */
.js .revelar {
  opacity: 0; translate: 0 14px;
  transition: opacity .6s ease, translate .6s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.js .revelar.visible { opacity: 1; translate: none; }

/* ============================================================
   Navegación
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--borde);
  transition: background-color .3s ease, border-color .3s ease;
}
/* Arriba del todo el menú es transparente; main.js pone .con-fondo al bajar */
.js .nav:not(.con-fondo):not(.abierto) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-interior { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; }
.logo-marca {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 60%, #7c3aed));
  color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .02em; overflow: hidden; flex-shrink: 0;
}
.logo-marca img { width: 100%; height: 100%; object-fit: cover; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a {
  padding: 8px 12px; border-radius: 8px; font-size: .92rem; font-weight: 500; color: var(--texto-suave);
  transition: color .2s, background .2s;
}
.menu a:hover { color: var(--texto); background: var(--superficie-2); }
.menu a.actual { color: var(--acento); }
.nav-acciones { display: flex; align-items: center; gap: 8px; }
.btn-icono, .btn-idioma {
  display: inline-grid; place-items: center; height: 38px; min-width: 38px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto-suave); cursor: pointer; transition: color .2s, border-color .2s, transform .2s;
}
/* Selector de idioma: muestra ES y EN, con el activo resaltado; un clic cambia al otro */
.btn-idioma { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.btn-idioma span { padding: 4px 7px; border-radius: 7px; transition: color .2s, background .2s; }
.btn-idioma span.activo { background: var(--acento-suave); color: var(--acento); }
/* En celulares angostos la marca va en dos líneas para que quepa en el menú */
.btn-icono:hover, .btn-idioma:hover { color: var(--acento); border-color: var(--acento); }
.btn-menu { display: none; }
.nav-cta { padding: 8px 14px; border-radius: 10px; font-size: .88rem; box-shadow: none; }
.nav-cta .ico { width: 16px; height: 16px; }
.menu-contacto { display: none; }

/* ============================================================
   Botones y piezas pequeñas
   ============================================================ */
.botones { display: flex; gap: 12px; flex-wrap: wrap; }
.boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  background: var(--acento); color: var(--sobre-acento); font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--acento) 30%, transparent);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.boton:hover { background: var(--acento-fuerte); transform: translateY(-1px); }
.boton .ico { transition: transform .2s; }
.boton:hover .ico { transform: translateX(2px); }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); box-shadow: none; }
.boton.secundario:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  border: 1px solid var(--borde); color: var(--texto);
  backdrop-filter: blur(6px);
}
.chip.estado { color: var(--verde); }
.chip-ia { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 35%, transparent); background: var(--acento-suave); }
.chip-ia .ico { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.tarjeta-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta {
  font-family: var(--mono); font-size: .72rem; padding: 3px 8px; border-radius: 6px;
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-suave);
}
time { font-family: var(--mono); font-size: .75rem; color: var(--texto-suave); letter-spacing: .02em; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; padding: 88px 0 24px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--borde) 1px, transparent 1px),
    linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
  opacity: .6;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 720px; height: 720px; right: -200px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 22%, transparent), transparent 65%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.disponible {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
  padding: 6px 14px 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 500;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave);
  box-shadow: var(--sombra);
}
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.04; font-weight: 800; letter-spacing: -.04em;
  margin-bottom: 20px; text-wrap: balance;
}
.saludo {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--acento);
}
.rol { font-size: 1.15rem; font-weight: 600; margin-bottom: 14px; }
.bajada { color: var(--texto-suave); font-size: 1.1rem; max-width: 580px; text-wrap: pretty; }
/* Cursor de terminal al final del título profesional */
.hero .rol::after {
  content: ""; display: inline-block; width: .5em; height: 1.05em; margin-left: 5px; vertical-align: -.16em;
  background: var(--acento); border-radius: 1px; animation: parpadeo 1.1s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero .rol::after { animation: none; } }
.enfoque { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; padding: 0; }
.enfoque li { font-family: var(--mono); font-size: .76rem; padding: 5px 11px; border: 1px solid var(--borde-fuerte); border-radius: 999px; color: var(--texto-suave); background: var(--superficie); }
.hero .botones { margin-top: 28px; }
.redes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }

/* Tarjeta del proyecto destacado */
.destacado {
  position: relative; display: block; padding: 10px; border-radius: 22px;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
  transition: transform .4s ease, box-shadow .4s ease;
}
.destacado::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px;
  background: var(--acento-suave); border: 1px solid var(--borde);
  transform: rotate(4deg) translate(10px, 6px);
  transition: transform .4s ease;
}
.destacado:hover { transform: translateY(-4px); }
.destacado:hover::before { transform: rotate(6deg) translate(14px, 8px); }
.destacado-etiqueta {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--acento); color: #fff; font-size: .74rem; font-weight: 600;
}
.destacado-etiqueta .ico { width: 13px; height: 13px; fill: currentColor; }
.destacado-img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--fondo-alt); }
.destacado-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.destacado-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 10px 8px; }
.destacado-pie strong { display: block; font-size: 1.05rem; }
.destacado-pie span:not(.chip):not(.punto) { font-size: .88rem; color: var(--texto-suave); }

/* Cifras */
.cifras {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden;
}
.cifra { padding: 24px 28px; display: flex; align-items: baseline; gap: 10px; }
.cifra + .cifra { border-left: 1px solid var(--borde); }
.cifra strong { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.cifra span { font-family: var(--mono); font-size: .78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
/* Cifras con texto descriptivo (SITIO.cifras): valor arriba, explicación debajo */
.cifras-texto { grid-template-columns: repeat(4, 1fr); }
.cifras-texto .cifra { flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 28px; }
.cifras-texto .cifra strong { color: var(--acento); line-height: 1.1; white-space: nowrap; }
.cifras-texto .cifra span { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .9rem; line-height: 1.45; }

/* ============================================================
   Secciones
   ============================================================ */
.seccion { padding: 104px 0 0; }
.seccion-cabecera { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--acento);
}
.eyebrow-num { color: var(--texto-suave); }
.eyebrow-num::after { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--borde-fuerte); vertical-align: middle; margin-left: 10px; }
.seccion h2, .cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.seccion-bajada { color: var(--texto-suave); max-width: 600px; margin-top: 14px; font-size: 1.05rem; }

/* Filtros por tipo (control segmentado) */
.filtros {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.filtros button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 9px; border: 0; background: transparent; cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--texto-suave); transition: color .2s, background .2s;
}
.filtros button span { font-family: var(--mono); font-size: .72rem; font-weight: 500; opacity: .7; }
.filtros button:hover { color: var(--texto); }
.filtros button.activo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }

/* ============================================================
   Tarjetas de proyecto
   ============================================================ */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
/* Portada: el primero ocupa todo el ancho (imagen a la izquierda) y el resto va de a tres */
#lista-proyectos { grid-template-columns: repeat(3, 1fr); }
.tarjeta.grande { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; }
.tarjeta.grande .portada { aspect-ratio: auto; min-height: 380px; border-bottom: 0; border-right: 1px solid var(--borde); }
.tarjeta.grande .tarjeta-cuerpo { padding: 32px 32px 34px; justify-content: center; gap: 14px; }
.tarjeta.grande h3 { font-size: 1.75rem; }
.tarjeta-num { font-family: var(--mono); font-weight: 600; color: var(--acento); margin-right: 10px; }
.tarjeta {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); }
.portada { position: relative; aspect-ratio: 16 / 10; background: var(--fondo-alt); overflow: hidden; border-bottom: 1px solid var(--borde); }
.portada img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s ease; }
.tarjeta:hover .portada img { transform: scale(1.04); }
.portada-vacia { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3rem; font-weight: 800; color: var(--acento); }
.chips-portada { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
/* Al pasar el mouse: la imagen se oscurece y aparece "Ver caso de estudio" (solo con mouse) */
.portada-ver { display: none; }
@media (hover: hover) {
  .portada::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgb(9 13 22 / .78), rgb(9 13 22 / .25)); opacity: 0; transition: opacity .3s ease;
  }
  .portada-ver {
    display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 50%; top: 50%; z-index: 2;
    translate: -50% -35%; opacity: 0; padding: 10px 18px; border-radius: 999px; pointer-events: none;
    background: var(--acento); color: var(--sobre-acento); font-size: .9rem; font-weight: 600; white-space: nowrap;
    box-shadow: 0 8px 24px rgb(0 0 0 / .35); transition: opacity .3s ease, translate .3s ease;
  }
  .portada-ver .ico { width: 16px; height: 16px; }
  .tarjeta:hover .portada::after, .tarjeta:focus-visible .portada::after { opacity: 1; }
  .tarjeta:hover .portada-ver, .tarjeta:focus-visible .portada-ver { opacity: 1; translate: -50% -50%; }
}
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.tarjeta-cuerpo h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.tarjeta-cuerpo h3 span { font-family: "Inter", system-ui, sans-serif; display: block; margin-top: 2px; font-size: .92rem; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.tarjeta-cuerpo p { color: var(--texto-suave); font-size: .94rem; }
.tarjeta-cuerpo .tarjeta-resultado { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: var(--acento-suave); color: var(--texto); font-size: .88rem; font-weight: 500; }
.tarjeta-resultado .ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--acento); }
.tarjeta-cuerpo .etiquetas { margin-top: 4px; }
.ver-mas { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: .9rem; font-weight: 600; color: var(--acento); }
.ver-mas .ico { width: 16px; height: 16px; transition: transform .2s; }
.tarjeta:hover .ver-mas .ico { transform: translateX(4px); }

/* ============================================================
   Blog
   ============================================================ */
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.testimonio {
  display: flex; flex-direction: column; gap: 20px; padding: 28px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.testimonio blockquote { font-size: 1.05rem; line-height: 1.65; color: var(--texto); text-wrap: pretty; }
/* Botón flotante de WhatsApp (lo crea main.js si SITIO.whatsapp tiene número) */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px;
  border-radius: 999px; background: #25d366; color: #0b2e17; font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / .25); transition: translate .2s, box-shadow .2s;
}
.wa-flotante:hover { translate: 0 -2px; box-shadow: 0 10px 28px rgb(0 0 0 / .3); }
.wa-flotante .ico { width: 24px; height: 24px; }
body.sin-scroll .wa-flotante { display: none; }
@media (max-width: 640px) {
  .wa-flotante { right: 16px; bottom: 16px; padding: 14px; }
  .wa-flotante span { display: none; }
}
@media print { .wa-flotante, .asistente { display: none; } }
body.asistente-abierto .wa-flotante { display: none; }

/* Asistente de contacto: ventana de chat abajo a la derecha (pantalla completa en celular) */
.asistente {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 380px; height: min(620px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.asistente[hidden] { display: none; }
.asis-cabeza {
  display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--borde); background: var(--superficie-2);
}
.asis-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; background: var(--acento-suave); color: var(--acento);
}
.asis-avatar img { width: 100%; height: 100%; object-fit: cover; }
.asis-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.asis-titulo strong { font-family: var(--titulos); font-size: .98rem; }
.asis-titulo > span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--texto-suave); }
.asis-titulo .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.asis-btn {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  border: 0; background: none; color: var(--texto-suave); cursor: pointer; transition: background .2s, color .2s;
}
.asis-btn:hover { background: var(--fondo-alt); color: var(--texto); }
.asis-btn .ico { width: 18px; height: 18px; }

.asis-mensajes {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain;
}
.asis-msg {
  max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .93rem; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere;
}
.asis-bot { align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borde); border-bottom-left-radius: 6px; }
.asis-visitante { align-self: flex-end; background: var(--acento); color: var(--sobre-acento); border-bottom-right-radius: 6px; }
.asis-escribiendo { display: flex; gap: 4px; padding: 14px 16px; }
.asis-escribiendo::before, .asis-escribiendo::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-suave); animation: asis-punto 1s infinite;
}
.asis-escribiendo::after { animation-delay: .25s; }
@keyframes asis-punto { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.asis-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.asis-opcion {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: none;
  color: var(--texto); font: inherit; font-size: .86rem; cursor: pointer; transition: border-color .2s, color .2s;
}
.asis-opcion:hover { border-color: var(--acento); color: var(--acento); }

.asis-resumen {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--acento) 40%, var(--borde)); border-radius: 14px; background: var(--acento-suave);
}
.asis-resumen-titulo { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.asis-resumen dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .88rem; }
.asis-resumen dt { color: var(--texto-suave); }
.asis-resumen dd { overflow-wrap: anywhere; }
.asis-resumen .boton { justify-content: center; background: #25d366; color: #0b2e17; box-shadow: none; }
.asis-resumen .boton:hover { background: #20bd5a; }
.asis-seguir { border: 0; background: none; color: var(--texto-suave); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: underline; }
.asis-seguir:hover { color: var(--texto); }

.asis-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 12px 8px; border-top: 1px solid var(--borde); }
.asis-form[hidden] { display: none; }
.asis-form textarea {
  flex: 1; resize: none; max-height: 120px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--borde-fuerte); background: var(--fondo); color: var(--texto); font: inherit; font-size: .93rem; line-height: 1.4;
}
.asis-form textarea:focus { outline: none; border-color: var(--acento); }
.asis-enviar {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 0;
  background: var(--acento); color: var(--sobre-acento); cursor: pointer; transition: background .2s;
}
.asis-enviar:hover { background: var(--acento-fuerte); }
.asis-enviar:disabled { opacity: .5; cursor: default; }
.asis-enviar .ico { width: 18px; height: 18px; }
.asis-pie { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.asis-form[hidden] + .asis-pie { border-top: 1px solid var(--borde); padding-top: 12px; }
.asis-directo { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--acento); }
.asis-directo:hover { text-decoration: underline; }
.asis-directo .ico { width: 16px; height: 16px; }
.asis-privacidad { font-size: .72rem; color: var(--texto-suave); line-height: 1.4; }
@media (max-width: 640px) {
  .asistente { inset: 0; width: auto; height: 100dvh; border-radius: 0; border: 0; }
  .asis-form textarea { font-size: 16px; } /* menos de 16 px hace que iPhone acerque la página */
  body.asistente-abierto { overflow: hidden; }
}
.testimonio blockquote p + p { margin-top: .8em; }
.testimonio blockquote::before { content: "“"; display: block; font-family: var(--titulos); font-size: 3rem; line-height: .8; color: var(--acento); }
.testimonio figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.testimonio figcaption span { color: var(--texto-suave); }
.testimonio figcaption a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--acento); font-weight: 600; }
.testimonio figcaption .ico { width: 15px; height: 15px; }
.lista-notas { border-top: 1px solid var(--borde); }
.nota {
  display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; align-items: center;
  padding: 24px 4px; border-bottom: 1px solid var(--borde); transition: background .2s;
}
.nota h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.nota p { color: var(--texto-suave); font-size: .94rem; }
.nota > .ico { color: var(--texto-suave); transition: transform .2s, color .2s; }
.nota:hover h3, .nota:hover > .ico { color: var(--acento); }
.nota:hover > .ico { transform: translateX(4px); }

/* ============================================================
   Sobre mí
   ============================================================ */
.sobre-grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
.perfil {
  display: flex; flex-direction: column; gap: 18px; padding: 28px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.avatar {
  width: 88px; height: 88px; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 60%, #7c3aed));
  color: #fff; font-weight: 800; font-size: 1.6rem;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.perfil-nombre { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.perfil-rol { color: var(--texto-suave); font-size: .92rem; margin-top: 2px; }
.perfil-lugar { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .88rem; color: var(--texto-suave); }
.perfil-lugar .ico { width: 15px; height: 15px; }
.subtitulo { font-family: var(--mono); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: 16px; }
.habilidades { display: flex; gap: 10px; flex-wrap: wrap; }
.habilidad {
  padding: 9px 16px; border-radius: 10px; font-size: .92rem; font-weight: 500;
  background: var(--superficie); border: 1px solid var(--borde); transition: border-color .2s, color .2s;
}
.habilidad:hover { border-color: var(--acento); color: var(--acento); }
.pendiente { color: var(--texto-suave); font-style: italic; }

/* Partes de "Sobre mí": quién soy, qué hago, cómo trabajo, en qué estoy */
.sobre-intro { font-size: 1.22rem; line-height: 1.65; font-weight: 500; color: var(--texto); margin-bottom: 28px; text-wrap: pretty; }
.sobre-partes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sobre-parte { padding: 24px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
.sobre-parte-num { font-family: var(--mono); font-size: .75rem; color: var(--acento); margin-bottom: 8px; }
.sobre-parte h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.sobre-parte p:last-child { color: var(--texto-suave); font-size: .94rem; text-wrap: pretty; }
/* Stack agrupado */
.stack-titulo { margin-top: 56px; }
.stack { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
/* 5 grupos: tres arriba y dos abajo, sin huecos */
.stack-grupo { grid-column: span 2; }
.perfil-acciones { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--borde); }
.perfil-acciones .boton { justify-content: center; }
.stack-grupo { padding: 22px 24px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
.stack-grupo h4 { font-size: .95rem; font-weight: 700; margin-bottom: 14px; }
.stack-grupo .habilidades { gap: 8px; }
.stack-grupo .habilidad { padding: 6px 12px; font-size: .86rem; background: var(--superficie-2); }
/* ============================================================
   Servicios
   ============================================================ */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.servicio {
  display: flex; flex-direction: column; gap: 10px; padding: 26px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); }
.servicio-icono {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px;
  background: var(--acento-suave); color: var(--acento);
}
.servicio-icono .ico { width: 22px; height: 22px; }
.servicio h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.servicio p { color: var(--texto-suave); font-size: .94rem; }
.servicio .etiquetas, .servicio .ver-mas { margin-top: auto; padding-top: 8px; }
.servicio .ver-mas:hover .ico { transform: translateX(4px); }
/* Metodología: pasos numerados unidos por una línea */
.metodologia { margin-top: 64px; }
.metodologia-titulo { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 28px; }
.pasos { list-style: none; display: grid; grid-template-columns: repeat(var(--pasos, 4), 1fr); gap: 20px; position: relative; }
.pasos::before { content: ""; position: absolute; top: 19px; left: 20px; right: 20px; height: 1px; background: var(--borde-fuerte); }
.paso { position: relative; }
.paso-num {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%;
  background: var(--fondo); border: 1px solid var(--acento); color: var(--acento);
  font-family: var(--mono); font-size: .8rem;
}
.paso h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.paso p { color: var(--texto-suave); font-size: .92rem; }
.servicios-otro {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 20px; padding: 22px 26px; border-radius: var(--radio);
  border: 1px dashed var(--borde-fuerte); background: var(--fondo-alt);
}
.servicios-otro p { font-weight: 600; font-size: 1.02rem; }
/* ============================================================
   Experiencia y formación
   ============================================================ */
.experiencia-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.linea-tiempo { list-style: none; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--borde); }
.hito { position: relative; padding: 0 0 40px 40px; }
.hito:last-child { padding-bottom: 0; }
.hito::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--acento);
}
.hito:first-child::before { background: var(--acento); box-shadow: 0 0 0 5px var(--acento-suave); }
.hito h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; line-height: 1.3; }
.hito-lugar { color: var(--texto-suave); font-size: .94rem; margin-top: 2px; }
.hito ul { margin: 14px 0 16px; padding-left: 1.2em; color: var(--texto-suave); font-size: .96rem; }
.hito li + li { margin-top: 6px; }
.hito li::marker { color: var(--acento); }
.formacion {
  padding: 24px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
/* Se queda fija al bajar solo si cabe completa en la pantalla */
@media (min-height: 940px) { .formacion { position: sticky; top: 88px; } }
.formacion .subtitulo:not(:first-child) { margin-top: 28px; }
.cv-tarjeta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--borde); }
.cv-tarjeta .subtitulo { margin-bottom: 8px; }
.cv-tarjeta p { color: var(--texto-suave); font-size: .9rem; margin-bottom: 16px; }
.cv-botones { display: flex; flex-direction: column; gap: 8px; }
.cv-botones .boton { justify-content: center; }
.lista-formacion { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.lista-formacion li { display: flex; gap: 14px; align-items: flex-start; }
.formacion-icono {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  background: var(--acento-suave); color: var(--acento);
}
.lista-formacion div { display: flex; flex-direction: column; gap: 2px; }
.lista-formacion strong { font-size: .95rem; line-height: 1.35; }
.lista-formacion span { font-size: .88rem; color: var(--texto-suave); }
/* ============================================================
   Contacto
   ============================================================ */
.cta {
  position: relative; overflow: hidden; text-align: center;
  padding: 72px 32px; border-radius: 28px; border: 1px solid var(--borde);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 70%),
    var(--superficie);
}
.cta .eyebrow { justify-content: center; }
.cta-texto { color: var(--texto-suave); max-width: 560px; margin: 16px auto 32px; font-size: 1.08rem; }
.cta .botones, .cta .redes { justify-content: center; }
.cta .redes { margin-top: 28px; }
.enlace-red {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px;
  font-size: .9rem; font-weight: 500; color: var(--texto-suave); transition: color .2s, background .2s;
}
.enlace-red:hover { color: var(--texto); background: var(--superficie-2); }

/* ============================================================
   Pie
   ============================================================ */
.pie { margin-top: 104px; border-top: 1px solid var(--borde); background: var(--fondo-alt); }
/* Marca a la izquierda y tres columnas de enlaces: navegación, contacto y hoja de vida */
.pie-interior { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; align-items: start; padding-top: 56px; padding-bottom: 40px; }
.pie-marca .pie-rol { margin-top: 12px; font-size: .9rem; font-weight: 600; color: var(--texto); }
.pie-marca .pie-frase { margin-top: 6px; max-width: 320px; font-size: .9rem; color: var(--texto-suave); text-wrap: pretty; }
.pie-columna { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pie-columna h3 { font-family: var(--mono); font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: 10px; }
.pie-columna > a, .pie-redes a {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: .9rem; font-weight: 500; color: var(--texto-suave); transition: color .2s;
}
.pie-columna > a:hover, .pie-redes a:hover { color: var(--acento); }
.pie-redes { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pie-redes .ico { width: 16px; height: 16px; }
.pie-legal {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--borde);
  font-size: .84rem; color: var(--texto-suave);
}
.pie-arriba:hover { color: var(--acento); }

/* Página 404 */
.error-404 { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.error-404 h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.error-404 .botones { margin-top: 12px; }

/* ============================================================
   Página de proyecto
   ============================================================ */
.migas {
  display: inline-flex; align-items: center; gap: 6px; margin: 40px 0 32px;
  font-size: .9rem; font-weight: 500; color: var(--texto-suave); transition: color .2s;
}
.migas:hover { color: var(--acento); }
.migas .ico { width: 16px; height: 16px; }
.detalle-cabecera { max-width: 820px; }
.detalle-cabecera .chips { display: flex; gap: 8px; margin-bottom: 18px; }
.detalle-cabecera h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.04em; margin-bottom: 16px; text-wrap: balance; }
.detalle-cabecera .bajada { font-size: 1.15rem; max-width: 720px; }
.detalle-cabecera .botones { margin-top: 28px; }

/* Cifras de impacto del proyecto */
.impacto {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 40px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden;
}
.impacto > div { padding: 22px 24px; }
.impacto > div + div { border-left: 1px solid var(--borde); }
.impacto dt { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--acento); }
.impacto dd { margin-top: 6px; font-size: .9rem; color: var(--texto-suave); line-height: 1.4; }

.marco {
  margin-top: 48px; border-radius: 20px; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
}
.marco-barra { display: flex; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.marco-barra span { width: 11px; height: 11px; border-radius: 50%; background: var(--borde-fuerte); }
.marco-img { max-height: 640px; overflow: hidden; background: var(--fondo-alt); }
.marco-img img { width: 100%; }

.detalle-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; margin-top: 64px; align-items: start; }
.ficha {
  position: sticky; top: 88px; padding: 8px 24px 24px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.ficha dl > div { padding: 16px 0; border-bottom: 1px solid var(--borde); }
.ficha dt { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: 6px; }
.ficha dd { font-weight: 600; font-size: .95rem; }
.ficha .chip { border: 0; padding: 0; background: none; backdrop-filter: none; font-size: .95rem; }
.ficha-enlaces { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ficha-enlaces .boton { justify-content: center; }

/* Texto largo del proyecto */
.contenido { font-size: 1.05rem; line-height: 1.75; min-width: 0; counter-reset: caso; }
.contenido > :not(.galeria):not(.arquitectura) { max-width: 72ch; }
.contenido > * + * { margin-top: 1.1em; }
/* Secciones del caso de estudio numeradas: 01 El problema, 02 Qué hace… */
.contenido > h2 {
  counter-increment: caso;
  display: flex; align-items: baseline; gap: 14px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.25;
  margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--borde);
}
.contenido > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.contenido > h2::before {
  content: counter(caso, decimal-leading-zero);
  font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--acento);
}

/* Diagrama de arquitectura por capas */
.contenido .arquitectura {
  /* Capa · flecha · capa · flecha · capa (todos los proyectos usan 3 capas) */
  display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: stretch; margin-top: 1.4em; margin-bottom: 1.6em;
  padding: 20px; border-radius: var(--radio); border: 1px solid var(--borde);
  background:
    radial-gradient(circle at 1px 1px, var(--borde) 1px, transparent 0) 0 0 / 18px 18px,
    var(--fondo-alt);
}
.arq-capa { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.arq-nombre {
  display: flex; align-items: center; gap: 8px; margin: 0 0 2px;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave);
}
.arq-nombre span { color: var(--acento); }
.arq-nodo {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 12px 14px; border-radius: 12px; line-height: 1.35;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  transition: border-color .2s, transform .2s;
}
.arq-nodo:hover { border-color: var(--acento); transform: translateY(-2px); }
.arq-nodo strong { font-size: .92rem; font-weight: 700; }
.arq-nodo span { font-size: .8rem; color: var(--texto-suave); }
.arq-nodo.futuro { background: transparent; border-style: dashed; box-shadow: none; }
.arq-nodo.futuro strong { color: var(--texto-suave); }
/* Conector entre capas con un pulso que viaja de izquierda a derecha */
.arq-flecha { position: relative; align-self: center; height: 2px; margin-top: 18px; background: var(--borde-fuerte); }
.arq-flecha::after {
  content: ""; position: absolute; right: -2px; top: -4px;
  border: 5px solid transparent; border-left: 7px solid var(--borde-fuerte); border-right: 0;
}
.arq-flecha span {
  position: absolute; top: -2px; left: 0; width: 8px; height: 6px; border-radius: 3px;
  background: var(--acento); box-shadow: 0 0 8px var(--acento);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arq-flecha span { animation: none; display: none; } }
.contenido h3 { font-size: 1.1rem; font-weight: 700; margin-top: 2em; }
.contenido ul, .contenido ol { padding-left: 1.3em; }
.contenido li + li { margin-top: .5em; }
.contenido li::marker { color: var(--acento); }
.contenido strong { font-weight: 650; }
.contenido a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.contenido code { font-family: var(--mono); font-size: .88em; padding: 2px 6px; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borde); }

/* Galería de capturas */
.contenido .galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.contenido .galeria figure { margin: 0; }
.contenido .galeria a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); cursor: zoom-in; transition: transform .3s ease, box-shadow .3s ease; }
.contenido .galeria a:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.contenido .galeria img { width: 100%; margin: 0; display: block; }
.contenido .galeria figcaption { font-size: .84rem; color: var(--texto-suave); margin-top: 8px; line-height: 1.4; }
/* Capturas verticales de celular: columnas más angostas */
.contenido .galeria.movil { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.contenido .galeria.movil a { border-radius: 18px; }

.otros { margin-top: 104px; padding-top: 56px; border-top: 1px solid var(--borde); }
.otros h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 28px; }

.no-encontrado { padding: 120px 0; text-align: center; }
.no-encontrado h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 24px; }

/* Visor de capturas */
.visor {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 24px; background: rgb(5 8 15 / .92); backdrop-filter: blur(6px);
}
.visor figure { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.visor img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 12px; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.visor figcaption { color: #cbd3e1; font-size: .9rem; text-align: center; }
.visor-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .15); background: rgb(255 255 255 / .06); color: #fff; cursor: pointer;
  transition: background .2s;
}
.visor-btn:hover { background: rgb(255 255 255 / .16); }
.visor-cerrar { position: absolute; top: 20px; right: 20px; }

/* ============================================================
   Tabletas y celulares
   ============================================================ */
/* Menú de hamburguesa por debajo de 1024 px: el menú completo (enlaces, CV y Contacto) necesita ~1010 px */
@media (max-width: 1023px) {
  .nav-interior { gap: 12px; }
  .btn-menu { display: inline-grid; }
  .nav-cta { display: none; }
  .menu-contacto { display: block; }
  .menu {
    position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 2px;
    padding: 12px 16px 16px; background: var(--fondo); border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra); display: none;
  }
  .nav.abierto .menu { display: flex; }
  .menu a { padding: 12px; font-size: 1rem; }
  .nav-acciones { margin-left: auto; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .destacado { max-width: 560px; }
  .sobre-grid { grid-template-columns: 1fr; gap: 32px; }
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .cifras-texto { grid-template-columns: repeat(2, 1fr); }
  .stack { grid-template-columns: repeat(2, 1fr); }
  .stack-grupo { grid-column: auto; }
  .cifras-texto .cifra:nth-child(3) { border-left: 0; }
  .cifras-texto .cifra:nth-child(n + 3) { border-top: 1px solid var(--borde); }
  .pasos { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .pasos::before { display: none; }
  .experiencia-grid { grid-template-columns: 1fr; gap: 40px; }
  .formacion { position: static; }
  .detalle-grid { grid-template-columns: 1fr; gap: 40px; }
  .pie-interior { grid-template-columns: repeat(3, 1fr); }
  .pie-marca { grid-column: 1 / -1; }
  #lista-proyectos { grid-template-columns: repeat(2, 1fr); }
  .tarjeta.grande { display: flex; }
  .tarjeta.grande .portada { aspect-ratio: 16 / 10; min-height: 0; border-right: 0; border-bottom: 1px solid var(--borde); }
  .tarjeta.grande .tarjeta-cuerpo { padding: 22px 22px 24px; }
  .tarjeta.grande h3 { font-size: 1.45rem; }
  .ficha { position: static; order: -1; }
}

@media (max-width: 760px) {
  .contenedor { padding: 0 16px; }
  .pie-arriba { display: inline-flex; align-items: center; min-height: 44px; }

  .hero { padding-top: 48px; }
  .cifras { margin-top: 48px; }
  .cifra { padding: 18px 14px; flex-direction: column; gap: 2px; }
  .cifra strong { font-size: 1.6rem; }
  .cifra span { font-size: .68rem; }
  .seccion { padding-top: 80px; }
  .seccion-cabecera { margin-bottom: 28px; }
  /* Si los filtros no caben en una fila, se deslizan hacia el lado */
  .filtros { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros button { flex: 1 0 auto; justify-content: center; padding: 8px 10px; white-space: nowrap; }
  .grilla, #lista-proyectos { grid-template-columns: 1fr; }
  .servicios, .sobre-partes, .stack { grid-template-columns: 1fr; }
  .cifras-texto .cifra { padding: 18px 16px; }
  .cifras-texto .cifra strong { font-size: 1.5rem; }
  .cifras-texto .cifra span { font-size: .8rem; }
  .pasos { grid-template-columns: 1fr; gap: 20px; }
  .paso { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
  .paso-num { grid-row: span 2; margin-bottom: 0; }
  .servicio, .sobre-parte, .stack-grupo { padding: 20px; }
  .sobre-intro { font-size: 1.08rem; }
  .hito { padding-left: 32px; }
  .nota { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .nota time { grid-column: 1 / -1; }
  .cta { padding: 48px 20px; border-radius: 22px; }
  .pie { margin-top: 80px; }
  .pie-interior { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 40px; padding-bottom: 28px; }
  .impacto { grid-template-columns: 1fr; }
  .impacto > div + div { border-left: 0; border-top: 1px solid var(--borde); }
  .impacto > div { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px; }
  .impacto dt { font-size: 1.6rem; min-width: 72px; }
  .impacto dd { margin-top: 0; }
  /* Diagrama en vertical */
  .contenido .arquitectura { grid-template-columns: 1fr; padding: 16px; }
  .arq-flecha { justify-self: center; width: 2px; height: 28px; margin: 6px 0; }
  .arq-flecha::after { right: auto; top: auto; left: -4px; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--borde-fuerte); border-bottom: 0; }
  .arq-flecha span { top: 0; left: -2px; width: 6px; height: 8px; animation-name: pulso-vertical; }
  @keyframes pulso-vertical { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
  .marco { margin-top: 32px; border-radius: 14px; }
  .marco-barra { padding: 9px 12px; }
  .marco-barra span { width: 9px; height: 9px; }
  .contenido .galeria { gap: 16px; }
  /* Capturas de celular: dos por fila */
  .contenido .galeria.movil { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .visor { grid-template-columns: 1fr; padding: 64px 12px 24px; }
  .visor-prev, .visor-next { position: absolute; bottom: 20px; }
  .visor-prev { left: calc(50% - 56px); }
  .visor-next { right: calc(50% - 56px); }
  .visor img { max-height: calc(100vh - 170px); }
}

/* Celulares angostos (360–420 px): la marca va en dos líneas y los botones del menú se compactan */
@media (max-width: 420px) {
  .logo { gap: 8px; }
  .logo [data-sitio="marca"] { font-size: .86rem; line-height: 1.15; }
  .nav-interior, .nav-acciones { gap: 6px; }
  .btn-idioma span { padding: 4px 5px; }
}