/* AAW Tecnología — identidad "Redline" — estilos complementarios a Tailwind */

html {
  scroll-behavior: smooth;
}

body.lenis-active {
  scroll-behavior: auto; /* Lenis controla el scroll suave cuando está activo */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #CC0000;
  outline-offset: 2px;
}

/* Tachado tipo corrección de ingeniería (no un <del> genérico).
   Se anima con CSS puro al cargar la página — no depende de JS para
   ser visible, así que funciona incluso si el JS falla o tarda en cargar. */
.strike {
  position: relative;
  color: #9a9a95;
}
.strike::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 2.5px;
  background: #CC0000;
  transform: scaleX(0) rotate(-1.2deg);
  transform-origin: left;
  animation: strikeIn 0.6s ease 0.5s forwards;
}
@keyframes strikeIn {
  to { transform: scaleX(1) rotate(-1.2deg); }
}

/* Anotación manuscrita roja — misma lógica: animación CSS pura */
.annot {
  font-family: 'Caveat', cursive;
  color: #CC0000;
  opacity: 0;
  transform: translateY(6px) rotate(-2deg);
  animation: annotIn 0.5s ease 1s forwards;
}
@keyframes annotIn {
  to { opacity: 1; transform: translateY(0) rotate(-2deg); }
}

/* Marcas de esquina tipo plano técnico */
.tick {
  position: relative;
}
.tick::before, .tick::after {
  content: '';
  position: absolute;
  background: #0A0A0B;
}
.tick::before { top: 0; left: 0; width: 1px; height: 10px; }
.tick::after  { top: 0; left: 0; width: 10px; height: 1px; }

/* Líneas de cota (dimension lines), como en un plano acotado */
.dim-line {
  border-left: 1px solid #0A0A0B;
  border-right: 1px solid #0A0A0B;
  position: relative;
}
.dim-line::before, .dim-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 1px;
  background: #0A0A0B;
}
.dim-line::before { left: -6px; }
.dim-line::after  { right: -6px; }

/* Sello de aprobación */
.stamp {
  border: 3px solid #CC0000;
  border-radius: 9999px;
  color: #CC0000;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
}

/* Fondo tipo cuadrícula de papel milimetrado, con parallax por scroll (JS) */
.paper-grid {
  background-image:
    linear-gradient(#F0EEE8 1px, transparent 1px),
    linear-gradient(90deg, #F0EEE8 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
}

/* Tarjetas con leve inclinación 3D al pasar el mouse (tilt) */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}

/* Contador animado: evita "salto" de layout antes de iniciar */
.counter {
  font-variant-numeric: tabular-nums;
}