/* ayaxlb.me · estilos. Inter para el texto, Space Grotesk para títulos y cifras, JetBrains Mono para etiquetas; azul del CV. */
@font-face { font-family: "Inter"; src: url(/fuentes/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Grotesk"; src: url(/fuentes/grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Mono"; src: url(/fuentes/mono.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
/* Temas: la cabecera pone data-theme antes de pintar (oscuro salvo que el visitante haya elegido claro). Sin JS, manda el sistema. */
:root { --fondo: #fff; --superficie: #fff; --gris: #f6f7fb; --texto: #14161f; --suave: #4b5060; --tenue: #6b7080; --borde: #e6e8ef; --borde-fuerte: #d9dbe3;
  --azul: #5875f6; --azul-osc: #3a4fc4; --azul-claro: #eef1fe; --relleno: #5875f6; --boton: #14161f; --boton-texto: #fff; --nav: rgba(255,255,255,.88);
  --verde: #15803d; --verde-fondo: #e8f6ee; --ambar: #b45309; --ambar-fondo: #fdf3e1; --concepto: #3a4fc4; --concepto-fondo: #eef1fe;
  --puntos: #d3d7e4; --contacto: #14161f; --brillo: rgba(88,117,246,.07); --sombra: 20,22,31; color-scheme: light;
  --mono: "Mono", ui-monospace, Menlo, Consolas, monospace; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fondo: #0a0b0f; --superficie: #12141b; --gris: #171a22; --texto: #eceef5; --suave: #b0b5c3; --tenue: #878d9d; --borde: #232733; --borde-fuerte: #343a49;
  --azul: #7b91ff; --azul-osc: #aab8ff; --azul-claro: rgba(123,145,255,.14); --relleno: #5875f6; --boton: #eceef5; --boton-texto: #0a0b0f; --nav: rgba(10,11,15,.82);
  --verde: #4ade80; --verde-fondo: #0f2a1b; --ambar: #fbbf24; --ambar-fondo: #2c2110; --concepto: #aab8ff; --concepto-fondo: #1b2148;
  --puntos: #262b37; --contacto: #12141b; --brillo: rgba(88,117,246,.16); --sombra: 0,0,0; color-scheme: dark; } }
:root[data-theme="dark"] { --fondo: #0a0b0f; --superficie: #12141b; --gris: #171a22; --texto: #eceef5; --suave: #b0b5c3; --tenue: #878d9d; --borde: #232733; --borde-fuerte: #343a49;
  --azul: #7b91ff; --azul-osc: #aab8ff; --azul-claro: rgba(123,145,255,.14); --relleno: #5875f6; --boton: #eceef5; --boton-texto: #0a0b0f; --nav: rgba(10,11,15,.82);
  --verde: #4ade80; --verde-fondo: #0f2a1b; --ambar: #fbbf24; --ambar-fondo: #2c2110; --concepto: #aab8ff; --concepto-fondo: #1b2148;
  --puntos: #262b37; --contacto: #12141b; --brillo: rgba(88,117,246,.16); --sombra: 0,0,0; color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { font-family: "Inter", system-ui, sans-serif; color: var(--texto); background: radial-gradient(1100px 520px at 72% -160px, var(--brillo), transparent 70%) no-repeat, var(--fondo); -webkit-font-smoothing: antialiased; line-height: 1.55; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.envoltura { width: min(1160px, 100% - 40px); margin: 0 auto; }
h1, h2, h3 { font-family: "Grotesk", "Inter", sans-serif; letter-spacing: -0.01em; line-height: 1.12; }
h2 { font-size: clamp(28px, 4vw, 40px); margin: 88px 0 8px; }
.sub { color: var(--tenue); font-size: 18px; margin-bottom: 32px; max-width: 760px; }
.boton { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; background: var(--boton); color: var(--boton-texto); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; }
.boton.claro { background: var(--superficie); color: var(--texto); border: 1.5px solid var(--borde-fuerte); }
.boton.fantasma { background: transparent; color: #fff; border: 1.5px solid #4b5060; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 10; background: var(--nav); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.nav .envoltura { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: "Grotesk"; font-weight: 700; font-size: 18px; text-decoration: none; }
.marca img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.nav nav { display: flex; align-items: center; gap: 26px; font-size: 15px; color: var(--suave); }
.nav nav a { text-decoration: none; }
.nav nav a:hover { color: var(--texto); }
.nav .idioma { font-weight: 600; border: 1.5px solid var(--borde); border-radius: 8px; padding: 2px 8px; }
.nav .boton { height: 38px; color: var(--boton-texto); }
.tema { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--borde); background: transparent; color: var(--suave); cursor: pointer; }
.tema:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.tema[hidden] { display: none; }
.tema svg { width: 17px; height: 17px; }
.tema .sol, :root[data-theme="dark"] .tema .luna { display: none; }
:root[data-theme="dark"] .tema .sol { display: block; }

/* Portada */
.heroe { display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: center; padding: 64px 0 40px; }
.etiqueta { display: inline-block; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--azul-osc); background: var(--azul-claro); border-radius: 999px; padding: 6px 14px; }
.heroe h1 { font-size: clamp(40px, 6vw, 62px); line-height: 1.04; letter-spacing: -0.02em; margin: 22px 0 20px; }
.heroe h1 em { font-style: normal; color: var(--azul); }
.heroe p { font-size: 19px; color: var(--suave); max-width: 680px; }
.foto { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; background: var(--azul-claro); }

/* Chat */
.chat { margin: 24px auto 0; max-width: 860px; background: linear-gradient(165deg, #1d2140, #14161f); color: #fff; border: 1px solid rgba(255,255,255,.07); border-radius: 28px; padding: 30px; box-shadow: 0 30px 70px rgba(var(--sombra),.18); }
.chat-cabeza { display: flex; gap: 16px; align-items: flex-start; }
.chat-cabeza h2 { font-size: 26px; margin: 0 0 4px; color: #fff; }
.chat-cabeza p { color: #b6b9c6; font-size: 15px; }
.pulso { width: 12px; height: 12px; border-radius: 50%; background: #4ade80; margin-top: 10px; flex: none; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.chat-hilo { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; max-height: 460px; overflow-y: auto; }
.chat-hilo:empty { display: none; }
.msg { padding: 12px 16px; border-radius: 16px; font-size: 15.5px; line-height: 1.6; max-width: 92%; }
.msg.yo { align-self: flex-end; background: var(--relleno); }
.msg.ia { align-self: flex-start; background: rgba(255,255,255,.08); color: #e7e9f4; }
.msg.ia a { color: #a9b8ff; }
.msg.ia ul { padding-left: 20px; margin: 6px 0; }
.msg.ia p + p { margin-top: 8px; }
.msg.cargando { color: #9aa0b5; font-style: italic; }
.chat-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chat-sugerencias button { font: inherit; font-size: 14px; color: #dfe3ff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px; cursor: pointer; text-align: left; }
.chat-sugerencias button:hover { background: rgba(255,255,255,.14); }
.chat-form { display: flex; gap: 10px; margin-top: 16px; background: #fff; border-radius: 999px; padding: 6px; }
.chat-form input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 0 14px; color: #14161f; background: transparent; min-width: 0; }
.chat-form input::placeholder { color: #6b7080; }
.chat-form .boton { background: var(--relleno); color: #fff; }
.chat-form .boton:disabled { opacity: .5; cursor: default; }
.chat-aviso { margin-top: 12px; font-size: 12.5px; color: #8a8fa4; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin-top: 64px; }
.cifras div { padding: 26px 16px 26px 0; }
.cifras b { display: block; font-family: "Grotesk"; font-size: 36px; letter-spacing: -0.01em; }
.cifras span { color: var(--tenue); font-size: 15px; }

/* Casos */
.casos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.caso { display: block; border: 1px solid var(--borde); border-radius: 24px; overflow: hidden; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; background: var(--superficie); }
.caso:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(var(--sombra),.08); border-color: var(--borde-fuerte); }
.caso img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--borde); }
.caso .cuerpo { padding: 22px 24px 24px; }
.caso h3 { font-size: 23px; margin: 12px 0 8px; }
.caso p { color: var(--suave); font-size: 15.5px; }
.caso .resultado { margin-top: 12px; font-size: 14.5px; }
.caso .resultado b { color: var(--azul); }
.caso .leer { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 15px; }
/* El primer caso, destacado a lo ancho: con cinco casos ninguno se queda solo en su fila. */
.casos .caso:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; }
.casos .caso:first-child img { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--borde); }
.casos .caso:first-child .cuerpo { align-self: center; padding: 32px; }
.casos .caso:first-child h3 { font-size: 28px; }
.chip { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.chip.real { background: var(--verde-fondo); color: var(--verde); }
.chip.ejemplo { background: var(--ambar-fondo); color: var(--ambar); }
.chip.concepto { background: var(--concepto-fondo); color: var(--concepto); }

/* Cómo trabajo y experiencia */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.paso { background: var(--gris); border-radius: 22px; padding: 26px; }
.paso b { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--azul); }
.paso h3 { font-size: 21px; margin: 10px 0 8px; }
.paso p { color: var(--suave); font-size: 15.5px; }
.experiencia .fila { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--borde); }
.experiencia .cuando { font-family: var(--mono); font-size: 14px; padding-top: 2px; color: var(--tenue); }
.experiencia p { color: var(--suave); font-size: 15.5px; margin-top: 4px; }

/* Contacto y pie */
.contacto { margin-top: 100px; background: var(--contacto); border: 1px solid var(--borde); color: #fff; border-radius: 32px; padding: 52px 56px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.contacto h2 { margin: 0 0 8px; color: #fff; }
.contacto p { color: #b6b9c6; font-size: 17px; max-width: 560px; }
.contacto .acciones { margin-top: 0; }
.pie { display: flex; justify-content: space-between; gap: 20px; color: var(--tenue); font-family: var(--mono); font-size: 13px; padding: 28px 0 44px; }

/* Portada con ficha: en escritorio, la ficha fija a la izquierda y el contenido a la derecha */
.con-ficha .nav .envoltura { width: min(1360px, 100% - 40px); }
.marco { width: min(1360px, 100% - 40px); margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.columna { grid-column: 2; grid-row: 1; min-width: 0; }
.columna .envoltura { width: 100%; }
.con-ficha .heroe { display: block; padding-top: 52px; }
.con-ficha .chat { max-width: none; }
.ficha { grid-column: 1; grid-row: 1; position: sticky; top: 86px; margin-top: 20px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 8px; }
.ficha-perfil, .ficha-bloque { border: 1px solid var(--borde); border-radius: 20px; padding: 14px 16px; background: var(--superficie); }
.ficha-perfil { display: grid; grid-template-columns: 56px 1fr; gap: 12px 14px; align-items: center; background: linear-gradient(160deg, var(--azul-claro), var(--superficie) 75%); }
.ficha-perfil img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ficha-perfil b { display: block; font-family: "Grotesk"; font-size: 18px; line-height: 1.2; }
.ficha-perfil span { display: block; font-size: 13.5px; color: var(--suave); line-height: 1.35; margin-top: 2px; }
.estado { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--verde); background: var(--verde-fondo); border-radius: 999px; padding: 5px 12px; }
.estado .punto { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulso 2s infinite; }
.ficha-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha-cifras div { background: var(--gris); border-radius: 16px; padding: 10px 13px; }
.ficha-cifras b { display: block; font-family: "Grotesk"; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.ficha-cifras span { display: block; font-size: 12.5px; color: var(--tenue); line-height: 1.35; margin-top: 2px; }
.ficha-bloque h2 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); margin: 0 0 8px; line-height: 1.4; }
.enfoques, .horas { list-style: none; }
.enfoques a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde); text-decoration: none; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.enfoques li:first-child a { border-top: 0; padding-top: 2px; }
.enfoques a span { color: var(--azul); transition: transform .15s; }
.enfoques a:hover { color: var(--azul-osc); }
.enfoques a:hover span { transform: translateX(3px); }
.horas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.horas li { display: grid; min-width: 0; }
.horas span { font-size: 12.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.horas time { font-family: "Grotesk"; font-size: 19px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.horas small { font-size: 12px; color: var(--azul-osc); min-height: 1.2em; }
.ficha-acciones { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ficha-acciones .boton { justify-content: center; }

/* Lienzo: plano de 2200×1300 que se arrastra; las piezas se colocan con --x, --y y --w */
.lienzo { position: relative; height: 640px; margin-top: 88px; border: 1px solid var(--borde); border-radius: 28px; overflow: clip; background: var(--gris); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.lienzo.arrastrando { cursor: grabbing; }
.plano { position: absolute; left: 50%; top: 50%; width: 2200px; height: 1300px; transform: translate(-50%, -50%); background-image: radial-gradient(circle, var(--puntos) 1.2px, transparent 1.5px); background-size: 24px 24px; }
.lienzo.vivo .plano { left: 0; top: 0; will-change: transform; }
.lienzo-centro { position: absolute; left: 1100px; top: 650px; transform: translate(-50%, -50%); width: 520px; text-align: center; pointer-events: none; }
.lienzo-centro h2 { margin: 14px 0 10px; font-size: clamp(30px, 3.4vw, 42px); }
.lienzo-centro p { color: var(--suave); font-size: 17px; }
.lienzo-centro .pista { display: inline-flex; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--azul-osc); background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 14px rgba(var(--sombra),.06); }
.solo-tactil { display: none; }
.piezas { display: contents; }
.pieza { position: absolute; left: var(--x); top: var(--y); width: var(--w); text-decoration: none; -webkit-user-drag: none; }
.pieza-nombre { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--suave); margin-bottom: 8px; }
.pieza-nombre span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rombo { width: 7px; height: 7px; border: 1.5px solid currentColor; transform: rotate(45deg); flex: none; }
.pieza-marco { position: relative; display: block; }
.pieza-marco .chip { position: absolute; left: 10px; bottom: 10px; font-size: 11px; padding: 3px 9px; box-shadow: 0 2px 8px rgba(var(--sombra),.12); }
.pieza img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--borde); background: #fff; box-shadow: 0 14px 34px rgba(var(--sombra),.10); transition: transform .18s, box-shadow .18s; -webkit-user-drag: none; }
.pieza:hover .pieza-nombre { color: var(--azul-osc); }
.pieza:hover img { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(var(--sombra),.16); }
.pieza:focus-visible { outline: none; }
.pieza:focus-visible img { outline: 3px solid var(--azul); outline-offset: 3px; }
.lienzo.arrastrando .pieza img { transition: none; }
.lienzo-centrar { position: absolute; right: 16px; bottom: 16px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); font: inherit; font-size: 14px; font-weight: 600; color: var(--texto); cursor: pointer; box-shadow: 0 4px 14px rgba(var(--sombra),.08); }
.lienzo-centrar[hidden], .lienzo:not(.movido) .lienzo-centrar { display: none; }
/* En móvil o con pantalla táctil, el lienzo es un carrusel: arrastrar chocaría con el desplazamiento de la página. */
@media (max-width: 860px), (pointer: coarse) {
  .lienzo { height: auto; margin-top: 0; border: 0; border-radius: 0; background: none; overflow: visible; cursor: auto; user-select: auto; -webkit-user-select: auto; }
  .plano { position: static; width: auto; height: auto; transform: none !important; background: none; }
  .lienzo-centro { position: static; transform: none; width: auto; text-align: left; pointer-events: auto; display: flex; flex-direction: column; }
  .lienzo-centro h2 { margin: 88px 0 8px; font-size: clamp(28px, 4vw, 40px); }
  .lienzo-centro p { font-size: 18px; color: var(--tenue); }
  .lienzo-centro .pista { order: 3; align-self: flex-start; margin-top: 14px; }
  .solo-raton { display: none; }
  .solo-tactil { display: inline; }
  .piezas { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 18px; padding-bottom: 12px; scrollbar-width: thin; }
  .pieza { position: static; flex: 0 0 min(80%, 420px); width: auto; scroll-snap-align: start; }
  .pieza img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
  .pieza:hover img { transform: none; }
  .lienzo-centrar { display: none; }
}

/* Página de caso */
.caso-heroe { padding: 48px 0 8px; max-width: 900px; }
.volver { display: inline-block; color: var(--tenue); text-decoration: none; margin-bottom: 26px; font-size: 15px; }
.caso-heroe h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.02em; margin: 16px 0 16px; }
.caso-heroe .entradilla { font-size: 20px; color: var(--suave); }
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.meta dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 500; }
.meta dd { font-size: 15.5px; margin-top: 4px; }
.pagina-caso .cifras { margin-top: 40px; }
.texto-caso { max-width: 820px; }
.texto-caso h2 { font-size: 30px; margin-top: 64px; }
.texto-caso p, .texto-caso li { font-size: 18px; color: var(--suave); }
.texto-caso ul { padding-left: 22px; margin-top: 10px; }
.texto-caso li { margin-top: 10px; }
.cita { border-left: 4px solid var(--azul); padding-left: 20px; font-size: 20px !important; color: var(--texto) !important; }
.galeria h2 { font-size: 30px; margin-top: 64px; margin-bottom: 24px; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.galeria h2, .galeria figure:not(.papel) { grid-column: 1 / -1; }
.galeria figure { margin-bottom: 32px; }
.galeria img { width: 100%; border: 1px solid var(--borde); border-radius: 18px; box-shadow: 0 18px 40px rgba(var(--sombra),.07); }
.galeria figure.papel img { border-radius: 6px; }
.galeria figcaption { margin-top: 12px; color: var(--suave); font-size: 15px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.vecinos a { text-decoration: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 18px 22px; color: var(--tenue); font-size: 14px; }
.vecinos a:last-child { text-align: right; }
.vecinos b { display: block; color: var(--texto); font-family: "Grotesk"; font-size: 18px; margin-top: 4px; }

/* Sin sitio para dos columnas: la ficha pasa arriba, en dos columnas propias y sin quedarse fija */
@media (max-width: 1100px) {
  .marco { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .columna { grid-column: 1; grid-row: 2; }
  .ficha { grid-column: 1; grid-row: 1; position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .ficha-acciones { grid-column: 1 / -1; }
  .con-ficha .heroe { padding-top: 40px; }
}
@media (max-width: 600px) {
  /* En móvil, solo quién es y las cifras: lo demás (CV, Malt, en qué ayuda) ya está en la portada más abajo. */
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha-bloque, .ficha-acciones { display: none; }
}

/* Móvil */
@media (max-width: 860px) {
  .nav nav a:not(.idioma):not(.boton) { display: none; }
  .heroe { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
  .foto { width: 140px; height: 140px; order: -1; }
  .chat { padding: 22px; border-radius: 22px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .casos, .pasos, .vecinos, .galeria { grid-template-columns: 1fr; }
  .casos .caso:first-child { display: block; }
  .casos .caso:first-child img { height: auto; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--borde); }
  .casos .caso:first-child .cuerpo { padding: 22px 24px 24px; }
  .experiencia .fila { grid-template-columns: 1fr; gap: 4px; }
  .meta { grid-template-columns: 1fr; gap: 14px; }
  .contacto { flex-direction: column; align-items: flex-start; padding: 36px 26px; }
  .pie { flex-direction: column; }
}
@media (max-width: 480px) {
  .nav .nombre, .nav .boton { display: none; }
  .chat-form { flex-direction: column; border-radius: 18px; }
  .chat-form input { padding: 10px 12px; }
  .chat-form .boton { justify-content: center; }
}