/* ==========================================================================
   styles.css — Sistema de diseño "Dylanbrouwer"
   Tipografía brutalista · monocromo + un único acento (Ember) · sin sombras
   · esquinas afiladas (9999px solo en pills de navegación y tags).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fuentes (sustitutas en Google Fonts)
      Anton → display monumental · Inter → cuerpo · JetBrains Mono → metadatos
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* --------------------------------------------------------------------------
   1. Tokens
      Los colores se exponen también como canales RGB para que Tailwind pueda
      aplicar opacidad (bg-onyx/10, border-paper/15…). Ver tailwind.config.
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --c-onyx: #161616;
  --c-onyx-rgb: 22 22 22;
  --c-paper: #f8f8f8;
  --c-paper-rgb: 248 248 248;
  --c-ember: #ff6436; /* SOLO micro-interacciones: puntos de estado, acentos mínimos */
  --c-ember-rgb: 255 100 54;

  /* Gradiente de texto display: negro → gris claro → blanco.
     El negro arranca fuera de la caja (-30%) para que la parte superior de
     las letras siga siendo legible sobre Onyx. */
  --gradient-display: linear-gradient(180deg, #000000 -30%, #bdbdbd 42%, #ffffff 92%);

  /* Tipografía */
  --font-display: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Movimiento — main.js lee estas mismas curvas (fuente única de verdad) */
  --ease-enter: cubic-bezier(0.32, 0.72, 0, 1); /* entradas */
  --ease-exit: cubic-bezier(0.19, 1, 0.22, 1);  /* salidas */
  --dur-enter: 1100ms;
  --dur-exit: 650ms;
  --dur-micro: 350ms;
}

/* --------------------------------------------------------------------------
   2. Guardas del sistema
      Prohibido: sombras y elevaciones. La profundidad = contraste + 1px.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
html {
  background: var(--c-onyx);
  -webkit-text-size-adjust: 100%;
}

/* Sin JS: scroll suave nativo. Con JS lo gestiona main.js con la curva propia
   (si ambos estuvieran activos, el navegador suavizaría cada frame dos veces). */
html.no-js {
  scroll-behavior: smooth;
}

body {
  background: var(--c-onyx);
  color: var(--c-paper);
  font-family: var(--font-sans);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--c-paper);
  color: var(--c-onyx);
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

/* Destinos de anclas enfocados por JS: no mostrar contorno */
[tabindex="-1"]:focus {
  outline: none;
}

/* Metadatos: JetBrains Mono SIEMPRE en mayúsculas (también la utilidad
   font-mono de Tailwind, para que la regla no dependa de recordar la clase). */
.meta,
.font-mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.meta {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.08em;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--c-paper);
  color: var(--c-onyx);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   4. Navegación flotante — pills
      El tema (claro/oscuro) lo cambia main.js según la sección bajo la barra.
   -------------------------------------------------------------------------- */
.nav {
  --pill-fg: var(--c-paper);
  --pill-inv: var(--c-onyx);
  --pill-bg: rgb(var(--c-onyx-rgb) / 0.7);
  --pill-line: rgb(var(--c-paper-rgb) / 0.18);
  pointer-events: none; /* la franja no bloquea clics; solo los pills */
}

.nav[data-nav-theme="light"] {
  --pill-fg: var(--c-onyx);
  --pill-inv: var(--c-paper);
  --pill-bg: rgb(var(--c-paper-rgb) / 0.72);
  --pill-line: rgb(var(--c-onyx-rgb) / 0.16);
}

.pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 1rem;
  border: 1px solid var(--pill-line);
  border-radius: 9999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    background-color var(--dur-micro) var(--ease-exit),
    color var(--dur-micro) var(--ease-exit),
    border-color var(--dur-micro) var(--ease-exit);
}

.pill:hover {
  background: var(--pill-fg);
  border-color: var(--pill-fg);
  color: var(--pill-inv);
}

/* Móvil angosto: las 3 píldoras deben caber en una línea (≥ 320px) */
.pill__short {
  display: none;
}

@media (max-width: 479px) {
  .pill {
    gap: 0.4rem;
    padding: 0 0.75rem;
  }

  .pill__full {
    display: none;
  }

  .pill__short {
    display: inline;
  }
}

/* Enlace activo: micro-punto Ember */
.pill[aria-current="true"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--c-ember);
}

/* --------------------------------------------------------------------------
   5. Puntos de estado (uso legítimo de Ember)
   -------------------------------------------------------------------------- */
.status-dot {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--c-ember);
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: ping 2.4s var(--ease-exit) infinite;
}

.status-dot--idle {
  background: currentColor;
  opacity: 0.35;
}

.status-dot--idle::after {
  display: none;
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   6. Tecnologías (íconos de Simple Icons, monocromos) y enlace del proyecto
      Píldoras con el ícono; el nombre aparece como tooltip al pasar el cursor
      y está en el alt de la imagen para lectores de pantalla.
   -------------------------------------------------------------------------- */
.tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(var(--c-onyx-rgb) / 0.15);
  border-radius: 9999px;
  transition: border-color var(--dur-micro) var(--ease-exit);
}

.tech__item img {
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0.7;
  transition: opacity var(--dur-micro) var(--ease-exit);
}

.project:hover .tech__item {
  border-color: rgb(var(--c-onyx-rgb) / 0.35);
}

.tech__item:hover img {
  opacity: 1;
}

.tech__item::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  z-index: 2;
  padding: 0.4rem 0.6rem;
  background: var(--c-onyx);
  color: var(--c-paper);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--dur-micro) var(--ease-exit),
    transform var(--dur-micro) var(--ease-exit);
}

.tech__item:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-timing-function: var(--ease-enter);
}

/* "Visitar ↗": se invierte (Onyx) al pasar el cursor */
.project__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(var(--c-onyx-rgb) / 0.2);
  color: var(--c-onyx);
  transition:
    background-color var(--dur-micro) var(--ease-exit),
    color var(--dur-micro) var(--ease-exit);
}

.project__link .meta {
  flex: none;
  color: rgb(var(--c-onyx-rgb) / 0.5);
  transition: color var(--dur-micro) var(--ease-exit);
}

.project__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project__arrow {
  flex: none;
  font-family: var(--font-mono);
  transition: transform var(--dur-micro) var(--ease-exit);
}

.project__link:hover {
  background: var(--c-onyx);
  color: var(--c-paper);
}

.project__link:hover .meta {
  color: rgb(var(--c-paper-rgb) / 0.55);
}

.project__link:hover .project__arrow {
  transform: translate(3px, -3px);
  transition-timing-function: var(--ease-enter);
}

/* --------------------------------------------------------------------------
   7. Texto con gradiente + título monumental del hero
   -------------------------------------------------------------------------- */
.text-gradient {
  background-image: var(--gradient-display);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, min(19vw, 21svh), 24rem);
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  /* Ancho proporcional a la letra (no a la ventana): la escalera
     Automatizo → Analizo → Construyo conserva su forma aunque en pantallas
     anchas el tamaño lo limite la altura; el bloque se centra. */
  width: min(100%, 7.2em);
  margin-inline: auto;
}

/* Con notas visibles, se reserva espacio a la derecha para "(FULL-STACK)" */
@media (min-width: 1024px) {
  .hero-title {
    width: min(100% - 15rem, 7.2em);
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: clamp(3.5rem, min(16.5vw, 20svh), 24rem);
  }
}

/* Máscara por línea: el padding/margen negativo amplía el área de recorte
   para no cortar acentos ni la parte alta de las mayúsculas. */
.line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0;
  margin: -0.06em 0;
}

/* Donde se puede, recorta solo en vertical (la máscara de entrada) y deja
   asomar las notas, que cuelgan fuera de la palabra a la derecha. */
@supports (overflow: clip) {
  .line {
    overflow-x: visible;
    overflow-y: clip;
  }
}

/* Línea del medio centrada entre "Automatizo" (izquierda) y "Construyo" (derecha) */
.line--indent {
  text-align: center;
}

.line--end {
  text-align: right;
}

.line__inner {
  display: inline-flex;
  align-items: flex-start;
}

/* Las notas no ocupan espacio: la alineación se mide solo con las palabras,
   así la "A" de Automatizo y la "O" de Construyo quedan a la misma distancia
   de los bordes. */
.line__inner {
  position: relative;
}

.line__note {
  display: none; /* en móvil y tablet no caben junto a la palabra */
  position: absolute;
  top: 0;
  left: 100%;
  white-space: nowrap;
  margin: 0.55em 0 0 0.7rem;
  color: rgb(var(--c-paper-rgb) / 0.4);
  font: 500 clamp(9px, 0.85vw, 12px)/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .line__note {
    display: inline;
  }
}

/* Entrada del hero (main.js añade .is-ready a <html> cuando cargan las fuentes) */
.js .line__inner {
  transform: translate3d(0, 108%, 0);
  transition: transform 1.4s var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}

.is-ready .line__inner {
  transform: none;
}

/* --------------------------------------------------------------------------
   8. Revelado al hacer scroll (Intersection Observer en main.js)
      · Estado base  → transición de SALIDA  (--ease-exit)
      · .is-visible  → transición de ENTRADA (--ease-enter)
      La curva aplicada es la del estado de destino, así cada dirección usa
      la suya sin JS adicional. --d escalona elementos (90ms por paso).
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
  transition:
    opacity var(--dur-exit) var(--ease-exit),
    transform var(--dur-exit) var(--ease-exit);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
  transition-timing-function: var(--ease-enter);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* Variante cortina (visuales de proyecto). El recorte va en el HIJO: un
   clip-path vacío en el propio elemento observado haría que el
   IntersectionObserver nunca lo detectara. */
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
}

.js [data-reveal="clip"] > * {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--dur-exit) var(--ease-exit),
    transform 1.2s var(--ease-exit);
}

.js [data-reveal="clip"].is-visible > * {
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 1.3s var(--ease-enter) calc(var(--d, 0) * 90ms),
    transform 1.2s var(--ease-exit);
}

/* --------------------------------------------------------------------------
   9. Enlaces de texto y CTA
   -------------------------------------------------------------------------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.3rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  color: rgb(var(--c-paper-rgb) / 0.55);
  transition:
    background-size 700ms var(--ease-exit),
    color var(--dur-micro) var(--ease-exit);
}

.text-link:hover {
  background-size: 100% 1px;
  color: var(--c-paper);
  transition-timing-function: var(--ease-enter);
}

.text-link__arrow {
  transition: transform var(--dur-micro) var(--ease-enter);
}

.text-link:hover .text-link__arrow {
  transform: translateY(3px);
}

/* Indicador de scroll */
.scroll-cue {
  align-items: center;
  gap: 0.9rem;
  color: rgb(var(--c-paper-rgb) / 0.5);
}

.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 3rem;
  overflow: hidden;
  background: rgb(var(--c-paper-rgb) / 0.15);
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-paper);
  animation: cue 2.4s var(--ease-enter) infinite;
}

@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  55% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

/* --------------------------------------------------------------------------
   10. Marquee de stack
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  flex: none;
}

.marquee__group li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.marquee__group li::after {
  content: "/";
  padding: 0 1.75rem;
  opacity: 0.3;
}

@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   11. Tarjetas de proyecto — 0px de radio, sin sombras.
       La rejilla usa gap-px sobre fondo de línea: hairlines de 1px exactos.
   -------------------------------------------------------------------------- */
.project {
  background: var(--c-paper);
  border-radius: 0;
  transition: background-color var(--dur-micro) var(--ease-exit);
}

.project:hover {
  background: #ffffff;
}

.project__visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-onyx);
  border-radius: 0;
}

.project__visual svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 1.2s var(--ease-exit);
}

.project:hover .project__visual svg {
  transform: scale(1.025);
}

/* Primitivas de las ilustraciones SVG (monocromo + punto Ember) */
.v-dot { fill: rgb(var(--c-paper-rgb) / 0.09); }
.v-line { fill: none; stroke: rgb(var(--c-paper-rgb) / 0.14); stroke-width: 1; }
.v-stroke { fill: var(--c-onyx); stroke: rgb(var(--c-paper-rgb) / 0.35); stroke-width: 1; }
.v-stroke-strong { fill: var(--c-onyx); stroke: var(--c-paper); stroke-width: 1; }
.v-dashed { fill: none; stroke: rgb(var(--c-paper-rgb) / 0.3); stroke-width: 1; stroke-dasharray: 3 4; }
.v-fill-soft { fill: rgb(var(--c-paper-rgb) / 0.16); }
.v-fill-mid { fill: rgb(var(--c-paper-rgb) / 0.45); }
.v-fill-strong { fill: var(--c-paper); }
.v-ember { fill: var(--c-ember); }
.v-port { fill: var(--c-onyx); stroke: rgb(var(--c-paper-rgb) / 0.6); stroke-width: 1; }

.v-text,
.v-text-dim {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: rgb(var(--c-paper-rgb) / 0.85);
}

.v-text-dim {
  fill: rgb(var(--c-paper-rgb) / 0.4);
}

.v-display {
  font-family: var(--font-display);
  font-size: 40px;
  fill: var(--c-paper);
}

/* Conectores de flujo (n8n) */
.v-flow {
  fill: none;
  stroke: rgb(var(--c-paper-rgb) / 0.45);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  animation: v-flow 1.1s linear infinite;
}

@keyframes v-flow {
  to {
    stroke-dashoffset: -16;
  }
}

/* Barras de SLA (escalaciones): se llenan al revelarse la figura */
.v-hbar {
  transform-box: fill-box;
  transform-origin: 0 50%;
}

.js .v-hbar {
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-enter) calc(var(--i, 0) * 70ms + 300ms);
}

.js .is-visible .v-hbar {
  transform: scaleX(1);
}

/* Detecciones (Focus Monitor) */
.v-box {
  fill: none;
  stroke: var(--c-paper);
  stroke-width: 1;
}

.v-bracket {
  fill: none;
  stroke: rgb(var(--c-paper-rgb) / 0.6);
  stroke-width: 1.5;
}

.v-text-inv {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--c-onyx);
}

.v-blink {
  animation: v-blink 1.6s steps(1, end) infinite;
}

@keyframes v-blink {
  50% {
    opacity: 0;
  }
}

/* Tarjeta arrastrada (kanban) */
.v-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: v-float 3.2s var(--ease-enter) infinite alternate;
}

@keyframes v-float {
  from {
    transform: translate(0, 0) rotate(3deg);
  }
  to {
    transform: translate(-6px, -5px) rotate(-1deg);
  }
}

/* --------------------------------------------------------------------------
   12. Contacto — enlaces fantasma (Ghost Text Links)
       Texto tenue que se "llena" al pasar el cursor; sin fondos ni cajas.
   -------------------------------------------------------------------------- */
.ghost-link {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgb(var(--c-paper-rgb) / 0.15);
}

.ghost-link__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgb(var(--c-paper-rgb) / 0.4);
}

.ghost-link__text {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: rgb(var(--c-paper-rgb) / 0.28);
  transition: color 600ms var(--ease-exit);
}

.ghost-link__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 500 14px/1 var(--font-mono);
  transition: transform 600ms var(--ease-exit);
}

/* Micro-acento: punto Ember que aparece al hover */
.ghost-link__arrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--c-ember);
  transform: scale(0);
  transition: transform var(--dur-micro) var(--ease-exit);
}

.ghost-link:hover .ghost-link__text,
.ghost-link:focus-visible .ghost-link__text {
  color: var(--c-paper);
  transition-timing-function: var(--ease-enter);
}

.ghost-link:hover .ghost-link__arrow {
  transform: translate(4px, -4px);
  transition-timing-function: var(--ease-enter);
}

.ghost-link:hover .ghost-link__arrow::before {
  transform: scale(1);
  transition-timing-function: var(--ease-enter);
}

/* --------------------------------------------------------------------------
   13. Formulario — bordes de 1px, esquinas afiladas
   -------------------------------------------------------------------------- */
.field {
  display: grid;
  gap: 0.6rem;
}

.field__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgb(var(--c-paper-rgb) / 0.55);
}

.field__input {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.2);
  border-radius: 0;
  background: transparent;
  color: var(--c-paper);
  font: 400 1rem/1.5 var(--font-sans);
  caret-color: var(--c-ember);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--dur-micro) var(--ease-exit),
    background-color var(--dur-micro) var(--ease-exit);
}

.field__input::placeholder {
  color: rgb(var(--c-paper-rgb) / 0.28);
}

.field__input:hover {
  border-color: rgb(var(--c-paper-rgb) / 0.4);
}

.field__input:focus {
  outline: none;
  border-color: var(--c-paper);
  background: rgb(var(--c-paper-rgb) / 0.03);
}

.field__input[aria-invalid="true"] {
  border-color: rgb(var(--c-paper-rgb) / 0.85);
  border-style: dashed;
}

textarea.field__input {
  min-height: 11rem;
  resize: vertical;
}

/* Autocompletado de Chrome sin box-shadow (prohibido): retrasamos el fondo */
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-paper);
  transition: background-color 99999s linear 0s;
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: rgb(var(--c-paper-rgb) / 0.75);
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field__error:not(:empty) {
  display: flex;
}

.field__error::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--c-ember);
}

/* Botón de envío: rectangular (los pills son solo para nav y tags). Nunca Ember. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  height: 3.5rem;
  padding: 0 1.5rem;
  border: 1px solid var(--c-paper);
  border-radius: 0;
  background: var(--c-paper);
  color: var(--c-onyx);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-exit),
    color var(--dur-micro) var(--ease-exit);
}

.btn:hover {
  background: transparent;
  color: var(--c-paper);
}

.btn__arrow {
  transition: transform var(--dur-micro) var(--ease-enter);
}

.btn:hover .btn__arrow {
  transform: translateX(5px);
}

.btn--ghost {
  background: transparent;
  color: var(--c-paper);
}

.btn--ghost:hover {
  background: var(--c-paper);
  color: var(--c-onyx);
}

.btn[disabled] {
  cursor: progress;
  opacity: 0.55;
}

.form-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgb(var(--c-paper-rgb) / 0.5);
}

[data-state="success"] .form-status,
[data-state="error"] .form-status {
  color: var(--c-paper);
}

/* Confirmación de envío: cubre el formulario con una cortina (entrada) */
.form-done {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgb(var(--c-paper-rgb) / 0.2);
  background: var(--c-onyx);
  animation: done-in 900ms var(--ease-enter) both;
}

.form-done[hidden] {
  display: none;
}

.form-done__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-paper);
}

.form-done__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.form-done__text {
  max-width: 28rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgb(var(--c-paper-rgb) / 0.65);
}

.form-done__text [data-done-email] {
  color: var(--c-paper);
}

@keyframes done-in {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Campo trampa anti-spam: fuera de pantalla pero no display:none */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   14. Footer — marca de agua en contorno
   -------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-size: 14vw;
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--c-paper-rgb) / 0.22);
}

/* --------------------------------------------------------------------------
   15. Showreel — monitor en CSS 3D con apps HTML "en ejecución"
       .showreel es alto (320svh) y .showreel__stage se queda fija (sticky):
       main.js convierte el avance del scroll en la rotación/escala del monitor
       hasta que la pantalla llena el viewport. Todo el contenido de la
       pantalla usa unidades cqw (relativas al ancho de la pantalla), así
       escala con el monitor sin depender de la resolución.
   -------------------------------------------------------------------------- */
.showreel {
  position: relative;
  height: 320svh;
  background: var(--c-onyx);
}

.showreel__stage {
  --p: 0; /* progreso del scroll 0 → 1 (main.js) */
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: 50% 40%;
}

.no-js .showreel {
  height: auto;
}

/* En móvil la pantalla termina ajustada al ancho: basta un recorrido corto */
@media (max-width: 767px) {
  .showreel {
    height: 220svh;
  }
}

.no-js .showreel__stage {
  position: relative;
}

/* Capas que se desvanecen a medida que la pantalla crece */
.showreel__fade {
  opacity: clamp(0, calc(1 - var(--p) * 1.7), 1);
}

.showreel__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 30vw;
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--c-paper-rgb) / 0.09);
  pointer-events: none;
  user-select: none;
}

.showreel__meta,
.showreel__hint {
  position: absolute;
  z-index: 2;
  color: rgb(var(--c-paper-rgb) / 0.5);
  pointer-events: none;
}

.showreel__meta {
  top: 5rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(var(--c-paper-rgb) / 0.15);
}

.showreel__hint {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .showreel__meta {
    top: 6rem;
    left: 1.5rem;
    right: 1.5rem;
  }
}

/* --- Monitor ------------------------------------------------------------ */
.monitor {
  /* --sw/--sh: tamaño de la pantalla en px (main.js). Valores de respaldo sin JS. */
  --sw: 80vw;
  --sh: 50vw;
  --pad: calc(var(--sw) * 0.018);
  --chin: calc(var(--sw) * 0.045);
  --bw: calc(var(--sw) + var(--pad) * 2);
  --bh: calc(var(--sh) + var(--pad) + var(--chin));
  --depth: calc(var(--sw) * 0.028);
  --stand: calc(var(--sh) * 0.26);
  position: absolute;
  /* El centro de la PANTALLA coincide con el centro del escenario */
  left: calc(50% - var(--bw) / 2);
  top: calc(50% - var(--pad) - var(--sh) / 2);
  width: var(--bw);
  height: var(--bh);
  transform-style: preserve-3d;
  transform-origin: calc(var(--bw) / 2) calc(var(--pad) + var(--sh) / 2);
}

.monitor__face,
.monitor__neck,
.monitor__base {
  position: absolute;
  background: #1c1c1c;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.07);
}

.monitor__face--back {
  inset: 0;
  background: #131313;
  transform: translateZ(calc(var(--depth) * -1));
}

.monitor__face--left,
.monitor__face--right {
  top: 0;
  width: var(--depth);
  height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}

.monitor__face--left { left: 0; }
.monitor__face--right { left: 100%; }

.monitor__face--top,
.monitor__face--bottom {
  left: 0;
  width: 100%;
  height: var(--depth);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}

.monitor__face--top { top: 0; }
.monitor__face--bottom { top: 100%; }

.monitor__neck {
  left: calc(50% - var(--sw) * 0.04);
  top: calc(var(--bh) - 2px);
  width: calc(var(--sw) * 0.08);
  height: var(--stand);
  transform: translateZ(calc(var(--depth) * -1.8));
}

.monitor__base {
  left: calc(50% - var(--sw) * 0.17);
  top: calc(var(--bh) + var(--stand) - var(--sw) * 0.09);
  width: calc(var(--sw) * 0.34);
  height: calc(var(--sw) * 0.18);
  background: #222222;
  border-color: rgb(var(--c-paper-rgb) / 0.1);
  transform: translateZ(calc(var(--depth) * -1.8)) rotateX(90deg);
}

.monitor__bezel {
  position: absolute;
  inset: 0;
  padding: var(--pad) var(--pad) var(--chin);
  background: #0b0b0b;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.14);
}

/* LED de encendido: micro-acento Ember */
.monitor__led {
  position: absolute;
  left: 50%;
  bottom: calc(var(--chin) / 2);
  width: calc(var(--sw) * 0.005);
  height: calc(var(--sw) * 0.005);
  border-radius: 9999px;
  background: var(--c-ember);
  transform: translate(-50%, 50%);
}

/* --- Pantalla --------------------------------------------------------------- */
.screen {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--sw);
  height: var(--sh);
  overflow: hidden;
  background: #101010;
  color: var(--c-paper);
  container-type: size;
  font-family: var(--font-sans);
}

.screen__bar,
.screen__status {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 0 1.6cqw;
  font: 500 0.9cqw/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--c-paper-rgb) / 0.5);
}

.screen__bar {
  justify-content: space-between;
  height: 4cqw;
  border-bottom: 1px solid rgb(var(--c-paper-rgb) / 0.1);
}

.screen__brand {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  color: var(--c-paper);
}

.screen__brand .status-dot {
  width: 0.5cqw;
  height: 0.5cqw;
}

.screen__tabs {
  display: flex;
  gap: 0.5cqw;
}

.screen__tab {
  height: 2.4cqw;
  padding: 0 1.1cqw;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.16);
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-exit),
    color var(--dur-micro) var(--ease-exit),
    border-color var(--dur-micro) var(--ease-exit);
}

.screen__tab:hover {
  border-color: rgb(var(--c-paper-rgb) / 0.5);
  color: var(--c-paper);
}

.screen__tab[aria-selected="true"] {
  background: var(--c-paper);
  border-color: var(--c-paper);
  color: var(--c-onyx);
}

.screen__status {
  height: 3.2cqw;
  border-top: 1px solid rgb(var(--c-paper-rgb) / 0.1);
  font-size: 0.8cqw;
}

.screen__status strong {
  color: var(--c-paper);
  font-weight: 500;
}

.screen__progress {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgb(var(--c-paper-rgb) / 0.12);
}

.screen__progress span {
  position: absolute;
  inset: 0;
  background: var(--c-paper);
  transform-origin: 0 50%;
  transform: scaleX(var(--cycle, 0));
}

.screen__apps {
  position: relative;
  min-height: 0;
}

/* Cambio de app: cortina hacia abajo al entrar, hacia arriba al salir */
.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 2cqw;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 700ms var(--ease-exit),
    visibility 0s linear 700ms;
}

.app.is-active {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 1100ms var(--ease-enter),
    visibility 0s linear 0s;
}

.app__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2cqw;
  margin-bottom: 1.6cqw;
}

.app__title {
  font-family: var(--font-display);
  font-size: 3.4cqw;
  line-height: 0.9;
  text-transform: uppercase;
}

.app__kpis {
  display: flex;
  gap: 2.4cqw;
  text-align: right;
}

.kpi__value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4cqw;
  line-height: 1;
}

.kpi__label,
.app__label {
  display: block;
  margin-top: 0.3cqw;
  font: 500 0.72cqw/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--c-paper-rgb) / 0.45);
}

.app__body {
  flex: 1;
  min-height: 0;
}

/* App 1 · Taller (kanban) */
.kanban {
  position: relative; /* offsetParent de las tarjetas para el FLIP */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1cqw;
  height: 100%;
}

.kanban__col {
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
  min-height: 0;
  padding: 0.8cqw;
  overflow: hidden;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.1);
}

.kanban__head {
  display: flex;
  justify-content: space-between;
  font: 500 0.8cqw/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--c-paper-rgb) / 0.5);
}

.kanban__list {
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
}

.kcard {
  display: grid;
  gap: 0.35cqw;
  padding: 0.8cqw 0.9cqw;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.16);
  background: #151515;
  transition: border-color 600ms var(--ease-exit);
}

.kcard.is-hot {
  border-color: var(--c-paper);
}

.kcard__plate,
.kcard__meta {
  font: 500 0.85cqw/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kcard__svc {
  font-size: 1.05cqw;
  line-height: 1.25;
  color: rgb(var(--c-paper-rgb) / 0.85);
}

.kcard__meta {
  font-size: 0.7cqw;
  color: rgb(var(--c-paper-rgb) / 0.4);
}

.kcard[data-stage="2"] .kcard__meta::after,
.kcard[data-stage="3"] .kcard__meta::after {
  content: " · Evidencia ✓";
  color: rgb(var(--c-paper-rgb) / 0.7);
}

/* App 2 · CRM */
.crm {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.6cqw;
  height: 100%;
}

.feed {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.1);
}

.feed__row {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 0.7fr 0.7fr 1.2fr;
  align-items: center;
  gap: 1cqw;
  padding: 0.85cqw 1.2cqw;
  border-bottom: 1px solid rgb(var(--c-paper-rgb) / 0.08);
  font-size: 1cqw;
  animation: row-in 700ms var(--ease-enter) both;
}

.feed__row--head {
  font: 500 0.72cqw/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--c-paper-rgb) / 0.45);
  animation: none;
}

.feed__row > span:not(:nth-child(2)) {
  font-family: var(--font-mono);
  font-size: 0.8cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--c-paper-rgb) / 0.6);
}

.feed__status {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
}

.feed__row.is-calling .feed__status {
  color: var(--c-paper);
}

.feed__row.is-calling .feed__status::before {
  content: "";
  width: 0.45cqw;
  height: 0.45cqw;
  border-radius: 9999px;
  background: var(--c-ember);
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(-60%);
  }
}

.rr {
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
  padding: 1.2cqw;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.1);
}

.rr__row {
  display: grid;
  grid-template-columns: 4cqw 1fr 2.4cqw;
  align-items: center;
  gap: 0.8cqw;
  font: 500 0.75cqw/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: rgb(var(--c-paper-rgb) / 0.6);
}

.rr__row span:last-child {
  text-align: right;
}

.rr__label {
  margin-top: 1.2cqw;
  padding-top: 1.2cqw;
  border-top: 1px solid rgb(var(--c-paper-rgb) / 0.08);
}

.hours {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 0.5cqw;
  min-height: 0;
}

.hours i {
  flex: 1;
  height: calc(var(--v, 0) * 100%);
  background: rgb(var(--c-paper-rgb) / 0.18);
  transition: height 600ms var(--ease-enter);
}

.hours i:last-child {
  background: var(--c-paper);
}

.bar {
  position: relative;
  height: 0.35cqw;
  background: rgb(var(--c-paper-rgb) / 0.12);
}

.bar > i {
  position: absolute;
  inset: 0;
  background: rgb(var(--c-paper-rgb) / 0.55);
  transform-origin: 0 50%;
  transform: scaleX(var(--v, 0));
  transition: transform 600ms var(--ease-enter);
}

/* App 3 · SLA */
.sla {
  display: grid;
  align-content: start;
  height: 100%;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.1);
}

.sla__row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.1fr 2.2fr 0.9fr;
  align-items: center;
  gap: 1.2cqw;
  padding: 1cqw 1.2cqw;
  border-bottom: 1px solid rgb(var(--c-paper-rgb) / 0.08);
  font: 500 0.8cqw/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--c-paper-rgb) / 0.6);
  transition: opacity 400ms var(--ease-exit);
}

.sla__row--head {
  font-size: 0.72cqw;
  color: rgb(var(--c-paper-rgb) / 0.45);
}

.sla__row > span:first-child {
  color: var(--c-paper);
}

.sla__left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5cqw;
}

.sla__row.is-risk .sla__left {
  color: var(--c-paper);
}

.sla__row.is-risk .sla__left::before {
  content: "";
  width: 0.45cqw;
  height: 0.45cqw;
  border-radius: 9999px;
  background: var(--c-ember);
  animation: v-blink 1.2s steps(1, end) infinite;
}

.sla__row.is-risk .bar > i {
  background: var(--c-paper);
}

.sla__row.is-done {
  opacity: 0.35;
}

/* App 4 · Focus Monitor */
.focus {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 1.6cqw;
  height: 100%;
}

.cam {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.14);
  background-image: radial-gradient(rgb(var(--c-paper-rgb) / 0.08) 1px, transparent 1px);
  background-size: 1.2cqw 1.2cqw;
  font: 500 0.75cqw/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 400ms var(--ease-exit);
}

.cam.is-alert {
  border-color: var(--c-paper);
}

.cam__hud {
  position: absolute;
  left: 1.2cqw;
  right: 1.2cqw;
  display: flex;
  justify-content: space-between;
  color: rgb(var(--c-paper-rgb) / 0.6);
}

.cam__hud--top { top: 1.2cqw; }
.cam__hud--bottom { bottom: 1.2cqw; align-items: center; gap: 1.2cqw; }
.cam__hud--bottom .bar { flex: 1; }

.cam__rec {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  color: var(--c-paper);
}

.cam__rec::before {
  content: "";
  width: 0.5cqw;
  height: 0.5cqw;
  border-radius: 9999px;
  background: var(--c-ember);
  animation: v-blink 1.6s steps(1, end) infinite;
}

.cam__zone {
  position: absolute;
  inset: 12% 16% 0;
  border: 1px dashed rgb(var(--c-paper-rgb) / 0.25);
  border-bottom: 0;
}

/* Silueta (ilustración, no contenedor) */
.cam__head,
.cam__body {
  position: absolute;
  background: rgb(var(--c-paper-rgb) / 0.13);
}

.cam__head {
  left: 37%;
  top: 24%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 9999px;
}

.cam__body {
  left: 27%;
  top: 56%;
  width: 34%;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}

.cam__box {
  position: absolute;
  border: 1px solid var(--c-paper);
  animation: jitter 2.4s steps(6, end) infinite;
}

.cam__box--person {
  left: 25%;
  top: 19%;
  width: 38%;
  bottom: 0;
}

.cam__box--phone {
  left: 66%;
  top: 46%;
  width: 6%;
  height: 20%;
  opacity: 0;
  transition: opacity 300ms var(--ease-exit);
}

.cam__box--phone::after {
  content: "";
  position: absolute;
  inset: 12% 18%;
  background: rgb(var(--c-paper-rgb) / 0.4);
}

.cam.has-phone .cam__box--phone {
  opacity: 1;
}

.cam__tag {
  position: absolute;
  bottom: 100%;
  left: -1px;
  padding: 0.35cqw 0.5cqw;
  background: var(--c-paper);
  color: var(--c-onyx);
  white-space: nowrap;
}

.cam__alert {
  position: absolute;
  top: 3.6cqw;
  left: 50%;
  padding: 0.6cqw 1cqw;
  background: var(--c-paper);
  color: var(--c-onyx);
  white-space: nowrap;
  transform: translate(-50%, -30%);
  opacity: 0;
  transition:
    opacity 300ms var(--ease-exit),
    transform 300ms var(--ease-exit);
}

.cam.is-alert .cam__alert {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-timing-function: var(--ease-enter);
}

@keyframes jitter {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(0.15cqw, -0.1cqw); }
  66% { transform: translate(-0.1cqw, 0.12cqw); }
}

.log {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--c-paper-rgb) / 0.1);
}

.log__item {
  display: grid;
  gap: 0.35cqw;
  padding: 0.9cqw 1.1cqw;
  border-bottom: 1px solid rgb(var(--c-paper-rgb) / 0.08);
  font-size: 0.95cqw;
  line-height: 1.3;
  color: rgb(var(--c-paper-rgb) / 0.8);
  animation: row-in 700ms var(--ease-enter) both;
}

.log__item time {
  font: 500 0.7cqw/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: rgb(var(--c-paper-rgb) / 0.4);
}

/* --------------------------------------------------------------------------
   16. Accesibilidad — movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal],
  .js [data-reveal="clip"] > *,
  .js .line__inner,
  .js .v-hbar {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Showreel sin recorrido: el monitor queda fijo de frente (main.js) */
  .showreel {
    height: auto;
  }

  .showreel__stage {
    position: relative;
  }
}