/* ══════════════════════════════════════════════════════════════
   LATINOS FC — Animations & Shared Styles
   ui-ux-pro-max rules applied:
   · transform/opacity only (GPU-composited, no layout thrashing)
   · Enter 150–400ms spring · Exit ~60% of enter duration
   · ease-out entering · ease-in exiting
   · prefers-reduced-motion fully respected
   ══════════════════════════════════════════════════════════════ */

/* ── Motion tokens ──────────────────────────────────────────── */
:root {
  --spring:      cubic-bezier(.16, 1, .3, 1);   /* spring enter    */
  --ease-out:    cubic-bezier(0,   0, .2, 1);   /* standard enter  */
  --ease-in:     cubic-bezier(.4,  0, 1,  1);   /* standard exit   */
  --ease-inout:  cubic-bezier(.4,  0, .2, 1);   /* balanced        */

  --dur-micro:   150ms;   /* hover, press feedback               */
  --dur-fast:    250ms;   /* spotlight, pill transitions         */
  --dur-base:    350ms;   /* scroll reveal, cards                */
  --dur-slow:    650ms;   /* hero cascade, marquee transitions   */
  --dur-exit:    210ms;   /* exits ~60% of base                  */
}

/* ── Material Symbols default variation ─────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ══════════════════════════════════════════════════════════════
   BRAND HELPERS
   ══════════════════════════════════════════════════════════════ */
.gold        { color: #D4AF37; }
.bg-gold     { background-color: #D4AF37; }
.border-gold { border-color: #D4AF37; }
.white       { color: #FFFFFF !important; }

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES
   All use transform/opacity — never width/height/top/left
   ══════════════════════════════════════════════════════════════ */

/* Directional entrance — hero text */
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* Vertical entrance — scroll elements */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Pure opacity — overlays, chips */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Infinite horizontal ticker */
@keyframes marquee {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* Subtle scale pulse — badges, highlights (optional use) */
@keyframes pulseBadge {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.06); }
}

/* ══════════════════════════════════════════════════════════════
   HERO TEXT CASCADE
   Staggered slideLeft with spring easing — each element enters
   after the previous one so the eye follows left → center.
   Exit is handled by page unload (no explicit exit needed here).
   ══════════════════════════════════════════════════════════════ */
.h-tag   { animation: slideLeft .6s var(--spring) .10s both; }
.h-title { animation: slideLeft .7s var(--spring) .22s both; }
.h-bar   { animation: slideLeft .5s var(--spring) .34s both; }
.h-body  { animation: slideLeft .6s var(--spring) .42s both; }
.h-ctas  { animation: slideLeft .6s var(--spring) .52s both; }
.h-chips { animation: fadeIn    .8s var(--spring) .72s both; }

/* ══════════════════════════════════════════════════════════════
   MARQUEE TICKER
   Pause on hover gives users time to read — motion-meaning rule.
   ══════════════════════════════════════════════════════════════ */
.marquee-track {
  animation: marquee 36s linear infinite;
  will-change: transform;
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   translateY + opacity on a spring curve.
   Delay variants create a stagger effect on sibling elements.
   ══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--dur-slow) var(--spring),
    transform var(--dur-slow) var(--spring);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — 80ms increments (30–50ms rule, relaxed for scroll) */
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ══════════════════════════════════════════════════════════════
   LIQUID GLASS
   Layered blur + translucent surface + inner highlight.
   Blur signals "dismissable background" per Apple HIG.
   ══════════════════════════════════════════════════════════════ */
.glass {
  background: rgba(27, 32, 36, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ══════════════════════════════════════════════════════════════
   SPOTLIGHT CARD
   Radial gradient follows mouse position via JS CSS custom props.
   Uses opacity transition so only composited layers change.
   ══════════════════════════════════════════════════════════════ */
.spotlight {
  position: relative;
  isolation: isolate;
}

.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(137, 206, 255, .09) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.spotlight:hover::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   DIRECTIONAL HOVER FILL (btn-fill)
   Pseudo-element slides in from the left — communicates directionality.
   Press state uses scale(.98) + translateY(1px) for physical feedback.
   Enter: .35s spring · Exit: translateX(-101%) implicit reverse
   ══════════════════════════════════════════════════════════════ */
.btn-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color     var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .13);
  transform: translateX(-101%);
  transition: transform .35s var(--spring);
  will-change: transform;
}

.btn-fill:hover::before  { transform: translateX(0); }
.btn-fill:active         { transform: scale(.98) translateY(1px); }

/* ══════════════════════════════════════════════════════════════
   STAT DIVIDER GRID
   Pure negative-space grid — no card borders, just dividers.
   ══════════════════════════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.stat-grid > div {
  border-right:  1px solid rgba(62, 72, 80, .6);
  border-bottom: 1px solid rgba(62, 72, 80, .6);
}

.stat-grid > div:nth-child(2n)            { border-right: none; }
.stat-grid > div:nth-child(3),
.stat-grid > div:nth-child(4)            { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════
   VALOR / FASE / SEDE ROWS  (quienes-somos, metodologia, contacto)
   Background color transition on hover — no layout shift.
   Ghost number reveals on hover using color opacity change only.
   ══════════════════════════════════════════════════════════════ */
.valor-row,
.fase-row,
.sede-row {
  transition: background-color var(--dur-fast) var(--spring);
}

.valor-row:hover,
.fase-row:hover,
.sede-row:hover {
  background-color: rgba(27, 32, 36, .5);
}

.valor-num,
.fase-num,
.sede-num {
  font-family: 'Anton', sans-serif;
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 1;
  color: rgba(137, 206, 255, .10);
  user-select: none;
  pointer-events: none;
  transition: color var(--dur-base) var(--ease-out);
}

.valor-row:hover .valor-num,
.fase-row:hover  .fase-num,
.sede-row:hover  .sede-num {
  color: rgba(212, 175, 55, .18);
}

/* ══════════════════════════════════════════════════════════════
   PILAR BENTO CARD  (metodologia)
   Border glow on hover — only border-color transitions, no layout.
   Ghost number positioned absolutely so it never affects flow.
   ══════════════════════════════════════════════════════════════ */
.pilar-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(62, 72, 80, .5);
  border-radius: 0.75rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.pilar-card:hover {
  border-color: rgba(137, 206, 255, .35);
}

.pilar-bg-num {
  font-family: 'Anton', sans-serif;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 1;
  position: absolute;
  bottom: -0.15em;
  right: -0.05em;
  opacity: .05;
  color: #89ceff;
  user-select: none;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY IMAGE ZOOM  (categorias)
   Image zooms inside a clipping container — transform only,
   no width/height change. Duration .7s spring for fluidity.
   ══════════════════════════════════════════════════════════════ */
.cat-img {
  transition:
    transform .7s var(--spring),
    opacity   var(--dur-base) var(--ease-out);
  will-change: transform;
}

.cat-wrap:hover .cat-img {
  transform: scale(1.04);
}

/* ══════════════════════════════════════════════════════════════
   FEATURE LIST ROW  (categorias)
   Bottom border fades on hover for a subtle focus indicator.
   ══════════════════════════════════════════════════════════════ */
.feat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(62, 72, 80, .4);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.feat-row:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════════════
   FORM FIELDS  (contacto)
   16px minimum to prevent iOS auto-zoom.
   Focus glow uses box-shadow (GPU, no layout shift).
   ══════════════════════════════════════════════════════════════ */
.f-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(190, 200, 210, .6);
  margin-bottom: 6px;
}

.f-input {
  width: 100%;
  min-height: 48px;               /* touch target ≥44px */
  background: rgba(10, 15, 19, .8);
  border: 1px solid rgba(62, 72, 80, .7);
  border-radius: 0.125rem;
  padding: 12px 16px;
  color: #dee3e9;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;                /* prevents iOS auto-zoom */
  font-weight: 500;
  outline: none;
  transition:
    border-color var(--dur-micro) var(--ease-out),
    box-shadow   var(--dur-micro) var(--ease-out);
}

.f-input::placeholder {
  color: rgba(190, 200, 210, .35);
}

.f-input:focus {
  border-color: #89ceff;
  box-shadow: 0 0 0 3px rgba(137, 206, 255, .08);
}

/* Textarea specific */
textarea.f-input {
  resize: vertical;
  min-height: 120px;
}

/* ══════════════════════════════════════════════════════════════
   INFO / SEDE ROW DIVIDERS  (contacto)
   ══════════════════════════════════════════════════════════════ */
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(62, 72, 80, .4);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.info-row:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — hard override
   Collapses all animation/transition to instant.
   Marquee stops completely; it cannot convey meaning without motion.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
  }

  /* Reveal elements are made visible instantly */
  .reveal {
    opacity: 1;
    transform: none;
  }

  /* Marquee freezes in place */
  .marquee-track {
    animation: none;
  }
}