/* Pro Agro - estilos base + animaciones simples */

:root {
  --pa-red: #e21118;
  --pa-red-dark: #c40e14;
  --pa-text: #666666;
  --pa-text-light: #8e8e8e;
  --pa-bg-section: #f7f7f7;
  --pa-bg-card: #fffff3;
  --pa-footer: #0f0e0e;
  --pa-footer-text: #fff7ed;
  --pa-nav: #717171;
  --pa-yellow: #edb313;
  --pa-orange: #eb7102;
  --pa-green: #708329;
  --pa-saborizantes: #daa520;
  --pa-esencias: #cc6600;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  color: var(--pa-text);
  background: #ffffff;
}

/* Reveal on scroll (IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* Float animation for hero ellipses */
@keyframes paFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.animate-float { animation: paFloat 4s ease-in-out infinite; }
.animate-float-slow { animation: paFloat 6s ease-in-out infinite; }

/* Cards with image — inner image zooms on hover (no card lift, no extra shadow). */
.hover-lift img {
  transition: transform .5s ease;
}
.hover-lift:hover img {
  transform: scale(1.06);
}
/* When .hover-lift is on the <img> itself (e.g. certification logos),
   the image is the element that zooms. */
img.hover-lift {
  transition: transform .35s ease;
}
img.hover-lift:hover {
  transform: scale(1.08);
}

/* Timeline tabs (Nuestra Historia) */
.timeline-pill {
  color: #332f2f;
  background: transparent;
}
[data-timeline-tab][aria-pressed="true"] > .timeline-pill {
  background: #e21118;
  color: #ffffff;
}
[data-timeline-tab]:hover > .timeline-pill {
  color: #e21118;
}
[data-timeline-tab][aria-pressed="true"]:hover > .timeline-pill {
  color: #ffffff;
}
[data-timeline-image].is-swapping {
  opacity: 0;
}

/* Logo partners — always full color, subtle zoom on hover */
.partner-logo img {
  transition: transform .35s ease;
}
.partner-logo:hover img {
  transform: scale(1.05);
}

/* Marquee for partner logos on mobile (optional CSS animation) */
@keyframes paMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: paMarquee 40s linear infinite; }

/* Mobile menu transition */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
#mobile-menu.open { max-height: 600px; }

/* ===========================================================================
   MEJORAS DE DISEÑO (redesign skill) — movimiento, superficie, imágenes, a11y
   Aditivo: nada de lo anterior se elimina. Trabaja sobre el stack actual.
   =========================================================================== */

/* --- Easing tipo resorte reutilizable --- */
:root {
  --pa-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pa-ease:   cubic-bezier(.22, .61, .36, 1);
}

/* === FASE 1 · BOTONES =================================================== */
/* Clase aditiva para CTAs primarios. No toca el color (lo pone Tailwind),
   solo agrega física: resorte, clic, sombra tintada y barrido de brillo. */
.pa-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--pa-spring), box-shadow .25s var(--pa-ease), filter .25s var(--pa-ease);
}
.pa-btn:hover  { transform: translateY(-2px) scale(1.03); }
.pa-btn:active { transform: translateY(1px)  scale(.97); transition-duration: .08s; }

/* Barrido de brillo que cruza el botón en hover */
.pa-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--pa-ease);
  pointer-events: none;
}
.pa-btn:hover::after { transform: translateX(120%); }

/* Sombra tintada para el CTA rojo (en vez de la genérica negra) */
.pa-btn-red        { box-shadow: 0 8px 22px -6px rgba(226,17,24,.45); }
.pa-btn-red:hover  { box-shadow: 0 14px 30px -6px rgba(226,17,24,.55); }

/* Pills del nav: leve escala en hover + el activo respira con peso de resorte */
.pa-pill {
  transition: transform .25s var(--pa-spring), background-color .25s var(--pa-ease), color .25s var(--pa-ease);
}
.pa-pill:hover { transform: scale(1.04); }
.pa-pill:active { transform: scale(.98); }

/* Botón EN deshabilitado con estado "próximamente" (tooltip nativo + cursor) */
.pa-soon { position: relative; cursor: not-allowed; opacity: .85; }
.pa-soon:hover { opacity: 1; }

/* "CONOCE MÁS" de tarjetas: flecha que se desliza + subrayado que crece */
.pa-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.pa-more svg { transition: transform .3s var(--pa-spring); }
.pa-more::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 100%;
  background: var(--pa-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--pa-ease);
}
.hover-lift:hover .pa-more       { color: var(--pa-red); }
.hover-lift:hover .pa-more svg   { transform: translateX(5px); }
.hover-lift:hover .pa-more::after{ transform: scaleX(1); }

/* === FASE 2 · SUPERFICIE =============================================== */
/* Sombra de tarjeta tintada cálida (reemplaza el gris plano).
   `body` sube la especificidad para ganarle al utility de Tailwind. */
body .shadow-card {
  box-shadow: 0 12px 30px -8px rgba(226,17,24,.16),
              0 6px 14px -8px rgba(137,120,120,.30);
}

/* Tarjetas con imagen: el zoom se acompaña de una elevación sutil */
.hover-lift {
  transition: transform .45s var(--pa-ease), box-shadow .45s var(--pa-ease);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 45px -12px rgba(226,17,24,.22),
              0 10px 20px -10px rgba(137,120,120,.35);
}
/* Suaviza el zoom de imagen ya existente */
.hover-lift img { transition: transform .6s var(--pa-ease); }
.hover-lift:hover img { transform: scale(1.05); }

/* Overlay de gradiente en imágenes de tarjeta: oscurece la base en hover
   para dar profundidad y que el badge de color "flote" mejor. */
.pa-card-img { position: relative; }
.pa-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,14,14,.34) 0%, transparent 45%);
  opacity: 0;
  transition: opacity .5s var(--pa-ease);
  pointer-events: none;
}
.hover-lift:hover .pa-card-img::after { opacity: 1; }

/* Glow cálido detrás de la composición del hero (profundidad) */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 62% 55%,
              rgba(237,179,19,.28) 0%,
              rgba(226,17,24,.10) 38%,
              transparent 72%);
  filter: blur(8px);
}

/* Grano sutil global para romper la planitud digital (pointer-events none) */
.pa-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === FASE 3 · IMÁGENES ================================================= */
/* Logos de partners/clientes y certificaciones: SIEMPRE a color.
   Solo se agrandan en hover (sin grises). */
.partner-logo img {
  transition: transform .4s var(--pa-spring);
}
.partner-logo:hover img {
  transform: scale(1.08);
}
img.hover-lift {
  transition: transform .35s var(--pa-spring);
}
img.hover-lift:hover {
  transform: scale(1.08);
}

/* === Reveal enriquecido: fade + travel + leve escala, easing más fino === */
.reveal {
  transition: opacity .7s var(--pa-ease), transform .7s var(--pa-ease);
}
/* Variante para imágenes: además de subir, escala desde 0.96 */
.reveal-img { transform: translateY(24px) scale(.96); }
.reveal-img.is-visible { transform: translateY(0) scale(1); }

/* === FASE 4 · ACCESIBILIDAD =========================================== */
/* Focus visible consistente para teclado (no afecta clic con mouse) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pa-red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip-to-content link (oculto hasta enfocar con teclado) */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  background: var(--pa-red);
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  transform: translateY(-150%);
  transition: transform .2s var(--pa-ease);
}
.skip-link:focus { transform: translateY(0); }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible,
  .reveal-img, .reveal-img.is-visible { opacity: 1; transform: none; transition: none; }
  .animate-float, .animate-float-slow, .marquee-track { animation: none; }
  .pa-btn, .pa-btn::after, .hover-lift, .hover-lift img,
  .partner-logo img, img.hover-lift, .pa-pill { transition: none; }
  .pa-btn:hover, .hover-lift:hover, .pa-pill:hover { transform: none; }
}