/* Raíz juanmartinezgarcia.com — "Ficha de señal". Mismo sistema que /portfolio/ (ver projects/portfolio-jmg/diseno.md en KOS). */
@font-face { font-family: 'Schabo X Condensed'; src: url('fonts/SCHABO-XCondensed.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --fondo: #0b0b0b;
  --papel: #e4e2dc;
  --papel-2: #d9d6ce;
  --tinta: #111;
  --gris: #5d5c58;
  --linea: rgba(17, 17, 17, .22);
  --acento: #ff4a1c;
  --acento-tinta: #a82800;
  --f-titulo: 'Schabo X Condensed', 'Arial Narrow', sans-serif;
  --f-texto: 'Space Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --margen: clamp(6px, 1.6vmin, 24px);
  --pad: clamp(10px, 2.2vmin, 22px);
  --radio: 18px;
  --chaflan: clamp(28px, 7vmin, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; height: 100dvh; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font: 400 14px/1.3 var(--f-mono);
  overflow: hidden;
  display: grid; place-items: center;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Ficha (móvil vertical por defecto) ---------- */
.ficha {
  position: relative;
  height: calc(100dvh - 2 * var(--margen));
  width: min(calc(100vw - 2 * var(--margen)), 560px);
  padding: var(--pad);
  background: var(--papel);
  border-radius: var(--radio);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas: "barra" "retrato" "identidad" "modulos" "acciones" "pie";
  gap: clamp(6px, 1.3dvh, 14px);
  /* grano */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}
/* chaflán arriba a la derecha */
.ficha::before {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: var(--chaflan); height: var(--chaflan);
  background: var(--fondo);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- Barra ---------- */
.barra {
  grid-area: barra;
  display: flex; align-items: center; gap: 12px;
  padding-right: calc(var(--chaflan) * .55);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.barra b { font-weight: 700; }
.reloj { color: var(--gris); }
.reloj::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--acento); animation: latido 2s steps(2) infinite; }
.idioma { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.idioma a { padding: 4px 2px; color: var(--gris); }
.idioma a[aria-current] { color: var(--tinta); font-weight: 700; }

/* ---------- Retrato ---------- */
.retrato {
  grid-area: retrato;
  position: relative; overflow: hidden;
  background: var(--tinta);
  border-radius: calc(var(--radio) - 6px);
  min-height: 0;
}
.retrato img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
}
.mira { position: absolute; width: 14px; height: 14px; border: 2px solid var(--papel); }
.mira--a { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.mira--b { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.mira--c { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.mira--d { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.hud { position: absolute; inset: 0; color: var(--papel); font-size: 10px; letter-spacing: .12em; }
.hud > span:not(.vertical) { position: absolute; left: 32px; bottom: 12px; background: var(--tinta); padding: 2px 6px; }
.hud .vertical {
  position: absolute; right: 12px; top: 32px;
  writing-mode: vertical-rl; white-space: nowrap;
  background: var(--tinta); padding: 6px 2px;
}

/* ---------- Identidad ---------- */
.identidad { grid-area: identidad; container-type: inline-size; min-width: 0; }
h1 {
  font: 400 min(22cqi, 9.6dvh)/.86 var(--f-titulo);
  text-transform: uppercase; letter-spacing: .005em;
  white-space: nowrap;
}
.bajada { margin-top: 4px; font: 500 clamp(13px, 1.9dvh, 16px)/1.25 var(--f-texto); color: var(--gris); }

/* ---------- Módulos ---------- */
.modulos { grid-area: modulos; border-top: 2px solid var(--tinta); }
.modulo {
  --alto: clamp(40px, 6.6dvh, 60px);
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: 2.4ch 1fr auto 22px; column-gap: 10px;
  min-height: var(--alto);
  padding: 0 6px;
  border-bottom: 1px solid var(--linea);
  transition: background .2s var(--ease), color .2s var(--ease);
  animation: entra .32s var(--ease) both;
}
.modulo:nth-child(2) { animation-delay: .04s; } .modulo:nth-child(3) { animation-delay: .08s; }
.modulo:nth-child(4) { animation-delay: .12s; } .modulo:nth-child(5) { animation-delay: .16s; }
.num { font-size: 11px; color: var(--acento-tinta); font-weight: 700; }
.titulo { font: 400 clamp(26px, 4.4dvh, 40px)/1 var(--f-titulo); text-transform: uppercase; padding-top: .08em; }
.sub { font-size: 11px; color: var(--gris); text-align: right; }
.flecha { width: 22px; height: 22px; justify-self: end; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .25s var(--ease); }
.modulo--principal .flecha { color: var(--acento); }
.modulo:hover, .modulo:focus-visible { background: var(--tinta); color: var(--papel); outline: none; }
.modulo:hover .sub, .modulo:focus-visible .sub { color: var(--papel-2); }
.modulo:hover .num, .modulo:focus-visible .num { color: var(--acento); }
.modulo:hover .flecha, .modulo:focus-visible .flecha { transform: translate(3px, -3px); color: var(--acento); }

/* ---------- Acciones ---------- */
.acciones { grid-area: acciones; display: flex; align-items: center; gap: 8px; }
.redes { display: flex; gap: 0; margin-right: auto; }
.redes a { display: grid; place-items: center; width: 42px; height: 44px; border-radius: 10px; }
.redes a:hover { background: var(--tinta); color: var(--papel); }
.redes svg { width: 22px; height: 22px; }
.boton {
  font: 700 clamp(10px, 2.9vw, 12px)/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
  min-height: 44px; padding: 0 clamp(8px, 2.6vw, 14px); display: inline-flex; white-space: nowrap; align-items: center;
  border: 2px solid var(--tinta); border-radius: 10px; background: none; color: var(--tinta); cursor: pointer;
}
.boton:hover { background: var(--tinta); color: var(--papel); }
.qr { display: none; }

/* ---------- Pie ---------- */
.pie { grid-area: pie; display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .1em; color: var(--gris); }
.barras { width: 96px; height: 16px; color: var(--tinta); }
.pie-gato { margin-left: auto; }

.aviso {
  position: absolute; left: 50%; bottom: calc(var(--pad) + 52px); transform: translate(-50%, 8px);
  background: var(--tinta); color: var(--papel); font-size: 12px; padding: 8px 12px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pantallas bajas: sin retrato grande ---------- */
@media (max-height: 600px) and (orientation: portrait) {
  .ficha { grid-template-rows: auto 0 auto auto auto auto; }
  .retrato { display: none; }
  .pie { display: none; }
}

/* ---------- Horizontal (escritorio, tablet acostada, celular acostado) ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  .ficha {
    width: min(calc(100vw - 2 * var(--margen)), 1400px);
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "barra barra"
      "retrato identidad"
      "retrato modulos"
      "retrato acciones"
      "pie pie";
    column-gap: clamp(16px, 2.6vw, 44px);
  }
  h1 { font-size: min(22cqi, 14dvh); }
  .modulos { display: grid; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
  .modulo { --alto: clamp(36px, 9.5dvh, 84px); }
  .titulo { font-size: clamp(24px, min(4.6vw, 7dvh), 84px); }
  .sub { font-size: 12px; }
  .qr { display: flex; align-items: center; gap: 10px; margin-left: 6px; font-size: 10px; line-height: 1.3; letter-spacing: .1em; color: var(--gris); }
  .qr img { width: clamp(56px, 9dvh, 84px); height: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .pie, .qr, .bajada { display: none; }
  .ficha { grid-template-rows: auto auto minmax(0, 1fr) auto 0; }
}

/* ---------- Pop up de contacto ---------- */
.contacto { margin: auto; border: 2px solid var(--tinta); border-radius: 14px; background: var(--papel); color: var(--tinta); padding: 18px; width: min(92vw, 400px); max-height: 92dvh; overflow: auto; font: 400 14px/1.3 var(--f-mono); }
.contacto::backdrop { background: rgba(17,17,17,.6); }
.contacto h2 { font: 400 32px/1 var(--f-titulo); text-transform: uppercase; margin: 0 0 12px; }
.contacto .cerrar { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; font: 700 20px/1 var(--f-mono); color: var(--tinta); cursor: pointer; border-radius: 10px; }
.contacto .cerrar:hover { background: var(--tinta); color: var(--papel); }
.contacto .opciones { display: grid; gap: 8px; }
.contacto .boton { justify-content: center; text-decoration: none; }
.contacto .boton--lleno { background: var(--tinta); color: var(--papel); }
.contacto .boton--lleno:hover { background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.contacto form { display: grid; gap: 10px; margin-top: 4px; }
.contacto label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contacto input, .contacto textarea { font: 400 16px/1.3 var(--f-texto); color: var(--tinta); background: #fff; border: 2px solid var(--tinta); border-radius: 8px; padding: 9px 10px; width: 100%; box-sizing: border-box; }
.contacto textarea { min-height: 110px; resize: vertical; }
.contacto .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contacto .estado { min-height: 1.3em; font-size: 12px; }
.contacto .volver { background: none; border: 0; padding: 0; font: 700 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; color: var(--tinta); text-decoration: underline; justify-self: start; }

/* Efecto tipográfico del nombre: las letras se desordenan y vuelven a su lugar una a una. */
.ch { display: inline-block; white-space: pre; }
.ch.suelta { color: var(--acento); }

/* Efecto en la foto: desplazamiento de píxeles (displacement) que aparece y desaparece al azar. */
.retrato.glitch img { filter: url(#desplaza); }

/* ---------- 404 ---------- */
.ficha.ficha--404 {
  width: min(calc(100vw - 2 * var(--margen)), 900px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "barra" "." "identidad" "modulos" "pie";
}
.ficha--404 .pie { display: flex; }

@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes latido { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}