/* Lúcida · demostración «Estrategia de redes»
   Dos botones: «Imagen de marca» monta, pieza a pieza, un perfil simulado de Sombrilla;
   «Calendario de contenido» manda esas mismas piezas a sus días de octubre.
   Usa los tokens, los botones (.toggle), la tilde de luz (.cabezal) y el barrido (.sweep) de /styles.css.
   La pantalla simulada (data-ui) se inspira en un perfil de Instagram con el estilo de la web: sin logos ni marcas.
   Sin script: el perfil entero, quieto; el calendario y los botones no salen. */

.dr {
  container: dr / inline-size;
  display: grid;
  gap: 20px;
  --dr-ui: #FFFFFF;
  --dr-line: #E7E3EA;
  --dr-cell: #FAF9FB;
  --dr-we: #F2EFF4;
  --dr-hole: var(--surface, #F1EFF3);
  --dr-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dr-ease: var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.dr:not(.is-ready) .dr__controls,
.dr:not(.is-ready) .dr__cal { display: none; }

/* los dos botones (en el recuadro de la izquierda, .linea__prueba): si no caben en una línea,
   se reparten el ancho y parten su texto */
.dr__toggle { max-width: 100%; }
@container prueba (max-width: 459px) {
  .dr__toggle { display: flex; width: 100%; }
  .dr__toggle .toggle__btn { flex: 1 1 0; padding: 6px 10px; font-size: 16px; line-height: 1.15; }
}

/* ---------- el escenario ---------- */
.dr__stage {
  position: relative;
  background: var(--dr-ui);
  border: 1px solid var(--dr-line); /* taste-skill-ignore: dentro de la pantalla simulada (data-ui): anillo de selección y icono legible sobre la foto */
  border-radius: 10px;
  transition: height 640ms var(--ease-in-out, cubic-bezier(0.76, 0, 0.24, 1));
}
.dr__stage > .cabezal { border-radius: 10px 10px 0 0; }
.dr__stage > .sweep { border-radius: 10px; }
.dr__view { padding: clamp(16px, 3cqw, 28px); }
.dr__view:not(.is-active) { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
/* la vista que no toca, fuera del todo (también para lectores de pantalla); la que se va, visible mientras sale */
.dr__view:not(.is-active):not(.is-leaving) { display: none; }
.dr__view.is-active { position: relative; z-index: 2; }

.dr__cap { font-size: var(--s5, 15px); color: var(--muted); max-width: 62ch; }

/* ---------- el perfil ---------- */
.dr__perfil { display: grid; gap: 18px; align-items: start; }
.dr__head { display: grid; gap: 10px; align-content: start; font-size: 15px; line-height: 1.4; }
.dr__id { display: flex; align-items: center; gap: 18px; }
.dr__avatar { width: 84px; height: 84px; border-radius: 50%; flex: none; }
.dr__idtext { display: grid; gap: 2px; }
.dr__user { font-size: 20px; font-weight: 620; letter-spacing: -0.01em; }
.dr__stat { color: var(--ink); }
.dr__stat b { font-weight: 620; font-variant-numeric: tabular-nums; }
.dr__name { font-weight: 600; margin-top: 4px; }
.dr__bio { max-width: 34ch; }
.dr__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.dr__btn {
  display: flex; align-items: center; justify-content: center; min-height: 34px;
  border-radius: 8px; background: var(--dr-hole); font-size: 14px; font-weight: 580;
}
.dr__btn--main { background: var(--accent); color: var(--on-accent); }
.dr__hl {
  display: flex; gap: 12px; margin: 8px calc(clamp(16px, 3cqw, 28px) * -1) 0; padding: 0 clamp(16px, 3cqw, 28px) 2px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.dr__hl::-webkit-scrollbar { display: none; }
.dr__hlitem { flex: none; width: 64px; display: grid; justify-items: center; gap: 6px; }
.dr__ring { display: block; width: 62px; aspect-ratio: 1; border-radius: 50%; padding: 3px; border: 1.5px solid #D5CFD9; }
.dr__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dr__hllabel { max-width: 100%; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.dr__slot { position: relative; aspect-ratio: 4 / 5; background: var(--dr-hole); }
.dr__piece { position: absolute; inset: 0; display: block; overflow: hidden; transform-origin: 0 0; }
.dr__piece img { width: 100%; height: 100%; object-fit: cover; }
.dr__car { position: absolute; top: 8px; right: 8px; z-index: 1; width: 20px; height: 20px; color: #FFFFFF; filter: drop-shadow(0 0 1.5px rgba(36, 24, 32, 0.6)); } /* taste-skill-ignore: dentro de la pantalla simulada (data-ui): anillo de selección y icono legible sobre la foto */
.dr__car svg { width: 100%; height: 100%; }

@container dr (min-width: 640px) {
  .dr__perfil { grid-template-columns: 296px minmax(0, 1fr); gap: 28px; }
  .dr__head { align-self: center; gap: 12px; }
  .dr__avatar { width: 96px; height: 96px; }
  /* las destacadas, SIEMPRE en una fila (como en la pantalla de verdad): más pequeñas y, si no caben, se deslizan */
  .dr__hl { flex-wrap: nowrap; margin: 10px 0 0; padding: 0; gap: 8px; }
  .dr__hlitem { width: 52px; gap: 5px; }
  .dr__ring { width: 50px; padding: 2px; }
  .dr__hllabel { font-size: 11px; }
}

/* ---------- el calendario ---------- */
.dr__cal { display: grid; gap: 12px; --th: clamp(40px, 8.4cqw, 82px); }
.dr__calhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.dr__month { font-size: 20px; font-weight: 620; letter-spacing: -0.01em; }
.dr__count { font-size: 14px; color: var(--muted); }
.dr__wk, .dr__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dr__wk li { font-size: 12px; color: var(--muted); padding-left: 6px; }
.dr__day { position: relative; min-height: calc(var(--th) + 34px); padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.dr__day::before { content: ""; position: absolute; inset: 0; background: var(--dr-cell); border-radius: 3px; }
.dr__day.is-we::before { background: var(--dr-we); }
.dr__day > * { position: relative; }
.dr__num { font-size: 13px; line-height: 1; font-weight: 540; font-variant-numeric: tabular-nums; }
.dr__day.is-out .dr__num { color: #8E8590; font-weight: 420; }
.dr__fest { font-size: 11px; line-height: 1.2; color: var(--muted); }

.dr__dbtn {
  display: grid; justify-items: start; gap: 4px; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 4px; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.dr__dbtn::after { content: ""; position: absolute; inset: -2px; border-radius: 5px; pointer-events: none; }
.dr__dbtn[aria-pressed="true"]::after { box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: dentro de la pantalla simulada (data-ui): anillo de selección y icono legible sobre la foto */
.dr__day > .dr__dbtn { position: static; }
.dr__dbtn:focus-visible { outline: none; }
.dr__dbtn:focus-visible::after { box-shadow: inset 0 0 0 3px var(--accent); } /* taste-skill-ignore: dentro de la pantalla simulada (data-ui): anillo de selección y icono legible sobre la foto */
.dr__media { position: relative; display: block; height: var(--th); }
.dr__dslot { position: relative; display: block; height: var(--th); aspect-ratio: 4 / 5; background: var(--dr-hole); border-radius: 2px; }
.dr__dslot .dr__piece { border-radius: 2px; }
.dr__peek { position: absolute; top: -3px; left: 5px; height: var(--th); aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; opacity: 0.9; }
.dr__peek img, .dr__ad img { width: 100%; height: 100%; object-fit: cover; }
.dr__ad { display: block; height: var(--th); aspect-ratio: 9 / 16; border-radius: 2px; overflow: hidden; outline: 2px solid var(--empolvado, #C499AE); outline-offset: 1px; }
.dr__kind { position: relative; font-size: 11px; line-height: 1.2; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .dr__dbtn:hover::after { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); } /* taste-skill-ignore: dentro de la pantalla simulada (data-ui): anillo de selección y icono legible sobre la foto */
}

.dr__detail { display: grid; gap: 2px; padding: 12px 14px; border-radius: 8px; background: var(--dr-cell); font-size: 15px; line-height: 1.45; min-height: 96px; align-content: start; }
.dr__dwhen { font-size: 13px; color: var(--muted); }
.dr__dtitle { font-weight: 600; }

@container dr (max-width: 559px) {
  .dr__kind, .dr__fest { display: none; }
  .dr__day { padding: 4px 3px; min-height: calc(var(--th) + 26px); }
  .dr__wk li { padding-left: 3px; }
  .dr__peek { left: 3px; top: -2px; }
}

/* ---------- movimiento (solo con script y sin movimiento reducido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* «pa»: el perfil se monta pieza a pieza */
  .dr.is-armed .dr__perfil .dr-fx,
  .dr.is-armed .dr__perfil .dr__piece { opacity: 0; }
  .dr.is-building .dr__perfil .dr-fx { animation: dr-rise 560ms var(--dr-ease) both; animation-delay: calc(80ms + var(--k) * 62ms); }
  .dr.is-building .dr__perfil .dr__avatar { animation: dr-spin 900ms var(--dr-spring) both; animation-delay: 60ms; }
  .dr.is-building .dr__perfil .dr__btn,
  .dr.is-building .dr__perfil .dr__hlitem,
  .dr.is-building .dr__perfil .dr__car { animation-name: dr-pop; animation-timing-function: var(--dr-spring); }
  .dr.is-building .dr__perfil .dr__car { animation-delay: calc(1480ms + var(--k) * 30ms); }
  .dr.is-building .dr__perfil .dr__piece { animation: dr-drop 640ms var(--dr-spring) both; animation-delay: calc(720ms + var(--n) * 90ms); }

  /* al volver del calendario: solo entra lo que no vuela */
  .dr.is-returning .dr__perfil .dr-fx { animation: dr-rise 520ms var(--dr-ease) both; animation-delay: calc(var(--k) * 40ms); }

  /* el calendario: la cuadrícula entra en diagonal, y las piezas vuelan desde el perfil */
  .dr.is-planning .dr__cal .dr-fx { animation: dr-rise 480ms var(--dr-ease) both; animation-delay: calc(var(--k) * 40ms); }
  .dr.is-planning .dr__day::before,
  .dr.is-planning .dr__day .dr__num,
  .dr.is-planning .dr__day .dr__fest { animation: dr-cell 520ms var(--dr-ease) both; animation-delay: calc((var(--r) + var(--c)) * 34ms); }
  .dr.is-planning .dr__day .dr__peek { animation: dr-fan 520ms var(--dr-spring) both; animation-delay: 1100ms; }
  .dr.is-planning .dr__day .dr__ad { animation: dr-pop 620ms var(--dr-spring) both; animation-delay: calc(1150ms + var(--r) * 110ms); }
  .dr.is-planning .dr__day .dr__kind { animation: dr-rise 420ms var(--dr-ease) both; animation-delay: calc(1000ms + var(--r) * 60ms); }
  .dr.is-planning .dr__detail { animation-delay: 1250ms; }

  /* lo que se va */
  .dr__view.is-leaving .dr-fx,
  .dr__view.is-leaving .dr__day::before { animation: dr-out 260ms ease both; }
  .dr__view.is-leaving .dr__slot,
  .dr__view.is-leaving .dr__dslot { background: transparent; }

  /* la tilde de luz avanza mientras se monta */
  .dr__stage > .cabezal { transition: opacity 500ms ease; }
  .dr.is-building .dr__stage > .cabezal,
  .dr.is-planning .dr__stage > .cabezal { opacity: 1; }
  .dr.is-building .dr__stage > .cabezal .cabezal__luz,
  .dr.is-building .dr__stage > .cabezal::before { animation: dr-head 2100ms linear both; }
  .dr.is-planning .dr__stage > .cabezal .cabezal__luz,
  .dr.is-planning .dr__stage > .cabezal::before { animation: dr-head 1500ms linear both; }
  .dr__stage > .sweep.is-run::before { animation: sweep 1300ms var(--ease-in-out, cubic-bezier(0.76, 0, 0.24, 1)) 1 both; }

  .dr__dbtn { transition: transform var(--t-press, 140ms) var(--ease-out, ease); }
  .dr__dbtn:active { transform: scale(0.96); }
}
/* «Pausar movimiento» de la web: lo que se monta, se monta sin moverse */
.is-quieto .dr * { animation-duration: 1ms !important; animation-delay: 0ms !important; }

@keyframes dr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dr-pop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
@keyframes dr-spin { from { opacity: 0; transform: scale(0.3) rotate(-150deg); } to { opacity: 1; transform: none; } }
@keyframes dr-drop {
  0% { opacity: 0; transform: translateY(-22px) scale(0.7) rotate(-5deg); }
  55% { opacity: 1; filter: brightness(1.18); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes dr-cell { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes dr-fan { from { opacity: 0; transform: translate(-5px, 3px) rotate(-6deg); } to { opacity: 0.9; transform: none; } }
@keyframes dr-out { to { opacity: 0; transform: scale(0.96); } }
@keyframes dr-head { from { transform: translateX(-100%); } to { transform: translateX(0); } }