/* ============================================
   LAJAN PRESTIGE — "El Tiempo Con Distinción"
   Paleta: #0a0a0a negro / #d4af37 oro / #f0d878 oro claro (brillo) / #1a1a1a carbón / #f5f0e6 hueso
   ============================================ */

:root {
  --black: #0a0a0a;
  --charcoal: #1a1a1a;
  --gold: #d4af37;
  --gold-light: #f0d878;
  --gold-dark: #8a7530;
  --bone: #f5f0e6;
  --bone-dim: #b8b3a8;
  --line: rgba(212, 175, 55, 0.18);

  --serif: 'Cormorant Garamond', serif;
  --sans: 'Inter', sans-serif;

  --maxw: 1240px;

  /* Degradado dorado tipo metal grabado, igual al del logo */
  --gold-metal: linear-gradient(180deg, #f7e7a6 0%, #d4af37 35%, #9c7a23 70%, #d4af37 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  animation: pageFadeIn 0.9s ease both;
}

/* Fundido suave de toda la página al cargar, sensación de marca premium */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

a { color: inherit; text-decoration: none; }

button {
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 3px;
}

img, svg { display: block; max-width: 100%; }

.section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--bone);
}

/* ===================== HEADER ===================== */
/* Empieza completamente transparente (para que el hero respire debajo).
   La clase ".scrolled" la añade premium-ui.js cuando el usuario baja un
   poco — ahí aparece el fondo oscuro + blur, con transición suave, nunca
   de golpe. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s ease, backdrop-filter 0.45s ease, border-color 0.45s ease;
}

.site-header.scrolled {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--gold);
}

.logo-text {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  color: var(--bone);
}

.logo-text em {
  font-style: normal;
  color: var(--gold);
  font-weight: 500;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: 1;
  transition: color 0.25s ease;
}

.main-nav a:hover { color: var(--gold); }

.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--gold-metal);
  color: var(--black);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95rem 2.2rem;
  border-radius: 2px;
  font-weight: 500;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* Botón "Catálogo" resaltado en la barra de navegación */
.nav-catalog-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.5rem 1.2rem !important;
  color: var(--gold) !important;
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.nav-catalog-btn:hover {
  background: var(--gold);
  color: var(--black) !important;
  transform: translateY(-2px);
}

/* ----- Brillo sutil al pasar el mouse -----
   Un destello diagonal muy ligero que cruza el botón una sola vez al
   hacer hover. Se reutiliza en todos los botones principales del sitio. */
.btn-primary::after,
.nav-catalog-btn::after,
.btn-info::after,
.filter-pill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.btn-primary:hover::after,
.nav-catalog-btn:hover::after,
.btn-info:hover::after,
.filter-pill:hover::after {
  left: 130%;
}

/* ===================== CAPÍTULOS (hero cinematográfico, 3 partes) ===================== */
.chapter {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.chapter-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

/* ----- Efecto Ken Burns -----
   Capa intermedia (entre .chapter-bg y la <img>) que mueve y escala el
   fondo MUY lentamente y de forma continua, como en sitios de Porsche o
   Ferrari. Va separada de la <img> a propósito: la imagen ya tiene su
   propia animación de "respiración" al entrar en pantalla (scale 1.08→1),
   y separada también de .chapter-bg, que es la capa que mueve el parallax
   por JS — así las tres animaciones nunca pelean por la misma propiedad. */
.chapter-bg-kb {
  width: 100%;
  height: 100%;
  animation: kenBurnsPan 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes kenBurnsPan {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.09) translate(-1.4%, -1%); }
}

.chapter-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Empieza un poco más grande para dar espacio al efecto parallax sin revelar bordes */
  transform: scale(1.08);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Velo oscuro sobre la foto para que el texto siempre sea legible */
.chapter-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(10,10,10,0.88) 0%,
    rgba(10,10,10,0.6) 38%,
    rgba(10,10,10,0.25) 65%,
    rgba(10,10,10,0.45) 100%
  );
}

.chapter-content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.chapter-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  max-width: 560px;
}

.chapter-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.1;
  color: var(--bone);
  margin-bottom: 1.4rem;
  max-width: 620px;
}

.chapter-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.chapter-text {
  color: var(--bone-dim);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 460px;
  margin-bottom: 2.2rem;
}

.chapter-cta { display: inline-block; }

/* Indicador sutil de "sigue bajando", solo en el primer capítulo */
.chapter-scroll-hint {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(245, 240, 230, 0.5);
  border-radius: 999px;
}

.chapter-scroll-hint span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  background: var(--gold);
  border-radius: 999px;
  animation: scrollHintMove 1.8s ease-in-out infinite;
}

@keyframes scrollHintMove {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ----- Animación de entrada al hacer scroll (scroll-reveal) -----
   El JS añade la clase .is-visible cuando el elemento entra en pantalla;
   antes de eso, el elemento está invisible y desplazado hacia abajo. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Retraso escalonado: cada elemento dentro de un capítulo aparece un poco
   después del anterior. La imagen de fondo ya inició su propio movimiento
   (umbral 0.15, más bajo) antes de que estos siquiera empiecen, así el
   orden real en pantalla es: imagen → subtítulo → título → descripción → botón. */
.chapter-content .reveal:nth-child(1) { transition-delay: 0.10s; }
.chapter-content .reveal:nth-child(2) { transition-delay: 0.28s; }
.chapter-content .reveal:nth-child(3) { transition-delay: 0.46s; }
.chapter-content .reveal:nth-child(4) { transition-delay: 0.64s; }

/* Cuando el capítulo entra en pantalla, su imagen de fondo se desescala
   ligeramente (de 1.08 a 1.0): es el efecto "respiración" cinematográfico. */
.chapter.is-visible .chapter-bg img {
  transform: scale(1);
}

@media (max-width: 880px) {
  .chapter { height: 100vh; }
  .chapter-scrim {
    background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.75) 55%, rgba(10,10,10,0.92) 100%);
  }
  .chapter-content { padding: 0 1.4rem; }
  .chapter-eyebrow, .chapter-title, .chapter-text { max-width: 100%; }
}

/* Las personas que prefieren menos movimiento ven el contenido directo, sin animar */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .chapter-bg img { transform: none !important; transition: none; }
  .chapter-bg-kb { animation: none; }
  .chapter-scroll-hint span { animation: none; opacity: 1; }
  body { animation: none; }
  .card-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ===================== COLLECTION ===================== */
.collection {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem 2rem;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2.6rem;
}

.filters {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 3.2rem;
}

.filter-pill {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  color: var(--bone-dim);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  transition: all 0.25s ease;
}

.filter-pill:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.filter-pill.active {
  background: var(--gold-metal);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 500;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .product-grid { grid-template-columns: 1fr; }
}

.product-card {
  background: var(--charcoal);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.18);
}

/* ----- Aparición escalonada al entrar al catálogo -----
   Usamos @keyframes (no transition) a propósito: así esta animación de
   entrada nunca compite con la transición del :hover, que vive aparte en
   .product-card. El retraso entre tarjeta y tarjeta lo fija main.js por
   columna (variable --reveal-delay). Cuando la animación termina, el JS
   quita estas clases y la tarjeta queda con sus estilos normales. */
.card-reveal {
  opacity: 0;
  transform: translateY(28px);
}

.card-reveal.is-visible {
  animation: cardRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--reveal-delay, 0s);
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #201f1c 0%, #141312 75%);
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-media img {
  transform: scale(1.07);
}

.product-media::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(212,175,55,0.16), transparent);
  transition: left 0.7s ease;
  z-index: 2;
}
.product-card:hover .product-media::after { left: 150%; }

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(10,10,10,0.6);
}

.product-info {
  padding: 1.3rem 1.4rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-cat {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 0.4rem;
}

.product-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--bone);
  margin-bottom: 0.3rem;
}

.product-desc {
  font-size: 0.84rem;
  color: var(--bone-dim);
  margin-bottom: 0.4rem;
  flex: 1;
}

/* ===================== ABOUT ===================== */
.about {
  background: var(--charcoal);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 880px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-visual { max-width: 280px; margin: 0 auto; }
}

.about-text p { color: var(--bone-dim); margin-top: 1.2rem; max-width: 480px; }

.about-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.6rem;
  flex-wrap: wrap;
}

.stat { display: flex; flex-direction: column; min-width: 90px; }

.stat-num {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--gold);
  white-space: nowrap;
}

.stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-top: 0.4rem;
  line-height: 1.4;
}

.about-visual { max-width: 320px; margin-left: auto; }

/* ===================== FOOTER ===================== */
.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4.5rem 2rem 2rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; }
}

.footer-brand p { color: var(--bone-dim); font-size: 0.85rem; margin-top: 0.8rem; max-width: 280px; }

.footer-col h4 {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.footer-col p { color: var(--bone-dim); font-size: 0.88rem; margin-bottom: 0.3rem; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  font-size: 0.76rem;
  color: var(--bone-dim);
}

.pay-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 110;
}
.pay-overlay.visible { opacity: 1; pointer-events: auto; }

.pay-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 460px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--charcoal);
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.pay-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.pay-screen { display: none; padding: 1.7rem 1.8rem 2rem; }
.pay-screen.active { display: block; }

.pay-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.pay-modal-head h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--bone);
}

.watch-interest-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.3rem;
  text-align: center;
}

.watch-interest-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.watch-interest-banner strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--gold);
}

.watch-interest-ref {
  font-size: 0.74rem;
  color: var(--bone-dim);
}

.pay-help {
  font-size: 0.86rem;
  color: var(--bone-dim);
  line-height: 1.65;
  margin: 0 0 1.4rem;
}

.pay-help strong { color: var(--gold); font-weight: 500; }

.pay-submit {
  width: 100%;
  text-align: center;
  margin-top: 0.4rem;
  border: none;
}

.pay-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===================== FORMULARIO DE DATOS DE ENVÍO ===================== */
.shipping-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shipping-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--bone-dim);
  letter-spacing: 0.02em;
}

.pay-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.shipping-form input,
.shipping-form textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s ease;
  resize: vertical;
}

.shipping-form input::placeholder,
.shipping-form textarea::placeholder { color: var(--bone-dim); opacity: 0.6; }

.shipping-form input:focus,
.shipping-form textarea:focus { border-color: var(--gold); }

.shipping-error {
  color: #e08585;
  font-size: 0.8rem;
  margin: 0;
  display: none;
}
.shipping-error.visible { display: block; }

@media (max-width: 480px) {
  .pay-row-2 { grid-template-columns: 1fr; }
}

/* Pantalla de confirmación del modal "Más información" */
#infoScreenSuccess {
  text-align: center;
  padding-top: 2.2rem;
}
.pay-success-icon { display: flex; justify-content: center; margin-bottom: 1rem; }
#infoScreenSuccess h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--bone);
  margin-bottom: 1rem;
}
.pay-success-text {
  color: var(--bone-dim);
  font-size: 0.86rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

/* Línea "Precios desde $X" debajo de los filtros de categoría */
.price-from {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.03em;
  margin-bottom: 2.6rem;
}

.price-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  color: var(--bone-dim);
}

.price-chip strong {
  color: var(--gold);
  font-weight: 500;
}

.price-chip-single {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.07);
}

/* Referencia del producto, mostrada en cada tarjeta */
.product-ref {
  font-size: 0.7rem;
  color: var(--bone-dim);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  display: block;
}

/* Precio individual — visible en categorías que tienen precio por producto (ej. Invicta) */
.product-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  display: block;
}

/* Botón "Más información" (reemplaza al antiguo "Añadir al carrito") */
.btn-info {
  position: relative;
  overflow: hidden;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--bone-dim);
  padding: 0.5rem 1rem;
  border-radius: 2px;
  transition: all 0.25s ease;
  width: 100%;
  text-align: center;
  margin-top: 0.6rem;
}
.btn-info:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* ===================== BOTÓN FLOTANTE DE WHATSAPP ===================== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: #25D366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,175,55,0.25);
  z-index: 80;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: whatsapp-pop 0.5s ease 0.3s both;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(0,0,0,0.5), 0 0 0 2px var(--gold);
}

@keyframes whatsapp-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
  }
}