/* Lo que comparten la página de descargas y la de fases de entrega: colores de Shalom, la cabecera con el dibujo
   de cuadros y círculos de las bolsas Fresh, la banda de frutas, el marco de teléfono y la firma de cristhiandev. */
:root {
  --verde: #175329; --verde-hondo: #0c3318; --verde-medio: #2f7a45; --verde-suave: #e2ecdd;
  --oro: #f7b500; --oro-suave: #fdf0c6; --oro-texto: #6b4b00;
  --fondo: #f2f4ec; --tarjeta: #ffffff; --texto: #13261a; --tenue: #56665b; --borde: #dde4d7;
  --tinta: #1a1c2c; --coral: #ef7d57; --crema: #fbf7ef;
  --sombra: 0 24px 48px -30px rgb(12 51 24 / 0.5), 0 2px 6px -2px rgb(12 51 24 / 0.08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Archivo', system-ui, sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 10px; }
.ancho { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* cabecera verde con el dibujo de las bolsas */
.cabeza { position: relative; isolation: isolate; color: #fff; background: radial-gradient(120% 90% at 70% 20%, #23803f 0%, var(--verde) 45%, var(--verde-hondo) 100%); overflow: hidden; }
.cabeza::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.09) 0 11px, transparent 11.5px),
    conic-gradient(rgb(255 255 255 / 0.05) 25%, transparent 0 50%, rgb(255 255 255 / 0.05) 0 75%, transparent 0);
  background-size: 120px 120px, 60px 60px; background-position: 30px 30px, 0 0;
  -webkit-mask-image: radial-gradient(90% 80% at 75% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(90% 80% at 75% 30%, #000 10%, transparent 75%);
}
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: max(1rem, env(safe-area-inset-top)); padding-bottom: 0.5rem; }
.sello { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.sello .marca { width: 34px; height: auto; }
.sello .palabra { width: 96px; height: auto; }
.por { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem 0.3rem 0.35rem; border-radius: 999px; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.18); font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: rgb(255 255 255 / 0.9); }
.por img { width: 24px; height: 24px; border-radius: 7px; background: var(--crema); padding: 2px; image-rendering: pixelated; }
.por b { font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 700; font-size: 0.9375rem; color: #fff; }
.por:hover { background: rgb(255 255 255 / 0.16); }
h1 { margin: 0; font-size: clamp(2.5rem, 11vw, 4.75rem); font-weight: 900; font-stretch: 125%; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; }
.entrada { margin: 1rem 0 0; max-width: 32rem; font-size: clamp(1.0625rem, 3.6vw, 1.25rem); line-height: 1.45; color: rgb(255 255 255 / 0.84); text-wrap: pretty; }

/* banda dorada con los nombres de las frutas, como la banda de cada bolsa */
.banda { position: relative; background: var(--oro); color: var(--verde-hondo); overflow: hidden; border-block: 3px solid var(--verde-hondo); }
.banda-pista { display: flex; width: max-content; animation: correr 38s linear infinite; }
.banda ul { display: flex; margin: 0; padding: 0.6rem 0; list-style: none; }
.banda li { display: flex; align-items: center; gap: 1.25rem; padding-right: 1.25rem; font-size: 1.125rem; font-weight: 900; font-stretch: 125%; letter-spacing: 0.02em; white-space: nowrap; }
.banda li::after { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--verde-hondo); }
@keyframes correr { to { transform: translateX(-50%); } }

/* marco de teléfono para las pantallas reales */
.tel {
  --w: 200px; position: relative; width: var(--w); aspect-ratio: 520 / 1125; padding: calc(var(--w) * 0.04);
  border-radius: calc(var(--w) * 0.17); background: linear-gradient(145deg, #3a3d44, #121316 40%, #26282d);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.12), 0 50px 70px -40px rgb(0 0 0 / 0.75), 0 22px 30px -18px rgb(0 0 0 / 0.5);
}
.tel > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--w) * 0.135); }
.tel::after { content: ''; position: absolute; top: calc(var(--w) * 0.075); left: 50%; width: calc(var(--w) * 0.075); aspect-ratio: 1; border-radius: 50%; background: #050506; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.06); transform: translateX(-50%); }

/* bolsas reales flotando */
.bolsa { position: absolute; height: auto; filter: drop-shadow(0 18px 14px rgb(0 0 0 / 0.35)); animation: flotar 7s ease-in-out infinite; transform: rotate(var(--r, 0deg)); }
@keyframes flotar { 50% { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 2deg)); } }

/* firma de cristhiandev: el avatar pixel del portafolio y la palabra con su cursor coral */
.firma { position: relative; background: var(--tinta); color: #fff; overflow: hidden; }
.firma::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
.firma-caja { position: relative; display: grid; gap: 1.25rem; padding-top: 2.5rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 820px) { .firma-caja { grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; } }
.dev { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.dev img { width: 72px; height: 72px; padding: 8px; border-radius: 18px; background: var(--crema); image-rendering: pixelated; flex: none; box-shadow: 0 0 0 4px rgb(239 125 87 / 0.25); }
.dev span { font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 700; font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1; display: inline-flex; align-items: center; }
.dev span::after { content: ''; width: 0.4em; height: 0.8em; margin-left: 0.1em; background: var(--coral); animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.firma-caja p { margin: 0; max-width: 30rem; color: rgb(255 255 255 / 0.72); font-size: 1.0625rem; }
.firma-caja p strong { color: #fff; font-weight: 700; }
.ir-dev {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.4rem; border-radius: 999px;
  background: var(--coral); color: var(--tinta); font-weight: 800; font-size: 1.0625rem; text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease;
}
.ir-dev:hover { filter: brightness(1.06); }
.ir-dev:active { transform: scale(0.98); }
.ir-dev svg { width: 1.25rem; height: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .banda-pista, .bolsa, .dev span::after, [data-entra] { animation: none !important; }
  .ir-dev { transition: none; }
}