/* Tus grabaciones (2026-10-08) — grabacion.html.
   Una sala de cine pequeña con la paleta DEMIN: arriba la grabación en
   pantalla (su miniatura, desenfocada, tiñe el fondo), abajo la biblioteca
   por secciones. El dorado es el único acento. */
:root {
  --g-noche: #14120F;
  --g-dark: #1C1A18;
  --g-surface: #24211E;
  --g-line: rgba(242, 237, 228, 0.12);
  --g-gold: #C9A84C;
  --g-gold-2: #E3C988;
  --g-cream: #F2EDE4;
  --g-muted: #A79E93;
  --g-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --g-gutter: clamp(1rem, 4vw, 2.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sala-grab {
  margin: 0; min-height: 100vh;
  background: var(--g-noche); color: var(--g-cream);
  font: 400 1rem/1.6 'DM Sans', system-ui, sans-serif;
  overflow-x: clip;
}
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 3px; }

/* ── Barra ─────────────────────────────────────────────────────────── */
.sg-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--g-gutter);
}
.sg-home { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--g-muted); text-decoration: none; font-size: .875rem; }
.sg-home:hover { color: var(--g-cream); }
.sg-marca { font-size: .6875rem; letter-spacing: .2em; color: var(--g-muted); }

/* ── Estados (cargando / entrar / vacío) ──────────────────────────── */
.sg-estado { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem var(--g-gutter); text-align: center; }
.sg-estado__h { margin: .5rem 0 0; font: 400 clamp(2.25rem, 6vw, 3.5rem)/1.05 'Playfair Display', Georgia, serif; }
.sg-estado__c { max-width: 30rem; color: var(--g-muted); font-size: 1.0625rem; }
.sg-estado__c p { margin: 0 0 1.25rem; }
.sg-estado__s { font-size: .9375rem; }
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 1.75rem; border-radius: 999px; border: 1px solid var(--g-gold);
  background: var(--g-gold); color: var(--g-dark); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--g-ease), opacity .2s var(--g-ease);
}
.sg-btn:hover { transform: translateY(-1px); }
.sg-btn:active { transform: scale(.98); }
.sg-btn:disabled { opacity: .6; cursor: progress; }
.sg-btn--sec { background: transparent; color: var(--g-cream); border-color: var(--g-line); }

.sg-halo { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(201, 168, 76, .55); box-shadow: 0 0 0 12px rgba(201, 168, 76, .05), 0 0 0 26px rgba(201, 168, 76, .025); }
@media (prefers-reduced-motion: no-preference) { .sg-halo { animation: sgRespira 6s ease-in-out infinite; } }
@keyframes sgRespira { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }

/* ── En pantalla ──────────────────────────────────────────────────── */
.sg-escena { position: relative; isolation: isolate; margin-top: -76px; padding: calc(76px + clamp(.5rem, 2vw, 1.5rem)) var(--g-gutter) clamp(2.5rem, 5vw, 4rem); overflow: hidden; scroll-margin-top: -76px; }
.sg-escena__fondo {
  position: absolute; inset: -10%; z-index: -2;
  background: var(--g-dark) center / cover no-repeat;
  filter: blur(48px) saturate(.8) brightness(.45); transform: scale(1.1);
  transition: background-image .6s var(--g-ease);
}
.sg-escena::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201, 168, 76, .10), transparent 70%),
    linear-gradient(to bottom, rgba(20, 18, 15, .35), var(--g-noche) 96%);
}
.sg-escena__in { width: min(1180px, 100%); margin: 0 auto; }

.sg-pantalla {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #0B0A09; border-radius: clamp(10px, 1.6vw, 18px); overflow: hidden;
  box-shadow: 0 0 0 1px var(--g-line), 0 40px 80px -30px rgba(0, 0, 0, .8);
  -webkit-user-select: none; user-select: none;
}
.sg-pantalla iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sg-portada { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 0; border: 0; background: none; cursor: pointer; }
.sg-portada__img { position: absolute; inset: 0; z-index: 0; }
.sg-portada__img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(11, 10, 9, .15), rgba(11, 10, 9, .65)); }
.sg-portada__img .sg-img, .sg-portada__img .sg-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--g-ease); }
.sg-portada__img .sg-img { z-index: 1; }
.sg-portada__img .sg-arte__ojo { width: 18%; }
.sg-portada:hover .sg-portada__img .sg-img { transform: scale(1.03); }
.sg-play {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: clamp(68px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%;
  background: var(--g-gold); color: var(--g-dark); padding-left: 4px;
  box-shadow: 0 0 0 10px rgba(201, 168, 76, .18), 0 0 0 22px rgba(201, 168, 76, .07);
  transition: transform .3s var(--g-ease);
}
@media (prefers-reduced-motion: no-preference) { .sg-play { animation: sgLate 6s ease-in-out infinite; } }
@keyframes sgLate { 0%, 100% { box-shadow: 0 0 0 10px rgba(201, 168, 76, .18), 0 0 0 22px rgba(201, 168, 76, .07); } 50% { box-shadow: 0 0 0 14px rgba(201, 168, 76, .12), 0 0 0 32px rgba(201, 168, 76, .04); } }
.sg-portada:hover .sg-play { transform: scale(1.06); }
.sg-portada:active .sg-play { transform: scale(.97); }
.sg-portada__txt { position: relative; z-index: 1; padding: .375rem 1rem; border-radius: 999px; background: rgba(11, 10, 9, .55); font-size: .9375rem; font-weight: 500; letter-spacing: .01em; }

.sg-espera { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.25rem; padding: 1.5rem; text-align: center; color: var(--g-muted); }
.sg-espera p { margin: 0; max-width: 28rem; }

.sg-marca-agua {
  position: absolute; right: 4%; bottom: 16%; z-index: 4; pointer-events: none;
  font-size: clamp(.625rem, 1.2vw, .8125rem); letter-spacing: .04em;
  color: rgba(242, 237, 228, .2); transform: rotate(-8deg); white-space: nowrap;
}

.sg-ficha { display: grid; gap: 1.5rem; margin-top: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 860px) { .sg-ficha { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; } }
.sg-chip { display: inline-block; margin: 0 0 .75rem; padding: .25rem .75rem; border: 1px solid rgba(201, 168, 76, .45); border-radius: 999px; color: var(--g-gold-2); font-size: .8125rem; }
.sg-chip:empty { display: none; }
.sg-ficha__t { margin: 0; font: 400 clamp(2rem, 5vw, 3.5rem)/1.04 'Playfair Display', Georgia, serif; letter-spacing: -0.015em; text-wrap: balance; }
.sg-ficha__s { margin: .625rem 0 0; color: var(--g-muted); font: italic 400 clamp(1.0625rem, 2vw, 1.25rem)/1.4 'Playfair Display', Georgia, serif; max-width: 40rem; }
.sg-ficha__s:empty { display: none; }
.sg-datos { display: grid; grid-template-columns: repeat(3, auto); gap: .25rem clamp(1.25rem, 3vw, 2.5rem); margin: 0; }
.sg-datos div { display: grid; gap: .125rem; min-width: 0; }
.sg-datos dt { font-size: .75rem; letter-spacing: .08em; color: var(--g-muted); }
.sg-datos dd { margin: 0; font-weight: 500; white-space: nowrap; }
@media (max-width: 560px) {
  .sg-datos { grid-template-columns: 1fr 1fr; }
  .sg-datos div:first-child { grid-column: 1 / -1; }
  .sg-datos dd { white-space: normal; }
}

/* ── Biblioteca ───────────────────────────────────────────────────── */
.sg-biblio { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--g-gutter) 5rem; box-sizing: content-box; max-width: calc(100% - 2 * var(--g-gutter)); }
.sg-resumen { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 clamp(2rem, 4vw, 3rem); padding-bottom: 1.25rem; border-bottom: 1px solid var(--g-line); color: var(--g-muted); font-size: .9375rem; }
.sg-resumen strong { color: var(--g-cream); font-weight: 500; }
.sg-resumen span::before { content: '·'; margin-right: 1.25rem; color: var(--g-gold); }

.sg-sec + .sg-sec { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sg-sec__h { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .25rem .75rem; margin-bottom: 1.25rem; }
.sg-sec__h h2 { margin: 0; font: 400 clamp(1.5rem, 3vw, 2rem)/1.15 'Playfair Display', Georgia, serif; }
.sg-sec__n { justify-self: start; min-width: 1.75rem; padding: 0 .5rem; border-radius: 999px; background: rgba(201, 168, 76, .14); color: var(--g-gold-2); font-size: .8125rem; line-height: 1.75rem; text-align: center; }
.sg-sec__h p { grid-column: 1 / -1; margin: 0; color: var(--g-muted); font-size: .9375rem; }

.sg-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 620px) {
  /* En el teléfono, un carril que se desliza: se ve que hay más. */
  .sg-rejilla { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g-gutter)); padding: 0 var(--g-gutter) .5rem; scroll-padding: 0 var(--g-gutter); scrollbar-width: none; }
  .sg-rejilla::-webkit-scrollbar { display: none; }
  .sg-rejilla > li { scroll-snap-align: start; }
  .sg-rejilla:has(> li:only-child) { grid-auto-columns: 100%; }
}

.sg-card { display: grid; gap: .375rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.sg-card__img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--g-surface); box-shadow: 0 0 0 1px var(--g-line); margin-bottom: .5rem; transition: box-shadow .3s var(--g-ease); }
.sg-card__img .sg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .6s var(--g-ease); }
.sg-card:hover .sg-card__img .sg-img { transform: scale(1.04); }
.sg-card.is-actual .sg-card__img { box-shadow: 0 0 0 2px var(--g-gold); }
.sg-card__play { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding-left: 3px; border-radius: 50%; background: rgba(11, 10, 9, .6); color: var(--g-cream); opacity: 0; transform: scale(.9); transition: opacity .25s var(--g-ease), transform .25s var(--g-ease); }
.sg-card:hover .sg-card__play, .sg-card:focus-visible .sg-card__play { opacity: 1; transform: scale(1); }
@media (hover: none) { .sg-card__play { opacity: 1; transform: none; } }

.sg-arte { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #2E2A24, #1A1815 70%); color: var(--g-gold); }
.sg-arte::before { content: ''; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(201, 168, 76, .2); box-shadow: 0 0 0 18px rgba(201, 168, 76, .04); }
.sg-arte__glifo { position: relative; width: 30%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sg-arte__glifo .g-fill { fill: currentColor; stroke: none; }
.sg-arte__ojo { position: relative; width: 28%; height: auto; opacity: .85; }

.sg-tag { position: absolute; left: .625rem; top: .625rem; z-index: 2; padding: .125rem .5rem; border-radius: 6px; background: rgba(11, 10, 9, .7); color: var(--g-cream); font-size: .75rem; font-weight: 500; }
.sg-tag--nueva { background: var(--g-gold); color: var(--g-dark); }
.sg-tag--ahora { background: var(--g-cream); color: var(--g-dark); }
.sg-dur { position: absolute; right: .625rem; bottom: .75rem; z-index: 2; padding: .0625rem .4375rem; border-radius: 6px; background: rgba(11, 10, 9, .75); font-size: .75rem; font-variant-numeric: tabular-nums; }
.sg-barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px; background: rgba(242, 237, 228, .18); }
.sg-barra span { display: block; height: 100%; background: var(--g-gold); }

.sg-card__chip { color: var(--g-gold-2); font-size: .8125rem; }
.sg-card__t { font: 400 1.25rem/1.25 'Playfair Display', Georgia, serif; transition: color .2s var(--g-ease); }
.sg-card:hover .sg-card__t { color: var(--g-gold-2); }
.sg-card__f { color: var(--g-muted); font-size: .875rem; }

.sg-cuidado { display: flex; gap: .875rem; align-items: flex-start; margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.25rem 1.5rem; border: 1px solid var(--g-line); border-radius: 14px; color: var(--g-muted); font-size: .9375rem; max-width: 46rem; }
.sg-cuidado svg { flex: none; margin-top: .125rem; color: var(--g-gold); }
.sg-cuidado p { margin: 0; }
.sg-cuidado strong { color: var(--g-cream); font-weight: 500; }

/* ── Por partes: Activa · Respira · Profundiza (2026-10-17) ──────── */
.sg-partes { margin-top: clamp(2rem, 4vw, 3rem); }
.sg-partes__t { margin: 0; font: 400 clamp(1.75rem, 3.6vw, 2.5rem)/1.1 'Playfair Display', Georgia, serif; }
.sg-partes__s { margin: .5rem 0 0; color: var(--g-cream); font-size: 1.0625rem; }
.sg-partes__l { list-style: none; display: grid; gap: .75rem; margin: 1.25rem 0 0; padding: 0; }
@media (min-width: 760px) { .sg-partes__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sg-parte {
  display: grid; gap: .25rem; width: 100%; min-height: 100%; padding: 1.25rem; text-align: left;
  border: 1px solid var(--g-line); border-radius: 1rem; background: var(--g-surface); color: var(--g-cream);
  font: inherit; cursor: pointer; transition: transform 200ms var(--g-ease), border-color 200ms var(--g-ease);
}
.sg-parte:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--g-gold); }
.sg-parte:active:not(:disabled) { transform: scale(.98); }
.sg-parte.is-actual { border-color: var(--g-gold); background: #2C2822; }
.sg-parte:disabled { cursor: default; opacity: .72; }
.sg-parte__n { color: var(--g-gold-2); font-size: 1rem; font-weight: 500; letter-spacing: .08em; }
.sg-parte__t { font: 700 clamp(1.5rem, 3vw, 2rem)/1.1 'DM Sans', system-ui, sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.sg-parte__s { color: var(--g-cream); font-size: 1rem; line-height: 1.4; }
.sg-parte__d { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; color: var(--g-gold-2); font-size: 1rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sg-parte { transition: opacity 120ms; } .sg-parte:hover:not(:disabled), .sg-parte:active:not(:disabled) { transform: none; } }

/* WhatsApp antes de entrar (js/grabacion.js → pedirWhatsapp, 2026-10-22). */
.sg-wa { display: grid; gap: .75rem; width: min(100%, 26rem); text-align: left; }
.sg-wa .sg-estado__lead { margin: 0; color: var(--g-cream, #F2EDE4); font-size: 1.5rem; font-weight: 700; text-align: center; }
.sg-wa__s { margin: 0 0 .5rem !important; color: var(--g-cream, #F2EDE4); font-size: 1.125rem; text-align: center; }
.sg-wa__in { font: 500 1.25rem 'DM Sans', system-ui, sans-serif; padding: 0 1rem; min-height: 58px; border-radius: 14px;
  border: 2px solid rgba(242, 237, 228, .5); background: #141311; color: #F2EDE4; }
.sg-wa__in:focus { outline: none; border-color: #F2EDE4; }
.sg-wa .wa__pais { font-size: 1.125rem; }
.sg-wa .wa__prev { color: #F2EDE4; font-size: 1.0625rem; }
.sg-wa__err { margin: 0 !important; color: #F2A08F; font-weight: 700; font-size: 1.0625rem; }
.sg-wa__err:empty { display: none; }
.sg-wa .sg-btn { justify-self: stretch; min-height: 58px; font-size: 1.125rem; font-weight: 700; }

/* Testimonios en la entrada de Vacía tu vaso (2026-10-27): letra grande, una voz por renglón. */
.sg-voces { width: 100%; max-width: 30rem; margin: 1.5rem auto 0; padding-top: 1.75rem; border-top: 1px solid var(--g-line); text-align: left; }
.sg-voces__t { margin: 0 0 1rem; font: 700 1.125rem/1.3 'DM Sans', system-ui, sans-serif; color: var(--g-cream); text-align: center; }
.sg-voces__l { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sg-voces__q { margin: 0; padding: .9rem 1.1rem; border-left: 2px solid var(--g-gold); border-radius: 0 12px 12px 0; background: var(--g-surface); color: var(--g-cream); font: 600 1.1875rem/1.45 'DM Sans', system-ui, sans-serif; overflow-wrap: anywhere; }

/* El regalo anunciado desde la entrada (Diego, 2026-10-27): ciclo abierto hasta el final. */
.sg-regalo { margin: .25rem 0 0; color: var(--g-gold-2); font-size: 1.1875rem; font-weight: 700; line-height: 1.35; }

/* Entrada guiada (2026-10-29): el hilo de pasos arriba y la instrucción del paso, grande. */
.sg-estado .hilo { margin: .5rem auto 1.5rem; }
.sg-estado__c:has(.hilo) { max-width: 40rem; width: 100%; }
.sg-estado__c .hilo__cuenta { margin: 0; }
.sg-paso { color: var(--g-cream); font-size: 1.375rem !important; font-weight: 700; line-height: 1.3; }
.sg-estado__c:has(.hilo) .sg-estado__s { color: #D9D2C5; font-size: 1.0625rem; }
.sg-estado__s a { color: var(--g-cream); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }