/* style-vaso.css — DEMIN CONSCIENTE — El vaso de todos (2026-10-09).
   Componente .vt (js/vaso/vaso.js) + la página /vaso. Funciona sobre fondo
   oscuro; en Tu espacio (papel crema) va dentro de .vt--panel, que trae su
   propio fondo. Paleta DEMIN; Playfair para lo que se lee lento, DM Sans
   para la interfaz. El agua respira a 6 s (js/vaso/agua.js). */

.vt {
  --vt-negro: #1C1A18;
  --vt-oro: #C9A84C;
  --vt-oro-claro: #E3C988;
  --vt-crema: #F2EDE4;
  --vt-tenue: rgba(242, 237, 228, 0.66);
  --vt-quieto: rgba(242, 237, 228, 0.72); /* 2026-10-29: .44 daba 3.9:1 */
  --vt-linea: rgba(201, 168, 76, 0.22);
  --vt-linea-fuerte: rgba(201, 168, 76, 0.55);
  --vt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vt-serif: 'Playfair Display', Georgia, serif;
  --vt-sans: 'DM Sans', system-ui, sans-serif;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: center;
  color: var(--vt-crema);
  font-family: var(--vt-sans);
}
@media (min-width: 860px) {
  .vt { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 5.5rem); }
  .vt__leer { grid-column: 1 / -1; }
}
.vt :focus-visible { outline: 2px solid var(--vt-oro); outline-offset: 4px; }
.vt .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── El objeto ─────────────────────────────────────────────────── */
.vt__vis {
  position: relative;
  width: min(74vw, 320px);
  margin-inline: auto;
  isolation: isolate;
}
@media (min-width: 860px) { .vt__vis { width: 100%; max-width: 420px; } }
/* Luz que sube desde la mesa y la sombra del vaso: lo vuelven un objeto. */
.vt__vis::before {
  content: '';
  position: absolute;
  inset: 18% -18% -4%;
  z-index: -1;
  background:
    radial-gradient(50% 9% at 50% 93%, rgba(0, 0, 0, 0.55), transparent 70%),
    radial-gradient(48% 46% at 50% 70%, rgba(201, 168, 76, 0.13), transparent 72%);
  pointer-events: none;
}
.vaso-agua { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.vaso-agua__svg, .vaso-agua__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vaso-agua__svg-agua { transition: y 1.6s var(--vt-ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.vaso-agua__lienzo { opacity: 0; transition: opacity 900ms var(--vt-ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.vaso-agua.is-gl .vaso-agua__lienzo { opacity: 1; }
.vaso-agua.is-gl .vaso-agua__svg { opacity: 0; transition: opacity 900ms var(--vt-ease, cubic-bezier(0.22, 1, 0.36, 1)); }

.vt__capa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vt-flota {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 62%;
  padding: 0.2rem 0.45rem;
  font-family: var(--vt-serif);
  font-style: italic;
  font-size: clamp(0.875rem, 2.4vw, 1rem);
  line-height: 1.2;
  text-align: center;
  color: var(--vt-crema);
  text-shadow: 0 1px 10px rgba(28, 20, 8, 0.75), 0 0 2px rgba(28, 20, 8, 0.6);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: default;
  user-select: none;
}
.vt-flota.is-agua { text-shadow: 0 1px 8px rgba(40, 24, 4, 0.9), 0 0 2px rgba(40, 24, 4, 0.8); }
.vt-flota.is-quieta { color: #FFF8E8; }
.vt__marca {
  position: absolute;
  translate: 0 calc(-100% - 6px);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--vt-oro-claro);
  white-space: nowrap;
  transition: top 1.6s var(--vt-ease);
}
.vt--sala .vt__marca { font-size: 1rem; }
.vt--sala .vt-flota { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.vt-flota.is-quieta::after {
  content: attr(data-nota);
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0.35rem;
  white-space: nowrap;
  font: 400 0.75rem/1.2 var(--vt-sans);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--vt-negro);
  background: var(--vt-oro-claro);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  text-shadow: none;
}

.vt__cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0.25rem 0 0;
  min-height: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--vt-tenue);
}
.vt__cifra b { font-family: var(--vt-serif); font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--vt-crema); font-variant-numeric: tabular-nums; }

/* ── El texto ──────────────────────────────────────────────────── */
.vt__txt { min-width: 0; max-width: 34rem; }
.vt__sesion { margin: 0 0 1rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--vt-oro); }
.vt__sesion span { color: var(--vt-tenue); }
.vt__t {
  margin: 0;
  font-family: var(--vt-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--vt-crema);
  text-wrap: balance;
}
.vt__lead {
  margin: 1rem 0 0;
  max-width: 30rem;
  font-family: var(--vt-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--vt-tenue);
  text-wrap: pretty;
}
.vt__lead a, .vt__hoy a, .vt__mas { color: var(--vt-oro-claro); }

.vt__form { display: grid; gap: 1.25rem; margin-top: clamp(1.75rem, 4vw, 2.25rem); }
.vt__f { border: 0; margin: 0; padding: 0; min-width: 0; }
.vt-campo { display: grid; gap: 0.6rem; }
.vt-campo__l { font-size: 0.875rem; letter-spacing: 0.02em; color: var(--vt-crema); padding: 0; margin-bottom: 0.6rem; }
.vt-campo .vt-campo__l { margin-bottom: 0; }
.vt-campo__caja { position: relative; display: block; }
.vt-campo__in {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 3.75rem 0.75rem 0;
  font-family: var(--vt-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--vt-crema);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--vt-linea-fuerte);
  border-radius: 0;
  transition: border-color 400ms var(--vt-ease);
}
.vt-campo__in::placeholder { color: var(--vt-quieto); }
.vt-campo__in:focus { outline: none; border-bottom-color: var(--vt-oro); }
.vt-campo__in:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--vt-oro); }
.vt-campo__cuenta { position: absolute; right: 0; bottom: 0.95rem; font-size: 0.75rem; color: var(--vt-quieto); font-variant-numeric: tabular-nums; }

.vt-escala { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 0.3rem; }
.vt-escala__n {
  min-height: 44px;
  padding: 0;
  font: 400 0.9375rem/1 var(--vt-sans);
  font-variant-numeric: tabular-nums;
  color: var(--vt-tenue);
  background: transparent;
  border: 1px solid var(--vt-linea);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 300ms var(--vt-ease), color 300ms var(--vt-ease), border-color 300ms var(--vt-ease), transform 160ms var(--vt-ease);
}
@media (hover: hover) and (pointer: fine) { .vt-escala__n:hover { border-color: var(--vt-oro); color: var(--vt-crema); } }
.vt-escala__n:active { transform: scale(0.94); }
.vt-escala__n[aria-checked="true"] { background: var(--vt-oro); border-color: var(--vt-oro); color: var(--vt-negro); }
.vt-escala__ext { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--vt-quieto); }

.vt__btn {
  justify-self: start;
  min-height: 48px;
  padding: 0.85rem 1.9rem;
  font: 500 0.9375rem/1 var(--vt-sans);
  letter-spacing: 0.01em;
  color: var(--vt-negro);
  background: var(--vt-oro);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 300ms var(--vt-ease), transform 160ms var(--vt-ease), opacity 300ms;
}
@media (hover: hover) and (pointer: fine) { .vt__btn:hover { background: var(--vt-oro-claro); } }
.vt__btn:active { transform: scale(0.97); }
.vt__btn:disabled { opacity: 0.6; cursor: progress; }
.vt__nota { margin: -0.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--vt-quieto); }

.vt__msg:empty { display: none; }
.vt__msg { margin-top: 1.25rem; }
.vt__ok, .vt__tuyo, .vt__error, .vt__ultima, .vt__hoy, .vt__curva { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--vt-tenue); }
.vt__ok { color: var(--vt-crema); }
.vt__error { color: #E8B4A6; }
.vt__tuyo b, .vt__ultima b { font-family: var(--vt-serif); font-weight: 400; font-size: 1.2em; color: var(--vt-crema); }
.vt__tuyo span { font-family: var(--vt-serif); font-style: italic; }
.vt__oro, .vt__ultima b.vt__oro { color: var(--vt-oro-claro); }
.vt__riesgo {
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--vt-oro);
  background: rgba(201, 168, 76, 0.08);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--vt-crema);
}
.vt__riesgo p { margin: 0; }
.vt__riesgo p + p { margin-top: 0.6rem; }
.vt__riesgo a { color: var(--vt-oro-claro); font-weight: 500; white-space: nowrap; }
.vt__mas { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin-top: 1rem; font-size: 0.9375rem; text-decoration: none; }
.vt__mas:hover { text-decoration: underline; text-underline-offset: 4px; }
.vt__curva { color: var(--vt-oro-claro); }
.vt__curva svg { display: block; width: 168px; height: auto; margin-bottom: 0.4rem; }
.vt__curva circle { fill: currentColor; }
.vt__curva figcaption { color: var(--vt-tenue); }

/* ── Lo que otros dejaron ──────────────────────────────────────── */
.vt__leer { padding-top: clamp(1.75rem, 5vw, 2.5rem); border-top: 1px solid var(--vt-linea); }
.vt__leer-t { margin: 0 0 1rem; font: 400 0.8125rem/1.3 var(--vt-sans); letter-spacing: 0.04em; color: var(--vt-oro); }
.vt__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--vt-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
  line-height: 1.45;
  color: var(--vt-crema);
}
.vt__lista li:not(:last-child)::after { content: '·'; margin: 0 0.7rem; font-style: normal; color: var(--vt-oro); opacity: 0.7; }
.vt__leer-pie { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--vt-quieto); }

/* ── Tu espacio: el vaso trae su propio fondo oscuro sobre el papel ── */
.vt--panel {
  padding: clamp(1.5rem, 5vw, 2.75rem);
  border-radius: 20px;
  background: #1C1A18;
}
/* La tarjeta de Tu espacio es angosta aunque la pantalla sea ancha: una sola columna siempre. */
.vt.vt--panel { grid-template-columns: minmax(0, 1fr); }
.vt.vt--panel .vt__vis { width: min(100%, 300px); max-width: 300px; justify-self: center; }

/* ── Sala (Zoom): el vaso grande, el número y el QR ───────────── */
.vt--sala { min-height: 100svh; padding: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .vt--sala { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .vt--sala .vt__vis { max-width: min(560px, 62svh); }
}
.vt--sala .vt__sesion { font-size: 1rem; }
.vt__grande { display: flex; align-items: baseline; gap: 1.25rem; margin: 0; font-family: var(--vt-serif); font-size: clamp(4rem, 11vw, 8.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.vt__flecha { font-size: 0.45em; color: var(--vt-quieto); }
.vt__pie { margin: 0.75rem 0 0; font-size: 1.125rem; color: var(--vt-tenue); }
.vt__qr { display: flex; align-items: center; gap: 1.25rem; margin: clamp(2rem, 5vh, 3.5rem) 0 0; }
.vt__qr-c { width: clamp(120px, 15vw, 168px); aspect-ratio: 1; background: var(--vt-crema); border-radius: 12px; padding: 8px; }
.vt__qr-c svg { width: 100%; height: 100%; display: block; }
.vt__qr figcaption { display: grid; gap: 0.3rem; font-size: 1.125rem; color: var(--vt-tenue); }
.vt__qr b { font-family: var(--vt-serif); font-weight: 400; font-size: 1.75rem; color: var(--vt-crema); }
.vt--sala .vt__cifra { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vt *, .vaso-agua__svg-agua { transition-duration: 1ms !important; }
}

/* ── La página /vaso ───────────────────────────────────────────── */
.vaso-pagina { margin: 0; min-height: 100svh; background: #1C1A18; color: #F2EDE4; font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.vaso-pagina *, .vaso-pagina *::before, .vaso-pagina *::after { box-sizing: border-box; }
.vaso-pagina__marca { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1120px; margin: 0 auto; padding: 1.25rem 1rem; }
.vaso-pagina__marca a { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.75rem; letter-spacing: 0.22em; color: rgba(242, 237, 228, 0.66); text-decoration: none; }
.vaso-pagina__marca a:hover { color: #C9A84C; }
.vaso-pagina__main { max-width: 1120px; margin: 0 auto; padding: clamp(0.5rem, 3vw, 2.5rem) 1rem clamp(3rem, 8vw, 6rem); }
@media (min-width: 768px) { .vaso-pagina__marca, .vaso-pagina__main { padding-inline: 2.5rem; } }
.vaso-pagina__pie { max-width: 1120px; margin: 0 auto; padding: 0 1rem 2.5rem; font-size: 0.8125rem; line-height: 1.6; color: rgba(242, 237, 228, 0.72); }
@media (min-width: 768px) { .vaso-pagina__pie { padding-inline: 2.5rem; } }
.vaso-pagina--sala .vaso-pagina__marca, .vaso-pagina--sala .vaso-pagina__pie { display: none; }
.vaso-pagina--sala .vaso-pagina__main { max-width: none; padding: 0; }

/* ── Franja del hub ────────────────────────────────────────────── */
.vaso-hub { max-width: 1120px; margin-inline: auto; padding: clamp(3.5rem, 10vw, 7rem) 1.25rem clamp(3rem, 8vw, 5rem); border-top: 1px solid rgba(201, 168, 76, 0.2); }
@media (min-width: 768px) { .vaso-hub { padding-inline: 2.5rem; } }

/* ── Panel de facilitador · Pulso → El vaso de todos (js/lib/admin-vaso.js) ── */
.av { --av-ink: var(--p-ink, #1C1A18); --av-2: var(--p-ink-2, rgba(28,26,24,.72)); --av-3: var(--p-ink-3, rgba(28,26,24,.56)); --av-mark: #7A5C0B; --av-hair: var(--p-hair, rgba(28,26,24,.1)); }
.av__cuerpo { display: grid; gap: 1.75rem; min-width: 0; }
.av-bloque { display: grid; gap: 0.75rem; min-width: 0; }
.av-bloque__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.av-h { margin: 0; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.9375rem; font-weight: 500; color: var(--av-ink); display: flex; align-items: center; gap: 0.5rem; }
details.av-bloque > summary.av-h { cursor: pointer; list-style: none; }
details.av-bloque > summary.av-h::before { content: '+'; color: var(--av-mark); width: 1ch; }
details[open].av-bloque > summary.av-h::before { content: '−'; }
.av-cuenta { min-width: 1.6rem; padding: 0.1rem 0.5rem; border-radius: 99px; background: #1C1A18; color: #F2EDE4; font-size: 0.8125rem; text-align: center; font-variant-numeric: tabular-nums; }
.av-gotas, .av-sesiones, .av-riesgo__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.av-gota { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1rem; padding: 0.85rem 1rem; border: 1px solid var(--av-hair); border-radius: 14px; background: #FBF8F2; }
.av-gota__p { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.125rem; line-height: 1.3; color: var(--av-ink); overflow-wrap: anywhere; }
.av-gota__meta { grid-column: 1; margin: 0; font-size: 0.8125rem; color: var(--av-3); }
.av-gota__acc { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 0.4rem; }
.av-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.95rem; border-radius: 99px; border: 1px solid rgba(28, 26, 24, 0.22); background: transparent; color: var(--av-ink); font: 500 0.875rem/1 'DM Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color 160ms, border-color 160ms; }
.av-btn:hover { border-color: #1C1A18; }
.av-btn:focus-visible { outline: 2px solid #1C1A18; outline-offset: 2px; }
.av-btn:disabled { opacity: 0.5; cursor: progress; }
.av-btn--si { background: #1C1A18; border-color: #1C1A18; color: #F2EDE4; }
.av-btn--si:hover { background: #3A352F; }
.av-ses { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1.25rem; padding: 1rem; border: 1px solid var(--av-hair); border-radius: 14px; background: #FBF8F2; }
.av-ses__t { margin: 0; font-weight: 500; color: var(--av-ink); }
.av-ses__f { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--av-3); }
.av-ses__f::first-letter { text-transform: uppercase; }
.av-ses__n { margin: 0; display: grid; grid-template-columns: auto auto auto; align-items: baseline; justify-content: end; column-gap: 0.4rem; font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--av-2); }
.av-ses__n b { font-weight: 400; color: var(--av-mark); }
.av-ses__fl { font-size: 0.55em; color: var(--av-3); }
.av-ses__n small { grid-column: 1 / -1; justify-self: end; margin-top: 0.35rem; font: 0.75rem 'DM Sans', system-ui, sans-serif; color: var(--av-3); }
.av-ses__acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.av-check { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.4rem; font-size: 0.875rem; color: var(--av-2); cursor: pointer; }
.av-check input { width: 18px; height: 18px; accent-color: #1C1A18; }
.av-riesgo { padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(168, 58, 40, 0.35); background: rgba(168, 58, 40, 0.06); color: var(--av-ink); }
.av-riesgo p { margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.5; }
.av-riesgo__l li { font-size: 0.875rem; color: var(--av-2); font-style: italic; }
.av-pie { margin: 0; font-size: 0.875rem; }
.av-pie a { color: var(--av-mark); }
@media (max-width: 560px) {
  .av-gota { grid-template-columns: minmax(0, 1fr); }
  .av-gota__acc { grid-column: 1; grid-row: auto; margin-top: 0.4rem; }
  .av-ses { grid-template-columns: minmax(0, 1fr); }
  .av-ses__n { justify-content: start; }
  .av-ses__n small { justify-self: start; }
}

/* ── Fase 1 del movimiento (2026-10-09) ─────────────────────────────
   Contador «Gotas que hemos soltado juntos», tarjeta «Mi vaso» y la
   revelación en vivo de la sala (js/vaso/vaso.js, js/vaso/tarjeta.js). */
.vt__juntos { margin: 0.25rem 0 1.25rem; font-size: 0.9375rem; color: var(--vt-tenue); }
.vt__juntos b { font-family: var(--vt-serif); font-weight: 400; font-size: 1.6em; color: var(--vt-oro-claro); margin-right: 0.15em; font-variant-numeric: tabular-nums; }
.vt__tarjeta { display: grid; gap: 0.6rem; margin-top: 1rem; }
.vt__btn--sec { background: transparent; color: var(--vt-crema); box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.55); }
@media (hover: hover) and (pointer: fine) { .vt__btn--sec:hover { background: rgba(201, 168, 76, 0.12); } }
.vt__pie b { font-weight: 500; }
.vt__grande--n { color: var(--vt-tenue); }
.vt__juntos-sala { margin: 1.75rem 0 0; font-size: 1rem; letter-spacing: 0.02em; color: var(--vt-quieto); }
.vt--sala .vt__grande .vt__oro { transition: color 600ms var(--vt-ease); }