@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gochi Hand"; src: url("assets/fonts/gochi-hand-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Color: 60 % café oscuro de las fotos, 30 % crema, 10 % rojo solo en las acciones */
:root {
  --fondo: #120803;
  --fondo-2: #1E1009;
  --crema: #F6EBDD;
  --crema-2: #D9C3A6;
  --linea: rgba(246, 235, 221, .16);
  --rojo: #DD3530;
  --rojo-hover: #C42722;
  --amarillo: #F2B42A;
  --titulo: "Poppins", "Segoe UI", system-ui, sans-serif;
  --mano: "Gochi Hand", "Comic Sans MS", cursive;
  --texto: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radio: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; overflow-x: clip; background: var(--fondo); color: var(--crema); font: 400 16px/1.6 var(--texto); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--crema); color: var(--fondo); padding: 10px 14px; border-radius: 10px; }
.saltar:focus { top: 12px; }

/* Tipografía: frase a mano arriba (Gochi Hand), palabra de peso abajo en Poppins */
.titulo { margin: 0; display: flex; flex-direction: column; gap: .1em; text-wrap: balance; }
.titulo__apoyo { font: 400 clamp(22px, 2.6vw, 32px)/1.1 var(--mano); color: var(--amarillo); }
.titulo__peso { font-family: var(--titulo); font-weight: 600; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; letter-spacing: -0.02em; }
.etiqueta { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-2); }
.etiqueta::after { content: ""; width: 40px; height: 1.5px; background: currentColor; order: -1; }
.etiqueta b { order: -2; font-weight: 700; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font-family: var(--titulo); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; user-select: none; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn--rojo { background: var(--rojo); color: #fff; }
.btn--linea { background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1.5px var(--crema-2); }
.btn--grande { width: 100%; min-height: 56px; }
@media (hover: hover) and (pointer: fine) { .btn--rojo:hover { background: var(--rojo-hover); } .btn--linea:hover { background: rgba(246, 235, 221, .08); } }

/* Barra de arriba: el nombre en su letra, legible */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px max(16px, env(safe-area-inset-left)); background: linear-gradient(to bottom, rgba(18, 8, 3, .72), rgba(18, 8, 3, 0)); }
.nav__marca { color: var(--rojo); width: 108px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.nav__marca svg { width: 100%; height: auto; }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 12px; }
@media (min-width: 900px) { .nav { padding-inline: 40px; } .nav__marca { width: 132px; } }

/* Los productos aparecen dentro del cuadro del molino */
.minis { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (min-width: 900px) { .paso--der .minis { justify-content: flex-end; } .paso--izq .minis { justify-content: flex-start; } }
.mini { display: grid; grid-template-columns: 40px auto; gap: 10px; align-items: center; text-decoration: none; text-align: left; background: rgba(30, 16, 9, .9); border: 1px solid var(--linea); border-radius: 14px; padding: 6px 16px 6px 6px; transition: transform 200ms var(--ease-out), border-color 200ms ease; }
.mini img { width: 40px; height: 58px; object-fit: contain; }
.mini b { display: block; font-family: var(--titulo); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.mini small { color: var(--crema-2); font-size: 12px; }
@media (hover: hover) and (pointer: fine) { .mini:hover { transform: translateY(-2px); border-color: var(--crema-2); } }

.contenedor { width: min(1080px, 100% - 32px); margin-inline: auto; }
.molienda { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; }
.molienda button { border: 0; background: transparent; color: var(--crema-2); font: 600 14px/1 var(--texto); padding: 0 14px; min-height: 38px; border-radius: 999px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.molienda button[aria-pressed="true"] { background: var(--crema); color: var(--fondo); }
.cantidad { display: inline-flex; align-items: center; gap: 6px; }
.cantidad button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--crema); font: 600 20px/1 var(--texto); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.cantidad button:active { transform: scale(0.94); }
.cantidad output { min-width: 28px; text-align: center; font: 800 18px/1 var(--titulo); font-variant-numeric: tabular-nums; }
.pedido { display: grid; gap: 16px; background: var(--crema); color: var(--fondo); border-radius: var(--radio); padding: clamp(20px, 4vw, 30px); }
.pedido__titulo { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: 20px; text-transform: uppercase; }
.campos { display: grid; gap: 12px; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } .campo--ancho { grid-column: 1 / -1; } }
.campo { display: grid; gap: 6px; font: 700 13px/1.2 var(--texto); }
.campo input { min-height: 50px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(18, 8, 3, .3); background: #fff; color: var(--fondo); font: 400 16px/1 var(--texto); transition: border-color 200ms ease, box-shadow 200ms ease; }
.campo input:focus { outline: none; border-color: var(--fondo); box-shadow: 0 0 0 4px rgba(242, 180, 42, .45); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); }
.pedido__error { margin: 0; min-height: 1.4em; color: var(--rojo); font-weight: 700; text-align: center; }
.pedido__nota { margin: 0; text-align: center; font-size: 13px; color: #6A5240; }

.pie { border-top: 1px solid var(--linea); padding: 32px 0 calc(110px + env(safe-area-inset-bottom)); color: var(--crema-2); font-size: 14px; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pie__marca { color: var(--rojo); width: 96px; }
.pie p { margin: 0; margin-right: auto; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
@media (min-width: 900px) { .pie { padding-bottom: 40px; } }



/* ===== El viaje: un video que avanza con el scroll =====
   Celular: el video arriba (3:4) y los textos debajo, sin taparlo.
   PC: el video a pantalla completa y los textos a la derecha. */
.viaje { position: relative; height: 430vh; }
.escenario { --ph: min(133.33vw, calc(100svh - 232px)); position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--fondo); }
.pantalla { position: absolute; top: 0; left: 50%; translate: -50% 0; height: var(--ph); aspect-ratio: 3 / 4; max-width: 100%; }
/* el borde de abajo se funde con el fondo con un degradado encima (una máscara sobre video cuesta mucho en celular) */
.pantalla::after { content: ""; position: absolute; inset: 84% 0 0; pointer-events: none; background: linear-gradient(to bottom, rgba(18, 8, 3, 0), var(--fondo)); }
.fotos, .video { position: absolute; inset: 0; width: 100%; height: 100%; }
.con-video .fotos { display: none; }
.foto { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; }
.foto.activa { opacity: 1; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
/* las fotos de respaldo salen del mismo video, así que el cambio a video no salta */
.video { object-fit: cover; opacity: 0; transition: opacity 250ms ease; transform: translateZ(0); }
.con-video .video { opacity: 1; }
.anillo { position: absolute; right: 14px; bottom: 18%; width: 30px; height: 30px; color: var(--crema); opacity: 0; transform: rotate(-90deg); transition: opacity 300ms ease; }
.cargando .anillo { opacity: .8; }
.anillo circle { stroke-dashoffset: var(--ld, 126); }

/* textos */
.banda { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(var(--ph) - 20px); bottom: 92px; display: grid; align-content: center; justify-items: center; gap: 10px; text-align: center; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.banda .titulo { align-items: center; }
.banda__texto { margin: 0; max-width: 34ch; color: var(--crema-2); font-size: 15px; }
.banda .titulo__peso { font-size: clamp(30px, 8.4vw, 40px); }
/* el nombre va fuera de la imagen: el primer cuadro del video tiene el colibrí y la rama arriba */
.banda--marca { bottom: 150px; gap: 2px; opacity: 1; visibility: visible; justify-items: center; text-align: center; }
.marca__nombre { margin: 0; width: min(240px, 62vw); color: var(--rojo); filter: drop-shadow(0 3px 10px rgba(80, 20, 0, .3)); }
.marca__nombre svg { width: 100%; height: auto; }
.marca__cafe { margin: -2px 0 0; font: 700 clamp(15px, 4.4vw, 26px)/1 var(--titulo); letter-spacing: .32em; padding-left: .32em; color: var(--crema); }
.marca__lema { margin: 6px 0 0; white-space: nowrap; font: 400 clamp(14px, 4.2vw, 26px)/1.2 var(--mano); color: var(--amarillo); }
.desliza { position: absolute; z-index: 3; left: 0; right: 0; bottom: 100px; margin: 0; display: grid; justify-items: center; gap: 10px; font: 400 20px/1.2 var(--mano); color: var(--amarillo); }
.desliza::after { content: ""; width: 2px; height: 34px; background: linear-gradient(var(--amarillo), transparent); transform-origin: top; animation: linea 1.8s var(--ease-out) infinite; }
@keyframes linea { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* productos compactos dentro del viaje en celular */
@media (max-width: 899px) {
  .banda .minis { flex-wrap: nowrap; }
  .banda .mini { grid-template-columns: 26px auto; padding: 5px 12px 5px 6px; gap: 8px; }
  .banda .mini img { width: 26px; height: 38px; }
  .banda .mini b { font-size: 11px; }
  .banda .mini small { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) { .banda__texto, .desliza { display: none; } }


@media (min-width: 900px) {
  .viaje { height: 580vh; } /* estándar 10k: más recorrido por texto */
  .escenario { --ph: 100svh; }
  .pantalla { inset: 0; translate: none; left: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .pantalla::after { inset: 0; background: linear-gradient(90deg, rgba(18, 8, 3, 0) 45%, rgba(18, 8, 3, .45) 100%); }
  .banda { top: 50%; bottom: auto; left: auto; right: 6vw; translate: 0 -50%; width: min(440px, 32vw); justify-items: start; text-align: left; text-shadow: 0 2px 14px rgba(10, 4, 0, .7); }
  .banda .btn { text-shadow: none; }
  .banda .titulo { align-items: flex-start; }
  .banda .titulo__peso { font-size: clamp(40px, 4.4vw, 64px); }
  .banda__texto { font-size: 17px; }
  .banda .minis { justify-content: flex-start; }
  .banda--marca { bottom: auto; justify-items: center; text-align: center; }
  .marca__nombre { width: min(340px, 24vw); }
  .marca__cafe { font-size: 24px; }
  .marca__lema { font-size: 26px; }
  .desliza { top: auto; bottom: 28px; }
  .anillo { right: 28px; bottom: 28px; }
}


/* el nombre pequeño de arriba solo aparece cuando el grande ya se fue */
.nav__marca { opacity: 0; transform: translateY(-6px); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.nav.con-marca .nav__marca { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .marca__lema { font-size: clamp(14px, 3.9vw, 20px); }
}
@media (min-width: 900px) {
  /* textos más a la derecha para no rozar la despulpadora ni la bolsa; nombre más compacto para dejar libre al colibrí */
  .banda { right: 4vw; width: min(380px, 26vw); }
  .banda .titulo__peso { font-size: clamp(36px, 3.6vw, 56px); }
  .marca__cafe { font-size: 20px; }
  .marca__lema { font-size: 22px; }
}

@media (min-width: 900px) {
  .banda { right: 3vw; width: min(340px, 24vw); }
  .banda::before { content: ""; position: absolute; inset: -90px -60px -90px -120px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(10, 6, 3, .72), rgba(10, 6, 3, .38) 60%, rgba(10, 6, 3, 0)); }
}

/* fuera del video, la barra de arriba toma fondo para no montarse sobre el contenido */
.nav { transition: background-color 300ms ease; }
.nav.solida { background: rgba(18, 8, 3, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Auditoría 30 oct: toques de 44 px, título visible al llegar desde "Comprar", foco del teclado en la marca */
.nav .btn { min-height: 44px; }
.nav__marca { display: flex; align-items: center; min-height: 44px; }
.nav__marca:focus-visible { opacity: 1; transform: none; }
.molienda button { min-height: 44px; }
.pie ul a { display: inline-flex; align-items: center; min-height: 44px; }
#pidelo { scroll-margin-top: 24px; }


/* Versión general: la marca es la palabra "Café" escrita a mano (Gochi Hand), en vez del logo */
.logo-texto { display: block; font: 400 1em/0.9 var(--mano); color: var(--rojo); white-space: nowrap; }
.nav__marca { font-size: 40px; width: auto; }
.pie__marca { font-size: 36px; width: auto; }
.marca__nombre { font-size: clamp(84px, 26vw, 128px); width: auto; }
@media (min-width: 900px) { .nav__marca { font-size: 46px; width: auto; } .marca__nombre { font-size: clamp(110px, 9vw, 150px); width: auto; } }

/* ===== 31 oct: más limpio, estilo Apple =====
   Color 60/30/10: negro cálido de base (deja que mande la foto), crema en textos y superficies, rojo solo en botones y logo.
   Tipografía: Poppins en títulos y botones, Open Sans para leer; la letra a mano queda solo en el logo. */
:root {
  --fondo: #0E0B09;
  --fondo-2: #1A1512;
  --crema: #F5EFE6;
  --crema-2: #CFC4B6;
  --linea: rgba(245, 239, 230, .14);
  --rebote: cubic-bezier(.3, 1.35, .6, 1); /* rebote corto pedido por el equipo; menos exagerado que un elástico */
}
.titulo__apoyo { font: 500 clamp(16px, 1.7vw, 21px)/1.3 var(--titulo); letter-spacing: -.01em; color: var(--crema-2); }
.titulo__peso { font-weight: 600; letter-spacing: -.04em; }
/* escenas: titular corto con punto final, una línea que lo explica, nada más (como las webs de producto tipo Apple) */
.banda { gap: 12px; }
.banda .titulo__peso { line-height: 1; }
.banda__texto { max-width: 30ch; font-size: 16px; line-height: 1.45; color: rgba(245, 239, 230, .82); text-wrap: balance; }
.banda .btn, .banda .minis { margin-top: 8px; }
::selection { background: var(--rojo); color: #fff; }
input { caret-color: var(--rojo); }
.desliza { font: 500 12px/1 var(--titulo); letter-spacing: .24em; text-transform: uppercase; color: var(--crema); }
.desliza::after { background: linear-gradient(var(--crema), transparent); }

/* botones: rebote al tocar, brillo que cruza al pasar el mouse */
.btn { position: relative; overflow: hidden; isolation: isolate; font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; transition: transform 500ms var(--rebote), box-shadow 300ms ease, background-color 200ms ease; }
.btn--rojo { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .26) 50%, transparent 65%); translate: -120% 0; }
/* al presionar baja rápido (120 ms); al soltar vuelve con un rebote corto */
.btn:active, .mini:active, .comprar:active, .cantidad button:active, .molienda button:active { transform: scale(.96); transition: transform 120ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px) scale(1.03); }
  .btn:hover::after { translate: 120% 0; transition: translate 750ms var(--ease-out); }
  .mini:hover { transform: translateY(-3px) scale(1.02); }
  .cantidad button:hover { background: rgba(245, 239, 230, .08); }
}
.mini, .cantidad button, .molienda button { transition: transform 500ms var(--rebote), border-color 200ms ease, background-color 200ms ease, color 200ms ease; }
/* sin backdrop-filter: las tarjetas se mueven sobre el video y el desenfoque en vivo cuesta mucho en celular */
.mini { background: rgba(14, 11, 9, .78); }

/* cada escena es una página: Comprar se queda quieto en la primera (la del colibrí) y se desvanece con el nombre (viaje.js) */
.nav { justify-content: flex-end; background: none; transition: none; }
.nav.solida { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* en Pídela ya no hay Comprar arriba aunque se llegue de un salto (la ficha tiene su botón) */
.nav.solida { opacity: 0 !important; visibility: hidden !important; }
.nav__marca { display: none; }
.nav .btn { font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 28px -8px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .22); }


/* fundido: al final del viaje la imagen se apaga al color de "Pídela" para que el paso no sea brusco */
.fundido { position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 80% at 50% 38%, #4A5D7E, #1B2638 72%); opacity: 0; pointer-events: none; }

/* celular: la imagen entera de punta a punta, sin velos; el nombre en el centro de la primera escena; los textos abajo con una sombra suave */
@media (max-width: 899px) {
  .viaje { height: 640vh; } /* estándar 10k: cada texto se lee 5 o 6 movimientos de dedo */
  .escenario { --ph: 100svh; }
  .pantalla { inset: 0; left: 0; translate: none; width: 100%; height: 100%; aspect-ratio: auto; max-width: none; }
  .pantalla::after { inset: 0 0 auto; height: 160px; background: linear-gradient(rgba(8, 6, 4, .42), rgba(8, 6, 4, 0)); }
  .banda { top: auto; bottom: calc(32px + env(safe-area-inset-bottom)); }
  /* velo detrás de cada texto: oscurece solo donde está la frase y se apaga antes de los bordes (la imagen sigue viva) */
  .banda::before { content: ""; position: absolute; inset: -70px -16px -44px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 74% 62% at 50% 55%, rgba(6, 5, 4, .7) 0%, rgba(6, 5, 4, .46) 46%, rgba(6, 5, 4, 0) 76%); }
  .banda .btn { text-shadow: none; }
  .banda .titulo__peso { font-size: clamp(44px, 12.8vw, 56px); }
  /* el nombre al centro de la pantalla: el video es el fondo, lo que se vende es el café */
  .banda--marca { top: 0; bottom: 0; gap: 6px; }
  .banda--marca::before { inset: 24% -16px 22%; background: radial-gradient(ellipse 70% 58% at 50% 52%, rgba(6, 5, 4, .66) 0%, rgba(6, 5, 4, .42) 48%, rgba(6, 5, 4, 0) 78%); }
  .banda--marca .marca__nombre { font-size: clamp(110px, 33vw, 140px); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)); }
  .marca__cafe { font-size: 17px; letter-spacing: .36em; padding-left: .36em; }
  .marca__lema { margin-top: 4px; font-size: 21px; }
  .desliza { bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* ===== Pídela: la rueda de productos =====
   Como una vitrina: la bolsa gira en una rueda enorme, el fondo toma el color de cada café,
   los ingredientes flotan y la ficha de compra va encima en vidrio. */
/* después de "Para tu casa." el scroll es normal: la escena del video sube y la tienda entra desde abajo con un pop */
.pidelo { position: relative; z-index: 2; padding-bottom: clamp(72px, 10vw, 120px); box-shadow: 0 -24px 48px -12px rgba(0, 0, 0, .55); }
.rueda__escena { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 33%; }
@media (min-width: 900px) { .rueda__escena { transform-origin: 48% 53%; } }
.rueda { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; touch-action: pan-y; }
.rueda__fondos, .rueda__fondo, .rueda__flota, .capa { position: absolute; inset: 0; }
.rueda__fondo { opacity: 0; transition: opacity 900ms var(--ease-out); }
.rueda__fondo.activa { opacity: 1; }
/* abajo, el color de la tienda se funde con el fondo oscuro de la factura */
.rueda::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(14, 11, 9, 0), var(--fondo)); }
/* el viaje termina en el color de base: arriba la rueda nace de ese mismo tono, sin corte */

/* la rueda: su centro está muy por debajo de la pantalla; cada bolsa cuelga en su radio */
.rueda__giro { --radio-rueda: 150vh; position: absolute; left: 50%; top: calc(33% + var(--radio-rueda)); width: 0; height: 0; z-index: 2; transition: transform 1100ms cubic-bezier(.77, 0, .175, 1); }
.bolsa { position: absolute; left: 0; top: 0; width: auto; height: min(42svh, 400px); max-width: none; transform-origin: 50% calc(50% + var(--radio-rueda)); translate: -50% calc(-50% - var(--radio-rueda)); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)) drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }

/* ingredientes: cada uno en su sitio, con un vaivén lento; al cambiar salen volando y entran los del café nuevo */
.capa { z-index: 1; pointer-events: none; }
.capa[data-estado="activa"] { z-index: 3; }
.pieza { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1vmin + 24px); translate: -50% -50%; rotate: var(--r); opacity: calc(.7 + var(--z) * .1); transition: translate 1100ms cubic-bezier(.77, 0, .175, 1), opacity 700ms ease, rotate 1100ms cubic-bezier(.77, 0, .175, 1); transition-delay: calc(var(--k) * 40ms); }
.pieza img { width: 100%; height: auto; will-change: transform; animation: flotar calc(5s + var(--k) * 1.3s) ease-in-out infinite alternate; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
/* fluidez: solo flotan los ingredientes del café visible y solo si la tienda está en pantalla; la rueda gira en su propia capa */
.capa:not([data-estado="activa"]) .pieza img, .rueda.dormida .pieza img { animation-play-state: paused; }
.rueda__giro { will-change: transform; }
@keyframes flotar { from { transform: translateY(-8px) rotate(-4deg); } to { transform: translateY(8px) rotate(4deg); } }
.capa[data-estado="fuera"] .pieza { opacity: 0; transition-delay: 0ms; }
.rueda[data-dir="sig"] .capa[data-estado="fuera"] .pieza { translate: calc(-50% + var(--z) * 22vw) calc(-50% + 40vh); rotate: calc(var(--r) + 60deg); }
.rueda[data-dir="ant"] .capa[data-estado="fuera"] .pieza { translate: calc(-50% - var(--z) * 22vw) calc(-50% + 40vh); rotate: calc(var(--r) - 60deg); }
.capa[data-estado="sale-sig"] .pieza { opacity: 0; translate: calc(-50% - var(--z) * 26vw) calc(-50% - 30vh); rotate: calc(var(--r) - 80deg); }
.capa[data-estado="sale-ant"] .pieza { opacity: 0; translate: calc(-50% + var(--z) * 26vw) calc(-50% - 30vh); rotate: calc(var(--r) + 80deg); }

/* flechas: vidrio redondo a los lados de la bolsa */
.rueda__flecha { position: absolute; z-index: 5; top: 33%; translate: 0 -50%; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); color: var(--crema); cursor: pointer; transition: transform 450ms var(--rebote), background-color 200ms ease; }
.rueda__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rueda__flecha--ant { left: 12px; }
.rueda__flecha--sig { right: 12px; }
.rueda__flecha:active { transform: scale(.92); transition: transform 120ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rueda__flecha:hover { background: rgba(255, 255, 255, .18); transform: scale(1.06); } }

/* la ficha de compra: una cápsula de vidrio sobre la escena */
.ficha { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 22px 18px 16px; border-radius: 28px; background: rgba(20, 14, 10, .34); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ficha__info { display: grid; gap: 6px; transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out), translate 220ms var(--ease-out); }
.ficha__info.cambiando { opacity: 0; filter: blur(6px); translate: 0 6px; }
.ficha__nombre { margin: 0; font: 600 clamp(28px, 8vw, 40px)/1.05 var(--titulo); letter-spacing: -.035em; color: #fff; }
.ficha__texto { margin: 0; max-width: 32ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .8); text-wrap: balance; }
.ficha__opciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.ficha .molienda { border-color: rgba(255, 255, 255, .2); }
.ficha .molienda button { color: rgba(255, 255, 255, .78); }
.ficha .molienda button[aria-pressed="true"] { background: #fff; color: #1a120c; }
.ficha .cantidad button { border-color: rgba(255, 255, 255, .24); color: #fff; }
.ficha .cantidad output { color: #fff; }
.ficha .btn--grande { width: 100%; }
.puntos { display: flex; gap: 8px; }
.puntos button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.puntos button::before { content: ""; width: 20px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .38); scale: .3 1; transition: scale 300ms var(--ease-out), background-color 300ms ease; }
.puntos button[aria-pressed="true"]::before { scale: 1; background: #fff; }

/* el formulario de envío queda debajo, centrado */
#tu-pedido { padding-top: clamp(40px, 6vw, 72px); scroll-margin-top: 16px; }

@media (min-width: 900px) {
  /* la bolsa queda donde termina la del video, así el fundido cruzado no se ve doble */
  .rueda__giro { left: 48%; top: calc(53% + var(--radio-rueda)); }
  .bolsa { height: min(62svh, 600px); }
  .rueda__flecha { top: 50%; }
  .pieza { left: var(--xp); top: var(--yp); }
  .rueda__flecha--ant { left: 32px; }
  .rueda__flecha--sig { right: 32px; }
  .ficha { left: auto; right: 7vw; top: 50%; bottom: auto; translate: 0 -50%; width: min(420px, 34vw); justify-items: start; text-align: left; padding: 32px 30px 24px; }
  .ficha__opciones { justify-content: flex-start; }
  .ficha__nombre { font-size: clamp(36px, 3.4vw, 52px); }
}
/* celulares bajitos (Galaxy S8, iPhone SE): bolsa y ficha más compactas para que no se toquen */
@media (max-width: 899px) and (max-height: 800px) { .bolsa { height: 36svh; } .ficha { gap: 10px; padding: 16px 16px 12px; } .ficha__nombre { font-size: 28px; } }
@media (max-width: 899px) and (max-height: 680px) { .ficha__texto { display: none; } }

/* el movimiento se mantiene aunque el celular pida reducirlo (ahorro de batería lo activa en muchos Android y iPhone):
   lo mueve la persona con un toque, no es un fondo animado */
.rueda.arrastrando { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.rueda.arrastrando .rueda__giro { transition: none; }
button, a, .rueda__flecha { touch-action: manipulation; }
html { color-scheme: dark; }
@media (prefers-reduced-transparency: reduce) {
  .ficha, .rueda__flecha, .mini { background: rgba(24, 18, 14, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== Tu pedido: la impresora de facturas =====
   Una impresora térmica imprime el pedido línea a línea; al cambiarlo, el tiquete viejo se arranca y cae. */
.caja { display: grid; gap: 28px; align-items: start; max-width: 1040px; }
@media (min-width: 900px) { .caja { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; } }
.impresora { --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; position: relative; width: min(100%, 360px); margin-inline: auto; padding-bottom: 24px; }
.impresora__cuerpo { position: relative; z-index: 2; height: 64px; border-radius: 22px 22px 16px 16px; background: linear-gradient(#2A2622, #151210 60%, #0E0C0A); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .5); display: flex; align-items: flex-start; gap: 8px; padding: 14px 18px; }
.impresora__led { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #6E6A63; box-shadow: 0 0 0 2px rgba(255, 255, 255, .04); transition: background-color 200ms ease, box-shadow 200ms ease; }
.impresora[data-estado="imprimiendo"] .impresora__led { background: #F2B42A; box-shadow: 0 0 10px rgba(242, 180, 42, .8); animation: led 900ms ease-in-out infinite alternate; }
.impresora[data-estado="lista"] .impresora__led { background: #4CC27A; box-shadow: 0 0 8px rgba(76, 194, 122, .6); }
@keyframes led { to { opacity: .35; } }
.impresora__estado { font: 600 10px/1.4 var(--mono); letter-spacing: .18em; color: rgba(245, 239, 230, .55); }
.impresora__ranura { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 6px; border-radius: 4px; background: #050404; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06); }
/* la salida solo recorta por arriba: el papel sale de la ranura y el viejo puede caer por debajo */
.impresora__salida { position: relative; z-index: 1; margin: -13px 22px 0; min-height: 120px; clip-path: inset(0 -100vw -100vh -100vw); filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .45)); transition: height 300ms var(--ease-out); }
.tiquete { position: absolute; inset: 0 0 auto; overflow: hidden; padding: 22px 18px 26px; background: #FAF8F3; color: #1A1612; font: 400 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .7);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; will-change: transform; }
.tiquete.arrancado { z-index: 0; transform-origin: 30% 0; }
.tq-logo { width: 30px; height: 30px; margin: 0 auto 6px; display: grid; place-items: center; background: #1A1612; color: #FAF8F3; border-radius: 6px; font: 700 15px/1 var(--mono); }
.tq-marca { text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .32em; padding-left: .32em; }
.tq-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: #6B635B; }
.tq-sep { margin: 8px 0; border-top: 1px dashed rgba(26, 22, 18, .55); }
.tq-doble { margin: 8px 0; height: 5px; border-block: 1px solid #1A1612; }
.tq-fila { display: flex; align-items: baseline; gap: 6px; }
.tq-fila i { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(26, 22, 18, .5); transform: translateY(-3px); }
.tq-fila span:last-child { text-align: right; overflow-wrap: anywhere; max-width: 62%; }
.tq-fila--fuerte { font-weight: 700; }
.tq-sub { padding-left: 14px; font-size: 10px; color: #6B635B; }
.tq-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.tq-total b { font-size: 22px; letter-spacing: -.02em; }
.tq-total small { font-size: 10px; font-weight: 400; color: #6B635B; }
.tq-vacio { text-align: center; font-weight: 700; margin-top: 4px; }
.tq-barras { margin-top: 12px; text-align: center; }
.tq-barras svg { display: block; width: 70%; height: 40px; margin: 0 auto 2px; fill: #1A1612; }
.tq-barras small { font-size: 9px; letter-spacing: .3em; }
.tq-gracias { text-align: center; margin-top: 8px; font-weight: 700; letter-spacing: .12em; }

/* el formulario, sobrio y oscuro: la factura es la protagonista */
.pedido { display: grid; gap: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--linea); color: var(--crema); border-radius: 24px; padding: clamp(20px, 4vw, 30px); }
.pedido__titulo { margin: 0; font: 600 clamp(22px, 2.4vw, 28px)/1.15 var(--titulo); letter-spacing: -.03em; text-transform: none; }
.campo { color: var(--crema-2); font: 500 13px/1.2 var(--texto); }
.campo input { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: var(--crema); }
.campo input:focus { border-color: var(--crema-2); box-shadow: 0 0 0 4px rgba(245, 239, 230, .12); }
.pedido__error { color: #FF8A80; }
.pedido__nota { color: var(--crema-2); }
.pedido .btn--linea { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
/* ===== Entradas de los titulares del video (estándar 10k: cada frase entra como lo que pasa en la imagen) =====
   --k la escribe viaje.js con el scroll (0 a 1) y todo se deshace al volver hacia arriba. Solo transform y opacity. */
.banda .w { display: inline-block; will-change: transform, opacity; }
/* caen las cerezas / cae el café molido: las palabras bajan a su sitio una tras otra */
.banda[data-entrada="cae"] .w { --kc: clamp(0, calc((var(--k, 1) - var(--i) * .14) * 2.6), 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * -28px)); }
/* el molino golpea: cada palabra llega con un leve rebote de escala */
.banda[data-entrada="golpe"] .w { --kc: clamp(0, calc((var(--k, 1) - var(--i) * .16) * 3), 1); --ks: clamp(0, calc((var(--k, 1) - var(--i) * .16 - .14) * 3), 1); opacity: var(--kc); transform: scale(calc(.62 + .5 * var(--kc) - .12 * var(--ks))); }
/* la bolsa quieta: el titular sube por palabras y se asienta */
.banda[data-entrada="sube"] .w { --kc: clamp(0, calc((var(--k, 1) - var(--i) * .12) * 2.8), 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 24px)); }
/* después llegan la línea de apoyo y, al final, el botón o las tarjetas */
.banda[data-entrada] .banda__texto { opacity: clamp(0, calc((var(--k, 1) - .5) * 3), 1); transform: translateY(calc((1 - clamp(0, calc((var(--k, 1) - .5) * 3), 1)) * 10px)); }
.banda[data-entrada] .btn, .banda[data-entrada] .minis { opacity: clamp(0, calc((var(--k, 1) - .7) * 4), 1); }

/* pestaña oculta: todo lo que gira o flota se pausa (animation-play-state no se hereda, por eso va a cada elemento) */
body.pausado *, body.pausado *::before, body.pausado *::after { animation-play-state: paused !important; }

/* los puntos de la tienda se ven pequeños pero se tocan cómodos con el dedo */
@media (pointer: coarse) { .puntos { gap: 0; } .puntos button { width: 44px; height: 44px; } }
/* sombra de texto en tres capas (borde, brillo medio y caída amplia) para leer sobre cualquier cuadro del video; los botones no la llevan */
:root { --tsombra: 0 1px 2px rgba(5, 4, 3, .95), 0 3px 12px rgba(5, 4, 3, .78), 0 10px 44px rgba(5, 4, 3, .8); }
.banda { text-shadow: var(--tsombra); }
.banda .btn, .banda .mini { text-shadow: none; }
/* legibilidad (auditoría del peor cuadro): la línea de apoyo en crema plena y el lema un tono más claro sobre el cielo */
.banda__texto { color: var(--crema); }
.marca__lema { color: #FFCB57; }