/* ==========================================================================
   omarfiguereo.com — Dirección B: manda la imagen.
   La fotografía real de Bellawel carga la página. El sello queda fijo:
   lo constante mientras las obras pasan por detrás.
   ========================================================================== */

:root {
  --ink:        oklch(0.15 0.006 250);
  --ink-2:      oklch(0.20 0.006 250);
  --rule:       oklch(0.30 0.006 250);
  --chalk:      oklch(0.96 0.003 250);
  --chalk-dim:  oklch(0.71 0.006 250);
  --focus:      oklch(0.72 0.19 255);

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --col: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.wrap { max-width: var(--col); margin-inline: auto; padding-inline: var(--gutter); }

/* ─────────────────── el sello: fijo, grande, constante ─────────────────── */

.seal {
  position: fixed;
  top: clamp(1rem, 2.6vw, 2rem);
  left: clamp(1rem, 2.6vw, 2rem);
  width: clamp(54px, 6.2vw, 88px);
  z-index: 30;
  color: #fff;
  /* Sólido con sombra: legible por igual sobre fotografía clara y sobre el fondo oscuro */
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 2px rgba(0, 0, 0, .35));
  pointer-events: none;
}
.seal a { pointer-events: auto; display: block; }

/* Navegación mínima, arriba a la derecha */
.topbar {
  position: fixed;
  top: clamp(1rem, 2.6vw, 2rem);
  right: clamp(1rem, 2.6vw, 2rem);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lang { display: flex; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; backdrop-filter: blur(8px); }
.lang button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.7rem; color: rgba(255,255,255,.75);
  padding: 0.42rem 0.7rem; transition: background .2s, color .2s;
}
.lang button[aria-pressed="true"] { background: #fff; color: #111; }

.topbar__cta {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  text-decoration: none; color: #fff; padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  backdrop-filter: blur(8px); transition: background .25s var(--ease), color .25s var(--ease);
}
.topbar__cta:hover { background: #fff; color: #111; }
@media (max-width: 560px) { .topbar__cta { display: none; } }

/* ──────────────────────────── héroe a sangre ──────────────────────────── */

.hero { position: relative; height: 100svh; min-height: 540px; overflow: hidden; }
/* Sin will-change: mantener la capa GPU viva toda la vida de la página cuesta
   memoria y hace que la imagen no pinte en algunos renderizados. El transform
   del parallax ya promueve la capa mientras se usa. */
.hero__img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.34) 0%, rgba(10,10,12,0) 30%, rgba(10,10,12,.30) 62%, rgba(10,10,12,.88) 100%);
}
.hero__say {
  position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 7vh, 5rem);
  color: #fff;
}
.hero__say h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  max-width: 17ch;
  font-weight: 600;
}
.hero__say p {
  margin-top: 1rem; max-width: 48ch;
  color: rgba(255,255,255,.82); font-size: clamp(0.98rem, 1.4vw, 1.12rem);
}
.hint {
  margin-top: 2rem; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.16em; color: rgba(255,255,255,.62);
  display: flex; align-items: center; gap: 0.6rem;
}
.hint i { width: 34px; height: 1px; background: rgba(255,255,255,.5); display: block; }

/* ───────────────────── franja de hechos verificables ───────────────────── */

.strip { border-bottom: 1px solid var(--rule); }
.strip__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0; padding-block: 0;
}
.strip__cell { padding: 1.5rem 1.4rem 1.5rem 0; border-right: 1px solid var(--rule); }
.strip__cell:last-child { border-right: 0; }
.strip__cell b {
  display: block; font-family: var(--mono); font-size: 1.05rem; font-weight: 500;
  font-variant-numeric: tabular-nums; margin-bottom: 0.25rem;
}
.strip__cell span { font-size: 0.82rem; color: var(--chalk-dim); }
@media (max-width: 620px) {
  .strip__cell { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .strip__cell:last-child { border-bottom: 0; }
}

/* ────────────────────────── láminas de producto ────────────────────────── */

.sec { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.sec--rule { border-top: 1px solid var(--rule); }

.said { max-width: 54ch; }
.said h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); margin-bottom: 0.9rem; }
.said p { color: var(--chalk-dim); }

/* Sobre fondo blanco a propósito: la fotografía de producto viene sobre blanco,
   así que se presenta como lámina de galería en vez de pelear con el negro. */
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.4vw, 1.1rem); margin-top: 2.6rem; }
@media (max-width: 720px) { .plates { grid-template-columns: 1fr 1fr; } .plates > :last-child { display: none; } }

.plate { background: #fff; border-radius: 3px; overflow: hidden; position: relative; }
.plate img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.1s var(--ease); }
.plate:hover img { transform: scale(1.045); }
.plate figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.85rem; font-family: var(--mono); font-size: 0.72rem;
  color: #16171A; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92) 45%);
  font-variant-numeric: tabular-nums;
}

/* ──────────────── plataformas: dos casos a tamaño grande ──────────────── */

.works {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.4vw, 3rem); margin-top: 2.8rem;
}
@media (max-width: 820px) { .works { grid-template-columns: 1fr; } }

.work__shot {
  display: block; border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden; background: var(--ink-2);
}
.work__shot img { width: 100%; transition: transform 1.1s var(--ease); }
.work__shot:hover img { transform: scale(1.03); }
.work h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 1.2rem 0 .5rem; }
.work p { color: var(--chalk-dim); font-size: .97rem; max-width: 42ch; }
.work .golink { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .work__shot:hover img { transform: none; } }

.facts { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.facts li {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1rem;
  padding-block: 0.5rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5;
}
.facts li > :first-child { color: var(--chalk-dim); }
@media (max-width: 460px) { .facts li { grid-template-columns: 1fr; gap: 0.1rem; } }

/* Franja de datos a ancho completo, bajo los dos casos */
.facts--wide { margin-top: 2.8rem; }
.facts--wide li { grid-template-columns: 11rem 1fr; padding-block: 0.7rem; }
.facts--wide li:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 560px) { .facts--wide li { grid-template-columns: 1fr; gap: 0.1rem; } }

.golink {
  display: inline-block; margin-top: 1.5rem;
  font-family: var(--mono); font-size: 0.82rem; text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.2rem;
  transition: border-color .3s var(--ease);
}
.golink:hover { border-bottom-color: var(--chalk); }
.golink .arw { display: inline-block; transition: transform .3s var(--ease); }
.golink:hover .arw { transform: translateX(4px); }

/* ─────────────────────────── qué construyo ─────────────────────────── */

.rows { margin-top: 2.2rem; }
.row {
  display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
  gap: 0.6rem 3rem; padding-block: 1.5rem; border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row h3 { font-size: 1.1rem; font-weight: 600; }
.row p { color: var(--chalk-dim); font-size: 0.97rem; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }

/* ─────────────────────────────── contacto ─────────────────────────────── */

.end { border-top: 1px solid var(--rule); padding-block: clamp(3.5rem, 9vh, 6rem); }
.end h2 { font-size: clamp(1.7rem, 4.2vw, 3rem); max-width: 15ch; }
.end p { margin-top: 1rem; color: var(--chalk-dim); max-width: 46ch; }
.ways { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.way {
  font-family: var(--mono); font-size: 0.82rem; text-decoration: none;
  padding: 0.85rem 1.4rem; border-radius: 999px; border: 1px solid var(--rule);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.way--solid { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.way--solid:hover { background: #fff; }
.way--line:hover { border-color: var(--chalk); }

.foot { padding-block: 2rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.73rem; color: var(--chalk-dim); }
.foot__in { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; }
.foot__in a { text-decoration: none; }
.foot__in a:hover { color: var(--chalk); }
.foot__in .sp { margin-left: auto; }

/* ─────────────────────────── movimiento ───────────────────────────
   Visible por defecto; JS activa .anim. Sin JS no se pierde nada. */

.anim .up { opacity: 0; transform: translateY(16px); }
.anim .up.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

.anim .hero__say > * { opacity: 0; transform: translateY(14px); }
.anim.ready .hero__say > * { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.anim.ready .hero__say p { transition-delay: .12s; }
.anim.ready .hero__say .hint { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .anim .up, .anim .up.in, .anim .hero__say > *, .anim.ready .hero__say > * {
    opacity: 1 !important; transform: none !important; transition: opacity .2s linear !important;
  }
  .hero__img { transform: none !important; }
  .plate:hover img { transform: none; }
}