/* style-registro-puertas.css — DEMIN CONSCIENTE — las sesiones como puertas
   (registro.html, 2026-10-05). Mismo lenguaje que los portales del hub y las
   nueve puertas de experiencias.html: cada sesión es un arco con una puerta
   pequeña arriba; al elegirla, las hojas se abren y entra luz. Solo dibujo:
   el markup lo pone js/lib/experience-feed.js (.experience-card__puerta) y la
   lógica de reserva no cambia. También: el anillo de «sostener una
   inhalación» de la casilla de salud (js/lib/sostener.js). */

/* ─── El feed como galería de puertas ───────────────────────────── */
.page-registro #session-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  container-type: inline-size;
}
.page-registro #session-picker > .feed-month { grid-column: 1 / -1; margin: 0.75rem 0 0; }
.page-registro #session-picker > .feed-month:first-child { margin-top: 0; }
@container (min-width: 440px) {
  .page-registro #session-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-registro #session-picker > .experience-card--protagonist,
  .page-registro #session-picker > .experience-card--compact,
  .page-registro #session-picker > .registro-copy { grid-column: 1 / -1; }
}

.page-registro .experience-card {
  --arco: 7rem;
  --puerta-w: 46px;
  --puerta-h: 64px;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.25rem 1.5rem;
  border: 1px solid rgba(148, 112, 15, 0.22);
  border-radius: 50% 50% 14px 14px / var(--arco) var(--arco) 14px 14px;
  background: #F4EDE0;
  transition: border-color 400ms ease, background 600ms ease, transform 400ms ease;
}
/* El marco interior: una línea fina que sigue el arco, como el portal del hub. */
.page-registro .experience-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(148, 112, 15, 0.12);
  border-radius: 50% 50% 10px 10px / calc(var(--arco) - 6px) calc(var(--arco) - 6px) 10px 10px;
  pointer-events: none;
}
.page-registro .experience-card--protagonist { --arco: 10rem; --puerta-w: 60px; --puerta-h: 84px; padding: 2rem 1.5rem 1.75rem; }
.page-registro .experience-card--protagonist .experience-card__title { font-size: 1.625rem; }
.page-registro .experience-card .experience-card__title { font-weight: 400; text-wrap: balance; }
.page-registro .experience-card .experience-card__cta,
.page-registro .experience-card button.experience-card__toque { align-self: center; }

/* Compacta: una fila, con la puerta chica a la izquierda. */
.page-registro .experience-card--compact {
  --puerta-w: 22px;
  --puerta-h: 30px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem 0.875rem;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: 14px;
}
.page-registro .experience-card--compact::before { display: none; }
.page-registro .experience-card--compact .experience-card__puerta { margin: 0; }
.page-registro .experience-card--compact .experience-card__title { flex: 1 1 12rem; }
.page-registro .experience-card--compact .experience-card__cta,
.page-registro .experience-card--compact button.experience-card__toque { margin-top: 0; margin-left: auto; }

/* ─── La puerta ─────────────────────────────────────────────────── */
.page-registro .experience-card__puerta {
  position: relative;
  flex-shrink: 0;
  display: flex;
  width: var(--puerta-w);
  height: var(--puerta-h);
  margin: 0 0 1rem;
  border: 1px solid #94700F;
  border-bottom-width: 2px;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  perspective: 240px;
  background: radial-gradient(ellipse at 50% 100%, #FFF4D6 0%, #E3C988 45%, #C9A84C 100%);
}
.page-registro .experience-card__hoja {
  flex: 1;
  background: #EFE7D8;
  box-shadow: inset 0 0 0 1px rgba(148, 112, 15, 0.18);
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-registro .experience-card__hoja:first-child { transform-origin: left center; border-right: 1px solid rgba(148, 112, 15, 0.35); }
.page-registro .experience-card__hoja:last-child { transform-origin: right center; }

/* Entreabierta al acercarse; abierta al elegirla. */
@media (hover: hover) and (pointer: fine) {
  .page-registro .experience-card:not(.experience-card--blocked):hover .experience-card__hoja:first-child { transform: rotateY(-22deg); }
  .page-registro .experience-card:not(.experience-card--blocked):hover .experience-card__hoja:last-child { transform: rotateY(22deg); }
}
.page-registro .experience-card:focus-within .experience-card__hoja:first-child { transform: rotateY(-22deg); }
.page-registro .experience-card:focus-within .experience-card__hoja:last-child { transform: rotateY(22deg); }
.page-registro .experience-card:has(input:checked) .experience-card__hoja:first-child,
.page-registro .experience-card:has(.experience-card__toque:active) .experience-card__hoja:first-child,
.page-registro .experience-card:has(.experience-card__done) .experience-card__hoja:first-child { transform: rotateY(-78deg); }
.page-registro .experience-card:has(input:checked) .experience-card__hoja:last-child,
.page-registro .experience-card:has(.experience-card__toque:active) .experience-card__hoja:last-child,
.page-registro .experience-card:has(.experience-card__done) .experience-card__hoja:last-child { transform: rotateY(78deg); }

/* La luz de la puerta abierta baña el arco. */
.page-registro .experience-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(227, 201, 136, 0.38) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 1200ms ease;
  pointer-events: none;
}
.page-registro .experience-card--compact::after { background: radial-gradient(ellipse 30% 120% at 0% 50%, rgba(227, 201, 136, 0.38) 0%, transparent 70%); }
.page-registro .experience-card:has(input:checked)::after { opacity: 1; }
.page-registro .experience-card:has(.experience-card__cta input:checked) { background: #F6EEDC; box-shadow: none; border-color: #94700F; }
.page-registro .experience-card > :not(.experience-card__puerta) { position: relative; z-index: 1; }

/* Cerrada (llena o sin llaves): la puerta no se mueve. */
.page-registro .experience-card--blocked .experience-card__puerta { background: #D9CFBE; border-color: rgba(148, 112, 15, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .page-registro .experience-card__hoja,
  .page-registro .experience-card::after { transition: none; }
  .page-registro .experience-card:focus-within .experience-card__hoja { transform: none; }
}

/* ─── «Antes de respirar»: confirmar sosteniendo una inhalación ─── */
.page-registro .paso--seguridad .sostener-check {
  position: relative;
  align-items: center;
  gap: 0.875rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.page-registro .sostener-check > input[type="checkbox"] {
  /* Al centro de la fila, no en la esquina: ahí el borde redondeado del
     label lo dejaría fuera del área tocable (y los arneses no lo alcanzan). */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: 0;
  opacity: 0;
  z-index: 2;
}
.page-registro .sostener {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: transform 500ms ease;
}
.page-registro .sostener svg { width: 100%; height: 100%; overflow: visible; }
.page-registro .sostener__pista { fill: #F7F1E5; stroke: rgba(148, 112, 15, 0.35); stroke-width: 1.5; }
.page-registro .sostener__trazo {
  fill: transparent;
  stroke: #94700F;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 22px 22px;
  transition: stroke-dashoffset 450ms ease-out, fill 400ms ease;
}
.page-registro .sostener__marca {
  fill: none;
  stroke: #FBF8F2;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 500ms ease 150ms;
}
.page-registro .sostener-check.is-sosteniendo .sostener { transform: scale(1.12); transition-duration: var(--sostener-ms); transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
.page-registro .sostener-check.is-sosteniendo .sostener__trazo { stroke-dashoffset: 0; transition: stroke-dashoffset var(--sostener-ms) cubic-bezier(0.45, 0, 0.55, 1); }
.page-registro .sostener-check:has(input:checked) .sostener__trazo { stroke-dashoffset: 0; fill: #7A5C0B; }
.page-registro .sostener-check:has(input:checked) .sostener__marca { stroke-dashoffset: 0; }
.page-registro .sostener-check:has(input:focus-visible) .sostener { outline: 2px solid #7A5C0B; outline-offset: 3px; }
.page-registro .sostener-pista {
  display: block;
  min-height: 2.6em; /* el texto cambia mientras se sostiene: que la fila no salte bajo el dedo */
  margin-top: 0.375rem;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: #7A5C0B;
}
.page-registro .sostener-pista[data-estado="corto"] { color: #8A3B26; }