/* Rincones con Café | El Podcast
   Mundo continuo, estética retro / stoner rock editorial.
   Paleta e identidad: Manual Maestro (Inter + Source Serif 4, terracota solo en CTAs). */

:root {
  --cafe: #2C1810; --terracota: #C45C26; --crema: #F5EDE3; --bosque: #3D4F3A;
  --dorado: #C4A574; --carbon: #1A1A1A; --gris: #8A8178; --suave: #EDE6DC;

  --sc-canvas: #2C1810;
  --sc-surface: #1A1A1A;
  --sc-ink: #F5EDE3;
  --sc-ink-soft: #DDCFBB;
  --sc-accent: #C45C26;
  --sc-accent-ink: #1A1A1A;
  --sc-font-display: "Inter", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --r: 10px;               /* una sola escala de radio: etiqueta de portada */
  --ink-shadow: 0 2px 18px rgba(26, 12, 6, 0.55);
}

html { scroll-behavior: auto; }
body { background: var(--cafe); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ atmósfera -- */
.halftone {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; transition: opacity 0.6s ease;
  background-image: radial-gradient(circle at center, rgba(26, 12, 6, 0.9) 0.8px, transparent 1.6px);
  background-size: 5px 5px;
}
.sc-grain { opacity: 0.07; }

/* Cada tramo del recorrido lleva el mismo gradeado cálido: un solo café. */
.leg > video, .leg > .sc-world__poster {
  filter: sepia(0.35) saturate(1.15) contrast(1.08) brightness(0.62);
}
.leg--granos > video, .leg--granos > .sc-world__poster { filter: sepia(0.5) saturate(1.2) contrast(1.12) brightness(0.5); }
.leg--espresso > video, .leg--espresso > .sc-world__poster { filter: sepia(0.3) saturate(1.1) contrast(1.05) brightness(0.52); }
.leg--mapa > video, .leg--mapa > .sc-world__poster { filter: sepia(0.62) saturate(1.05) hue-rotate(-12deg) contrast(1.05) brightness(0.48); }
.leg--leche > video, .leg--leche > .sc-world__poster { filter: sepia(0.5) saturate(1.1) contrast(1.05) brightness(0.46); }
.leg--silencio > video, .leg--silencio > .sc-world__poster { filter: sepia(0.2) brightness(0.4); }

/* El brindis: el cuadrado de Manuel va enmarcado, con su propia imagen
   desenfocada alrededor y el nombre del podcast a los lados. */
.leg--brindis { background: var(--cafe); }
/* Fondo del brindis: el mismo video de Tera Web, avanzando con el scroll
   (rincones.js lo sincroniza). Sin desenfoque. */
.fondo-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fondo-video video { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(0.35) saturate(1.15) brightness(0.5); }
/* Dentro del brindis se quita la capa de puntitos para que el video se vea limpio. */
body.brindis-on .halftone { opacity: 0; }

/* Video de brindis: fuera del motor de scroll. Solo aparece en su tramo. */
.brindis-clip { position: fixed; top: 4.6rem; right: calc(var(--gut) + 4.5rem); height: calc(100svh - 6rem); aspect-ratio: 9 / 16;
  z-index: 5; display: none; border-radius: var(--r); overflow: hidden; background: var(--cafe);
  box-shadow: 0 0 0 4px var(--crema), 0 26px 50px -18px rgba(26, 12, 6, 0.9); }
.brindis-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
body.brindis-on .brindis-clip { display: block; }
@media (max-width: 860px) {
  .brindis-clip { top: 4.4rem; left: var(--gut); right: var(--gut); height: 56svh; aspect-ratio: auto; margin-inline: auto; width: min(100% - 0px, 56svh * 0.5625); }
}
/* El video va tal cual (sin cámara lenta, sin recorte de color), a la derecha;
   la info queda a su izquierda. */
.leg--brindis.sc-world__seg > video,
.leg--brindis.sc-world__seg > .sc-world__poster {
  inset: 4.6rem var(--gut) 1.4rem auto; width: auto; height: calc(100svh - 6rem); aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: var(--r); filter: none;
  box-shadow: 0 0 0 4px var(--crema), 0 26px 50px -18px rgba(26, 12, 6, 0.9);
}

/* ------------------------------------------------------ bloques de texto -- */
.blk { position: absolute; }
.scrim { position: absolute; inset: 0; pointer-events: none !important; }
.scrim--hero { background: radial-gradient(ellipse 62% 78% at 26% 50%, rgba(26, 12, 6, 0.74), rgba(26, 12, 6, 0.36) 60%, transparent 90%); }
.scrim--mid { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(26, 12, 6, 0.88), rgba(26, 12, 6, 0.66) 62%, rgba(26, 12, 6, 0.3)); }
.scrim--band { background: linear-gradient(to top, rgba(26, 12, 6, 0.96) 0%, rgba(26, 12, 6, 0.86) 45%, rgba(26, 12, 6, 0.4) 75%, transparent 92%); }
.scrim--toast { background: linear-gradient(to right, rgba(26, 12, 6, 0.95) 0%, rgba(26, 12, 6, 0.85) 38%, transparent 60%); }
.scrim--left { background: linear-gradient(to right, rgba(26, 12, 6, 0.97) 0%, rgba(26, 12, 6, 0.9) 52%, rgba(26, 12, 6, 0.4) 84%, transparent); }
.scrim--right { background: linear-gradient(to left, rgba(26, 12, 6, 0.97) 0%, rgba(26, 12, 6, 0.9) 52%, rgba(26, 12, 6, 0.4) 84%, transparent); }
.scrim--close { background: radial-gradient(ellipse 80% 80% at 50% 58%, rgba(26, 12, 6, 0.9), rgba(26, 12, 6, 0.68) 60%, rgba(26, 12, 6, 0.42)); }

.disp {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.96; letter-spacing: -0.025em; text-wrap: balance; text-shadow: var(--ink-shadow);
}
.disp--lg { font-size: clamp(2.5rem, 6vw, 5.2rem); }
.disp--sentence { text-transform: none; letter-spacing: -0.015em; }
.disp--md { font-size: clamp(1.9rem, 3.8vw, 3.2rem); }
.body { margin: 0; font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.6; max-width: 46ch; text-wrap: pretty; text-shadow: var(--ink-shadow); color: var(--crema); }
.eyebrow { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); text-shadow: var(--ink-shadow); }

/* botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; white-space: nowrap;
  min-height: 3.1rem; padding: 0.7rem 1.5rem; border-radius: var(--r);
  background: var(--terracota); color: var(--carbon); border: 2px solid var(--terracota);
  font: 700 1.2rem / 1 var(--sc-font-text); letter-spacing: 0.02em; text-decoration: none;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.btn svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.btn--ghost { background: rgba(26, 12, 6, 0.35); color: var(--crema); border-color: var(--crema); }
.btn--sm { min-height: 2.6rem; padding: 0.5rem 1rem; font-size: 1.15rem; }
.btn:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--crema); border-color: var(--crema); color: var(--carbon); }
  .btn--ghost:hover { background: var(--crema); }
}

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem var(--gut); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; text-shadow: var(--ink-shadow);
  transition: opacity 240ms var(--sc-ease-out); }
.bar__mark img { width: 40px; height: 40px; border-radius: 50%; }
.is-top .bar__mark { opacity: 0; pointer-events: none; }
.bar__right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

.cup {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.6rem; padding: 0 0.7rem 0 0.35rem;
  border-radius: var(--r); border: 2px solid var(--crema); background: rgba(26, 12, 6, 0.45); color: var(--crema);
  font: 600 0.95rem / 1 var(--sc-font-text); cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.cup svg { width: 2.2rem; height: 2.2rem; overflow: visible; }
.cup__line { fill: none; stroke: var(--crema); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.cup__liquid { fill: var(--dorado); transform: translateY(calc((1 - var(--fill, 0)) * 24px)); }
.cup__steam path { fill: none; stroke: var(--crema); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.cup[aria-pressed="true"] { background: rgba(196, 92, 38, 0.35); }
.cup[aria-pressed="true"] .cup__steam path { opacity: 0.9; animation: steam 2.4s ease-in-out infinite; }
.cup__steam path:nth-child(2) { animation-delay: 0.35s; }
@keyframes steam { 0%, 100% { transform: translateY(0); opacity: 0.25; } 50% { transform: translateY(-3px); opacity: 0.95; } }
.cup:active { transform: scale(0.97); }
/* parlante: solo en móvil, en lugar de la palabra. Cruzado cuando está apagado. */
.cup .cup__spk { display: none; width: 1.2rem; height: 1.2rem; }
.cup[aria-pressed="false"] .spk__x { display: inline; }
.cup[aria-pressed="false"] .spk__waves { display: none; }
.cup .spk__x { display: none; }

/* ---------------------------------------------------------------- ruta -- */
.route {
  position: fixed; right: clamp(0.35rem, 1.4vw, 1.1rem); top: 50%; translate: 0 -50%; z-index: var(--sc-z-chrome);
  display: flex; flex-direction: column; align-items: flex-end;
}
.route button {
  position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem;
  min-height: 1.9rem; padding: 0 0.35rem; background: none; border: 0; color: var(--crema); cursor: pointer;
}
.route button::after {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid var(--crema);
  background: rgba(26, 12, 6, 0.4); transition: transform 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.route button[aria-current="true"]::after { background: var(--dorado); border-color: var(--dorado); transform: scale(1.35); }
.route span {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: var(--ink-shadow);
  opacity: 0; transform: translateX(6px); transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); pointer-events: none;
}
.route button:focus-visible span, .route button[aria-current="true"] span { opacity: 1; transform: none; }

/* redes en el encabezado, a la derecha del logo y el nombre */
.bar__left { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.redes-head { display: flex; align-items: center; gap: 0.45rem; }
.redes-head a { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--carbon, #1A1A1A);
  background: var(--crema); transition: background-color 140ms var(--sc-ease-out); }
.redes-head svg { width: 1.2rem; height: 1.2rem; }
.redes-head img { width: 1.4rem; height: 1.4rem; display: block; object-fit: contain; }
.redes-head a:hover, .redes-head a:focus-visible { background: var(--dorado); }
@media (hover: hover) and (pointer: fine) { .route button:hover span { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- hero --
   Logo completo a la izquierda. Con el primer scroll sus cuatro piezas (círculo,
   micrófono, título y "El Podcast") se separan y viajan por su cuenta: el
   movimiento lo escribe rincones.js directo en cada pieza. A la derecha flota
   la portada del último episodio. */
.hero {
  inset: 0; display: flex; align-items: center; justify-content: flex-start;
  padding: 4.5rem var(--gut) 3rem;
}
.lockup { position: relative; flex: none; width: min(48vw, 70svh * 1.4587); aspect-ratio: 1482 / 1016; }
.lk { position: absolute; max-width: none; height: auto; will-change: transform, opacity; transform-origin: 50% 50%;
  filter: drop-shadow(0 14px 24px rgba(26, 12, 6, 0.55)); }
.lk--circle  { left: 11.2012%; top: 0;       width: 80.027%; }
.lk--title   { left: 36.0324%; top: 0.2953%; width: 59.919%; }
.lk--podcast { left: 52.5641%; top: 62.5%;   width: 47.2335%; }
.lk--mic     { left: 0.0675%; top: 5.8071%;  width: 42.1727%; }

.latest {
  position: absolute; top: 0; bottom: 0; right: calc(var(--gut) + 5.5rem); width: clamp(11rem, 19vw, 17rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center;
}
.latest__cover {
  display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 0 0 4px var(--crema), 0 34px 50px -18px rgba(26, 12, 6, 0.9);
  animation: float 6.5s ease-in-out infinite;
}
.latest__cover img { width: 100%; height: 100%; object-fit: cover; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(1.4deg); }
}
.latest__txt { margin: 0.4rem 0 0; font: italic 600 clamp(1.1rem, 1.6vw, 1.4rem) / 1.2 var(--serif); text-shadow: var(--ink-shadow); }
.latest__btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1rem; border-radius: var(--r);
  border: 1px solid rgba(245, 237, 227, 0.35); background: rgba(245, 237, 227, 0.04); color: rgba(245, 237, 227, 0.9);
  font: 600 0.95rem / 1 var(--sc-font-text); text-decoration: none;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.latest__btn svg { width: 1em; height: 1em; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .latest__btn:hover { background: rgba(245, 237, 227, 0.16); border-color: var(--crema); }
}

/* --------------------------------------------------------------- frase -- */
.phrase { inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); text-align: center; pointer-events: none !important; }
.phrase__q {
  margin: 0; max-width: 20ch; font: 600 clamp(2.1rem, 5.4vw, 4.8rem) / 1.08 var(--serif); letter-spacing: -0.015em; text-wrap: balance;
  text-shadow: var(--ink-shadow); position: relative; padding-top: 1.6rem;
}
.phrase__q::before { content: ""; position: absolute; top: 0; left: 50%; width: 3.5rem; height: 3px; translate: -50% 0; background: var(--dorado); }
.phrase__q em { font-style: italic; color: var(--dorado); }

/* ------------------------------------------------------------ episodios -- */
.eps { left: 0; right: 0; bottom: clamp(0.9rem, 3.5vh, 2.5rem); }
.eps__head { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.5rem; align-items: end;
  padding: 0 calc(var(--gut) + 8.5rem) 1.4rem var(--gut); }  /* deja libre la columna del menú de puntos */
.eps__head .disp { grid-column: 1; font-size: clamp(2rem, 4.4vw, 3.7rem); }
.eps__head .body { grid-column: 1; }
.eps__nav { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 0.6rem; }
.eps__nav button {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r); cursor: pointer;
  background: rgba(26, 12, 6, 0.55); border: 2px solid var(--crema); color: var(--crema);
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.eps__nav svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.eps__nav button:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .eps__nav button:hover { background: var(--crema); color: var(--carbon); } }

.eps__track {
  display: flex; gap: clamp(0.9rem, 1.6vw, 1.5rem); list-style: none; margin: 0; padding: 0.9rem var(--gut) 1.2rem;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.eps__track::-webkit-scrollbar { display: none; }
.eps__track li { flex: none; scroll-snap-align: start; }
.ep {
  position: relative; display: block; width: clamp(10.5rem, min(23vw, 38svh), 21rem); aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 14px 26px -10px rgba(26, 12, 6, 0.8), 0 0 0 3px var(--crema); rotate: var(--tilt);
  transition: transform 200ms var(--sc-ease-out), rotate 200ms var(--sc-ease-out);
}
.ep img { width: 100%; height: 100%; object-fit: cover; }
.ep__play {
  position: absolute; inset: auto 0.6rem 0.6rem auto; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.8rem; border-radius: var(--r); background: var(--terracota); color: var(--carbon);
  font: 700 1.05rem / 1 var(--sc-font-text);
  opacity: 0; transform: translateY(6px); transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.ep__play svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.ep:focus-visible .ep__play { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .ep:hover { transform: translateY(-8px); rotate: 0deg; }
  .ep:hover .ep__play { opacity: 1; transform: none; }
}
@media (hover: none) { .ep__play { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- pasos -- */
.step { top: 0; bottom: 0; display: flex; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.4rem); pointer-events: none !important; }
.step--lead { left: var(--gut); max-width: min(31rem, 44vw); }
.step--trail { right: calc(var(--gut) + 6.5rem); flex-direction: row-reverse; max-width: min(31rem, 44vw); }
.step__icon { flex: none; width: clamp(5.5rem, 12vw, 10rem); height: auto; border-radius: 50%; box-shadow: 0 12px 28px -10px rgba(26, 12, 6, 0.8); }
.step__body .body { margin-top: 0.9rem; }

/* ------------------------------------------------------------ quién soy -- */
.who { top: 0; bottom: 0; left: var(--gut); display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3rem);
  max-width: min(56rem, calc(100vw - 2 * var(--gut))); pointer-events: none !important; }
.who__photo { flex: none; margin: 0; width: clamp(11rem, 21vw, 19rem); rotate: -2.5deg; background: var(--crema); padding: 0.55rem 0.55rem 0.4rem;
  border-radius: 4px; box-shadow: 0 18px 34px -12px rgba(26, 12, 6, 0.85); }
.who__photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.who__photo figcaption { padding: 0.5rem 0 0.15rem; text-align: center; font: italic 600 1.05rem / 1 var(--serif); color: var(--cafe); }
.who__text .body { margin-top: 1rem; }

.chair { top: 0; bottom: 0; right: calc(var(--gut) + 6.5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem;
  width: min(32rem, calc(100vw - 2 * var(--gut))); pointer-events: none !important; }
.chair__q { margin: 0; font: italic 600 clamp(2rem, 4.2vw, 3.6rem) / 1.08 var(--serif); letter-spacing: -0.01em; text-wrap: balance; text-shadow: var(--ink-shadow); }

/* ------------------------------------------------------ silencio y brindis -- */
.hush { inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); text-align: center; pointer-events: none !important; }
.hush p { margin: 0; font: italic 600 clamp(1.7rem, 3.4vw, 2.8rem) / 1.25 var(--serif); color: var(--crema); text-shadow: var(--ink-shadow); }

.toast { left: var(--gut); top: 0; bottom: 0; width: calc(100vw - var(--gut) * 3 - (100svh - 6rem) * 0.5625);
  display: flex; flex-direction: column; justify-content: center; text-align: left; pointer-events: none !important; }
.toast__big { margin: 0; font: 700 clamp(2rem, 4.2vw, 3.6rem) / 1.05 var(--sc-font-display); letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--crema); text-shadow: var(--ink-shadow); }
.toast__sm { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 3px solid var(--dorado); width: 3.5rem; white-space: nowrap;
  font: italic 600 clamp(1.1rem, 1.6vw, 1.35rem) / 1.3 var(--serif); color: var(--crema); text-shadow: var(--ink-shadow); }

/* ------------------------------------------------- invitación y cierre -- */
.invite { left: var(--gut); bottom: clamp(3rem, 14vh, 8rem); width: min(38rem, calc(100vw - 2 * var(--gut)));
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.close { left: 0; right: 0; bottom: clamp(2.5rem, 12vh, 7rem); display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  padding: 0 var(--gut); text-align: center; }
.close__q { margin: 0; font: 600 clamp(2.2rem, 6.2vw, 5.4rem) / 1.04 var(--serif); letter-spacing: -0.02em; text-wrap: balance; text-shadow: var(--ink-shadow); }
.close__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.close__nets { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center; font-weight: 600; text-shadow: var(--ink-shadow); }
.close__nets a { text-decoration-color: var(--dorado); text-decoration-thickness: 2px; padding: 0.3rem 0; }
.close__small { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--dorado); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--sc-ink-soft); text-shadow: var(--ink-shadow); }

/* --------------------------------------------------------------- móvil -- */
@media (max-width: 860px) {
  .bar__mark span { display: none; }
  .btn { font-size: 1.1rem; padding: 0.7rem 1.1rem; }
    .hero { flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.2rem; padding-top: 11svh; padding-bottom: 2rem; }
  .lockup { width: min(90vw, 42svh * 1.4587); }
  .latest { position: static; width: 9rem; gap: 0.6rem; }
  .latest__cover { animation-duration: 7s; }
  .eps__head { grid-template-columns: 1fr; padding-right: var(--gut); }
  .eps__nav { display: none; }
  .ep { width: 72vw; }
  .step, .step--trail { flex-direction: column; align-items: flex-start; left: var(--gut); right: var(--gut); max-width: none; gap: 1rem; }
  .step--lead { top: 14svh; bottom: auto; }
  .step--trail { top: auto; bottom: 16svh; }
  .step__icon { width: 5.2rem; }
  .who { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.2rem; right: var(--gut); max-width: none; }
  .who__photo { width: 9.5rem; }
  .chair { left: var(--gut); right: var(--gut); width: auto; }
  .leg--brindis.sc-world__seg > video, .leg--brindis.sc-world__seg > .sc-world__poster {
    inset: 4.4rem var(--gut) auto var(--gut); height: 56svh; margin-inline: auto; }
  .toast { top: auto; bottom: 4svh; left: var(--gut); right: var(--gut); width: auto; text-align: center; }
  .route span { display: none; }
  /* Móvil: sonido, "Quiero participar" y redes solo en la primera parte (is-top).
     Las redes van en vertical, en la esquina, y se traslapan un momento con el logo. */
  .bar__right, .bar__left .redes-head { opacity: 0; pointer-events: none; transition: opacity 240ms var(--sc-ease-out); }
  .is-top .bar__right, .is-top .bar__left .redes-head { opacity: 1; pointer-events: auto; }
  .bar__left { position: relative; }
  .redes-head { position: absolute; top: 0; left: 0; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .bar .btn { font-size: 0.95rem; padding: 0.4rem 0.75rem; min-height: 2.2rem; }
  .cup { min-height: 2.2rem; padding: 0 0.45rem 0 0.25rem; gap: 0.25rem; }
  .cup svg:not(.cup__spk) { width: 1.7rem; height: 1.7rem; }
  .cup__txt { display: none; }
  .cup .cup__spk { display: block; }
  .redes-head svg { width: 1.05rem; height: 1.05rem; }
  .redes-head img { width: 1.2rem; height: 1.2rem; }
  .redes-head a { width: 1.9rem; height: 1.9rem; }
  .scrim--left, .scrim--right { background: rgba(26, 12, 6, 0.78); }
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-on) .latest__cover { animation: none; }
  .cup[aria-pressed="true"] .cup__steam path { animation: none; opacity: 0.9; }
}
/* aviso: el sistema pide menos movimiento */
.motion { position: fixed; left: var(--gut); right: var(--gut); bottom: 0.7rem; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.6rem 0.8rem; border-radius: var(--r); background: rgba(26, 12, 6, 0.94); border: 1px solid var(--dorado); font-size: 0.88rem; line-height: 1.4; }
.motion p { flex: 1 1 16rem; }
.motion[hidden] { display: none; }
.motion p { margin: 0; }
.motion button { margin-left: auto; min-height: 2.4rem; padding: 0.4rem 1rem; border-radius: var(--r); border: 0; cursor: pointer;
  background: var(--terracota); color: var(--carbon); font: 700 1.05rem / 1 var(--sc-font-text); }