/* CAFFENIO — shared scroll-reveal + hover polish.
   Transform/opacity only, so every animation runs on the compositor and never
   triggers layout. Nothing here changes an element's box, so reveals cannot
   cause layout shift (CLS). */

/* ── scroll reveal ─────────────────────────────────────────────────────────
   Hidden state applies ONLY when JS is present (html.js), so a JS failure or
   a crawler sees fully visible content. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s cubic-bezier(.22, .8, .3, 1),
              transform .7s cubic-bezier(.22, .8, .3, 1);
  will-change: opacity, transform;
}
/* Directional start states MUST come before .is-visible: they have equal
   specificity, so if they were listed after, `transform: scale(.93)` would win
   even once revealed and the element would stay hidden forever. */
.js [data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(34px, 0, 0); }
.js [data-reveal="zoom"]  { transform: scale(.93); }
.js [data-reveal="fade"]  { transform: none; }

/* Revealed state wins over every start state above. */
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Never put [data-reveal] on an element that has its own hover transform
   (e.g. .bebida): the two rules fight over transform/opacity and the element
   can stick at opacity 0. Reveal the container instead. */

/* ── hover polish ─────────────────────────────────────────────────────────── */
.hover-lift {
  transition: transform .32s cubic-bezier(.22, 1.2, .36, 1),
              box-shadow .32s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
}

/* buttons/links: subtle press feedback */
.hover-press { transition: transform .18s ease, opacity .18s ease; }
.hover-press:hover  { transform: translateY(-2px); }
.hover-press:active { transform: translateY(0) scale(.985); }

/* images that gently zoom inside a fixed frame */
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform .55s cubic-bezier(.22, .8, .3, 1); }
.hover-zoom:hover img { transform: scale(1.06); }

/* ── reduced motion: show everything, animate nothing ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hover-lift, .hover-press, .hover-zoom img { transition: none !important; }
  .hover-lift:hover { transform: none; box-shadow: none; }
  .hover-zoom:hover img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON HOVER SYSTEM
   Brand palette: red #e7004c · brown #6a3525 · gold #ffb607 · green #80bc00
                  orange #ff9200 · yellow #ffdf22 · burgundy #592437
   Five button roles, each with a deliberate hover. Every one lifts 2px, deepens
   its own shadow, and shifts to the next colour along the brand ramp — so the
   feedback is consistent in *behaviour* while staying correct per surface.
   Transform + opacity + colour only: all compositor-friendly.
   ══════════════════════════════════════════════════════════════════════════ */

/* shared motion contract for every button role */
.btn-red, .btn-white, .btn-brown, .btn-ghost, .btn-icon {
  position: relative;
  isolation: isolate;                 /* keeps the ::before sheen behind text */
  overflow: hidden;
  text-decoration: none;
  transition: background-color .24s ease,
              color .24s ease,
              border-color .24s ease,
              box-shadow .28s ease,
              transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.btn-red:active, .btn-white:active, .btn-brown:active,
.btn-ghost:active, .btn-icon:active { transform: translateY(0) scale(.97); }

/* focus ring: gold on dark/red surfaces, red on light ones */
.btn-red:focus-visible, .btn-brown:focus-visible, .btn-icon:focus-visible {
  outline: 3px solid #ffb607; outline-offset: 3px;
}
.btn-white:focus-visible, .btn-ghost:focus-visible {
  outline: 3px solid #e7004c; outline-offset: 3px;
}

/* ── sheen: a light band sweeps across on hover (the "load" cue) ─────────── */
.btn-red::before, .btn-white::before, .btn-brown::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg,
              transparent 0%, rgba(255,255,255,.38) 45%,
              rgba(255,255,255,.38) 55%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .55s cubic-bezier(.22,.8,.3,1);
}
.btn-red:hover::before, .btn-brown:hover::before { transform: translateX(120%); }
/* on white buttons the sheen is dark, so it reads at all */
.btn-white::before {
  background: linear-gradient(115deg,
              transparent 0%, rgba(231,0,76,.16) 45%,
              rgba(231,0,76,.16) 55%, transparent 100%);
}
.btn-white:hover::before { transform: translateX(120%); }

/* ── PRIMARY: red fill (main CTAs, nav app button, footer CTA) ───────────── */
.btn-red {
  background-color: #e7004c; color: #fff;
  box-shadow: 0 4px 14px rgba(231,0,76,.28);
}
.btn-red:hover {
  background-color: #ff1f66;          /* lighter red, same hue family */
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(231,0,76,.46);
}

/* ── INVERSE: white fill on a red/photo surface (banner "SE PARTE", hero) ── */
.btn-white {
  background-color: #fff; color: #e7004c;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.btn-white:hover {
  background-color: #ffb607;          /* brand gold — reads on red, on-brand */
  color: #6a3525;                     /* brown text keeps contrast on gold */
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* ── SECONDARY: brown fill (on light/cream sections) ────────────────────── */
.btn-brown {
  background-color: #6a3525; color: #fff;
  box-shadow: 0 4px 14px rgba(106,53,37,.26);
}
.btn-brown:hover {
  background-color: #592437;          /* burgundy: the brand's darker brown */
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(106,53,37,.42);
}

/* ── GHOST: outlined, fills with brand red on hover ─────────────────────── */
.btn-ghost {
  background-color: transparent; color: #e7004c;
  border: 2px solid currentColor;
}
.btn-ghost:hover {
  background-color: #e7004c; color: #fff; border-color: #e7004c;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(231,0,76,.34);
}

/* ── ICON: circular social buttons — spin-free, scale + gold pop ─────────── */
.btn-icon {
  background-color: #e7004c;
  box-shadow: 0 2px 8px rgba(231,0,76,.24);
}
.btn-icon:hover {
  background-color: #ffb607;
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 8px 18px rgba(255,182,7,.5);
}
.btn-icon:hover svg path { fill: #6a3525; }   /* brown glyph on gold */
.btn-icon svg, .btn-icon svg path { transition: fill .24s ease; }

/* ── busy state: for buttons that kick off real work ────────────────────── */
.btn-red.is-busy, .btn-white.is-busy, .btn-brown.is-busy {
  pointer-events: none; color: transparent !important;
}
.btn-red.is-busy::after, .btn-white.is-busy::after, .btn-brown.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: btn-spin .7s linear infinite;
}
.btn-red.is-busy::after  { border-color: #fff; border-top-color: transparent; }
.btn-white.is-busy::after { border-color: #e7004c; border-top-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn-red, .btn-white, .btn-brown, .btn-ghost, .btn-icon,
  .btn-red::before, .btn-white::before, .btn-brown::before {
    transition: none !important;
  }
  .btn-red:hover, .btn-white:hover, .btn-brown:hover,
  .btn-ghost:hover, .btn-icon:hover { transform: none; }
  .btn-red::before, .btn-white::before, .btn-brown::before { display: none; }
  .btn-red.is-busy::after, .btn-white.is-busy::after,
  .btn-brown.is-busy::after { animation: none; }
}