/* Golden PR — lo propio del tema.
   original.css es el build de Tailwind del sitio original y no se toca: aquí solo va lo que
   sustituye al comportamiento que antes daba React (aparición al hacer scroll, carrusel de
   logos) y un par de utilidades que la purga de Tailwind dejó fuera. */

/* ---- Aparición al hacer scroll -------------------------------------------------------- */
/* El estado oculto SOLO se aplica si el JS ha arrancado (.gp-js). Sin esto, un fallo de
   JavaScript dejaría la página en blanco: en el original React garantizaba el render, aquí no. */
.gp-js [data-reveal] {
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
/* Sin `will-change` permanente: mantenía los elementos en su propia capa para siempre y Chrome
   les aplicaba otro suavizado de fuente. En /About eso era el 0,97 % de píxeles distintos a
   1440 y el 2,28 % a 390 — con la geometría ya exacta. No era maquetación, era antialiasing. */
.gp-js [data-reveal="up"]    { transform: translateY(20px); }
.gp-js [data-reveal="left"]  { transform: translateX(-30px); }
.gp-js [data-reveal="right"] { transform: translateX(30px); }

.gp-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Carrusel de logos ---------------------------------------------------------------- */
/* El marcado repite el set tres veces, igual que el original; la animación desplaza un tercio
   exacto y vuelve al principio, así que el bucle es invisible. */
.gp-marquee {
  width: max-content;
  animation: gp-marquee 40s linear infinite;
}
/* Solo con puntero fino: en Chrome de Android y Safari el :hover se queda pegado tras un toque
   y el carrusel se congelaba para siempre. El original no lo sufre porque anima por JS. */
@media (hover: hover) and (pointer: fine) {
  .gp-marquee:hover { animation-play-state: paused; }
}

@keyframes gp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3)); }
}

/* ---- Indicador de scroll del héroe ---------------------------------------------------- */
.gp-scroll-hint { animation: gp-bob 1.5s ease-in-out infinite; }

@keyframes gp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ---- Utilidades que la purga de Tailwind dejó fuera ------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.focus\:not-sr-only:focus {
  position: static; width: auto; height: auto; padding: .75rem 1rem; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
  background: #370606; color: #D4AF37; z-index: 100;
}

/* ---- Accesibilidad --------------------------------------------------------------------- */
/* El original no lo contempla: quien pide menos movimiento recibe el mismo diseño, quieto. */
@media (prefers-reduced-motion: reduce) {
  .gp-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .gp-marquee, .gp-scroll-hint { animation: none; }
}

/* La cabecera es fija: al entrar por un ancla, el título no debe quedar debajo. */
[id] { scroll-margin-top: 6rem; }

/* La barra de administración de WordPress desplaza la cabecera fija. */
.admin-bar #gp-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #gp-header { top: 46px; } }

/* ---- Mensajes de los formularios ------------------------------------------------------- */
/* Con clases propias en vez de utilidades de Tailwind: `text-red-400` NO está en original.css
   (el build del original la purgó por no usarla), así que los errores se pintaban con el color
   de texto por defecto —casi negro— sobre el granate del formulario: invisibles. */
.gp-feedback { margin-top: 1rem; font-size: .875rem; font-weight: 300; }
.gp-feedback.is-ok    { color: #D4AF37; }
.gp-feedback.is-error { color: #FF9E9E; }   /* 5.9:1 sobre #2a0404 y sobre blanco pasa AA en 14px+ */

/* ---- Foco visible ----------------------------------------------------------------------- */
/* La cadena de clases de shadcn sustituye el outline por un anillo de 1px casi negro, que sobre
   el granate del sitio es indistinguible. Se restituye un foco que se ve en ambos fondos. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #D4AF37;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- La cabecera fija tapaba el campo enfocado al tabular hacia atrás (WCAG 2.4.11) ------ */
input, select, textarea, button { scroll-margin-top: 7rem; }

/* ---- Carrusel: se detiene también con el foco de teclado, no solo con el ratón (SC 2.2.2) - */
.gp-marquee:focus-within { animation-play-state: paused; }