/* ============================================================
   PRISMA · css/p360.css
   Solo prisma-360.html. Va DESPUÉS de css/relato.css (kit Relato: las
   técnicas de Apple que eligió el cliente) y puede ajustarlo. Lo
   estructural (tipografía, color, botones, cabecera, pie, reveals) sale
   de css/main.css; aquí viven los instrumentos de la página: la esfera
   del mes, las escenas del carrusel, el mes en movimiento, la Mesa de la
   escena fija, la cola viva y los slots, la Mesa 360 de ejemplo, el
   calendario de reuniones, los planes y las preguntas.

   Capítulos (T13): negro (la idea) · carbón (cómo funciona) · negro
   (qué entra) · carbón (capacidad) · claro (planes, lo que va aparte y
   la comparación: el único claro) · negro (para ti, preguntas, cierre).

   Reglas de la casa que se respetan aquí (DESIGN.md):
   · profundidad por tono (#0A0A0A → carbón #141415 → superficies del
     kit) y filetes de 1 px, sin sombras;
   · naranja solo como acento (pip, barra de avance, cifra, botón);
     texto sobre naranja siempre en tinta;
   · pesos 200 a 500; cifras en 200;
   · curvas por tipo: --ease-enter para entrar y moverse, --ease-exit
     para salir, --ease-ui para color y opacidad, --ease-snap para lo
     pequeño. Lo que sigue al scroll, lineal.
   ============================================================ */

.p360 {
  --p360-card: #1C1C1F;                       /* = --ink-card: superficie de tarjeta */
  --p360-line-2: rgb(var(--fg-rgb) / .08);    /* filete interno, más tenue que --line-on-ink */
  --p360-field: rgb(var(--fg-rgb) / .36);     /* borde de campo/control (3:1, CLAUDE.md) */
  --p360-r-sm: 12px;
}
.p360 [id] { scroll-margin-top: 140px; }   /* cabecera + barra local */
.p360-muted { color: var(--text-on-ink-2); }
.no-js .p360-js-only { display: none !important; }
.p360 [hidden] { display: none !important; }   /* hidden manda sobre cualquier display de esta hoja */

/* ---------- Ritmo y cabeceras de sección ---------- */
/* Mismo tamaño de titular de sección que el resto de Soluciones (--fs-h2, 32 px a 1440). */
.p360-h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.012em; max-width: 22ch; text-wrap: balance; }
.p360-h2 em { font-style: normal; color: var(--orange); }
/* Titulares de dos frases: cada frase en su renglón cuando hay ancho
   (balance cortaba "Todo entra. Todo / tiene un lugar."). En móvil
   vuelven a partirse solas. Estos titulares entran con data-reveal y no
   con data-split, que aplana los span al partir en líneas. */
@media (min-width: 1100px) { .p360-ph { white-space: nowrap; } }   /* con los titulares grandes del kit, solo donde caben */
.p360-ph--keep { white-space: nowrap; }          /* frases cortas: caben siempre, también a 360 px */
/* Titulares menores: renglones equilibrados (sin palabras huérfanas) */
.p360-turn__big, .rl-plan__name, .rl-tile__t, .rl-card__t { text-wrap: balance; }
/* Ningún párrafo termina en una palabra huérfana ("…un proyecto / nuevo.",
   "…todo el / mes."): pretty en todo el texto corrido de la página. */
:where(.p360 main) :is(p, li, dd) { text-wrap: pretty; }   /* sin especificidad: los balance de arriba mandan */

/* Cabecera de sección en dos columnas: titular a la izquierda, texto a la
   derecha alineado a su base (como .section__head, pero con párrafos). */
.p360-split {
  display: grid; gap: 22px;
  margin-bottom: clamp(40px, 7vh, 76px);
}
@media (min-width: 960px) {
  .p360-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 60px; align-items: end; }
  .p360-split > .p360-prose { justify-self: end; max-width: 46ch; }
}
.p360-prose { color: var(--text-on-ink-2); }
.p360-prose p + p { margin-top: 14px; }
.p360-prose strong { color: var(--text-on-ink); font-weight: 500; }
.p360-prose__strong { color: var(--text-on-ink); font-weight: 500; }

/* Enlace de texto con flecha (CTA secundario, sin caja) */
.p360-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-weight: 500; color: var(--text-on-ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 calc(50% + .8em);
  transition: color .2s var(--ease-ui), background-size .35s var(--ease-enter);
}
.p360-textlink span { transition: transform .24s var(--ease-snap); }
.p360-textlink:hover { color: var(--orange); background-size: 100% 1px; }
.p360-textlink:hover span { transform: translateX(3px); }
.p360-textlink[href^="#"]:hover span { transform: translateY(3px); }

.p360-inlink {
  color: var(--text-on-ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgb(var(--orange-rgb) / .7);
  transition: color .2s var(--ease-ui);
}
.p360-inlink:hover { color: var(--orange); }

/* Pip de estado (cola, activo, terminado) */
.p360-pip {
  display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid rgb(var(--fg-rgb) / .45); background: transparent;
}
.p360-pip--on { background: var(--orange); border-color: var(--orange); }
.p360-pip--done { background: rgb(var(--fg-rgb) / .55); border-color: transparent; }

/* ============================================================
   PORTADA · una pantalla (usa la caja del manifiesto del kit Relato,
   sin su scroll) y palabra que rota (T09). La esfera del mes es el
   fondo (.rl-mf__bg, decorativo): a la derecha en el ancho, abajo y
   más chica en el teléfono.
   ============================================================ */
.p360-hero__bg { overflow: hidden; }
.p360-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 56% at 76% 48%, rgb(var(--orange-rgb) / .13), transparent 70%),
    radial-gradient(40% 50% at 0% 0%, rgb(var(--orange-rgb) / .09), transparent 60%);
}
.p360-hero__grid { position: relative; height: 100%; display: grid; align-items: center; justify-items: end; padding-top: 64px; }
.p360-hero__visual { display: flex; flex-direction: column; align-items: center; width: min(40vw, 500px); }
.p360-hero .rl-mf__hero { align-self: center; padding-block: calc(76px + 5vh) clamp(40px, 7vh, 88px); }
/* el texto va encima de la esfera (z-index del kit) y su caja ocupa todo
   el ancho: solo sus piezas reciben el clic, para que la pausa de la
   esfera, que queda debajo, se pueda tocar */
.p360-hero .rl-mf__hero { pointer-events: none; }
.p360-hero .rl-mf__hero > * { pointer-events: auto; }
.p360-hero__copy > * { max-width: 600px; }
.p360-hero__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.p360-hero__title em { font-style: normal; color: var(--orange); }
/* el renglón de la palabra que rota: el resaltador ocupa toda la caja de
   la letra, más alta que el renglón (1,03): sin este aire se recortaba */
.split-lines .line.p360-hero__rot { padding-block: .1em .14em; margin-block: -.1em -.14em; }
/* las tres frases del documento, cada una con su ícono */
.p360-hero__points {
  display: grid; gap: 12px; margin-top: 28px;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 500; line-height: 1.2; letter-spacing: -.012em;
  color: var(--text-on-ink);
}
.p360-hero__points li { display: flex; align-items: center; gap: .6em; }
.p360-hero__points em { font-style: normal; color: var(--orange); }
.p360-hero__points .p360-mf__ico { flex: none; width: 1.55em; height: 1.55em; margin: 0; }
.p360-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 4.6vh, 44px); }
@media (max-width: 999px) {
  .p360-hero__grid { align-items: end; justify-items: center; padding: 0 0 clamp(20px, 4vh, 40px); }
  .p360-hero__visual { width: min(66vw, 300px); opacity: .9; }
  .p360-hero .rl-mf__hero { align-self: start; padding-top: calc(72px + 5vh); }
  .p360-hero__copy > * { max-width: 34rem; }
  .p360-hero .p360-dial__ticker { display: none; }
}
@media (max-width: 999px) and (max-height: 760px) {
  /* teléfonos bajos (667 px de alto): las tres frases ocupan más que el
     párrafo que había, así que todo se aprieta un poco y el enlace
     secundario se va, para que la esfera no pise el botón */
  .p360-hero__visual { width: min(48vw, 190px); }
  .p360-hero__points { gap: 7px; margin-top: 18px; font-size: 1rem; }
  .p360-hero__actions { margin-top: 20px; }
  .p360-hero__actions .p360-textlink { display: none; }
}

/* ============================================================
   RESUMEN EN CARRUSEL (kit Relato, T03) · las escenas
   Cada diapositiva lleva una escena de la Mesa 360 hecha en la página.
   El estado sin animación es la escena TERMINADA (sin JS, con
   movimiento reducido, en pausa o terminado el carrusel). La animación
   solo existe en la diapositiva activa mientras el carrusel avanza
   (.is-playing) y, antes de la primera vez, espera en su primer cuadro
   (.is-pre, pausada). Curvas de main.css; nada de rebotes.
   ============================================================ */
.p360-resumen { padding-top: clamp(48px, 7vh, 88px); }
/* El titular, la diapositiva y sus puntos caben juntos en una pantalla
   (con la barra local arriba): la diapositiva mide 60svh de alto. */
@media (min-width: 760px) {
  .p360-hl .rl-hl__slide { width: min(1180px, 100vw - 2 * var(--gutter) - 56px, 60svh * 16 / 9); }
}
/* Mismo encabezado que los resúmenes de Programas y Contenido: "Resumen",
   "Lo esencial, en N ideas." a --rl-fs-title-m y el aire del kit hasta la
   diapositiva (el padding de .rl-hl, sin margen extra). */
.p360-resumen__head { margin-bottom: 0; }
.p360-resumen__head .rl-title { max-width: none; }
.p360-hlv {
  display: grid; align-items: end; justify-items: end;
  padding-inline: clamp(20px, 4.2vw, 64px);
  background:
    radial-gradient(58% 70% at 82% 100%, rgb(var(--orange-rgb) / .14), transparent 72%),
    linear-gradient(180deg, transparent 40%, rgb(var(--fg-rgb) / .015));
}

/* ---------- La ventana chica de la Mesa (comparte lenguaje con la Mesa de verdad) ---------- */
.p360-mini {
  position: relative; width: min(54%, 560px); transform-origin: 100% 100%;
  border: 1px solid rgb(var(--fg-rgb) / .12); border-bottom: 0; border-radius: 18px 18px 0 0;
  background: #1C1C1F; padding-bottom: 22px;
  font-size: 14px; color: var(--text-on-ink);
}
.p360-mini__bar {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px;
  border-bottom: 1px solid rgb(var(--fg-rgb) / .08); font-size: .84rem;
}
.p360-mini__bar img { width: 14px; height: auto; }
.p360-mini__bar b { font-weight: 500; }
.p360-mini__bar span { color: var(--text-on-ink-2); }
.p360-mini__bar span::before { content: '/'; margin-right: 10px; color: rgb(var(--fg-rgb) / .25); }
.p360-mini__btn {
  margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 4px;
  background: var(--orange); color: var(--ink); font-style: normal; font-size: .78rem; font-weight: 500; white-space: nowrap;
}
.p360-mini__composer {
  display: flex; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid rgb(var(--fg-rgb) / .08); background: rgb(var(--orange-rgb) / .045);
}
.p360-mini__field {
  flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; padding: 0 12px;
  border: 1px solid rgb(var(--fg-rgb) / .36); border-radius: 10px; background: var(--ink);
  font-size: .88rem; white-space: nowrap; overflow: hidden;
}
.p360-mini__type { flex: none; overflow: hidden; opacity: 0; }   /* terminada: el campo ya se vació al enviar */
.p360-mini__caret { display: none; width: 1.5px; height: 1.15em; margin-left: 2px; background: var(--orange); }
.p360-mini__send {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 4px;
  background: var(--orange); color: var(--ink); font-size: .84rem; font-weight: 500;
}
.p360-mini__col {
  display: flex; align-items: center; gap: 8px; padding: 16px 18px 10px;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2);
}
.p360-mini__col b {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: rgb(var(--fg-rgb) / .07); color: var(--text-on-ink); letter-spacing: 0; font-weight: 500;
}
.p360-mini__list { display: grid; gap: 8px; padding: 0 18px; }
.p360-mini__card {
  position: relative; display: grid; gap: 5px; padding: 11px 14px; border-radius: 12px;
  background: var(--ink-3); border: 1px solid rgb(var(--fg-rgb) / .08);
}
.p360-mini__card b { font-size: .92rem; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p360-mini__card > span { font-size: .76rem; color: var(--text-on-ink-2); }
.p360-mini__card.is-fresh { border-color: rgb(var(--orange-rgb) / .65); }
.p360-mini__card.is-fresh em { font-style: normal; font-weight: 500; color: var(--orange); }
/* fecha recibida */
.p360-mini--fecha .p360-mini__card { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.p360-mini--fecha .p360-mini__card > span { grid-column: 1; }
.p360-mini__date {
  grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px; border: 1px solid rgb(var(--orange-rgb) / .55);
  font-style: normal; font-size: .78rem; font-weight: 500; color: var(--text-on-ink);
}
.p360-mini__date::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
/* revisión: el detalle de un pedido */
.p360-mini--revisa { padding: 0 0 22px; }
.p360-mini__dhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px;
  border-bottom: 1px solid rgb(var(--fg-rgb) / .08); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.p360-mini__state { display: inline-flex; align-items: center; gap: 8px; color: var(--text-on-ink-2); }
.p360-mini__ver { position: relative; display: grid; overflow: hidden; height: 24px; padding: 0 10px; border-radius: 999px; background: rgb(var(--fg-rgb) / .07); letter-spacing: .06em; text-transform: none; }
.p360-mini__ver span { grid-area: 1 / 1; line-height: 24px; text-align: center; }
.p360-mini__ver span:first-child { opacity: 0; transform: translateY(-100%); }   /* terminada: versión 2 */
.p360-mini__title { padding: 16px 18px 4px; font-size: 1.12rem; font-weight: 500; }
.p360-mini__thread { display: grid; gap: 10px; padding: 12px 18px 0; }
.p360-mini__thread li {
  justify-self: start; max-width: 82%; padding: 10px 13px; border-radius: 14px 14px 14px 4px;
  background: #242427; font-size: .86rem; line-height: 1.4; color: var(--text-on-ink);
}
.p360-mini__thread li b { display: block; margin-bottom: 2px; font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-ink-2); }
.p360-mini__thread li.is-me { justify-self: end; border-radius: 14px 14px 4px 14px; background: rgb(var(--orange-rgb) / .14); }
.p360-mini__thread .is-typing, .p360-mini__thread .is-reply { grid-row: 2; grid-column: 1; }
.p360-mini__thread .is-typing { display: flex; gap: 4px; padding: 14px; opacity: 0; }
.p360-mini__thread .is-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--fg-rgb) / .5); }
.p360-mini__ok {
  position: relative; display: grid; margin: 18px 18px 0; height: 44px; border-radius: 4px; overflow: hidden;
  background: transparent; border: 1px solid var(--orange); color: var(--orange); font-size: .88rem; font-weight: 500;
}
.p360-mini__ok span { grid-area: 1 / 1; display: grid; place-items: center; }
.p360-mini__ok span:first-child { opacity: 0; }                                    /* terminada: aprobado */
.p360-mini__ok span:last-child { background: var(--orange); color: var(--ink); }

/* en pantallas anchas la escena gana presencia (se escala desde la
   esquina de abajo a la derecha, la que toca el borde de la diapositiva) */
/* (solo en pantallas altas: con la diapositiva de 60svh de una pantalla de
   900 px, la escena escalada tapaba la frase de "Cada pedido recibe una fecha") */
@media (min-width: 1200px) and (min-height: 1000px) { .p360-mini { transform: scale(1.18); } }
@media (min-width: 760px) { .p360-mini { width: min(50%, 560px); } }

/* ---------- El plan: las áreas y sus proyectos en el tiempo ---------- */
.p360-pl { display: grid; gap: clamp(14px, 2.4vh, 24px); width: min(58%, 620px); padding-bottom: clamp(30px, 5.4vh, 56px); }
.p360-pl__areas { display: flex; flex-wrap: wrap; gap: 8px; }
.p360-pl__areas li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgb(var(--fg-rgb) / .2); font-size: .84rem; color: var(--text-on-ink); }
.p360-pl__plan { display: grid; gap: 9px; padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid rgb(var(--fg-rgb) / .14); }
.p360-pl__plan li { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); align-items: center; gap: 14px; font-size: .88rem; color: var(--text-on-ink); }
.p360-pl__plan b { display: block; }
.p360-pl__plan i { display: block; height: clamp(16px, 1.8vw, 24px); border-radius: 999px; background: var(--orange); margin-left: calc(var(--s) * 12.5%); width: calc(var(--n) * 12.5%); transform-origin: 0 50%; }

/* ---------- Meses: permanencia mínima de 3 meses (tres llenos; los que siguen, abiertos) ---------- */
.p360-months {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px);
  width: min(56%, 600px); padding-bottom: clamp(30px, 5.4vh, 56px);
}
.p360-months li { display: grid; gap: 6px; justify-items: start; align-content: start; }
.p360-months__bars {
  display: flex; flex-direction: column-reverse; gap: 8px; width: 100%; padding-top: 14px;
  border-bottom: 1px solid rgb(var(--fg-rgb) / .14);
  padding-bottom: 10px;
}
.p360-months__bars i {
  display: block; height: clamp(18px, 2vw, 26px); border-radius: 999px; border: 1px solid rgb(var(--fg-rgb) / .12);
  transform-origin: 50% 100%;
}
.p360-months li[data-n="1"] .p360-months__bars i:first-child,
.p360-months li[data-n="2"] .p360-months__bars i:nth-child(-n + 2),
.p360-months li[data-n="3"] .p360-months__bars i { background: var(--orange); border-color: var(--orange); }
.p360-months b { margin-top: 6px; font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-ink-2); }
.p360-months span:not(.p360-months__bars) { font-size: .9rem; color: var(--text-on-ink); }

/* ---------- Animación: solo en la diapositiva activa ---------- */
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .rl-hl__slide.is-active {
  --run: running;
}
html.rl-anim .p360-hl.is-pre .rl-hl__slide.is-active { --run: paused; }
/* 1 · Pides */
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--pide .p360-mini__type { animation: p360-type 1.4s steps(24, end) .35s both, p360-out .25s var(--ease-exit) 2.3s forwards; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--pide .p360-mini__caret { display: block; animation: p360-caret .5s steps(1) 0s 5 both, p360-out .1s linear 2.3s forwards; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--pide .p360-mini__send { animation: p360-press .32s var(--ease-snap) 2s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--pide .p360-mini__card:not(.is-fresh) { animation: p360-push .7s var(--ease-enter) 2.45s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--pide .p360-mini__card.is-fresh { animation: p360-in .6s var(--ease-enter) 2.6s both; animation-play-state: var(--run); }
/* El campo vacío lleva su "¿Qué necesitas?" en gris (como el de la Mesa de
   verdad): quieta, la escena terminada ya no muestra una caja negra vacía
   junto a "Enviar". Se apaga mientras se escribe y vuelve al enviar. */
.p360-mini--pide .p360-mini__field { position: relative; }
.p360-mini--pide .p360-mini__field::before {
  content: '¿Qué necesitas?'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: rgb(var(--fg-rgb) / .4); pointer-events: none;
}
/* se va cuando empieza a escribirse (.35 s) y vuelve cuando lo escrito
   ya se fue (2,3 s + .25 s): nunca se ven los dos a la vez */
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--pide .p360-mini__field::before { animation: p360-ph 2.75s linear both; animation-play-state: var(--run); }
@keyframes p360-ph { 0%, 12.7% { opacity: 1; } 12.8%, 94.5% { opacity: 0; } 100% { opacity: 1; } }
/* Se escribe abriendo el ancho (no recortando): así el cursor, que va
   detrás, sigue a la última letra. 13.3em es el ancho de "Post para el
   lanzamiento" a .88rem; los 24 pasos son sus 24 letras. */
@keyframes p360-type { from { opacity: 1; max-width: 0; } to { opacity: 1; max-width: 13.3em; } }
@keyframes p360-out { to { opacity: 0; } }
@keyframes p360-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes p360-press { 50% { transform: scale(.93); } }
@keyframes p360-push { from { transform: translateY(calc(-100% - 8px)); } }
@keyframes p360-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
/* 2 · Fecha */
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__date { animation: p360-date .6s var(--ease-enter) calc(.7s + var(--d, 0) * .45s) both; animation-play-state: var(--run); }
@keyframes p360-date {
  0% { opacity: 0; transform: scale(.7); }
  55% { opacity: 1; transform: scale(1.04); background: var(--orange); color: var(--ink); }
  100% { background: transparent; }
}
/* 3 · Revisas */
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__thread .is-me { animation: p360-in .5s var(--ease-enter) .5s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__thread .is-typing { animation: p360-hl-typing 1.1s linear 1.3s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__thread .is-reply { animation: p360-in .5s var(--ease-enter) 2.4s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__ver span:first-child { animation: p360-ver-out .5s var(--ease-exit) 2.7s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__ver span:last-child { animation: p360-ver-in .5s var(--ease-enter) 2.75s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__ok span:first-child { animation: p360-ok-out .3s var(--ease-exit) 3.8s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__ok span:last-child { animation: p360-ok-in .45s var(--ease-enter) 3.85s both; animation-play-state: var(--run); }
@keyframes p360-hl-typing { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes p360-ver-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }
@keyframes p360-ver-in { from { opacity: 0; transform: translateY(100%); } }
@keyframes p360-ok-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes p360-ok-in { from { opacity: 0; transform: translateY(40%); } }
/* 0 · El plan */
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-pl__areas li { animation: p360-in .5s var(--ease-enter) calc(.3s + var(--i, 0) * .22s) both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-pl__plan span { animation: p360-in .45s var(--ease-enter) calc(1.4s + var(--i, 0) * .42s) both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-pl__plan i { animation: p360-strike .6s var(--ease-enter) calc(1.5s + var(--i, 0) * .42s) both; animation-play-state: var(--run); }
/* 4 · Meses */
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-months li { animation: p360-in .55s var(--ease-enter) calc(.3s + var(--i, 0) * .42s) both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-months__bars i { animation: p360-grow .5s var(--ease-enter) calc(.45s + var(--i, 0) * .42s) both; animation-play-state: var(--run); }
@keyframes p360-grow { from { transform: scaleY(0); } }

/* Teléfono: la diapositiva es vertical (4:5): la escena abajo, entera de ancho */
@media (max-width: 759px) {
  /* más alta que la 4:5 del kit: la frase arriba y la escena entera abajo */
  .p360-hl .rl-hl__slide { aspect-ratio: 2 / 3; width: min(100vw - 2 * var(--gutter) - 28px, 62svh * 2 / 3); }
  .p360-hlv { justify-items: stretch; padding-inline: 14px; }
  .p360-mini { width: 100%; padding-bottom: 14px; font-size: 13px; }
  .p360-mini__bar { min-height: 44px; padding: 0 14px; }
  .p360-mini__bar span { display: none; }
  .p360-mini__composer { padding: 10px 14px; }
  .p360-mini__field, .p360-mini__send { height: 36px; }
  .p360-mini__col { padding: 12px 14px 8px; }
  .p360-mini__list { padding: 0 14px; gap: 6px; }
  .p360-mini__card { padding: 9px 12px; }
  .p360-mini--fecha .p360-mini__card:nth-child(n + 4) { display: none; }
  .p360-mini__title { padding: 12px 14px 2px; font-size: 1rem; }
  .p360-mini__thread { padding: 8px 14px 0; }
  .p360-mini__ok { margin: 12px 14px 0; height: 40px; }
  .p360-months { width: 100%; gap: 6px; padding-bottom: 22px; }
  .p360-pl { width: 100%; gap: 12px; padding-bottom: 22px; }
  .p360-pl__areas { gap: 6px; }
  .p360-pl__areas li { padding: 5px 10px; font-size: .74rem; }
  .p360-pl__plan { gap: 7px; padding-top: 12px; }
  .p360-pl__plan li { grid-template-columns: 9.4em minmax(0, 1fr); gap: 10px; font-size: .76rem; }
  .p360-pl__plan i { height: 14px; }
  .p360-months__bars i { height: 16px; }
  .p360-months b { font-size: .62rem; letter-spacing: .06em; }
  .p360-months span:not(.p360-months__bars) { font-size: .74rem; min-height: 2.6em; line-height: 1.3; }
}

/* ---------- La esfera del mes ----------
   Un cuadrado con todo en %: los trazos son SVG (viewBox 400), la aguja
   es un div que gira (transform en el compositor) con su estela en un
   conic-gradient enmascarado como anillo. */
.p360-hero__visual { display: flex; flex-direction: column; align-items: center; }
/* la caja de la esfera lleva el ancho y, en su esquina de abajo a la
   derecha (fuera del aro), el botón de pausa */
.p360-dial-box { position: relative; width: min(100%, 470px); }
.p360-dial {
  position: relative; width: 100%; aspect-ratio: 1;
  container-type: inline-size;
}
.no-js .p360-hero__visual { visibility: hidden; }
.p360-dial__ticks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p360-dial__ticks .trk { fill: none; stroke: rgb(var(--fg-rgb) / .1); stroke-width: 1; }
.p360-dial__ticks .trk2 { fill: none; stroke: rgb(var(--fg-rgb) / .05); stroke-width: 1; }
.p360-dial__ticks .tk { stroke: rgb(var(--fg-rgb) / .26); stroke-width: 1; stroke-linecap: round; transition: stroke .5s var(--ease-ui); }
.p360-dial__ticks .tk.wk { stroke: rgb(var(--fg-rgb) / .5); }
.p360-dial__ticks .tk.past { stroke: rgb(var(--orange-rgb) / .55); }
.p360-dial__ticks .wl { fill: rgb(var(--fg-rgb) / .5); font: 500 10px/1 var(--f-text); letter-spacing: .14em; text-anchor: middle; dominant-baseline: middle; }
.p360-dial__ticks .job { transition: opacity .6s var(--ease-ui); }
.p360-dial__ticks .job circle { fill: var(--ink); stroke: rgb(var(--fg-rgb) / .55); stroke-width: 1.2; transition: fill .45s var(--ease-ui), stroke .45s var(--ease-ui); }
.p360-dial__ticks .job text { fill: rgb(var(--fg-rgb) / .6); font: 400 11.5px/1 var(--f-text); dominant-baseline: middle; transition: fill .45s var(--ease-ui); }
.p360-dial__ticks .job.is-done circle { fill: var(--orange); stroke: var(--orange); }
.p360-dial__ticks .job.is-done text { fill: rgb(var(--fg-rgb) / .92); }
.p360-dial__ticks .job.is-out { opacity: 0; }

.p360-dial__sweep { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
/* cuña tenue detrás de la aguja */
.p360-dial__sweep::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 300deg, rgb(var(--orange-rgb) / .1) 360deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 40%, #000 62%, #000 88%, transparent 88.4%);
  mask-image: radial-gradient(circle closest-side, transparent 0 40%, #000 62%, #000 88%, transparent 88.4%);
}
/* estela sobre el anillo */
.p360-dial__sweep::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 250deg, rgb(var(--orange-rgb) / .9) 360deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 calc(88% - 1.5px), #000 calc(88% - 1.5px) calc(88% + .5px), transparent calc(88% + 1px));
  mask-image: radial-gradient(circle closest-side, transparent 0 calc(88% - 1.5px), #000 calc(88% - 1.5px) calc(88% + .5px), transparent calc(88% + 1px));
}
.p360-dial__sweep i {
  position: absolute; left: 50%; top: 6%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--orange);
}
.p360-dial__sweep i::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--orange-rgb) / .45), transparent 65%);
}
.p360-dial__core {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.p360-dial__month { font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.p360-dial__day {
  font-weight: 200; font-size: clamp(3.4rem, 19cqw, 6rem); line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; margin: 6px 0 8px; color: var(--text-on-ink);
}
.p360-dial__sub { font-size: .8rem; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; }
.p360-dial__sub b { font-weight: 500; color: var(--text-on-ink); }
.p360-dial__ticker {
  margin-top: 18px; min-height: 1.6em; font-size: .88rem; color: var(--text-on-ink-2);
  display: flex; align-items: center; gap: 10px; transition: opacity .3s var(--ease-ui);
}
.p360-dial__ticker.is-swap { opacity: 0; }
.p360-dial__ticker b { font-weight: 500; color: var(--text-on-ink); }
.p360-dial__ticker i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }
@media (max-width: 999px) {
  .p360-dial-box { width: min(100%, 380px); }
}

/* ---------- Pausa de los dos bucles (la esfera y la cola) ----------
   El .rl-play del kit, en 40 px y con borde, como la pausa del hero de
   Contenido. Viene con `hidden` y el JS lo muestra solo si el bucle corre. */
.p360-pause { width: 40px; height: 40px; background: rgb(var(--ink-rgb) / .78); border: 1px solid var(--line-on-ink); color: var(--text-on-ink); }
.p360-pause:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
/* en pantallas táctiles el :hover se queda pegado después del toque y el
   botón parecería encendido: ahí no cambia de color */
@media (hover: none) {
  .p360-pause:hover { background: rgb(var(--ink-rgb) / .78); border-color: var(--line-on-ink); color: var(--text-on-ink); }
}
.p360-pause svg { width: 13px; height: 13px; }
.p360-pause[hidden] { display: none; }
/* en la esfera: se apaga con el texto del hero cuando sube el manifiesto
   (--rl-hero-o, del kit) y sale del foco cuando el texto ya no está */
.p360-dial__pause {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  opacity: var(--rl-hero-o, 1);
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), border-color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.p360-dial__pause.is-gone { visibility: hidden; }

/* ============================================================
   SEGMENTADOS (Sin/Con 360 y 1/2/3 slots)
   El fondo naranja es una pieza aparte que se desliza (JS pone --x y
   --w); el texto del elegido va en tinta.
   ============================================================ */
.p360-toggle, .p360-seg {
  position: relative; display: inline-flex; padding: 4px; gap: 2px;
  border: 1px solid var(--p360-field); border-radius: 999px; background: var(--ink);
  isolation: isolate;
}
.p360-toggle button, .p360-seg button {
  position: relative; z-index: 1; min-height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: .95rem; color: var(--text-on-ink-2); white-space: nowrap;
  transition: color .25s var(--ease-ui), transform .16s var(--ease-snap);
}
.p360-toggle button:hover, .p360-seg button:hover { color: var(--text-on-ink); }
.p360-toggle button:active, .p360-seg button:active { transform: scale(.97); }
.p360-toggle button[aria-pressed="true"], .p360-seg button[aria-checked="true"] { color: var(--ink); font-weight: 500; }
.p360-toggle button:focus-visible, .p360-seg button:focus-visible,
.p360-mesa__ideas button:focus-visible { outline-offset: 2px; border-radius: 999px; }
.p360-faq__q button:focus-visible { outline-offset: 4px; border-radius: 6px; }
.p360-toggle__thumb, .p360-seg__thumb {
  position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: var(--w, 0px);
  border-radius: 999px; background: var(--orange);
  transform: translateX(var(--x, 0px));
  transition: transform .42s var(--ease-enter), width .42s var(--ease-enter);
}
.no-js .p360-toggle__thumb, .no-js .p360-seg__thumb { display: none; }
.no-js .p360-seg button[aria-checked="true"], .no-js .p360-toggle button[aria-pressed="true"] { background: var(--orange); }
.p360-toggle:not(.is-ready) .p360-toggle__thumb, .p360-seg:not(.is-ready) .p360-seg__thumb { opacity: 0; }
.p360-toggle:not(.is-ready) button[aria-pressed="true"],
.p360-seg:not(.is-ready) button[aria-checked="true"] { background: var(--orange); }

/* Remate de la sección */
.p360-turn { margin-top: clamp(56px, 10vh, 110px); display: grid; gap: 18px; }
/* mismas columnas que .p360-split: el texto de la derecha arranca en la misma
   vertical que los párrafos de las cabeceras de sección */
@media (min-width: 960px) { .p360-turn { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 60px; } .p360-turn__small { justify-self: end; } }
.p360-turn__big { font-size: var(--fs-hero); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; max-width: 18ch; }
.p360-turn__big em { font-style: normal; color: var(--orange); }
.p360-turn__small { color: var(--text-on-ink-2); max-width: 46ch; }



/* ============================================================
   COLA Y CARRILES ("Cómo funciona" + slots)
   No es un segundo kanban: la cola a la izquierda (arriba en el
   teléfono) y un carril por slot. Cada trabajo activo recorre su
   carril hasta la meta (Terminado) y desaparece. Mismo orden y mismas
   palabras que la Mesa 360: En cola → Activo → Terminado.
   Las tarjetas son absolutas: el JS (Board.layout) pone su sitio en
   transform (con transición: viajan solas) y su avance en el carril en
   `translate` (sin transición: lo mueve el bucle).
   ============================================================ */
.p360-board {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-on-ink); border-radius: var(--r);
  background: var(--ink-2);
  height: var(--board-h, 336px);
}
@media (max-width: 640px) {
  .p360-board--engine { height: var(--board-h, 520px); }
  /* teléfono: la cola y los carriles van de borde a borde de la mesa,
     como la fila de pasos (las tarjetas ganan el ancho que les faltaba) */
  .p360-engine .p360-board--engine { margin-inline: calc(-1 * var(--pad)); border-radius: 0; border-inline: 0; }
}
.no-js .p360-board { display: none; }
.p360-board__zone {
  position: absolute; left: 0; top: 0; border-radius: 16px;
  background: rgb(var(--fg-rgb) / .022);
  transform: translate(var(--x, 0px), var(--y, 0px)); width: var(--w, 0px); height: var(--h, 0px);
}
.p360-board__lbl {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2);
  transform: translate(var(--x, 0px), var(--y, 0px)); white-space: nowrap;
}
.p360-board__lbl b { font-weight: 500; color: var(--text-on-ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* "Terminado" va alineada a la derecha, sobre las metas */
.p360-board__lbl--done { transform: translate(calc(var(--x, 0px) - 100%), var(--y, 0px)); }

/* Carril: apagado es un contorno punteado ("Con 2 slots"); encendido,
   una pista con su etiqueta, el camino y la meta. */
.p360-lane {
  position: absolute; left: 0; top: 0; border-radius: 14px;
  border: 1px dashed rgb(var(--fg-rgb) / .14);
  transform: translate(var(--x, 0px), var(--y, 0px)); width: var(--w, 0px); height: var(--h, 0px);
  transition: border-color .5s var(--ease-ui), background-color .5s var(--ease-ui);
}
.p360-lane.is-on { border-style: solid; border-color: rgb(var(--orange-rgb) / .12); background: rgb(var(--orange-rgb) / .045); }
.p360-lane__off {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 10px; text-align: center;
  font-size: .76rem; color: rgb(var(--fg-rgb) / .52); transition: opacity .4s var(--ease-ui);
}
.p360-lane.is-on .p360-lane__off { opacity: 0; }
.p360-lane__tag {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--orange); opacity: 0; transition: opacity .4s var(--ease-ui);
}
.p360-lane.is-on .p360-lane__tag { opacity: 1; }
/* el camino: punteado hasta la meta; lo recorrido, en naranja */
.p360-lane__path {
  position: absolute; top: 50%; left: var(--path-l, 0px); width: var(--path-w, 0px); height: 1px;
  background: repeating-linear-gradient(90deg, rgb(var(--fg-rgb) / .2) 0 3px, transparent 3px 8px);
  opacity: 0; transition: opacity .4s var(--ease-ui);
}
.p360-lane.is-on .p360-lane__path { opacity: 1; }
.p360-lane__path i {
  position: absolute; left: 0; right: 0; top: -.5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--orange-rgb) / 0) 0%, rgb(var(--orange-rgb) / .45) 35%, var(--orange) 100%);
  transform-origin: 0 50%; transform: scaleX(0);
}
.p360-lane.is-glide .p360-lane__path i { transition: transform .8s var(--ease-enter); }
.p360-lane__goal {
  position: absolute; top: 50%; left: var(--goal-x, 0px);
  width: var(--goal, 28px); height: var(--goal, 28px); margin-top: calc(var(--goal, 28px) / -2);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgb(var(--fg-rgb) / .22); background: var(--ink);
  opacity: 0; transition: opacity .4s var(--ease-ui), background-color .35s var(--ease-ui), border-color .35s var(--ease-ui);
}
.p360-lane.is-on .p360-lane__goal { opacity: 1; }
.p360-lane__goal svg {
  width: 14px; height: 14px; fill: none; stroke: rgb(var(--fg-rgb) / .5);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s var(--ease-ui);
}
.p360-lane__goal::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--orange); opacity: 0;
}
/* llega un trabajo: la meta se enciende y suelta un anillo */
.p360-lane.is-hit .p360-lane__goal { background: var(--orange); border-color: var(--orange); }
.p360-lane.is-hit .p360-lane__goal svg { stroke: var(--ink); }
.p360-lane.is-hit .p360-lane__goal::after { animation: p360-ring 1.1s var(--ease-soft) 1; }
/* teléfono: la etiqueta del carril va arriba, sobre la meta */
.p360-board.is-narrow .p360-lane__tag { left: auto; right: 10px; top: 9px; transform: none; font-size: .64rem; }
.p360-card {
  position: absolute; left: 0; top: 0; width: var(--cw, 180px); height: var(--ch, 64px);
  padding: 10px 12px 0; border-radius: var(--p360-r-sm);
  background: var(--p360-card); border: 1px solid var(--p360-line-2);
  /* la escala va dentro de transform, después de la posición: con la
     propiedad `scale`, que se aplica encima de transform, también se
     encogía la posición y la tarjeta saltaba hacia arriba al terminar */
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--sc, 1));
  translate: var(--run, 0px) 0;                 /* avance dentro del carril */
  transform-origin: 100% 50%;
  transition: transform .8s var(--ease-enter), opacity .5s var(--ease-ui), border-color .4s var(--ease-ui);
  will-change: transform;
}
/* un salto grande de avance (al elegir otro paso) se desliza */
.p360-card.is-glide { transition: transform .8s var(--ease-enter), translate .8s var(--ease-enter), opacity .5s var(--ease-ui), border-color .4s var(--ease-ui); }
/* teléfono: la tarjeta de la cola es más angosta que la del carril */
.p360-board.is-narrow .p360-card { transition: transform .8s var(--ease-enter), opacity .5s var(--ease-ui), border-color .4s var(--ease-ui), width .8s var(--ease-enter); }
.p360-board.is-narrow .p360-card.is-glide { transition: transform .8s var(--ease-enter), translate .8s var(--ease-enter), opacity .5s var(--ease-ui), border-color .4s var(--ease-ui), width .8s var(--ease-enter); }
/* en el ancho, el avance es la posición en el carril: sin barra */
.p360-board:not(.is-narrow) .p360-card__bar { display: none; }
.p360-card__t {
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 500; line-height: 1.3; color: var(--text-on-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* aire para el anillo del pedido activo: el título recorta lo que
     sobresale y el anillo, pegado al borde, salía cortado en media luna.
     El relleno agranda la zona que se ve; el margen negativo lo descuenta,
     así nada se mueve. */
  padding: 6px 0 6px 10px; margin: -6px 0 -6px -10px;
}
.p360-card__t .p360-pip { width: 6px; height: 6px; }
.p360-card__t span { overflow: hidden; text-overflow: ellipsis; }
.p360-card__m {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-size: .72rem; color: var(--text-on-ink-2); white-space: nowrap;
}
.p360-card__m span:last-child { color: rgb(var(--fg-rgb) / .7); font-variant-numeric: tabular-nums; }
.p360-card__bar {
  position: absolute; left: 12px; right: 12px; bottom: 10px; height: 2px; border-radius: 2px;
  background: rgb(var(--fg-rgb) / .08); opacity: 0; transition: opacity .3s var(--ease-ui);
}
.p360-card__bar i {
  display: block; height: 100%; border-radius: 2px; background: var(--orange);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.p360-card.is-active { border-color: rgb(var(--orange-rgb) / .5); }
.p360-card.is-active .p360-card__bar { opacity: 1; }
.p360-card.is-active .p360-pip { position: relative; background: var(--orange); border-color: var(--orange); }
.p360-card.is-active .p360-pip::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--orange);
  animation: p360-ring 1.8s var(--ease-soft) infinite;
}
.p360-card.is-new { border: 1px dashed rgb(var(--orange-rgb) / .7); }
.p360-card.is-new .p360-pip { border-style: dashed; border-color: var(--orange); }
.p360-card.is-review .p360-card__m span:first-child { color: var(--orange); }
/* recién organizado: la fecha que acaba de recibir se enciende */
.p360-card.is-fresh { border-color: rgb(var(--orange-rgb) / .4); }
.p360-card.is-fresh .p360-card__m span:last-child { color: var(--orange); }
/* lista pero opaca: el mismo tono que su zona (tablero + velo de la zona),
   para que al viajar por encima de otra tarjeta no se transparente */
.p360-card.is-done { background: linear-gradient(rgb(var(--fg-rgb) / .022), rgb(var(--fg-rgb) / .022)), rgb(var(--bb)); border-color: var(--p360-line-2); }
.p360-card.is-done .p360-card__t { color: var(--text-on-ink-2); }
.p360-card.is-done .p360-pip { background: rgb(var(--fg-rgb) / .55); border-color: transparent; }
.p360-card.is-gone { opacity: 0; }
.p360-card.is-done.is-hidden { --sc: .86; }   /* entra en la meta y se apaga */
.p360-card.is-moving { z-index: 3; }
.p360-card.is-moving.is-done { z-index: 4; }   /* la que termina pasa por encima de la que entra */
.p360-card.is-hidden { opacity: 0; }
.p360-card__bubble {
  position: absolute; left: 12px; bottom: calc(100% + 7px); padding: 5px 11px; border-radius: 10px 10px 10px 2px;
  font-size: .72rem; font-weight: 500; color: var(--ink); background: var(--orange); white-space: nowrap;
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 0 100%;
  transition: opacity .3s var(--ease-ui), transform .4s var(--ease-enter);
}
.p360-card.has-bubble .p360-card__bubble { opacity: 1; transform: none; }
.p360-board.is-instant .p360-card, .p360-board.is-instant .p360-lane { transition: none; }
@keyframes p360-ring {
  0% { transform: scale(1); opacity: .7; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

/* Cola: en el ancho, tres tarjetas y debajo "+N en cola"; en el
   teléfono, dos tarjetas enteras y el "+N" al final de la fila
   (JS: Board.layout) */
.p360-board { --bb: var(--ink-2-rgb); }
.p360-board.is-narrow .p360-card__t { align-items: flex-start; white-space: normal; }
.p360-board.is-narrow .p360-card__t .p360-pip { margin-top: .45em; }
.p360-board.is-narrow .p360-card__t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; min-height: 2.5em; }
.p360-board__more {
  position: absolute; left: 0; top: 0; width: var(--w, 48px); height: var(--h, 88px);
  display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center;
  border-radius: var(--p360-r-sm); border: 1px dashed rgb(var(--fg-rgb) / .2);
  transform: translate(var(--x, 0px), var(--y, 0px));
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-ui), visibility 0s .35s;
}
.p360-board__more.is-on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-ui); }
.p360-board__more b { font-weight: 300; font-size: 1.05rem; line-height: 1; color: var(--text-on-ink); font-variant-numeric: tabular-nums; }
.p360-board__more span { font-size: .66rem; line-height: 1.2; color: var(--text-on-ink-2); }
/* opaco y por encima: la tarjeta que pasa a esconderse detrás del "+N"
   no se transparenta mientras se apaga */
.p360-board__more { z-index: 2; background: rgb(var(--bb)); }
.p360-board__more.is-row { grid-auto-flow: column; align-items: baseline; gap: 7px; background: linear-gradient(rgb(var(--fg-rgb) / .022), rgb(var(--fg-rgb) / .022)), rgb(var(--bb)); }
.p360-board__more.is-row b { font-size: .95rem; }
.p360-board__more.is-row span { font-size: .74rem; }

/* ============================================================
   LA COLA Y LOS CARRILES · contenedor
   ============================================================ */
.p360-engine {
  border: 1px solid var(--line-on-ink); border-radius: var(--r-lg);
  background: var(--ink-2); padding: clamp(16px, 2.2vw, 28px);
  --pad: clamp(16px, 2.2vw, 28px);
}
.p360-engine .p360-board { background: var(--ink); border-color: var(--p360-line-2); --bb: var(--ink-rgb); }
.p360-seg--sm button { min-height: 36px; padding: 0 14px; font-size: .88rem; }

/* ============================================================
   MESA 360 (ejemplo)
   ============================================================ */
.p360-mesa {
  position: relative; overflow: hidden; isolation: isolate; min-height: 0;
  display: flex; flex-direction: column;            /* si crece, crecen las columnas y el pie queda abajo */
  border: 1px solid var(--line-on-ink); border-radius: var(--r); background: var(--ink-2);
  transition: min-height .38s var(--ease-enter);
}
.p360-mesa__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(14px, 1.8vw, 20px); border-bottom: 1px solid var(--line-on-ink);
}
.p360-mesa__id { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.p360-mesa__id img { width: 16px; height: auto; }
.p360-mesa__app { font-weight: 500; }
.p360-mesa__brand { color: var(--text-on-ink-2); }
.p360-mesa__brand::before { content: '/'; margin-right: 10px; color: rgb(var(--fg-rgb) / .25); }
.p360-mesa__demo {
  font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-on-ink-2); border: 1px solid var(--line-on-ink); border-radius: 999px; padding: 4px 10px;
}
.p360-mesa__new {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 4px; border: 1px solid var(--orange); background: var(--orange); color: var(--ink);
  font-size: .9rem; font-weight: 500;
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.p360-mesa__new:hover, .p360-mesa__new[aria-expanded="true"] { background: transparent; color: var(--orange); }
.p360-mesa__new:active { transform: scale(.97); }
.p360-mesa__composer {
  padding: 16px clamp(14px, 1.8vw, 20px) 18px; border-bottom: 1px solid var(--line-on-ink);
  background: rgb(var(--orange-rgb) / .04);
}
.p360-mesa__composer:not([hidden]) { animation: p360-drop .32s var(--ease-enter); }
@keyframes p360-drop { from { opacity: 0; transform: translateY(-6px); } }
.p360-mesa__composer-lbl { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-ink-2); }
.p360-mesa__composer-row { display: flex; gap: 8px; margin-top: 10px; }
.p360-mesa__composer input, .p360-mesa__ask input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--p360-field); background: var(--ink); color: var(--text-on-ink);
  font: inherit; font-size: .95rem; transition: border-color .2s var(--ease-ui);
}
.p360-mesa__composer input::placeholder, .p360-mesa__ask input::placeholder { color: rgb(var(--fg-rgb) / .45); font-style: italic; }
.p360-mesa__composer input:focus, .p360-mesa__ask input:focus { outline: none; border-color: var(--orange); }
.p360-mesa__send, .p360-mesa__ask button {
  height: 44px; padding: 0 18px; border-radius: 4px; font-size: .9rem; font-weight: 500;
  background: var(--orange); color: var(--ink); border: 1px solid var(--orange);
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.p360-mesa__send:hover, .p360-mesa__ask button:hover { background: transparent; color: var(--orange); }
.p360-mesa__send:active, .p360-mesa__ask button:active { transform: scale(.97); }
.p360-mesa__ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p360-mesa__ideas button {
  min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-on-ink);
  font-size: .82rem; color: var(--text-on-ink-2); transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui);
}
.p360-mesa__ideas button:hover { color: var(--text-on-ink); border-color: var(--p360-field); }
.p360-mesa__note { margin-top: 10px; font-size: .78rem; color: var(--text-on-ink-2); }

.p360-mesa__tabs { display: none; }
.p360-mesa__cols { flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p360-mesa__col { padding: 16px clamp(12px, 1.4vw, 18px) 20px; min-height: 330px; transition: opacity .35s var(--ease-ui); }
.p360-mesa__col + .p360-mesa__col { border-left: 1px solid var(--line-on-ink); }
.p360-mesa__h {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2);
}
/* contador de cada columna, como en una herramienta de verdad (el selector
   apuntaba a [data-count] y el HTML usa data-mcount: nunca se aplicaba) */
.p360-mesa__h span[data-mcount] {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  background: rgb(var(--fg-rgb) / .07); color: var(--text-on-ink); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.p360-mesa__list { display: grid; gap: 8px; }
.p360-job { position: relative; }
.p360-job__open {
  width: 100%; text-align: left; display: block; padding: 12px 14px; border-radius: var(--p360-r-sm);
  background: var(--ink-3); border: 1px solid var(--p360-line-2);
  transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.p360-job__open:hover { border-color: rgb(var(--fg-rgb) / .26); }
.p360-job__open:active { transform: scale(.985); }
.p360-job__open:focus-visible { outline-offset: 2px; }
.p360-job__t { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 500; line-height: 1.3; color: var(--text-on-ink); }
.p360-job__m { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 6px; font-size: .78rem; color: var(--text-on-ink-2); }
.p360-job__d { color: rgb(var(--fg-rgb) / .78); transition: color .3s var(--ease-ui); }
/* la fecha de la cola: un calendario chico en lugar de la palabra "Fecha:".
   En fila y centrados, para que el ícono no empuje el texto hacia abajo y la
   fecha quede a la altura del puesto ("1º") */
.p360-job__d { display: inline-flex; align-items: center; gap: 5px; }
.p360-job__cal { width: 13px; height: 13px; stroke-width: 1.8; }
.p360-job__bar { display: block; margin-top: 12px; height: 3px; border-radius: 3px; background: rgb(var(--fg-rgb) / .08); overflow: hidden; }
.p360-job__bar i { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, .72)); transition: transform .8s var(--ease-enter); }
.p360-job[data-stage="revision"] .p360-job__s { color: var(--orange); }
[data-list="activo"] .p360-job__open { border-color: rgb(var(--orange-rgb) / .45); }
.p360-check { color: var(--orange); font-weight: 500; }
.p360-job.is-done .p360-job__open { background: transparent; }
.p360-job.is-done .p360-job__t { color: var(--text-on-ink); }
.p360-job.is-pending .p360-job__s { color: var(--orange); }
.p360-job__up {
  position: absolute; right: 7px; top: 7px; width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; color: var(--text-on-ink-2); border: 1px solid transparent;
  transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui), background-color .2s var(--ease-ui);
}
.p360-job__up:hover { color: var(--orange); border-color: rgb(var(--orange-rgb) / .5); }
.p360-job__up svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p360-job.has-up .p360-job__open { padding-right: 46px; }
.p360-job.is-entering { animation: p360-enter .5s var(--ease-enter); }
@keyframes p360-enter { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
/* El hueco bajo el activo explica el relevo: quién entra al aprobar */
.p360-mesa__next {
  margin-top: 8px; padding: 12px 14px; border-radius: var(--p360-r-sm);
  border: 1px dashed rgb(var(--fg-rgb) / .16); font-size: .78rem; line-height: 1.4; color: var(--text-on-ink-2);
}
.p360-mesa__next b { display: block; margin-top: 3px; font-size: .9rem; font-weight: 500; color: var(--text-on-ink); }
.p360-mesa__empty { padding: 14px; border-radius: var(--p360-r-sm); border: 1px dashed var(--line-on-ink); font-size: .86rem; color: var(--text-on-ink-2); }
.p360-mesa__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: center;
  padding: 14px clamp(14px, 1.8vw, 20px); border-top: 1px solid var(--line-on-ink);
  font-size: .86rem; color: var(--text-on-ink-2); transition: opacity .35s var(--ease-ui);
}
.p360-mesa__foot span:first-child { display: inline-flex; align-items: center; gap: 9px; color: var(--text-on-ink); }
.p360-mesa__foot b { font-weight: 500; color: var(--text-on-ink); font-variant-numeric: tabular-nums; }

/* Resaltar una parte de la mesa desde la lista "Desde ahí puedes" */
.p360-mesa.has-spot .p360-mesa__bar,
.p360-mesa.has-spot .p360-mesa__col,
.p360-mesa.has-spot .p360-mesa__foot { opacity: .3; }
.p360-mesa.has-spot .p360-mesa__bar { transition: opacity .35s var(--ease-ui); }
.p360-mesa[data-spot="new"] .p360-mesa__bar,
.p360-mesa[data-spot="cols"] .p360-mesa__col,
.p360-mesa[data-spot="dates"] .p360-mesa__col,
.p360-mesa[data-spot="open"] .p360-mesa__col[data-col="activo"],
.p360-mesa[data-spot="activo"] .p360-mesa__col[data-col="activo"],
.p360-mesa[data-spot="cola"] .p360-mesa__col[data-col="cola"],
.p360-mesa[data-spot="hecho"] .p360-mesa__col[data-col="hecho"],
.p360-mesa[data-spot="hist"] .p360-mesa__foot,
.p360-mesa[data-spot="archivo"] .p360-mesa__col[data-col="hecho"],
.p360-mesa[data-spot="archivo"] .p360-mesa__foot { opacity: 1; }
.p360-mesa[data-spot="dates"] .p360-job__d { color: var(--orange); }
.p360-mesa[data-spot="new"] .p360-mesa__new { outline: 1px solid rgb(var(--orange-rgb) / .7); outline-offset: 4px; }
.p360-mesa[data-spot="open"] [data-list="activo"] .p360-job__open,
.p360-mesa[data-spot="activo"] [data-list="activo"] .p360-job__open { outline: 1px solid rgb(var(--orange-rgb) / .7); outline-offset: 3px; }
.p360-mesa[data-spot="hist"] .p360-mesa__foot b,
.p360-mesa[data-spot="archivo"] .p360-mesa__foot b { color: var(--orange); }

/* Detalle de un pedido: entra por la derecha dentro de la mesa */
.p360-mesa__drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: min(400px, 100%);
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px clamp(16px, 1.8vw, 22px) 20px;
  background: #19191B; border-left: 1px solid var(--line-on-ink);
  transform: translateX(0); transition: transform .38s var(--ease-enter), opacity .3s var(--ease-ui);
}
.p360-mesa__drawer.is-closing { transform: translateX(104%); opacity: .4; transition: transform .26s var(--ease-exit), opacity .26s var(--ease-ui); }
.p360-mesa__drawer.is-opening { transform: translateX(104%); }
.p360-mesa__dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p360-mesa__dstate {
  display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange);
}
.p360-mesa__close {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--text-on-ink-2);
  border: 1px solid var(--line-on-ink); transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui);
}
.p360-mesa__close:hover { color: var(--text-on-ink); border-color: var(--p360-field); }
.p360-mesa__close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.p360-mesa__dtitle { font-size: 1.35rem; outline: none; }
.p360-mesa__ddates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p360-mesa__ddates div { padding: 10px 12px; border-radius: 10px; background: rgb(var(--fg-rgb) / .04); }
.p360-mesa__ddates dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-ink-2); }
.p360-mesa__ddates dd { margin: 2px 0 0; font-size: .98rem; text-transform: capitalize; }
.p360-mesa__thread { display: grid; gap: 10px; }
.p360-msg { max-width: 92%; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: rgb(var(--fg-rgb) / .05); font-size: .88rem; line-height: 1.45; }
.p360-msg b { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-ink-2); margin-bottom: 3px; }
.p360-msg--me { justify-self: end; border-radius: 12px 12px 4px 12px; background: rgb(var(--orange-rgb) / .1); }
.p360-msg--me b { color: var(--orange); }
.p360-msg--sys { max-width: none; justify-self: stretch; background: transparent; border: 1px dashed var(--line-on-ink); color: var(--text-on-ink-2); font-size: .8rem; border-radius: 10px; }
.p360-msg.is-new { animation: p360-enter .4s var(--ease-enter); }
.p360-msg--typing span { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: var(--text-on-ink-2); animation: p360-typing 1s var(--ease-soft) infinite; }
.p360-msg--typing span:nth-child(2) { animation-delay: .15s; }
.p360-msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes p360-typing { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.p360-mesa__dactions { display: grid; gap: 10px; margin-top: auto; }
.p360-mesa__ask { display: flex; gap: 8px; }
.p360-mesa__approve { justify-content: center; }
.p360-mesa__file {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line-on-ink); font-size: .9rem; color: var(--text-on-ink);
}
.p360-mesa__file span:first-child { color: var(--orange); }

@media (max-width: 760px) {
  .p360-mesa__tabs {
    display: flex; gap: 4px; padding: 10px 12px 0; overflow-x: auto;
  }
  .p360-mesa__tabs button {
    flex: 1; min-height: 44px; padding: 0 10px; border-radius: 10px 10px 0 0; font-size: .86rem; white-space: nowrap;
    color: var(--text-on-ink-2); border-bottom: 2px solid transparent; transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui);
  }
  .p360-mesa__tabs button span { margin-left: 4px; color: rgb(var(--fg-rgb) / .5); font-variant-numeric: tabular-nums; }
  .p360-mesa__tabs button[aria-selected="true"] { color: var(--text-on-ink); border-bottom-color: var(--orange); }
  .p360-mesa__cols { grid-template-columns: 1fr; border-top: 1px solid var(--line-on-ink); }
  .p360-mesa__col + .p360-mesa__col { border-left: 0; }
  .p360-mesa__col { min-height: 250px; }
  .p360-mesa.is-ready .p360-mesa__col { display: none; }
  .p360-mesa.is-ready[data-tab="activo"] .p360-mesa__col[data-col="activo"],
  .p360-mesa.is-ready[data-tab="cola"] .p360-mesa__col[data-col="cola"],
  .p360-mesa.is-ready[data-tab="hecho"] .p360-mesa__col[data-col="hecho"] { display: block; }
  .p360-mesa.is-ready .p360-mesa__h { display: none; }
  .no-js .p360-mesa__tabs, .p360-mesa:not(.is-ready) .p360-mesa__tabs { display: none; }
  .p360-mesa__new { margin-left: 0; }
  .p360-mesa__bar { justify-content: space-between; }
  .p360-mesa__demo { order: 3; }
}

/* ============================================================
   LA REUNIÓN · calendario
   ============================================================ */
.p360-meet { display: grid; gap: clamp(36px, 6vh, 60px); }
@media (min-width: 960px) { .p360-meet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; } }
.p360-meet__cal { margin: 0; border: 1px solid var(--line-on-ink); border-radius: var(--r); background: var(--ink-2); padding: clamp(16px, 2.2vw, 28px); }
.no-js .p360-meet__cal { display: none; }   /* sin JS no hay calendario que dibujar (el texto de la reunión basta) */
.p360-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; container-type: inline-size; }
/* el rótulo "Reunión" solo cuando la casilla tiene ancho para él y el número */
@container (max-width: 500px) { .p360-cal__d b { display: none; } }
.p360-cal__wd { padding-bottom: 6px; text-align: center; font-size: .7rem; font-weight: 500; letter-spacing: .14em; color: rgb(var(--fg-rgb) / .52); }
.p360-cal__d {
  position: relative; aspect-ratio: 1 / .86; border-radius: 10px; padding: 7px 8px;
  background: rgb(var(--fg-rgb) / .025); font-size: .78rem; color: rgb(var(--fg-rgb) / .5);
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease-ui) calc(var(--i, 0) * 14ms), transform .5s var(--ease-enter) calc(var(--i, 0) * 14ms), background-color .35s var(--ease-ui), color .35s var(--ease-ui);
}
.p360-cal.is-in .p360-cal__d, .p360-cal.is-static .p360-cal__d { opacity: 1; transform: none; }
.p360-cal__d.is-blank { background: transparent; }
.p360-cal__d.is-wknd { background: transparent; }
.p360-cal__d i { position: absolute; bottom: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--fg-rgb) / .5); }
.p360-cal__d i:nth-of-type(1) { left: 8px; }
.p360-cal__d i:nth-of-type(2) { left: 16px; }
.p360-cal__d i:nth-of-type(3) { left: 24px; }
.p360-cal__d::after {
  content: ''; position: absolute; inset: 3px; border-radius: 8px; border: 1.5px solid var(--orange);
  opacity: 0; transform: scale(.9); transition: opacity .35s var(--ease-ui), transform .45s var(--ease-enter);
}
.p360-cal__d.is-meet { color: var(--text-on-ink); background: rgb(var(--orange-rgb) / .08); }
.p360-cal__d.is-meet::after { opacity: 1; transform: none; }
/* El día de la reunión manda en su casilla: "Reunión" ocupa el pie (donde
   van los puntos de pedidos, que ese día se apagan). Abajo a la derecha
   chocaba con los puntos y arriba con los días de dos cifras ("13Reunión"). */
.p360-cal__d b { position: absolute; left: 8px; bottom: 6px; font-size: .62rem; line-height: 1.2; font-weight: 500; letter-spacing: .06em; color: var(--orange); opacity: 0; transition: opacity .3s var(--ease-ui); }
.p360-cal__d i { transition: opacity .3s var(--ease-ui); }
.p360-cal__d.is-meet i { opacity: 0; }
.p360-cal__d.is-meet b { opacity: 1; }
.p360-cal__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: .86rem; color: var(--text-on-ink-2); }
.p360-cal__legend > span { display: inline-flex; align-items: center; gap: 9px; }
.p360-cal__dot { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--fg-rgb) / .5); }
.p360-cal__ring { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--orange); }
.p360-cal__scale {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px;
  margin-top: 20px; padding-top: 0;
}
.p360-cal__scale > div { position: relative; padding-top: 12px; border-top: 1px solid var(--line-on-ink); }
.p360-cal__scale > div::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--orange);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease-enter);
}
.p360-cal__scale > div.is-now::before { transform: scaleX(1); }
.p360-cal__scale dt { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); transition: color .35s var(--ease-ui); }
.p360-cal__scale dd { margin-top: 4px; font-size: .9rem; color: var(--text-on-ink-2); transition: color .35s var(--ease-ui); }
.p360-cal__scale .is-now dt { color: var(--orange); }
.p360-cal__scale .is-now dd { color: var(--text-on-ink); }
@media (max-width: 520px) {
  .p360-cal { gap: 4px; }
  .p360-cal__d { padding: 4px 5px; font-size: .7rem; border-radius: 7px; }
  .p360-cal__d i { bottom: 5px; width: 4px; height: 4px; }
  .p360-cal__d i:nth-of-type(1) { left: 5px; }
  .p360-cal__d i:nth-of-type(2) { left: 11px; }
  .p360-cal__d i:nth-of-type(3) { left: 17px; }
}

/* ============================================================
   CABECERAS DE PANTALLA (T01 · T02)
   Titulares del kit (.rl-title 68 px, .rl-title--m 44 px a 1440) y un
   párrafo de doble capa: gris con una o dos frases en blanco.
   ============================================================ */
.p360-head { margin-bottom: clamp(36px, 6vh, 68px); }
.p360-head .rl-lede { max-width: 33em; }
.p360-title-wide { max-width: none; }
@media (min-width: 960px) {
  .p360-head--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: end; }
  .p360-head--split .rl-lede { margin-top: 0; justify-self: end; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); max-width: 30em; }
}
/* Pantallas de historia (T01): en escritorio el titular sube a 52-56 px y
   sigue en dos renglones; las zonas de decisión (planes, aparte, comparar,
   para ti, preguntas) se quedan en .rl-title--m. En tableta y teléfono,
   el tamaño de --m. */
@media (min-width: 1180px) {
  .rl-title.p360-title-l { font-size: clamp(3.1rem, 1.1rem + 2.7vw, 3.5rem); line-height: 1.05; letter-spacing: -.025em; max-width: 22ch; }
  .p360-resumen__head .rl-title.p360-title-l { max-width: none; }
}
@media (min-width: 960px) {
  .p360-head--wide { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); }
  .p360-head--wide .rl-title { max-width: 24ch; }
  .p360-meet--wide { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .p360-meet--wide .rl-title { max-width: 22ch; }
}
/* el remate de "Si siempre hay algo pendiente" */
.p360-sec .p360-turn__big { margin-top: clamp(56px, 10vh, 110px); font-size: var(--rl-fs-title-m); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; max-width: 20ch; }
.p360-turn__big em { font-style: normal; color: var(--orange); }
.p360-sec .p360-turn__sub { margin-top: clamp(16px, 2.4vh, 26px); max-width: 30em; }

/* ============================================================
   LO QUE CAMBIA (kit Relato, T05)
   ============================================================ */
/* la frase de la diferencia (doble capa) entre el titular y la pregunta */
.p360-picker > .p360-picker__lede { margin-bottom: clamp(32px, 5vh, 56px); max-width: 30em; }
.p360-picker .rl-card__t s { text-decoration-thickness: 1.5px; }
/* Encuesta de una pregunta: tres respuestas para tocar; al elegir, su
   resultado (las tarjetas) aparece debajo con su rótulo. */
.p360-poll__q { font-size: var(--rl-fs-title-m); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--rl-fg); }
.p360-poll__opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2.6vh, 28px); }
.p360-poll__opt {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 18px;
  border-radius: 999px; border: 1px solid var(--p360-field); font-size: 1.05rem; color: var(--text-on-ink); text-align: left;
  transition: background-color .25s var(--ease-ui), border-color .25s var(--ease-ui), color .25s var(--ease-ui), transform .16s var(--ease-snap);
}
.p360-poll__opt:hover { border-color: var(--orange); }
.p360-poll__opt:active { transform: scale(.97); }
.p360-poll__opt:focus-visible { outline-offset: 3px; border-radius: 999px; }
.p360-poll__opt[aria-checked="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); font-weight: 500; }   /* sobre naranja, texto en tinta */
.p360-poll__dot { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgb(var(--fg-rgb) / .5); transition: border-color .25s var(--ease-ui); }
.p360-poll__dot::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .25s var(--ease-enter); }
.p360-poll__opt[aria-checked="true"] .p360-poll__dot { border-color: var(--ink); }
.p360-poll__opt[aria-checked="true"] .p360-poll__dot::after { transform: scale(1); }
/* ya respondida: la elegida queda marcada y no se puede cambiar */
.p360-poll__opt[aria-disabled="true"] { cursor: default; }
.p360-poll__opt[aria-disabled="true"]:active { transform: none; }
.p360-poll__hint { margin-top: 16px; font-size: .92rem; color: var(--rl-fg-2); }
.p360-picker[data-poll] .rl-picker__label { display: block; }
@media (max-width: 759px) {
  .p360-poll__opts { flex-direction: column; align-items: stretch; }
  .p360-poll__opt { font-size: 1rem; }
}

/* ============================================================
   CÓMO FUNCIONA · la Mesa de la escena fija (kit Relato, T06)
   Las tarjetas son absolutas: --c (columna 0 · 1 · 2) y --r (fila) las
   ponen el JS en cada paso; el viaje es la transición de transform.
   El ancho de una tarjeta es el de su columna, así que translateX en %
   salta de columna en columna a cualquier ancho.
   ============================================================ */
.p360-scene .rl-scene__head { align-self: center; }
.p360-scene__lede { margin-top: 18px; font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); max-width: 28em; }
.p360-scene__steps { margin-top: clamp(22px, 3.4vh, 36px); }
/* La barra de avance de la escena se apaga en el último tramo: si no,
   al salir quedaba una raya naranja de borde a borde entre secciones. */
html.rl-anim .p360-scene.is-live .rl-scene__bar { opacity: calc((1 - var(--rl-p, 0)) * 25); }
.p360-sm {
  --h: 66px; --g: 8px; --gap: 10px;
  position: relative; border: 1px solid var(--rl-line); border-radius: var(--r);
  background: var(--rl-surface); overflow: hidden;
}
.p360-sm__bar {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px;
  border-bottom: 1px solid var(--rl-line); font-size: .86rem;
}
.p360-sm__bar img { width: 14px; height: auto; }
.p360-sm__bar b { font-weight: 500; color: var(--rl-fg); }
.p360-sm__bar span { color: var(--rl-fg-2); }
.p360-sm__bar span::before { content: '/'; margin-right: 10px; color: rgb(var(--fg-rgb) / .25); }
.p360-sm__bar em {
  margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rl-fg-2); border: 1px solid var(--rl-line); border-radius: 999px; padding: 4px 10px;
}
.p360-sm__heads {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 14px 18px 12px;
}
.p360-sm__heads span {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2); white-space: nowrap;
}
.p360-sm__heads b {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: rgb(var(--fg-rgb) / .07); color: var(--rl-fg); letter-spacing: 0; font-weight: 500; font-variant-numeric: tabular-nums;
}
.p360-sm__board {
  position: relative; margin: 0 18px 18px;
  height: calc(4 * var(--h) + 3 * var(--g));
  background:
    linear-gradient(90deg, transparent calc((100% - 2 * var(--gap)) / 3 + var(--gap) / 2 - .5px), var(--rl-line) 0, var(--rl-line) calc((100% - 2 * var(--gap)) / 3 + var(--gap) / 2 + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(2 * (100% - 2 * var(--gap)) / 3 + var(--gap) * 1.5 - .5px), var(--rl-line) 0, var(--rl-line) calc(2 * (100% - 2 * var(--gap)) / 3 + var(--gap) * 1.5 + .5px), transparent 0);
}
.p360-sm__card {
  position: absolute; left: 0; top: 0; width: calc((100% - 2 * var(--gap)) / 3); height: var(--h);
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px;
  border-radius: 12px; border: 1px solid rgb(var(--fg-rgb) / .08); background: var(--ink-3);   /* #202023: el naranja chico da 4,6 */
  transform: translate(calc(var(--c, 0) * (100% + var(--gap))), calc(var(--r, 0) * (var(--h) + var(--g))));
  transition: transform .85s var(--ease-enter), opacity .45s var(--ease-ui), border-color .4s var(--ease-ui), background-color .4s var(--ease-ui);
}
.p360-sm__t { font-size: .88rem; font-weight: 500; line-height: 1.25; color: var(--rl-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p360-sm__m { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--rl-fg-2); white-space: nowrap; }
.p360-sm__m span { overflow: hidden; text-overflow: ellipsis; }
.p360-sm__prog { position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; border-radius: 2px; background: rgb(var(--fg-rgb) / .08); overflow: hidden; opacity: 0; transition: opacity .3s var(--ease-ui); }
.p360-sm__prog i { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 1.1s var(--ease-enter); }
.p360-sm__bub {
  position: absolute; right: 10px; top: -13px; padding: 4px 10px; border-radius: 10px 10px 10px 3px;
  background: var(--rl-fg); color: var(--ink); font-size: .7rem; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-ui), transform .45s var(--ease-enter);
}
/* el pedido que se sigue: un filete naranja a la izquierda */
.p360-sm__card.is-hero::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--orange); }
.p360-sm__card.is-new { border-style: dashed; border-color: rgb(var(--orange-rgb) / .7); }
.p360-sm__card.is-new [data-sm-s] { color: var(--orange); }
.p360-sm__card.is-dated [data-sm-d] { color: var(--rl-fg); }
.p360-sm__card.is-dated [data-sm-d]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--orange); vertical-align: 1px; }
.p360-sm__card.is-active { border-color: rgb(var(--orange-rgb) / .5); }
.p360-sm__card.is-active .p360-sm__prog { opacity: 1; }
.p360-sm__card.is-review [data-sm-s] { color: var(--orange); }
.p360-sm__card.is-review .p360-sm__bub { opacity: 1; transform: none; }
.p360-sm__card.is-done { background: transparent; }
.p360-sm__card.is-out { opacity: 0; transform: translate(calc(var(--c, 0) * (100% + var(--gap))), calc(var(--r, 0) * (var(--h) + var(--g)) + 10px)) scale(.97); }
@media (max-width: 959px) {
  .p360-sm { --h: 62px; --g: 6px; --gap: 6px; }
  .p360-sm__bar { min-height: 42px; padding: 0 12px; font-size: .8rem; }
  .p360-sm__bar span { display: none; }
  .p360-sm__heads { padding: 10px 12px 8px; }
  .p360-sm__heads span { font-size: .6rem; letter-spacing: .08em; gap: 5px; }
  .p360-sm__heads b { min-width: 18px; height: 17px; }
  .p360-sm__board { margin: 0 12px 12px; }
  .p360-sm__card { padding: 0 8px; gap: 4px; border-radius: 10px; }
  .p360-sm__t { font-size: .74rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }
  .p360-sm__m { font-size: .64rem; }
  .p360-sm__m [data-sm-d] { display: none; }
  .p360-sm__bub { font-size: .62rem; right: 4px; }
  .p360-scene__lede { display: none; }
}
/* sin escena pegada (sin JS, movimiento reducido o pantalla baja): la mesa
   queda arriba de la lista de pasos, quieta en el primer paso */
html:not(.rl-anim) .p360-scene .rl-scene__stage { max-width: 720px; }

/* ============================================================
   MESA 360 · ventana con pestañas (kit Relato, T10)
   ============================================================ */
/* Las pestañas van ENCIMA de la mesa (p360-08): lo que cambian queda justo
   debajo, a la vista, también en el teléfono, donde la mesa mide ~800 px. */
.p360-win .rl-win__bar { margin-top: 0; }
.p360-win .rl-win__panels { margin-top: 12px; }
.p360-win > .p360-mesa { margin-top: clamp(22px, 3.4vh, 34px); }
html:not(.rl-js) .p360-win > .p360-mesa { margin-top: 28px; }
@media (max-width: 759px) {
  /* sin JS, en el teléfono el rótulo de cada panel va a la izquierda, como su texto */
  html:not(.rl-js) .p360-win .rl-win__label { text-align: left; }
}

/* ============================================================
   CIFRAS · cifra gigante aislada (kit Relato, T04)
   ============================================================ */
.p360-figs .p360-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 8vh, 96px) clamp(24px, 4vw, 64px);
  margin-top: clamp(40px, 7vh, 88px);
}
.p360-figs .p360-stats > div:first-of-type { grid-column: 1 / -1; }
.p360-figs .p360-stats > div:not(:first-of-type) { padding-top: 22px; border-top: 1px solid var(--rl-line); }
.p360-figs .p360-stats dt {
  font-size: var(--rl-fs-fig-s); font-weight: 200; line-height: .92; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rl-fg);
}
.p360-figs .p360-stats > div:first-of-type dt { font-size: var(--rl-fs-fig); color: var(--rl-hot-big); }
/* una cifra con unidad (24 h) no cuenta y lleva la unidad chica, como
   `24<small>h</small>` del kit */
.p360-figs .p360-stats dt small { font-size: .42em; font-weight: 300; letter-spacing: -.02em; }
.p360-figs .p360-stats dd { margin: .9em 0 0; max-width: 26ch; font-size: clamp(1rem, .92rem + .3vw, 1.18rem); line-height: 1.4; color: var(--rl-fg-2); }
@media (max-width: 599px) { .p360-figs .p360-stats { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   QUÉ PUEDE VIVIR EN 360 · galería horizontal (kit Relato, T12)
   Fotos verticales (4:5) y horizontales (16:10) con la MISMA altura: la
   fila se lee como una tira de contactos, no como una rejilla.
   ============================================================ */
.p360-gal { --p360-gal-w: clamp(250px, 27vw, 400px); }
.p360-gal .rl-gal__head { align-items: flex-end; }
.p360-gal .rl-gal__head .rl-title { max-width: 26ch; }
.p360-gal__lede { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); max-width: 34em; }
.p360-gal .rl-gal__item { width: var(--p360-gal-w); }
.p360-gal .rl-gal__item.p360-gal__wide { width: calc(var(--p360-gal-w) * 2); }
.p360-gal .p360-gal__wide .rl-gal__frame { aspect-ratio: 16 / 10; }
.p360-gal .rl-gal__cap { max-width: 36ch; }
/* los tres ejemplos de cada situación, detrás de "Ver ejemplos" (el
   plegable del kit): fuera del enlace (no alargan su nombre), más chicos
   y en gris, separados por un punto medio. "Por ejemplo" es el rótulo de
   la lista para el lector (aria-label). */
.p360-gal__more { margin-top: 6px; }
.p360-gal__more .rl-fold__btn { font-size: .9rem; color: var(--rl-fg-2); }
.p360-gal__more .rl-fold__btn:hover { color: var(--rl-fg); }
.p360-gal__more .rl-fold__btn[aria-expanded="true"] { color: var(--rl-fg); }
.p360-gal__eg {
  max-width: 36ch; padding-bottom: 4px;
  font-size: .9rem; line-height: 1.55; color: var(--rl-fg-2);
}
.p360-gal__eg.rl-fold__inner { padding-top: 2px; }
/* cada ejemplo entero en su renglón (nowrap): el corte cae entre uno y
   otro, y el punto queda al final del anterior, nunca al empezar línea */
.p360-gal__eg li { display: inline; white-space: nowrap; }
.p360-gal__eg li:not(:last-child)::after { content: '·'; content: '·' / ''; margin-left: .45em; opacity: .7; }
/* de quién es la pieza de la foto (trabajo real del archivo, no un caso de 360) */
.p360-gal__tag {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 11px; border-radius: 999px;
  background: var(--glass-hover); color: rgb(var(--fg-rgb) / .94); font-size: .8rem; font-weight: 500;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ============================================================
   ¿QUÉ ES UN SLOT? · la cola y los carriles
   ============================================================ */
.p360-slotbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(18px, 2.6vh, 26px); padding: 0 2px; }
.p360-slotbar__lbl { font-size: .98rem; color: var(--rl-fg); }
/* la pausa de la cola abre el pie del tablero, junto a la pregunta: en el
   teléfono comparte renglón con ella */
.p360-slotbar__pause { margin-right: -10px; }
@media (max-width: 759px) { .p360-slotbar__pause + .p360-slotbar__lbl { flex: 1 1 calc(100% - 70px); } }
/* en pausa, lo que late dentro del tablero (el punto del activo, la meta)
   también se detiene */
.p360-engine.is-paused .p360-board *, .p360-engine.is-paused .p360-board *::before, .p360-engine.is-paused .p360-board *::after { animation-play-state: paused !important; }
.p360-slotbar__say { flex: 1 1 300px; margin: 0; font-size: .92rem; line-height: 1.5; color: var(--rl-fg-2); }
.p360-slotbar__say b { color: var(--rl-fg); font-weight: 500; }
.p360-slotbar__go { margin-left: auto; font-size: .92rem; }
@media (max-width: 759px) { .p360-slotbar__go { margin-left: 0; } }

/* ============================================================
   CAPÍTULOS DE CARBÓN · las superficies suben un tono
   (sobre #141415 el gris de siempre, #151516, desaparecía)
   ============================================================ */
.rl-ch--carbon .p360-mesa, .rl-ch--carbon .p360-engine, .rl-ch--carbon .p360-meet__cal { background: var(--rl-surface); }
.rl-ch--carbon .p360-mesa__composer input, .rl-ch--carbon .p360-mesa__ask input { background: var(--rl-carbon); }

/* ============================================================
   CAPÍTULO CLARO · planes, lo que va aparte y la comparación
   El kit redefine --text-on-ink y compañía dentro del claro; aquí solo
   lo que esta hoja pintaba con colores fijos.
   ============================================================ */
/* La cabecera del sitio, si reaparece encima del claro, era un vidrio gris
   con letras blancas (y "Soluciones" en naranja casi no se leía). Mientras
   el claro está encendido, su vidrio es casi tinta, como la barra local. */
.p360:has(.rl-ch--claro.is-lit) .header--blur::before { background: rgb(var(--ink-rgb) / .92); }
.rl-ch--claro .p360-seg { background: var(--rl-surface); border-color: var(--rl-field); }
.rl-ch--claro .p360-seg button { color: var(--rl-fg-2); }
.rl-ch--claro .p360-seg button:hover { color: var(--rl-fg); }
.rl-ch--claro .p360-seg button[aria-checked="true"] { color: var(--ink); }
.p360-plans-sec { padding-top: clamp(96px, 15vh, 170px); }
/* Bajo el titular, el selector de slots y lo que compra ("N pedidos
   avanzando a la vez"), juntos: se cambia y se ve el efecto en el mismo
   sitio. El párrafo y su "Ver por qué" van a la derecha, alineados abajo
   (en tableta y teléfono, debajo, con su aire: .p360-head__side). */
.p360-plans__ctl { display: grid; justify-items: start; gap: 18px; margin-top: clamp(22px, 3.4vh, 32px); }
.p360-plans__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.p360-plans__lbl { font-weight: 500; color: var(--rl-fg); }
.p360-plans .rl-plan__amt, .p360 .is-rolling { transition: filter .25s var(--ease-ui), opacity .25s var(--ease-ui); }
.p360 .is-rolling { filter: blur(1.5px); opacity: .7; }
.p360-plans .rl-plan__line { text-wrap: pretty; }
/* la lista más corta no reparte su sobra entre renglones (subgrid): queda arriba, con el paso de las otras */
.p360-plans .rl-plan__list { align-content: start; }
/* en el teléfono las tarjetas se deslizan de lado: aire arriba para que la
   etiqueta "Base", montada sobre el filete, no quede recortada */
@media (max-width: 899px) { .p360-plans { padding-top: 14px; } }
.p360-plans .rl-plan__save span { font-variant-numeric: tabular-nums; }
/* Las dos tarjetas que no publican precio: "Por cotización" en el lugar
   de la cifra, apoyado abajo para que quede a la altura del precio de
   Design. */
.p360-plans .p360-plans__quote {
  align-items: flex-end; white-space: normal;   /* la caja ocupa la fila del precio; el texto, abajo */
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); font-weight: 300; line-height: 1.02; letter-spacing: -.03em;
}
/* "¿Solo web? Design + Desarrollo": los add-ons son independientes. Una
   fila fina en el pie de la tercera tarjeta, con su propio enlace al
   modal; no le quita peso al botón de la tarjeta. */
.p360-plans__alt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--rl-line);
  font-size: .92rem; line-height: 1.4; color: var(--rl-fg-2);
  transition: border-color .2s var(--ease-ui), color .2s var(--ease-ui), background-color .2s var(--ease-ui);
}
.p360-plans__alt-q { grid-column: 1; font-weight: 500; color: var(--rl-hot); }
.p360-plans__alt-v { grid-column: 1; color: var(--rl-fg); font-variant-numeric: tabular-nums; }
.p360-plans__alt-go { grid-column: 2; grid-row: 1 / span 2; color: var(--rl-fg); transition: transform .2s var(--ease-snap); }
.p360-plans__alt:hover { border-style: solid; border-color: var(--rl-fg-2); color: var(--rl-fg); }
.p360-plans__alt:hover .p360-plans__alt-go { transform: translateX(3px); }
.p360-plans .rl-break dt span { color: inherit; }
/* lo que va aparte: tarjetas bajas, solo el titular y el '+' */
.p360-tiles .rl-tile { min-height: clamp(168px, 14vw, 210px); }
.p360-tiles .rl-tile__t { max-width: 16ch; font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); }
/* teléfono: una fila por cosa, con el '+' a la derecha (antes, cinco
   tarjetas de 168 px casi vacías: más de una pantalla de titulares) */
@media (max-width: 599px) {
  .p360-tiles .rl-tile { min-height: 0; padding-right: 76px; }
  .p360-tiles .rl-tile__more { top: 50%; bottom: auto; margin-top: -22px; }
  .p360-plans .rl-plan__foot .btn { white-space: nowrap; padding-inline: 16px; font-size: .94rem; }
}
/* teléfono: en dos columnas, "Consultar disponibilidad" no cabe en una
   línea; el botón crece en alto en vez de desbordarse */
@media (max-width: 759px) {
  .p360-cmp .rl-cmp__go { height: auto; min-height: 38px; padding-block: 7px; line-height: 1.2; text-align: center; text-wrap: balance; }
}
/* comparación: el ritmo de cada forma de trabajar, sobre su columna */
.p360-cmp-sec .rl-cmp { margin-top: clamp(8px, 2vh, 20px); }
.p360-cmp__rh { padding-block: clamp(18px, 3vh, 30px) clamp(14px, 2vh, 22px); border-bottom: 1px solid var(--rl-line); }
.p360-cmp__rhcell { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.p360-cmp__rhcell span { font-size: .86rem; color: var(--rl-fg-2); }
.p360-rh { width: min(100%, 220px); height: 36px; overflow: visible; }
.p360-rh .ax { stroke: var(--rl-line); stroke-width: 1; stroke-dasharray: 3 5; }
.p360-rh .fl { stroke: rgb(var(--orange-rgb) / .35); stroke-width: 1; }
.p360-rh circle, .p360-rh rect { fill: var(--rl-fg-2); }
.p360-rh--p360 rect { fill: var(--orange); }
.p360-rh > *:not(line) { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease-enter), opacity .5s var(--ease-ui); }
.p360-cmp__rh.is-pre .p360-rh > *:not(line) { opacity: 0; transform: scale(.4); transition: none; }
.p360-rh > *:nth-child(3) { transition-delay: .05s; } .p360-rh > *:nth-child(4) { transition-delay: .1s; }
.p360-rh > *:nth-child(5) { transition-delay: .15s; } .p360-rh > *:nth-child(6) { transition-delay: .2s; }
.p360-rh > *:nth-child(7) { transition-delay: .25s; } .p360-rh > *:nth-child(n + 8) { transition-delay: .3s; }
.p360-cmp .rl-cmp__col { align-content: start; }
/* dos renglones exactos (2 × 1,45): con el interlineado del cuerpo, la
   frase de Contenido & Redes (dos renglones) bajaba su botón 6 px respecto
   de los otros dos (una línea) */
.p360-cmp .rl-cmp__sub { max-width: 24ch; min-height: 2.9em; line-height: 1.45; text-wrap: balance; }
.p360-cmp.is-stuck .rl-cmp__sub { min-height: 0; }
/* sin JS: la tabla */
.p360-cmp__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.p360-cmp__table th, .p360-cmp__table td { padding: 14px 12px; border-bottom: 1px solid var(--rl-line); text-align: left; vertical-align: top; color: var(--rl-fg-2); }
.p360-cmp__table thead th { color: var(--rl-fg); font-weight: 500; }
.p360-cmp__table th small { display: block; margin-top: 4px; font-weight: 400; color: var(--rl-fg-2); }
.p360-cmp__table tbody th { color: var(--rl-fg); font-weight: 500; }
.p360-cmp__table a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   CIERRE · la disponibilidad y un solo botón; después, las notas
   ============================================================ */
.p360-few__status {
  display: inline-flex; align-items: center; gap: 12px; font-size: .85rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange);
}
.p360-few__status i { flex: none; position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.p360-few__status i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--orange); animation: p360-ring 2.2s var(--ease-soft) 3; }
.p360-cta .cta__title { max-width: 20ch; }
.p360-cta .cta__sub { max-width: 50ch; }
.p360-notes { margin-top: clamp(8px, 2vh, 24px); }

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.p360-faqwrap { display: grid; gap: clamp(28px, 5vh, 48px); }
@media (min-width: 960px) {
  .p360-faqwrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 60px; align-items: start; }
  .p360-faqwrap__head { position: sticky; top: calc(var(--rl-chrome, 70px) + 32px); }
}
.p360-faqwrap__more { margin-top: 22px; max-width: 34ch; }
.p360-faq { border-top: 1px solid var(--line-on-ink); }
.p360-faq__item { border-bottom: 1px solid var(--line-on-ink); }
.p360-faq__q { font-size: inherit; }
.p360-faq__q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(18px, 2.6vh, 24px) 0; text-align: left;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem); font-weight: 500; line-height: 1.35; color: var(--text-on-ink);
  transition: color .2s var(--ease-ui);
}
.p360-faq__q button:hover { color: var(--orange); }
.p360-faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-on-ink); transition: border-color .25s var(--ease-ui), background-color .25s var(--ease-ui); }
.p360-faq__icon::before, .p360-faq__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px;
  background: currentColor; border-radius: 1px; transition: transform .35s var(--ease-enter);
}
.p360-faq__icon::after { transform: rotate(90deg); }
.p360-faq__q button[aria-expanded="true"] .p360-faq__icon { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.p360-faq__q button[aria-expanded="true"] .p360-faq__icon::after { transform: rotate(0deg); }
.p360-faq__a > div > p { padding-bottom: clamp(18px, 2.6vh, 26px); color: var(--text-on-ink-2); max-width: 60ch; }
.p360-faq.is-ready .p360-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease-enter); }
.p360-faq.is-ready .p360-faq__a > div { overflow: hidden; min-height: 0; }
.p360-faq.is-ready .p360-faq__a > div > p { opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease-ui), transform .4s var(--ease-enter); }
.p360-faq.is-ready .p360-faq__item.is-open .p360-faq__a { grid-template-rows: 1fr; }
.p360-faq.is-ready .p360-faq__item.is-open .p360-faq__a > div > p { opacity: 1; transform: none; transition-delay: .08s; }
.p360-faq.is-ready .p360-faq__item:not(.is-open) .p360-faq__a > div { visibility: hidden; transition: visibility 0s .42s; }
.p360-faq.is-ready .p360-faq__item.is-open .p360-faq__a > div { visibility: visible; }

/* ============================================================
   CIERRE
   ============================================================ */

/* ============================================================
   REFERENCIAS DEL CLIENTE (tanda 2, encima de la ronda de Apple)
   p360-01 cola y carriles con bandeja de terminados · p360-02 los tres
   beneficios con ícono y la diapositiva "Recibes" · p360-03 comparación
   con íconos, "a la vez" y "pocas marcas" · p360-04/08 de mensaje a
   tarjeta y tres pestañas · p360-05 cintas de pedidos · p360-06 trabajo
   real con chips · p360-07 fechas que se reacomodan · todas-3 una línea
   y "Ver por qué". Mismos tokens del kit (--rl-*) y las mismas curvas.
   ============================================================ */

/* ---------- Pictogramas (un juego para toda la página) ---------- */
.p360-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.p360-i {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Una línea + "Ver por qué" (todas-3) ----------
   El plegable del kit (.rl-fold): sin JS, abierto; con JS, cerrado y con
   su '+'. Más chico y en gris que el desglose de un plan: es letra chica. */
.p360-why { margin-top: clamp(10px, 1.6vh, 16px); }
.p360-why .rl-fold__btn { min-height: 40px; font-size: .92rem; color: var(--rl-fg-2); }
.p360-why .rl-fold__btn:hover, .p360-why .rl-fold__btn[aria-expanded="true"] { color: var(--rl-fg); }
.p360-why .rl-fold__btn i { width: 20px; height: 20px; }
.p360-why__p { max-width: 34em; font-size: clamp(1rem, .94rem + .28vw, 1.16rem); line-height: 1.5; color: var(--rl-fg-2); }
.p360-why__p strong { color: var(--rl-fg); font-weight: 500; }
/* la columna derecha de una cabecera en dos columnas: la línea y su '+' */
.p360-head__side { display: grid; justify-items: start; align-content: end; }
.p360-head__side .rl-lede { margin-top: 0; }
/* la Mesa quedó con una línea corta: a la izquierda de su columna, sobre su
   "Ver por qué" (pegada a la derecha flotaba lejos del plegable) */
.p360-head--inbox .p360-head__side .rl-lede { justify-self: start; }
@media (max-width: 959px) { .p360-head--split .p360-head__side { margin-top: 18px; } }
@media (min-width: 960px) { .p360-head--split .p360-head__side { justify-self: end; max-width: 30em; } }
.p360-head--tight { margin-bottom: 0; }

/* ---------- Portada: cada frase con su ícono (p360-02) ---------- */
.p360-mf__ico {
  /* .08em: el centro del círculo cae en el de las mayúsculas (con -.06em
     quedaba ~8 px abajo a 1440) */
  /* el ícono naranja del beneficio (tablero p360-02: "con un ícono
     naranja"), del alto de las mayúsculas: a .78em y en blanco se leía como
     una viñeta */
  display: inline-grid; place-items: center; vertical-align: .02em;
  width: .9em; height: .9em; margin-right: .34em; border-radius: 50%;
  border: max(1.5px, .028em) solid rgb(var(--orange-rgb) / .38);
  background: rgb(var(--orange-rgb) / .07); color: var(--orange);
}
.p360-mf__ico svg {
  width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 0;
}

/* ---------- Resumen · 2: el urgente que reacomoda la semana (p360-07) ----------
   Quieta, la escena es el final: el urgente arriba, las demás corridas
   un lugar (translateY) con la fecha vieja tachada junto a la nueva. */
.p360-mini--fecha { --ch: 64px; --sh: calc(var(--ch) + 8px); }
.p360-mini--fecha .p360-mini__list { position: relative; }
.p360-mini--fecha .p360-mini__card { height: var(--ch); padding-block: 0; align-content: center; transform: translateY(var(--sh)); }
.p360-mini--fecha .p360-mini__card.p360-mini__card--urgent {
  position: absolute; left: 18px; right: 18px; top: 0; transform: none;
  border-color: rgb(var(--orange-rgb) / .7); background: #26201D;
}
.p360-mini__card--urgent > span em { font-style: normal; font-weight: 500; color: var(--orange); }
.p360-mini__swap { display: inline-grid; vertical-align: top; }
.p360-mini__swap > span { grid-area: 1 / 1; }
.p360-mini__swap > span:first-child { opacity: 0; }          /* quieta: el número nuevo */
.p360-mini__date s { position: relative; text-decoration: none; font-weight: 400; color: var(--text-on-ink-2); }
.p360-mini__date s::after { content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 1.5px; background: currentColor; transform-origin: 0 50%; }
.p360-mini__date > span { display: inline-block; max-width: 6.5em; overflow: hidden; white-space: nowrap; vertical-align: top; }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__date {
  animation: p360-date .55s var(--ease-enter) calc(.35s + var(--d, 0) * .26s) both, p360-flash .7s var(--ease-ui) calc(3s + var(--d, 0) * .22s) both;
  animation-play-state: var(--run);
}
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__card:not(.p360-mini__card--urgent) { animation: p360-shift .62s var(--ease-enter) 2.2s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__card--urgent { animation: p360-urgent .6s var(--ease-enter) 2.3s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__card--urgent .p360-mini__date { animation: p360-date .55s var(--ease-enter) 2.75s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__swap > span:first-child { animation: p360-swap-out .3s var(--ease-exit) 2.3s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__swap > span:last-child { animation: p360-swap-in .35s var(--ease-enter) 2.35s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__date s { animation: p360-dim .3s var(--ease-ui) calc(2.95s + var(--d, 0) * .22s) both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__date s::after { animation: p360-strike .3s var(--ease-enter) calc(2.95s + var(--d, 0) * .22s) both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--fecha .p360-mini__date > span { animation: p360-newdate .45s var(--ease-enter) calc(3.05s + var(--d, 0) * .22s) both; animation-play-state: var(--run); }
@keyframes p360-shift { from { transform: none; } }
@keyframes p360-urgent { from { opacity: 0; transform: translateY(-16px) scale(.97); } }
@keyframes p360-swap-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes p360-swap-in { from { opacity: 0; transform: translateY(45%); } }
@keyframes p360-dim { from { color: var(--text-on-ink); font-weight: 500; } }
@keyframes p360-strike { from { transform: scaleX(0); } }
@keyframes p360-newdate { from { opacity: 0; max-width: 0; } }
@keyframes p360-flash { 35% { background-color: rgb(var(--orange-rgb) / .22); border-color: var(--orange); } }

/* ---------- Resumen · 3: el slot ocupado avanza ---------- */
.p360-mini__prog { display: block; margin: 10px 18px 0; height: 3px; border-radius: 3px; background: rgb(var(--fg-rgb) / .08); overflow: hidden; }
.p360-mini__prog i { display: block; height: 100%; border-radius: inherit; background: var(--orange); transform-origin: 0 50%; transform: scaleX(.92); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini__prog i { animation: p360-prog 3.4s var(--ease-enter) .3s both; animation-play-state: var(--run); }
@keyframes p360-prog { from { transform: scaleX(.5); } }

/* ---------- Resumen · 4: Recibes (p360-02) ----------
   La tarjeta aprobada en la Mesa y, encima, sus archivos en abanico. */
.p360-files { position: relative; width: min(50%, 560px); }
.p360-files .p360-mini { width: 100%; }
.p360-mini--recibe .p360-mini__card--done { margin: 0 18px; border-color: rgb(var(--orange-rgb) / .45); }
.p360-mini__card--done b { display: flex; align-items: center; gap: 8px; }
.p360-files__fan { --fw: clamp(140px, 13vw, 180px); --spread: calc(var(--fw) - 26px); position: absolute; left: 50%; bottom: calc(100% + 18px); width: 0; height: 0; }
.p360-files__fan li {
  position: absolute; left: 0; bottom: 0; width: var(--fw); margin-left: calc(var(--fw) / -2);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: center;
  padding: 12px 12px; border-radius: 12px; background: #26262A; border: 1px solid rgb(var(--fg-rgb) / .12);
  font-size: 14px; color: var(--text-on-ink);
  transform-origin: 50% 100%;
  transform: translateX(calc((var(--k, 0) - 1) * var(--spread))) translateY(calc(var(--k, 0) * var(--k, 0) * 4px - var(--k, 0) * 8px)) rotate(calc((var(--k, 0) - 1) * 4deg));
}
.p360-files__ext {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 40px; border-radius: 6px;
  border: 1px solid rgb(var(--orange-rgb) / .7); color: var(--orange); font-size: .66rem; font-weight: 500; letter-spacing: .06em;
}
.p360-files__fan b { font-size: .76rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p360-files__fan li > span:last-child { font-size: .72rem; color: var(--text-on-ink-2); }
.p360-files__fan li:last-child { border-color: rgb(var(--orange-rgb) / .55); z-index: 1; }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--recibe .p360-mini__card--done { animation: p360-in .5s var(--ease-enter) .25s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--recibe .p360-mini__swap > span:first-child { animation: p360-swap-out .3s var(--ease-exit) .6s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-mini--recibe .p360-mini__swap > span:last-child { animation: p360-swap-in .35s var(--ease-enter) .65s both; animation-play-state: var(--run); }
html.rl-anim .p360-hl:is(.is-pre, .is-playing) .is-active .p360-files__fan li { animation: p360-file .75s var(--ease-enter) calc(1.1s + var(--k, 0) * .42s) both; animation-play-state: var(--run); }
@keyframes p360-file { from { opacity: 0; transform: translateY(-70px) rotate(0deg); } }
@media (max-width: 759px) {
  .p360-files { width: 100%; }
  .p360-files__fan { --fw: 118px; bottom: calc(100% + 12px); }
  .p360-files__fan li { padding: 8px 9px; column-gap: 7px; grid-template-columns: minmax(0, 1fr); }
  .p360-files__fan b { font-size: .68rem; }
  .p360-files__fan li .p360-files__ext { grid-row: auto; width: 34px; height: 22px; }
  .p360-mini--fecha { --ch: 58px; --sh: calc(var(--ch) + 6px); }
  .p360-mini--fecha .p360-mini__card.p360-mini__card--urgent { left: 14px; right: 14px; }
  .p360-mini__prog { margin: 8px 14px 0; }
  .p360-mini--recibe .p360-mini__card--done { margin: 0 14px; }
}
/* en el teléfono la lista de la fecha muestra tres: el urgente y dos más.
   El nombre va entero arriba y el puesto y la fecha (la vieja tachada y la
   nueva) abajo: en un renglón, la fecha doble dejaba "Campaña eve…" y
   "Actualizaci…" cortados. */
@media (max-width: 759px) {
  .p360-mini--fecha .p360-mini__card:nth-child(n + 4) { display: none; }
  .p360-mini--fecha .p360-mini__card { row-gap: 5px; }
  .p360-mini--fecha .p360-mini__card > b { grid-column: 1 / -1; }
  .p360-mini--fecha .p360-mini__card > span { grid-column: 1; grid-row: 2; }
  .p360-mini--fecha .p360-mini__date { grid-column: 2; grid-row: 2; gap: 6px; padding: 3px 9px; font-size: .72rem; }
}

/* ---------- Cintas de pedidos (p360-05) ----------
   Quietas (sin JS o con movimiento reducido): dos filas que se parten,
   alineadas con el contenido. Corriendo: de borde a borde, con fundido
   en los lados. */
/* minmax(0, 1fr): la cinta que corre mide max-content y, sin tope, ensanchaba
   la columna; el pie con la pausa quedaba fuera de la pantalla (x 1844 a 1440). */
.p360-ribbons { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: clamp(28px, 4.6vh, 52px); overflow: hidden; }
.p360-ribbons__track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; overflow: hidden; }
.p360-ribbon__row {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
}
.p360-ribbon__row li {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 22px 0 16px; border-radius: 999px;
  border: 1px solid var(--rl-line); background: var(--rl-surface);
  font-size: clamp(.98rem, .9rem + .3vw, 1.14rem); color: var(--rl-fg); white-space: nowrap;
}
.p360-ribbon--rev .p360-ribbon__row li { background: transparent; color: var(--rl-fg-2); }
.p360-ribbon__row li svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: rgb(var(--fg-rgb) / .62); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.p360-ribbon__row li.is-hot { border-color: rgb(var(--orange-rgb) / .55); color: var(--rl-fg); }
.p360-ribbon__row li.is-hot svg { stroke: var(--orange); }
/* El fundido va en la pista, no en todo el bloque: antes también apagaba
   el botón de pausa (en el borde derecho quedaba al ~70 %). */
.p360-ribbons.is-running .p360-ribbons__track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.p360-ribbons.is-running .p360-ribbon { display: flex; width: max-content; animation: p360-marquee 56s linear infinite; }
.p360-ribbons.is-running .p360-ribbon--rev { animation-direction: reverse; animation-duration: 64s; }
.p360-ribbons.is-running .p360-ribbon__row { flex-wrap: nowrap; padding-inline: 0 10px; }
.p360-ribbons.is-held .p360-ribbon { animation-play-state: paused; }
@media (hover: hover) { .p360-ribbons.is-running .p360-ribbon:hover { animation-play-state: paused; } }
@keyframes p360-marquee { to { transform: translateX(-50%); } }
.p360-ribbons__foot { display: flex; justify-content: flex-end; width: 100%; }
.p360-ribbons__pause { width: 44px; height: 44px; }
.p360-ribbons__pause:not([hidden]) + * { margin: 0; }
/* En el ancho la pausa no ocupa una fila propia (eran ~60 px de aire
   muerto entre las cintas y el mes): va sobre el extremo derecho, entre las
   dos cintas, y las cintas se apagan antes de llegar a ella. --re es lo que
   hay del borde de la pantalla al borde del contenido (como el relleno de
   las filas). */
@media (min-width: 760px) {
  .p360-ribbons { --re: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); margin-bottom: clamp(22px, 3.8vh, 40px); }
  .p360-ribbons__foot {
    position: absolute; inset: 0; margin-inline: auto; z-index: 1;
    align-items: center; pointer-events: none;
  }
  .p360-ribbons__foot > * { pointer-events: auto; }
  .p360-ribbons__pause { background: var(--ink); }
  .p360-ribbons.is-running .p360-ribbons__track {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 calc(100% - var(--re) - 200px), transparent calc(100% - var(--re) - 30px));
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 calc(100% - var(--re) - 200px), transparent calc(100% - var(--re) - 30px));
  }
}

/* ---------- "Lo que cambia": el ícono de cada lado (p360-03) ---------- */
.rl-card__k .p360-i { display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -3px; stroke-width: 1.9; }
.rl-card__k .p360-i--alert { color: var(--rl-fg-2); }
.rl-card__k .p360-i--check { color: var(--orange); stroke-width: 2.2; }

/* ---------- De mensaje a tarjeta (p360-04 + p360-08) ----------
   Cuatro canales en UNA fila: cada uno es su ícono (que ya dice el canal)
   y su mensaje al lado, de una línea, como una lista de chats. Antes cada
   canal llevaba encima su nombre en mayúsculas y los pares bajaban 22 px:
   la franja ocupaba tres renglones. Con JS (.is-live) el mensaje vuela a la
   cola (lo mueve MotionPath) y en su mismo sitio queda "En la cola". El
   mensaje va por encima de la Mesa mientras vuela. */
.p360-inbox {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px clamp(14px, 2vw, 28px);
  margin: 0 0 clamp(26px, 4.6vh, 48px);
}
.p360-inbox__ch {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px;
}
.p360-inbox__ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rl-line); background: var(--rl-surface); color: var(--rl-fg);
  transition: border-color .4s var(--ease-ui), color .4s var(--ease-ui);
}
.p360-inbox__msg {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: start; position: relative; z-index: 6; max-width: 100%;
  padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--rl-surface-2); border: 1px solid rgb(var(--fg-rgb) / .1);
  font-size: .92rem; line-height: 1.35; color: var(--rl-fg);
  transform-origin: 30% 50%;
}
/* El mensaje que cayó queda transparente justo encima de su tarjeta de la
   cola: sin pointer-events se tragaba el clic (tocar "Campaña evento" no
   abría su detalle, ni en el teléfono el pedido activo de la pestaña). */
.p360-inbox.is-live .p360-inbox__msg { will-change: transform; pointer-events: none; }
/* entregado: donde estaba el mensaje queda su hueco punteado con "En la
   cola" y un check (antes era texto suelto y la franja, ya enviada, se veía
   vacía: cuatro íconos y aire) */
.p360-inbox__ch::after {
  content: 'En la cola'; grid-column: 2; grid-row: 1; align-self: center; justify-self: start;
  display: inline-flex; align-items: center; padding: 9px 14px 9px 32px;
  border: 1px dashed rgb(var(--orange-rgb) / .42); border-radius: 16px 16px 16px 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23FF4201' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12px 50% / 13px no-repeat;
  font-size: .86rem; line-height: 1.35; color: var(--rl-fg-2);
  opacity: 0; transform: scale(.96); transform-origin: 0 50%;
  transition: opacity .35s var(--ease-ui), transform .45s var(--ease-enter);
}
.p360-inbox__ch.is-sent::after { transform: none; }
.p360-inbox__ch.is-sent::after { opacity: 1; }
.p360-inbox__ch.is-sent .p360-inbox__ico { border-color: rgb(var(--orange-rgb) / .6); color: var(--orange); }
@media (max-width: 899px) {
  .p360-inbox { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .p360-inbox__ch { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .p360-inbox__msg { font-size: .86rem; padding: 9px 12px; }
  .p360-inbox__ico { width: 34px; height: 34px; }
  .p360-inbox__ico .p360-i { width: 16px; height: 16px; }
}
/* Teléfono: un canal por renglón (en 2 × 2 cada mensaje ocupaba 2 o 3
   renglones en media columna). */
@media (max-width: 599px) {
  .p360-inbox { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* la tarjeta todavía en camino no se ve (sin moverla: Flip y el resto la
   encuentran en su lugar); al caer, su borde se enciende un momento */
.p360-job { transition: opacity .3s var(--ease-ui); }
.p360-job.is-await { opacity: 0; }
.p360-job.is-landed .p360-job__open { animation: p360-landed 1.2s var(--ease-soft); }
@keyframes p360-landed { from { border-color: var(--orange); background-color: rgb(var(--orange-rgb) / .14); } }
/* la fecha que acaba de moverse (p360-07): la vieja tachada, la nueva en naranja */
.p360-job__d s { color: var(--text-on-ink-2); text-decoration-thickness: 1px; }
.p360-job.is-moved .p360-job__d { color: var(--orange); }
.p360-job.is-moved .p360-job__open { border-color: rgb(var(--orange-rgb) / .4); }
/* Seguir: lo activo y las fechas de la cola */
.p360-mesa[data-spot="seguir"] .p360-mesa__col[data-col="activo"],
.p360-mesa[data-spot="seguir"] .p360-mesa__col[data-col="cola"] { opacity: 1; }
.p360-mesa[data-spot="seguir"] .p360-job__d { color: var(--orange); }

/* ---------- Qué puede vivir en 360: tarjetas con trabajo real (p360-06) ---------- */
.p360-svc__more { position: absolute; inset: 0; pointer-events: none; }
.p360-svc__frame .p360-svc__alt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease-ui), transform .8s var(--ease-soft);
}
.p360-svc__frame .p360-svc__alt.is-on { opacity: 1; }
html:not(.rl-anim) .p360-svc__more { display: none; }
.p360-svc__dots { position: absolute; right: 16px; bottom: 21px; display: flex; gap: 6px; opacity: 0; transition: opacity .4s var(--ease-ui); }
.p360-svc__frame.is-live .p360-svc__dots { opacity: 1; }
.p360-svc__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--fg-rgb) / .42); transition: background-color .35s var(--ease-ui), transform .35s var(--ease-snap); }
.p360-svc__dots i.is-on { background: rgb(var(--fg-rgb) / .95); transform: scale(1.25); }
.p360-svc .rl-gal__cap { margin-top: 18px; }
.p360-svc .rl-gal__cap b { font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.25; }
.p360-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-width: 44ch; }
.p360-chips li {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rl-line);
  font-size: .84rem; line-height: 1.3; color: var(--rl-fg); white-space: nowrap;
}
.p360-svc .p360-gal__more { margin-top: 4px; }
.p360-gal__eg { display: block; }

/* ---------- La cola: la bandeja de terminados (p360-01) ---------- */
.p360-tray {
  display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 12px 10px 16px;
  border-radius: 16px; border: 1px solid var(--p360-line-2); background: var(--ink); overflow: hidden;
}
.no-js .p360-tray { display: none; }
.p360-tray__lbl {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2);
}
.p360-tray__lbl .p360-i { width: 14px; height: 14px; color: var(--orange); stroke-width: 2.2; }
.p360-tray__row {
  flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.p360-tray__row li {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px;
  border-radius: 999px; background: var(--rl-surface-2); border: 1px solid var(--p360-line-2);
  font-size: .8rem; color: var(--rl-fg-2); white-space: nowrap;
  transition: color .6s var(--ease-ui), border-color .6s var(--ease-ui);
}
.p360-tray__row li .p360-i { width: 13px; height: 13px; color: var(--orange); stroke-width: 2.2; }
.p360-tray__row li.is-new { color: var(--rl-fg); border-color: rgb(var(--orange-rgb) / .55); }
.p360-board__lbl b { transition: color .45s var(--ease-ui); }
.p360-board__lbl--done.is-bump b { color: var(--orange); }
/* Con bandeja, "Terminado N" va en ella: el rótulo del tablero (arriba a
   la derecha en el ancho, bajo los carriles en el teléfono) se esconde, y
   el número sube y se enciende en la bandeja. */
.p360-board.has-tray .p360-board__lbl--done { display: none; }
.p360-tray__lbl b { margin-left: 2px; font-weight: 500; letter-spacing: 0; color: var(--rl-fg); font-variant-numeric: tabular-nums; transition: color .45s var(--ease-ui); }
.p360-tray__lbl.is-bump b { color: var(--orange); }
/* Teléfono: el rótulo arriba y la fila de terminados entera debajo (en un
   solo renglón cabía una pieza y un trozo cortado de la anterior). */
@media (max-width: 640px) {
  .p360-tray { flex-wrap: wrap; row-gap: 8px; padding: 10px 10px 10px 12px; }
  .p360-tray__lbl { letter-spacing: .1em; }
  /* el fundido más largo: la pieza anterior que no cabe se apaga entera
     en vez de leerse cortada ("…resentación comercial") */
  .p360-tray__row { flex-basis: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%); mask-image: linear-gradient(90deg, transparent, #000 46%); }
}

/* ---------- Planes: "N pedidos avanzando a la vez" (p360-03 · p360-01) ---------- */
.p360-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.p360-rate__n { display: flex; align-items: center; gap: 12px; color: var(--rl-fg); }
.p360-rate__n b {
  font-size: clamp(2.6rem, 1.9rem + 2.2vw, 3.6rem); font-weight: 200; line-height: .9; letter-spacing: -.04em;
  color: var(--rl-hot-big); font-variant-numeric: tabular-nums;
}
/* una línea en el ancho (con 8,5em "pedidos avanzando a la vez" se partía en tres) */
.p360-rate__n span { max-width: 14em; font-size: .98rem; line-height: 1.25; text-wrap: balance; }
.p360-rate__lanes { display: grid; gap: 6px; width: 132px; }
.p360-rate__lanes i {
  position: relative; display: block; height: 8px; border-radius: 999px; overflow: hidden;
  border: 1px dashed var(--rl-field); transition: border-color .4s var(--ease-ui), background-color .4s var(--ease-ui);
}
.p360-rate__lanes i.is-on { border-style: solid; border-color: rgb(var(--orange-rgb) / .4); background: rgb(var(--orange-rgb) / .08); }
.p360-rate__lanes b {
  position: absolute; inset: 0; border-radius: inherit; background: var(--orange);
  transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform .5s var(--ease-enter);
}
.p360-rate.is-run .p360-rate__lanes i.is-on b { animation: p360-lane 1.3s var(--ease-enter) both; }
.p360-rate.is-run .p360-rate__lanes i:nth-child(2).is-on b { animation-delay: .12s; }
.p360-rate.is-run .p360-rate__lanes i:nth-child(3).is-on b { animation-delay: .24s; }
@keyframes p360-lane { from { transform: scaleX(0); } }

/* La etiqueta "Pocas marcas a la vez" sobre la tarjeta Design se quitó el
   2026-10-06 (pedido del cliente); la idea sigue en el cierre y en la nota 3. */

/* ---------- Comparación: check y pictograma por fila (p360-03) ---------- */
.p360-cmp .rl-cmp__label .p360-i { width: 18px; height: 18px; color: var(--rl-fg); }
/* el guion del "no incluye" a 2 px: a 1,5 px salía de 1 o de 2 según la
   fila (medio píxel) y dos "no" iguales se veían distintos */
.p360-cmp .rl-cmp__dash { height: 2px; border-radius: 1px; }
.p360-cmp .rl-cmp__yes::before {
  width: 18px; height: 18px;
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230A0A0A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .p360-ribbon, .p360-svc__alt, .p360-rate__lanes b, .p360-job { transition: none !important; animation: none !important; }
  .p360-job.is-landed .p360-job__open { animation: none; }
}

/* ============================================================
   PLAN 360 · el plan del trimestre (.p360-rm)
   Tres pasos dentro de una misma ventana: las áreas, el plan en
   carriles (uno por slot) y la Mesa. El plan es una sola rejilla:
   en el ancho (≥ 1180 px) el tiempo corre de izquierda a derecha, 12
   semanas en 12 columnas y un carril por fila, con los carriles
   apagados a la vista ("Con 3 slots…"); más angosto, el tiempo baja
   (12 filas) y cada carril es una columna: así una semana siempre
   tiene ancho para su rótulo. La rejilla coloca cada pieza con sus
   variables. Las fases (.is-p1 … .is-p3) las pone js/prisma-360.js →
   roadmap().
   ============================================================ */
.p360-rm {
  --pad: clamp(16px, 2.2vw, 28px);
  border: 1px solid var(--line-on-ink); border-radius: var(--r-lg);
  background: var(--ink-2); overflow: hidden;
}
.p360-rm__bar { padding-inline: var(--pad); }
.p360-rm__step { padding: clamp(18px, 2.4vw, 28px) var(--pad); }
.p360-rm__step + .p360-rm__step { border-top: 1px solid var(--p360-line-2); }
.p360-rm__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; }
.p360-rm__n {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em; font-variant-numeric: tabular-nums;
  color: var(--text-on-ink-2); transition: color .4s var(--ease-ui);
}
.p360-rm__step.is-on .p360-rm__n { color: var(--orange); }
.p360-rm__head h3 { font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; color: var(--text-on-ink); }
.p360-rm__head p { font-size: .95rem; color: var(--text-on-ink-2); }
.p360-rm__seg { margin-left: auto; align-self: center; }
@media (max-width: 759px) {
  .p360-rm__head h3 { flex: 1 1 calc(100% - 44px); }
  .p360-rm__head p { flex: 1 1 100%; }
  .p360-rm__seg { margin: 10px 0 0; }
}

/* 01 · Las áreas y lo que necesita cada una */
.p360-rm__areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.p360-rm__areas li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 14px 16px 16px; border-radius: 14px;
  border: 1px solid var(--p360-line-2); background: var(--ink);
}
.p360-rm__areas b { margin-bottom: 2px; font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); }
.p360-rm__need { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 4px 8px; font-size: .9rem; line-height: 1.3; color: var(--text-on-ink); transition: color .4s var(--ease-ui); }
.p360-rm__need::before {
  content: ''; width: 7px; height: 7px; margin-top: .42em; border-radius: 50%;
  border: 1px solid rgb(var(--fg-rgb) / .45);
  transition: background-color .4s var(--ease-ui), border-color .4s var(--ease-ui);
}
.p360-rm__need.is-in::before { background: var(--orange); border-color: var(--orange); }
@media (max-width: 759px) {
  .p360-rm__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .p360-rm__areas li { padding: 12px 12px 14px; }
  .p360-rm__need { font-size: .84rem; }
}
.p360-rm.is-ready .p360-rm__areas li { transition: opacity .5s var(--ease-ui) calc(var(--i, 0) * 90ms), transform .6s var(--ease-enter) calc(var(--i, 0) * 90ms); }
.p360-rm.is-ready:not(.is-p1) .p360-rm__areas li { opacity: 0; transform: translateY(10px); }

/* 02 · El plan: una rejilla de 12 semanas. Cada pieza lleva --s (semana en
   que empieza), --n (semanas), --l (primer carril) y --h (carriles que
   ocupa: un proyecto grande puede tomar dos y durar la mitad). */
.p360-rm__time {
  --g: 4px; --wk: 40px; --from: inset(0 0 100% 0 round 9px);
  position: relative; display: grid; gap: var(--g) 6px;
  grid-template-columns: 22px repeat(var(--lanes, 2), minmax(0, 1fr));
  grid-template-rows: auto repeat(12, var(--wk));
}
.no-js .p360-rm__time { display: none; }
.p360-rm__mo {
  grid-column: 1; grid-row: calc(var(--m) * 4 + 2) / span 4;
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
  font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2);
}
.p360-rm__lane {
  grid-row: 1; grid-column: calc(var(--l) + 1); padding: 0 2px 6px; min-width: 0;
  font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.p360-rm__track {
  grid-row: 2 / -1; grid-column: calc(var(--l) + 1);
  border-radius: 14px; background: rgb(var(--fg-rgb) / .035);
  font-style: normal;
}
.p360-rm__track.is-off, .p360-rm__lane.is-off { display: none; }   /* con el tiempo hacia abajo, un carril apagado no ocupa columna */
.p360-rm__div { grid-row: calc(var(--at) + 2); grid-column: 2 / -1; align-self: start; height: 1px; margin-top: calc(var(--g) / -2 - .5px); background: rgb(var(--fg-rgb) / .1); }
.p360-rm__item {
  position: relative; z-index: 1; min-width: 0; margin: 3px;
  grid-row: calc(var(--s) + 1) / span var(--n); grid-column: calc(var(--l) + 1) / span var(--h, 1);
  display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 26px 4px 12px; border-radius: 16px;
  border: 1px solid rgb(var(--fg-rgb) / .28); background: var(--ink-2);
  font-size: .72rem; line-height: 1.2; color: var(--text-on-ink);
  clip-path: inset(0 0 0 0 round 9px);
  transition: background-color .4s var(--ease-ui), border-color .4s var(--ease-ui);
}
/* el punto naranja: la entrega. Con el tiempo hacia abajo, en la esquina de
   abajo; con el tiempo hacia la derecha (más abajo), al final de la cápsula */
.p360-rm__item.is-plan::after {
  content: ''; position: absolute; right: 10px; bottom: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}
.p360-rm__item.is-wide { font-size: .8rem; }
.p360-rm__t { min-width: 0; font-weight: 500; }
.p360-rm__m { font-size: .68rem; line-height: 1.25; color: var(--text-on-ink-2); }
/* una semana en un solo slot: el rótulo y, si hay ancho (columnas anchas del
   teléfono), la duración al lado */
.p360-rm__item.is-unit { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.p360-rm__item.is-unit .p360-rm__m { white-space: nowrap; }
.p360-rm__time:not([data-lanes="1"]) .p360-rm__item.is-unit .p360-rm__m { display: none; }   /* con dos o tres columnas no hay ancho para las dos cosas */
/* ocupa dos slots: sale en la mitad del tiempo */
.p360-rm__item.is-fast { border-color: var(--orange); background: linear-gradient(120deg, #71270D, #2C1A14 70%); }   /* naranja al 42 % → 10 % sobre la tinta, en colores opacos */
.p360-rm__item.is-fast .p360-rm__m { color: var(--text-on-ink); }
/* espacio libre: pedidos, sin decir cuáles. No es una caja: es un riel de
   puntos que corre por el slot libre (hacia abajo aquí; hacia la derecha en
   el ancho), con su rótulo en una píldora */
.p360-rm__item.is-open {
  align-items: center; padding: 0; border: 0; border-radius: 0;
  background: radial-gradient(circle, rgb(var(--orange-rgb) / .75) 2px, transparent 2.6px) center / 16px 16px repeat-y;
}
.p360-rm__item.is-open .p360-rm__t, .p360-rm__track.is-off span {
  padding: 3px 12px; border-radius: 999px; background: #1B1B1C; border: 1px solid rgb(var(--orange-rgb) / .4);
  font-size: .72rem; font-weight: 400; color: var(--text-on-ink);
}
@media (max-width: 759px) {
  .p360-rm__time[data-lanes="3"] .p360-rm__item { padding: 3px 6px; margin: 2px; }
}

@media (min-width: 1180px) {
  .p360-rm__time {
    --from: inset(0 100% 0 0 round 9px);
    gap: 8px var(--g);
    grid-template-columns: 64px repeat(12, minmax(0, 1fr));
    grid-template-rows: 24px repeat(3, 64px);
  }
  .p360-rm__mo { grid-row: 1; grid-column: calc(var(--m) * 4 + 2) / span 4; writing-mode: horizontal-tb; transform: none; text-align: left; padding-left: 6px; align-self: center; }
  .p360-rm__lane { grid-column: 1; grid-row: calc(var(--l) + 1); align-self: center; padding: 0 8px 0 2px; }
  .p360-rm__lane.is-off { display: block; color: var(--text-on-ink-2); }
  .p360-rm__track { grid-column: 2 / -1; grid-row: calc(var(--l) + 1); }
  /* carril apagado: el mismo riel, en gris, con lo que se gana al encenderlo */
  .p360-rm__track.is-off {
    display: grid; place-items: center; padding: 0 16px; text-align: center;
    background: radial-gradient(circle, rgb(var(--fg-rgb) / .2) 2px, transparent 2.6px) center / 16px 16px repeat-x;
  }
  .p360-rm__track.is-off span { background: var(--ink-2); border-color: transparent; font-size: .78rem; color: rgb(var(--fg-rgb) / .52); }
  .p360-rm__div { grid-column: calc(var(--at) + 2); grid-row: 2 / -1; align-self: stretch; justify-self: start; width: 1px; height: auto; margin: 0 0 0 calc(var(--g) / -2 - .5px); }
  .p360-rm__item { grid-column: calc(var(--s) + 1) / span var(--n); grid-row: calc(var(--l) + 1) / span var(--h, 1); margin: 5px 1px; padding: 4px 34px 4px 20px; border-radius: 999px; }
  .p360-rm__item.is-plan::after { right: 12px; top: 50%; bottom: auto; width: 10px; height: 10px; margin-top: -5px; }
  .p360-rm__item.is-unit { padding: 4px 22px 4px 10px; border-radius: 18px; }
  .p360-rm__item.is-unit::after { right: 8px; width: 8px; height: 8px; margin-top: -4px; }
  .p360-rm__item.is-fast { padding: 4px 30px 4px 20px; border-radius: 26px; }
  .p360-rm__item.is-fast:not(.is-wide) { padding: 4px 20px 4px 10px; }
  .p360-rm__item.is-fast:not(.is-wide)::after { right: 8px; }
  .p360-rm__item.is-open { padding: 0; border-radius: 0; background-repeat: repeat-x; }
  /* aquí una semana mide unos 80 px: la duración no cabe al lado del rótulo */
  .p360-rm__item.is-unit { flex-direction: column; align-items: flex-start; justify-content: center; }
  .p360-rm__item.is-unit .p360-rm__m { display: none; }
}

/* Fases. p2: los proyectos se dibujan, uno tras otro. p3: aparecen los
   espacios libres (los pedidos) y la Mesa se enciende. */
.p360-rm.is-ready .p360-rm__item { transition: clip-path .55s var(--ease-enter) calc(var(--i, 0) * 90ms), opacity .2s var(--ease-ui) calc(var(--i, 0) * 90ms), background-color .4s var(--ease-ui), border-color .4s var(--ease-ui); }   /* --i = semana en que empieza: se dibujan en el orden del tiempo */
.p360-rm.is-ready:not(.is-p2) .p360-rm__item { clip-path: var(--from); opacity: 0; }
.p360-rm.is-ready .p360-rm__item.is-open { clip-path: none; transition: opacity .5s var(--ease-ui) calc(var(--i, 0) * 110ms), transform .6s var(--ease-enter) calc(var(--i, 0) * 110ms); }
.p360-rm.is-ready:not(.is-p3) .p360-rm__item.is-open { opacity: 0; transform: scale(.97); transition-delay: 0s; transition-duration: .15s; }
.p360-rm__legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: .8rem; color: var(--text-on-ink-2); }
.p360-rm__legend span { display: inline-flex; align-items: center; gap: 8px; }
.p360-rm__legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.p360-rm__legend .is-fast i { width: 26px; height: 14px; border-radius: 999px; border: 1px solid var(--orange); background: linear-gradient(120deg, #71270D, #2C1A14 70%); }
.p360-rm__legend .is-open i { width: 28px; height: 6px; border-radius: 0; background: radial-gradient(circle, rgb(var(--orange-rgb) / .75) 2px, transparent 2.6px) left center / 9px 6px repeat-x; }
.p360-rm__say { margin-top: 12px; max-width: 72ch; font-size: .92rem; line-height: 1.5; color: var(--rl-fg-2); }
.p360-rm__say b { color: var(--rl-fg); font-weight: 500; }

/* 03 · La Mesa */
.p360-rm__step--mesa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.p360-rm__step--mesa .p360-rm__head { margin-bottom: 0; }
.p360-rm__mesa {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgb(var(--orange-rgb) / .35); background: rgb(var(--orange-rgb) / .08);
  font-size: .88rem; font-weight: 500; color: var(--text-on-ink); white-space: nowrap;
}
.p360-rm__mesa span { font-weight: 400; color: var(--text-on-ink-2); }
.p360-rm.is-p3 .p360-rm__mesa { animation: p360-flash 1s var(--ease-soft) .2s 1; }
.p360-rm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; margin-top: clamp(18px, 2.6vh, 26px); padding: 0 2px; font-size: .98rem; color: var(--rl-fg-2); }
@media (prefers-reduced-motion: reduce) {
  .p360-rm__item, .p360-rm__areas li { transition: none !important; }
  .p360-rm.is-p3 .p360-rm__mesa { animation: none; }
}

/* ============================================================
   Movimiento reducido: nada se desplaza; los estados cambian igual.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .p360-card, .p360-cal__d, .p360-sm__card, .p360-rh > * { transition: none !important; }
  /* Los dos bucles infinitos de la página se apagan en el elemento que los
     lleva (el ::after del punto, cada punto de "escribiendo"): main.css baja
     la duración a .001s pero los deja infinitos, y así tomaban una fase al
     azar en cada cuadro (un parpadeo). Quietos: el anillo no se ve (el
     pedido activo ya lo marcan el punto naranja, el borde y la barra; un
     halo fijo quedaba cortado por el título, que recorta lo que sobresale)
     y los tres puntos de "escribiendo" quedan a media luz. */
  .p360-card.is-active .p360-pip::after, .p360-few__status i::after, .p360-msg--typing span { animation: none; }
  .p360-card.is-active .p360-pip::after { opacity: 0; }
  .p360-msg--typing span { opacity: .6; }
  .p360-cal__d { opacity: 1; transform: none; }
  .p360-hero .p360-dial, .p360-hero .p360-dial__ticker { filter: none; transform: none; }
}