/* =========================================================
   KALLPA · Pulso — color, movimiento e interacción
   Los colores salen del propio producto: ámbar del café, rojo de
   los frutos rojos, verde de la hoja de café y el tricolor de la
   etiqueta. El dorado sigue siendo el color de compra.
   ========================================================= */

@property --acento { syntax: "<color>"; inherits: true; initial-value: #e2ca96; }
@property --acento-2 { syntax: "<color>"; inherits: true; initial-value: #e08a2e; }

:root {
  --ambar: #e08a2e;
  --rojo: #e8505b;
  --hoja: #9dbb5c;
  --cafe: #7a4a24;
  --acento: #e2ca96;
  --acento-2: #e08a2e;
  transition: --acento 1.1s ease, --acento-2 1.1s ease;
}

/* Cada capítulo tiene su atmósfera */
html[data-cap="0"] { --acento: #e2ca96; --acento-2: #e08a2e; }
html[data-cap="1"] { --acento: #f0626d; --acento-2: #e08a2e; }
html[data-cap="2"] { --acento: #f0a03c; --acento-2: #c0763a; }
html[data-cap="3"] { --acento: #9dbb5c; --acento-2: #e08a2e; }
html[data-cap="4"] { --acento: #f1d79a; --acento-2: #e8505b; }

/* ---------- Aura de color ---------- */

.aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aura i {
  position: absolute; left: 0; top: 0; width: 96vmax; height: 96vmax; border-radius: 50%;
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0);
  transition: transform 1.5s var(--camara);
  animation: deriva 17s ease-in-out infinite alternate;
}
.aura i:nth-child(1) { --x: var(--a1x, 50vw); --y: var(--a1y, 26vh); background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 30%, transparent), transparent); }
.aura i:nth-child(2) { --x: var(--a2x, 8vw); --y: var(--a2y, 92vh); background: radial-gradient(closest-side, color-mix(in srgb, var(--acento-2) 24%, transparent), transparent); animation-duration: 23s; animation-direction: alternate-reverse; }
.aura i:nth-child(3) { --x: 92vw; --y: 104vh; width: 70vmax; height: 70vmax; background: radial-gradient(closest-side, rgba(122, 74, 36, 0.3), transparent); animation-duration: 29s; }
@keyframes deriva { from { translate: -3vw 2vh; scale: 0.94; } to { translate: 4vw -3vh; scale: 1.1; } }

html[data-cap="2"] { --a1x: 30vw; --a1y: 22vh; --a2x: 96vw; --a2y: 70vh; }
html[data-cap="3"] { --a1x: 62vw; --a1y: 18vh; --a2x: 4vw; --a2y: 80vh; }
html[data-cap="4"] { --a2x: 96vw; --a2y: 88vh; }

/* ---------- Texto con color ---------- */

.cap .kicker { color: var(--acento); }

h1 em:not(:has(.pal)), h1 em .pal > span {
  background: linear-gradient(100deg, var(--oro-claro) 10%, var(--acento-2) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Titulares: cada palabra sube desde su renglón */
.es-pulso .pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.1em 0 0.16em; margin: -0.1em 0 -0.16em; }
.es-pulso .pal > span { display: inline-block; transform: translateY(112%); transition: transform 0.95s var(--salida); }
.es-pulso .cap.es-actual .pal > span { transform: none; transition-delay: calc(0.28s + var(--p) * 65ms); }

/* Palabra gigante de fondo */
.cap__eco { display: none; }
.es-pulso .cap__eco {
  display: block; position: absolute; z-index: -1; left: 50%; top: 24dvh;
  font-family: var(--titulos); font-stretch: 125%; font-weight: 900; font-size: 30vw; line-height: 0.8; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--acento) 24%, transparent);
  opacity: 0;
  transform: translate(calc(-50% + 16vw + var(--mx, 0) * -22px), calc(-50% + var(--my, 0) * -14px));
  transition: transform 1.5s var(--salida), opacity 1.1s;
  user-select: none;
}
.es-pulso .cap.es-pasado .cap__eco { transform: translate(calc(-50% - 16vw), -50%); }
.es-pulso .cap.es-actual .cap__eco { opacity: 1; transform: translate(calc(-50% + var(--mx, 0) * -22px), calc(-50% + var(--my, 0) * -14px)); }

/* ---------- Botón de compra: brillo que lo recorre ---------- */

.btn--oro { position: relative; overflow: hidden; background: linear-gradient(100deg, #e2ca96, #f4e3b6 48%, #d6b677); }
.btn--oro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.6) 50%, transparent 64%);
  transform: translateX(-120%); animation: brillo 4.6s infinite;
}
@keyframes brillo { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (hover: hover) { .btn--oro:hover { background: linear-gradient(100deg, #efdcae, #fbeecb 48%, #e2c588); } }
.btn--oro, .hud__boton { transition: translate 0.25s var(--salida), transform 0.16s var(--salida), background-color 0.16s, color 0.16s, border-color 0.16s; }

.hud__boton--carrito { border-color: color-mix(in srgb, var(--acento) 55%, transparent); }

/* ---------- Tarro: entra, responde al toque ---------- */

.tarro__flota { transition: opacity 0.9s, scale 1.3s var(--salida); }
.es-pulso:not(.es-listo) .tarro__flota { opacity: 0; scale: 0.7; }
.es-pulso .tarro__img { pointer-events: auto; cursor: pointer; }
.tarro.es-golpe .tarro__img { animation: golpe 0.55s var(--salida); }
@keyframes golpe { 0% { scale: 1; } 30% { scale: 0.93; } 62% { scale: 1.04; } 100% { scale: 1; } }

/* Brillo recortado con la silueta del tarro: se desplaza al inclinarlo */
.tarro__brillo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, 0.26) 50%, transparent 62%) var(--bx, 50%) 0 / 260% 100% no-repeat;
  -webkit-mask: url("../assets/img/tarro.webp") center / contain no-repeat;
  mask: url("../assets/img/tarro.webp") center / contain no-repeat;
}

.giro {
  position: fixed; z-index: 5; right: max(var(--margen), var(--der)); top: calc(var(--hud-h) + var(--arriba) + 6px);
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px;
  border: 1px solid color-mix(in srgb, var(--acento) 60%, transparent); background: rgba(7, 8, 7, 0.7);
  font-family: var(--titulos); font-stretch: 106%; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em;
}
/* Solo donde el tarro está a la vista */
html:not(.es-pulso) .giro, html[data-cap="2"] .giro, html[data-cap="3"] .giro, .giro[hidden] { display: none; }
.giro svg { width: 20px; height: 20px; fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-linecap: round; animation: mecer 2.4s ease-in-out infinite; }
@keyframes mecer { 0%, 100% { rotate: -12deg; } 50% { rotate: 12deg; } }

.tarro__latido { background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 30%, transparent), color-mix(in srgb, var(--acento-2) 9%, transparent) 55%, transparent 72%); }
.tarro__anillo i { border-color: color-mix(in srgb, var(--acento) 60%, transparent); }
.tarro__anillo i::after { background: var(--acento); box-shadow: 0 0 16px 4px color-mix(in srgb, var(--acento) 75%, transparent); }
.tarro__onda {
  position: absolute; left: 50%; top: 52%; width: 100%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; border: 2px solid var(--acento); pointer-events: none;
  animation: onda 0.95s var(--salida) forwards;
}
.tarro__onda + .tarro__onda { animation-delay: 0.14s; border-width: 1px; }
@keyframes onda { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(2); opacity: 0; } }

.vuelo { position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none; transform-origin: 0 0; transition: transform 0.62s cubic-bezier(0.55, 0, 0.3, 1), opacity 0.62s ease-in; }

/* ---------- 01 Fórmula: ingredientes con color ---------- */

.orbita__item { transition: opacity 0.3s, border-color 0.3s; }
.orbita__item b { transition: color 0.3s; }
.orbita__item b::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; vertical-align: 0.12em;
  background: var(--c, var(--oro)); transition: box-shadow 0.3s, scale 0.3s;
}
.orbita.hay-activo .orbita__item:not(.es-activo) { opacity: 0.42; }
.orbita__item.es-activo { border-color: var(--c); }
.orbita__item.es-activo b { color: var(--c); }
.orbita__item.es-activo b::before { scale: 1.5; box-shadow: 0 0 16px 4px color-mix(in srgb, var(--c) 70%, transparent); }

/* ---------- 02 Preparación: el vaso ---------- */

.vaso { --liq: #2b170c; width: 110px; flex: none; }
.vaso[data-liquido="leche"] { --liq: #b98a5c; }
.vaso svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--acento) 30%, transparent)); }
.vaso__borde { fill: none; stroke: var(--oro-claro); stroke-width: 2.5; stroke-linejoin: round; }
.vaso__ola { fill: var(--liq); transition: fill 0.7s; animation: ola 3.4s linear infinite; }
@keyframes ola { to { transform: translateX(80px); } }
.vaso__liquido { transition: transform 1.9s var(--salida); }
.es-pulso .cap:not(.es-actual) .vaso__liquido { transform: translateY(175px); transition-duration: 0.01s; transition-delay: 1s; }
.es-pulso .cap.es-actual .vaso__liquido { transition-delay: 0.55s; }
.vaso__brillo { fill: rgba(255, 255, 255, 0.13); }
.vaso__hielos { transition: opacity 0.45s, transform 0.7s var(--salida); }
.vaso__hielos rect { fill: rgba(255, 255, 255, 0.2); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; }
.vaso[data-temp="caliente"] .vaso__hielos { opacity: 0; transform: translateY(26px); }
.vaso__vapor path { fill: none; stroke: rgba(247, 243, 235, 0.6); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.vaso[data-temp="caliente"] .vaso__vapor path { animation: vapor 2.6s ease-in-out infinite; }
.vaso__vapor path:nth-child(2) { animation-delay: 0.5s !important; }
.vaso__vapor path:nth-child(3) { animation-delay: 1s !important; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-14px); } }

.modos { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.modo { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linea-fuerte); }
.modo button {
  min-height: 44px; padding: 0 15px;
  font-family: var(--titulos); font-stretch: 106%; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--apagado); transition: background-color 0.25s, color 0.25s;
}
.modo button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-oro); }
@media (hover: hover) { .modo button[aria-pressed="false"]:hover { color: var(--texto); background: rgba(226, 202, 150, 0.1); } }

.pasos li::before { color: var(--acento); }
.prep__fotos figure { overflow: hidden; }
.prep__fotos img { transition: transform 0.7s var(--salida); }
@media (hover: hover) { .prep__fotos figure:hover img { transform: scale(1.07); } }
.prep__fotos figcaption { color: var(--acento); }

.es-pulso .cap--preparacion .cap__cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; justify-content: start; gap: 14px 16px; }
.es-pulso .vaso { width: auto; height: min(27dvh, 50vw); aspect-ratio: 160 / 232; }
.es-pulso .prep__fotos img { height: min(27dvh, 50vw); }
.es-pulso .prep__fotos figure:nth-child(2) { display: none; }
.es-pulso .prep__fotos figure { max-width: none; flex: none; }
.es-pulso .prep__fotos img { width: auto; aspect-ratio: 3 / 4; }
.es-pulso .sellos li:nth-child(3) { display: none; }
.es-pulso .prep__texto { grid-column: 1 / -1; }

.panel__fotos { display: grid; gap: 10px; }
.panel__fotos img { width: 100%; border: 1px solid var(--linea); }

/* ---------- 03 Origen ---------- */

.cifras b { color: var(--acento); }
.es-pulso .origen__fondo { animation: paisaje 26s ease-in-out infinite alternate; }
@keyframes paisaje { from { scale: 1; translate: 0 0; } to { scale: 1.12; translate: -2vw -1vh; } }

/* ---------- 04 Producto ---------- */

.sellos { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.sellos li {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  border: 1px solid var(--linea-fuerte);
  font-family: var(--titulos); font-stretch: 106%; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
/* El tricolor de la etiqueta del tarro */
.sello--colombia::before { content: ""; width: 17px; height: 11px; flex: none; background: linear-gradient(#fcd116 50%, #003893 50% 75%, #ce1126 75%); }
.compra__total { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--oro-claro); margin-left: 8px; white-space: nowrap; }
.compra__total[hidden] { display: none; }
.cantidad output.es-cambio { animation: salto 0.3s var(--salida); }

.btn[hidden], .carrito__agotado[hidden] { display: none; }
.btn:disabled { background: none; color: var(--apagado); box-shadow: inset 0 0 0 1px var(--linea-fuerte); cursor: default; clip-path: none; }
.btn:disabled::before { display: none; }
.carrito__agotado { border: 1px solid var(--linea-fuerte); padding: 14px 16px; font-size: 0.92rem; color: var(--texto) !important; }

@media (max-height: 700px) {
  .es-pulso .sellos { display: none; }
  .es-pulso .vaso, .es-pulso .prep__fotos img { height: min(18dvh, 50vw); }
  .es-pulso .pasos li { padding: 6px 0; }
}

/* ---------- Invitación a los paneles ---------- */

.abre {
  display: inline-flex; align-items: center; gap: 13px; text-align: left;
  min-height: 54px; padding: 7px 20px 7px 8px;
  border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent);
  background: rgba(7, 8, 7, 0.45);
  transition: border-color 0.2s, background-color 0.2s, translate 0.25s var(--salida);
}
.abre i {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--acento); animation: llamar 2.4s infinite;
  transition: rotate 0.35s var(--salida);
}
.abre i::before, .abre i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 2px; background: var(--sobre-oro); }
.abre i::after { rotate: 90deg; }
.abre span { display: grid; gap: 2px; font-family: var(--titulos); font-stretch: 108%; font-weight: 700; font-size: 0.95rem; line-height: 1.15; }
.abre small { font-family: var(--lectura); font-weight: 400; font-size: 0.74rem; color: var(--apagado); }
.abre:active { translate: 0 1px; }
@media (hover: hover) {
  .abre:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, rgba(7, 8, 7, 0.45)); }
  .abre:hover i { rotate: 90deg; }
}
@keyframes llamar {
  0%, 34%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 0%, transparent); }
  8% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 34%, transparent); }
  22% { box-shadow: 0 0 0 13px color-mix(in srgb, var(--acento) 0%, transparent); }
}

.compra__mas { gap: 8px; padding-top: 12px; }
.mas {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px;
  border: 1px solid var(--linea-fuerte);
  font-family: var(--titulos); font-stretch: 106%; font-weight: 600; font-size: 0.82rem;
  transition: border-color 0.2s, background-color 0.2s;
}
.mas::before { content: "+"; color: var(--acento); font-size: 1.15rem; font-weight: 400; line-height: 1; }
@media (hover: hover) { .mas:hover { border-color: var(--acento); background: rgba(226, 202, 150, 0.08); } }

.hud__boton--explorar { position: relative; }
.hud__aviso { position: absolute; right: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); animation: latido-punto 2.4s infinite; }
.hud__aviso[hidden] { display: none; }

.indice { display: grid; border-top: 1px solid var(--linea); }
.indice button {
  width: 100%; display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 10px; text-align: left;
  min-height: 72px; padding: 12px 6px 12px 0; border-bottom: 1px solid var(--linea);
  transition: background-color 0.2s, padding 0.3s var(--salida);
}
.indice i { font-style: normal; font-family: var(--titulos); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.12em; color: var(--oro); }
.indice span { display: grid; gap: 3px; }
.indice b { font-family: var(--titulos); font-stretch: 110%; font-weight: 700; font-size: 1.12rem; line-height: 1.15; }
.indice small { font-size: 0.84rem; color: var(--apagado); }
.indice svg { width: 20px; height: 20px; fill: none; stroke: var(--oro-claro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.25s var(--salida); }
@media (hover: hover) {
  .indice button:hover { background: rgba(226, 202, 150, 0.06); padding-left: 12px; }
  .indice button:hover svg { translate: 4px 0; }
}

.instalar { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--linea-fuerte); background: var(--negro); }
.instalar[hidden] { display: none; }
.instalar img { border-radius: 14px; }
.instalar b { font-family: var(--titulos); font-stretch: 110%; font-size: 1.08rem; }
.instalar p { font-size: 0.9rem; margin: 4px 0 6px; }
.instalar .btn[hidden] { display: none; }

@media (max-width: 380px) { .mas { padding: 0 9px; font-size: 0.76rem; gap: 5px; } .compra__mas { gap: 6px; } }
@media (max-height: 700px) {
  .es-pulso .cap--producto .kicker { display: none; }
  .es-pulso .abre { min-height: 46px; padding: 4px 16px 4px 6px; }
  .es-pulso .abre i { width: 32px; height: 32px; }
  .es-pulso .abre small { display: none; }
}

/* ---------- El pulso, vivo ---------- */

.pulso__avance { background: linear-gradient(90deg, var(--oro-claro), var(--acento)); }
.pulso__onda { stroke: var(--acento); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento) 80%, transparent)); background: none; }
.pulso__onda path { animation: latir 2.4s infinite; }
@keyframes latir { 0% { stroke-dashoffset: 150; } 38%, 100% { stroke-dashoffset: 0; } }
.pulso.es-latiendo .pulso__onda path { animation: trazo 0.9s var(--salida), latir 2.4s 0.9s infinite; }
.pulso__linea::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 120px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
  animation: recorrer 3.8s linear infinite;
}
@keyframes recorrer { from { transform: translateX(-120px); } to { transform: translateX(100vw); } }
.pulso__nodos [aria-current] { color: var(--acento); }
.pulso__nodos [aria-current] i { animation: latido-nodo 2.4s infinite; }
@keyframes latido-nodo { 0%, 30%, 100% { scale: 1; } 8% { scale: 1.3; } 20% { scale: 1.12; } }

.es-pulso .estela { border-color: color-mix(in srgb, var(--acento) 70%, transparent); }
.es-pulso .estela.es-sobre { background: color-mix(in srgb, var(--acento) 12%, transparent); }

/* ---------- Paneles ---------- */

.panel[open] .panel__contenido > * { animation: sube 0.55s var(--salida) both; }
.panel[open] .panel__contenido > :nth-child(2) { animation-delay: 0.06s; }
.panel[open] .panel__contenido > :nth-child(3) { animation-delay: 0.12s; }
.panel[open] .panel__contenido > :nth-child(4) { animation-delay: 0.18s; }
.panel[open] .panel__contenido > :nth-child(n + 5) { animation-delay: 0.24s; }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }
.opinion { transition: border-color 0.25s, transform 0.25s var(--salida); }
@media (hover: hover) { .opinion:hover { border-color: var(--oro); transform: translateX(4px); } }
.proximamente { animation: respira 2.4s ease-in-out infinite; }
@keyframes respira { 50% { box-shadow: 0 0 26px 0 rgba(226, 202, 150, 0.28); } }

/* =========================================================
   Escritorio
   ========================================================= */

@media (min-width: 900px) and (min-height: 560px) {
  html[data-cap="0"] { --a1x: 71vw; --a1y: 52vh; --a2x: 6vw; --a2y: 96vh; }
  html[data-cap="1"] { --a1x: 50vw; --a1y: 58vh; --a2x: 92vw; --a2y: 8vh; }
  html[data-cap="2"] { --a1x: 22vw; --a1y: 58vh; --a2x: 88vw; --a2y: 42vh; }
  html[data-cap="3"] { --a1x: 70vw; --a1y: 46vh; --a2x: 4vw; --a2y: 84vh; }
  html[data-cap="4"] { --a1x: 29vw; --a1y: 52vh; --a2x: 92vw; --a2y: 86vh; }

  .es-pulso .cap__eco { top: 52%; font-size: min(21vw, 46dvh); }

  /* 02: tarro, vaso, texto y foto */
  .es-pulso .viaje[data-cap="2"] { --tx: 14vw; --ts: 0.62; }
  .es-pulso .cap--preparacion .cap__cuerpo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3.5vw; padding-left: 41vw; }
  .es-pulso .vaso { position: absolute; left: 27vw; top: 50%; height: 30dvh; translate: 0 -32%; }
  .es-pulso .prep__fotos img { height: auto; }
  .es-pulso .prep__texto { grid-column: auto; }
  .es-pulso .prep__fotos figure:nth-child(1) { margin-top: 0; }

  /* 01: la línea hacia el tarro toma el color del ingrediente */
  .es-pulso .orbita__item--izq, .es-pulso .orbita__item--der { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
  .es-pulso .orbita__item::after { background: linear-gradient(to right, var(--c), transparent); transition: width 0.4s var(--salida); }
  .es-pulso .orbita__item.es-activo::after { width: 7vw; }
  .es-pulso .orbita__item { cursor: pointer; }

  .es-pulso .sellos { display: flex; }
  .es-pulso .sellos li:nth-child(3) { display: inline-flex; }
  .es-pulso .prep__fotos img { width: 100%; }
}

/* ---------- Celulares angostos y bajitos ---------- */

.compra, .compra > * { min-width: 0; }

@media (max-width: 350px) {
  .cantidad { grid-template-columns: 40px 32px 40px; }
  .compra__fila .btn { padding: 0 10px; font-size: 0.88rem; }
  .hud__boton { padding: 0 9px; }
  .marca { gap: 8px; }
  .marca__texto { font-size: 0.92rem; letter-spacing: 0.1em; }
  .marca__texto small { letter-spacing: 0.32em; }
  .modos { gap: 6px; }
  .modo button { padding: 0 9px; font-size: 0.78rem; }
}

@media (max-width: 899px) and (max-height: 830px) { .es-pulso .sellos { display: none; } }

/* Pantallas bajitas (celulares pequeños, o Safari con sus barras visibles):
   se quita lo accesorio para que lo esencial quepa sin montarse. */
@media (max-height: 600px) {
  .es-pulso { --hud-h: 58px; --nav-h: 70px; }
  .es-pulso .cap__cuerpo { gap: 9px; padding-bottom: 8px; }
  .es-pulso .cap .kicker, .es-pulso .cap--marca .bajada, .es-pulso .cap--origen .bajada { display: none; }
  .es-pulso .orbita__item span { display: none; }
  .es-pulso .orbita__item { padding: 7px 0 6px; }
  .es-pulso .vaso, .es-pulso .prep__fotos img { height: min(14dvh, 50vw); }
  .es-pulso .pasos li { padding: 4px 0; }
  .es-pulso .pasos b { font-size: 1rem; }
  .es-pulso .pasos span { font-size: 0.84rem; }
  .es-pulso .compra__seguro { display: none; }
  .es-pulso .prep__fotos figcaption { display: none; }
  .es-pulso .club-aviso { min-height: 40px; }
  .pulso__linea { top: 20px; }
  .pulso__nodos button { padding-top: 30px; }
}

/* ---------- Producto: WhatsApp, oferta, opinión a la vista, 360 ---------- */

.wa { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; justify-self: start; text-decoration: none; font-family: var(--titulos); font-stretch: 106%; font-weight: 600; font-size: 0.9rem; }
.wa svg { width: 22px; height: 22px; fill: none; stroke: #25d366; stroke-width: 1.5; stroke-linejoin: round; flex: none; }
.wa span { background: linear-gradient(var(--linea-fuerte), var(--linea-fuerte)) left bottom / 100% 1px no-repeat; padding-bottom: 2px; }
@media (hover: hover) { .wa:hover span { background-image: linear-gradient(#25d366, #25d366); } }
.compra__oferta { font-size: 0.88rem; color: var(--oro-claro); }
.compra__oferta[hidden] { display: none; }

.voz { text-align: left; display: grid; gap: 4px; padding: 2px 0 2px 13px; border-left: 2px solid var(--acento); }
.voz span { font-size: 0.9rem; line-height: 1.4; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voz b { font-size: 0.76rem; font-weight: 500; color: var(--apagado); }
.voz span, .voz b { transition: opacity 0.4s; }
.voz.es-cambio span, .voz.es-cambio b { opacity: 0; }

.ver360 {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; justify-self: start;
  margin: 16px var(--margen) 0;
  border: 1px solid color-mix(in srgb, var(--acento) 60%, transparent); background: rgba(7, 8, 7, 0.7);
  font-family: var(--titulos); font-stretch: 106%; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em;
}
.ver360 svg { width: 20px; height: 20px; fill: none; stroke: var(--acento); stroke-width: 1.4; }
.ver360 { position: fixed; z-index: 5; margin: 0; left: max(var(--margen), var(--izq)); top: calc(var(--hud-h) + var(--arriba) + 6px); }
html:not([data-cap="4"]) .ver360 { display: none; }
/* En celular es un sello redondo al lado del tarro, para no taparlo */
@media (max-width: 899px), (max-height: 559px) {
  .ver360 { width: 50px; height: 50px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; font-size: 0.74rem; letter-spacing: 0.02em; }
  .ver360 svg, .ver360__largo { display: none; }
}

/* ---------- Visor 360 ---------- */

.visor {
  position: relative; height: clamp(300px, 54dvh, 480px); display: grid; place-items: center;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  background: radial-gradient(closest-side, rgba(198, 165, 106, 0.16), transparent);
}
.visor:active { cursor: grabbing; }
.visor__escena { perspective: 1100px; }
.visor__tarro { position: relative; transform-style: preserve-3d; transform: rotateX(-13deg); }
.visor__gira { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ang, -191deg)); }
.visor__tarro i { position: absolute; left: 50%; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-repeat: no-repeat; }
.visor__saltos { display: flex; flex-wrap: wrap; gap: 8px; }

.forma { display: grid; gap: 14px; max-width: 520px; }
.forma label { display: grid; gap: 6px; font-size: 0.86rem; color: var(--apagado); }
.forma input, .forma textarea {
  font: inherit; font-size: 1rem; color: var(--texto); background: var(--negro);
  border: 1px solid var(--linea-fuerte); border-radius: 0; padding: 12px; width: 100%; resize: vertical;
}
.forma .btn { justify-self: start; }
.conmuta { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.conmuta input { width: 22px; height: 22px; accent-color: var(--oro-claro); }

/* ---------- Celular: se avanza deslizando hacia abajo ----------
   La navegación horizontal sugería deslizar a los lados. En celular los
   capítulos entran desde abajo, el riel de capítulos es vertical y la franja
   inferior dice a dónde lleva el siguiente deslizamiento. */

.pulso__sigue { display: none; }

@media (max-width: 899px), (max-height: 559px) {
  .es-pulso { --nav-h: 64px; }
  .es-pulso .cap { transform: translateY(11dvh); }
  .es-pulso .cap.es-pasado { transform: translateY(-11dvh); }
  .es-pulso .cap.es-actual { transform: none; }
  .es-pulso .cap__eco { transform: translate(-50%, calc(-50% + 9dvh)); }
  .es-pulso .cap.es-pasado .cap__eco { transform: translate(-50%, calc(-50% - 9dvh)); }
  .es-pulso .cap.es-actual .cap__eco { transform: translate(calc(-50% + var(--mx, 0) * -22px), calc(-50% + var(--my, 0) * -14px)); }

  .es-pulso .pulso__linea { display: none; }
  .es-pulso .pulso__sigue {
    position: absolute; left: 0; right: 0; top: 0; height: var(--nav-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--titulos); font-stretch: 108%; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado);
  }
  .pulso__sigue b { color: var(--acento); font-weight: 700; }
  .pulso__sigue svg { width: 24px; height: 24px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: baja 1.5s ease-in-out infinite; }
  .pulso__sigue.es-fin svg { rotate: 180deg; order: -1; }

  .es-pulso .pulso .pulso__nodos {
    position: fixed; z-index: 5; right: max(1px, var(--der)); top: 50%; translate: 0 -50%;
    display: flex; flex-direction: column; width: 18px; height: auto;
  }
  .es-pulso .pulso .pulso__nodos button { width: 18px; height: 28px; padding: 0; display: grid; place-items: center; }
  .es-pulso .pulso .pulso__nodos i, .es-pulso .pulso .pulso__nodos span { display: none; }
  .es-pulso .pulso .pulso__nodos button::before { content: ""; width: 4px; height: 4px; border-radius: 2px; background: var(--apagado); opacity: 0.6; transition: height 0.45s var(--salida), background-color 0.45s, opacity 0.45s; }
  .es-pulso .pulso .pulso__nodos [aria-current]::before { height: 20px; background: var(--acento); opacity: 1; }

  .es-pulso .compra { gap: 7px; }
}
@keyframes baja { 0%, 100% { translate: 0 -3px; opacity: 0.45; } 50% { translate: 0 4px; opacity: 1; } }

@media (max-width: 899px) and (max-height: 900px) { .es-pulso .voz { display: none; } }
@media (max-width: 899px) and (max-height: 700px) { .es-pulso .compra__seguro { display: none; } }
@media (max-height: 600px) { .es-pulso { --nav-h: 54px; } }

@media (min-width: 900px) and (min-height: 560px) {
  .ver360 { left: 29vw; top: auto; bottom: calc(var(--nav-h) + 2.5dvh); translate: -50% 0; }
}
@media (min-width: 900px) and (max-height: 800px) { .es-pulso .voz, .es-pulso .compra__sub { display: none; } }

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  :root, .aura i, .es-pulso .pal > span, .es-pulso .cap__eco, .vaso__liquido, .tarro__flota { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .es-pulso .pal > span { transform: none; }
  .es-pulso .cap:not(.es-actual) .vaso__liquido { transform: none; }
  .vaso[data-temp="caliente"] .vaso__vapor path { opacity: 0.7; }
}