/* ===========================
   Citrus Don Lito – Próximamente
   =========================== */

:root {
  --naranja: #f7931e;
  --naranja-oscuro: #e8650f;
  --amarillo: #ffd23f;
  --crema: #fff6e0;
  --verde: #3d8b37;
  --negro: #141414;
}

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

html, body { height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--negro);
  background: var(--naranja);
  overflow-x: hidden;
}

/* ---------- Fondo ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .35) 0, transparent 40%),
    linear-gradient(160deg, var(--amarillo) 0%, #ffb627 40%, var(--naranja) 70%, var(--naranja-oscuro) 100%);
}

/* Brillo central suave que "respira" */
.bg__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vmax;
  height: 90vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 246, 224, .75) 0%, rgba(255, 246, 224, 0) 55%);
  animation: breathe 7s ease-in-out infinite;
}

.bg__fruits { position: absolute; inset: 0; }

/* Cada rodaja: flota (wrapper) y gira (svg) */
.fruit {
  position: absolute;
  will-change: transform;
  animation: float var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: var(--op, .9);
  filter: drop-shadow(0 10px 18px rgba(120, 50, 0, .18));
}

.fruit svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: spin var(--spin, 40s) linear infinite;
  animation-direction: var(--dir, normal);
}

.fruit.leaf svg { animation: sway var(--spin, 6s) ease-in-out infinite alternate; }

/* ---------- Contenido ---------- */
.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px 24px;
  gap: clamp(14px, 2.5vw, 22px);
}

.hero__logo {
  width: min(520px, 82vw);
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(90, 35, 0, .28));
  display: block;
  animation: logoIn 1s cubic-bezier(.2, .9, .3, 1.2) both;
}

.hero__logo-wrap { animation: bob 5s ease-in-out 1s infinite; }

.hero__title {
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--negro);
  line-height: 1;
  margin-top: clamp(4px, 1vw, 10px);
  text-shadow: 0 3px 0 rgba(255, 246, 224, .55);
  animation: fadeUp .8s ease-out .5s both;
}

.hero__title span {
  display: inline-block;
  animation: wave 3.2s ease-in-out infinite;
}

.hero__text {
  max-width: 34rem;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.55;
  font-weight: 600;
  color: #3a2005;
  animation: fadeUp .8s ease-out 1.1s both;
}

/* Barra de "carga" tipo jugo llenándose */
.hero__loader {
  width: min(220px, 60vw);
  height: 10px;
  border-radius: 999px;
  background: rgba(20, 20, 20, .14);
  overflow: hidden;
  margin-top: 6px;
  animation: fadeUp .8s ease-out 1.3s both;
}

.hero__loader span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--verde), #7cc242, var(--amarillo));
  animation: juice 2.4s ease-in-out infinite;
}

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16px;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(20, 20, 20, .7);
}

.br-desktop { display: inline; }

/* ---------- Animaciones ---------- */
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(var(--dx, 10px), var(--dy, -24px)); }
}

@keyframes spin  { to { transform: rotate(360deg); } }

@keyframes sway {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(14deg); }
}

@keyframes logoIn {
  from { opacity: 0; transform: scale(.7) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

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

@keyframes wave {
  0%, 70%, 100% { transform: translateY(0); }
  35%           { transform: translateY(-6px); }
}

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

@keyframes juice {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .br-desktop { display: none; }
  .hero { padding-top: 32px; }
  .fruit { --op: .55 !important; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hero__logo { width: min(340px, 50vw); }
  .hero { padding-top: 20px; gap: 10px; }
}

/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}