/* ============================================================
   workshop.css: la página del workshop en vivo (/workshop), armada
   como una página de evento de Luma. En escritorio, dos columnas: a la
   izquierda la imagen y el anfitrión, pegados al bajar; a la derecha el
   título, la fecha, el lugar, el registro y "Acerca del evento". En el
   celular, una sola columna.
   Es oscura siempre, con fondo plano: sin puntitos, sin degradados
   animados y sin nada que se mueva con el scroll, a pedido de Álvaro.
   Se carga DESPUÉS de hub.css y producto.css y toma de ahí los botones
   (.hub-boton), el acordeón (.faq-item) y la ventana de compra
   (.prod-modal).
   ============================================================ */

/* ── TEMA OSCURO FORZADO ─────────────────────────────────────── */
/* Las variables globales se redefinen en el body con los valores del modo
   oscuro de global.css, así la cabecera y el pie que inyectan nav.js y
   footer.js, el WhatsApp flotante, el aviso de cookies y la ventana de
   compra se ven oscuros aunque el visitante tenga el sitio en claro. Van en
   el body y no en :root porque el atributo data-theme vive en <html>: lo que
   se declara en el body le gana siempre a lo que hereda de ahí. El botón de
   tema del menú sigue guardando la preferencia para el resto del sitio, pero
   en esta página no cambia nada.
   Ojo: las variables que global.css o hub.css arman a partir de otras en
   :root (--hub-sombra, --hub-navy) quedan calculadas con los valores claros,
   así que esta hoja no las usa. */
html:has(> body.ws-luma) {
  color-scheme: dark;
  background-color: #141517;
}

.ws-luma {
  color-scheme: dark;

  --bg:      #141517;
  --surface: #1f2024;
  --white:   #25262b;
  --border:  #373a40;
  --ink:     #e9eaed;
  --ink-2:   #b6bac2;
  --ink-3:   #8d93a0;
  --accent:  #7fa3cc;
  --green:   #7fa3cc;
  --accent-2: #ee6c4d;
  --muted:   #2c2e33;
  --destructive: #f03e3e;

  --bg-dark:      #141517;
  --surface-dark: #25262b;
  --border-dark:  #373a40;

  --gradient-accent: linear-gradient(135deg, #a9c4e3 0%, #7fa3cc 55%, #5d84b0 100%);
  --gradient-green:  linear-gradient(135deg, #7fa3cc 0%, #141517 100%);
  --on-dark-muted:    rgba(255, 255, 255, 0.65);
  --btn-cta-bg:       #ee6c4d;
  --btn-cta-bg-hover: #d95b3e;
  --btn-cta-ink:      #ffffff;
  --nav-cta-bg:       #ee6c4d;
  --nav-cta-bg-hover: #d95b3e;
  --nav-cta-ink:      #ffffff;

  --card:        #25262b;
  --card-border: #373a40;

  /* Propias de esta página */
  --ws-superficie: #1f2024;   /* tarjetas: un poco más claras que el fondo */
  --ws-borde-fuerte: #4a4e56; /* borde del cupo, como la entrada elegida en Luma */
  --ws-ancho: 1080px;
  --ws-barra-alto: 60px;
}

/* Lo que se oculta con el atributo hidden se oculta de verdad, aunque su
   clase le ponga display: flex o grid */
.ws-luma [hidden] { display: none !important; }

/* /workshop/gracias usa la portada del hub: también va sin puntitos */
.ws-luma .hub-portada::before { display: none; }

/* Botones como los de Luma: esquinas redondeadas y no de píldora, sin la
   flecha y sin saltito al pasar el mouse */
.ws-luma .hub-boton {
  min-height: 46px;
  border-radius: 10px;
  font-weight: 600;
}

.ws-luma .hub-boton::after { display: none; }

.ws-luma .hub-boton:hover { transform: none; }

/* ── ESTRUCTURA ──────────────────────────────────────────────── */
/* Celular y tablet: una columna. Las columnas de escritorio y sus envoltorios
   se deshacen (display: contents) y las piezas se ordenan con order: imagen,
   título con fecha y lugar, registro, presentado por, acerca del evento,
   cierre y, al final, organizado por, quiénes van y los enlaces. */
.ws-evento {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: min(100% - 2rem, 640px);
  margin-inline: auto;
  padding-block: 1.25rem 3rem;
}

.ws-principal,
.ws-lado,
.ws-lado__pegado,
.ws-lado__fijo { display: contents; }

.ws-media       { order: 1; }
.ws-cabeza      { order: 2; }
.ws-registro    { order: 3; }
.ws-presenta    { order: 4; }
.ws-acerca      { order: 5; }
.ws-cierre      { order: 6; }
.ws-organiza    { order: 7; }
.ws-asistentes  { order: 8; }
.ws-lado__pie   { order: 9; }

/* Escritorio: la columna izquierda ocupa todo el alto de la derecha. Arriba,
   .ws-lado__pegado se estira y adentro .ws-lado__fijo va pegado bajo la nav
   hasta que se acaba ese espacio; abajo, al final de la página, quedan los
   enlaces y la categoría. Lo pegado mide unos 620px con quiénes van a la
   vista, así cabe bajo la nav y la barra de reserva en un notebook de 800px
   de alto. */
@media (min-width: 900px) {
  .ws-evento {
    display: grid;
    grid-template-columns: clamp(270px, 28vw, 330px) minmax(0, 1fr);
    column-gap: clamp(2rem, 4.5vw, 3.5rem);
    align-items: start;
    width: min(100% - 4rem, var(--ws-ancho));
    padding-block: 2rem 4.5rem;
  }

  .ws-principal,
  .ws-lado {
    display: flex;
    flex-direction: column;
    grid-row: 1;
    min-width: 0;
  }

  .ws-principal {
    grid-column: 2;
    gap: 1.75rem;
  }

  .ws-lado {
    grid-column: 1;
    align-self: stretch;
    gap: 2rem;
  }

  .ws-lado__pegado {
    display: block;
    flex-grow: 1;
  }

  .ws-lado__fijo {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
  }

  /* Con la barra de reserva a la vista, lo pegado baja lo que mide la barra */
  .ws-con-barra .ws-lado__fijo { top: calc(var(--nav-h) + var(--ws-barra-alto) + 1.5rem); }
}

/* ── COLUMNA IZQUIERDA ───────────────────────────────────────── */
.ws-media__img {
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  border-radius: 16px;
}

/* Rótulo chico con la línea debajo: "Acerca del evento", "Organizado por" */
.ws-rotulo {
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-2);
}

/* Presentado por */
.ws-presenta__cabeza {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ws-presenta__foto {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.ws-presenta__rotulo {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-3);
}

.ws-presenta__nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.15s;
}

.ws-presenta__nombre svg {
  width: 15px;
  height: 15px;
  color: var(--ink-3);
}

.ws-presenta__nombre:hover { color: #ffffff; }

.ws-presenta__lineas {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.8rem;
}

.ws-presenta__lineas li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.ws-redes {
  display: flex;
  gap: 0.35rem;
  margin: 0.6rem 0 0 -0.35rem;
}

/* 28px de área para el dedo, con el ícono de 17px al centro */
.ws-redes a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--ink-3);
  transition: color 0.15s;
}

.ws-redes a:hover { color: var(--ink); }

.ws-redes svg {
  width: 17px;
  height: 17px;
}

/* Organizado por, quiénes van, enlaces y categoría */
.ws-organiza__fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.ws-organiza__fila img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* Quiénes van: una fila con los avatares genéricos montados uno sobre otro,
   como en Luma, y "N van" al lado. El anillo es del color del fondo, para
   que se separen. Va más pegada al organizador que el resto de los bloques. */
.ws-asistentes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: -0.5rem;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
}

.ws-avatares {
  display: flex;
  padding-left: 7px;
}

.ws-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -7px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  color: rgb(255 255 255 / 0.88);
}

.ws-avatar svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.ws-avatar--a { background: #3d5a80; }
.ws-avatar--b { background: #ee6c4d; }
.ws-avatar--c { background: #5d84b0; }
.ws-avatar--d { background: #4b5563; }
.ws-avatar--e { background: #b0563f; }

.ws-lado__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.ws-enlaces {
  display: grid;
  gap: 0.35rem;
}

.ws-enlaces a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-3);
  transition: color 0.15s;
}

.ws-enlaces a:hover { color: var(--ink); }

.ws-categoria {
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
}

.ws-categoria::before {
  content: '#';
  margin-right: 0.3rem;
  color: var(--ink-3);
}

/* ── COLUMNA DERECHA ─────────────────────────────────────────── */
/* Título en mayúsculas, como Luma. En el HTML va en minúsculas: así se lee
   bien en los lectores de pantalla y en el resultado de Google. */
.ws-h1 {
  font-size: clamp(28px, 4.2vw + 14px, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

/* Medido para que quepa en dos líneas en la columna de 1280px */
@media (min-width: 900px) {
  .ws-h1 { font-size: clamp(32px, 3.4vw, 44px); }
}

/* Fecha y lugar: cajita a la izquierda, dos líneas a la derecha */
.ws-datos {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.ws-dato {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
}

.ws-cal,
.ws-icono {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

/* Cajita de calendario: el mes arriba en una franja y el día abajo. */
.ws-cal {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  text-align: center;
}

.ws-cal__mes {
  padding-block: 2px 1px;
  background: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ws-cal__dia {
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

.ws-icono {
  display: grid;
  place-items: center;
  color: var(--ink-2);
}

.ws-icono svg {
  width: 20px;
  height: 20px;
}

.ws-dato__titulo,
.ws-dato__sub {
  display: block;
  text-wrap: pretty;
}

.ws-dato__titulo {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.ws-dato__sub {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ── TARJETA DE REGISTRO (y la del cierre, que es igual) ─────── */
.ws-tarjeta {
  overflow: hidden;
  background: var(--ws-superficie);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.ws-tarjeta__cabeza {
  padding: 0.55rem 1rem;
  background: rgb(255 255 255 / 0.03);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
}

.ws-tarjeta__cuerpo { padding: 1rem; }

.ws-tarjeta__texto {
  margin-bottom: 0.85rem;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* El cupo, como la entrada elegida en Luma: nombre y estado a la izquierda,
   precio a la derecha */
.ws-cupo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--ws-borde-fuerte);
  border-radius: 10px;
}

.ws-cupo__nombre {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ws-cupo__nombre strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.ws-cupo__nombre span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}

.ws-cupo__precio {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--ink);
}

.ws-accion { margin-top: 0.85rem; }

.ws-accion .hub-boton { width: 100%; }

.ws-nota,
.ws-letra {
  text-align: center;
  line-height: 1.5;
  text-wrap: balance;
}

.ws-nota {
  margin-top: 0.7rem;
  font-size: 14px;
  color: var(--ink-2);
}

.ws-letra {
  margin-top: 0.1rem;
  font-size: 13px;
  color: var(--ink-3);
}

/* Cierre */
.ws-cierre__titulo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.ws-cierre__dato {
  margin-top: 0.35rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.ws-cierre__contacto {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ── ACERCA DEL EVENTO ───────────────────────────────────────── */
.ws-texto p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

.ws-texto p + p { margin-top: 1rem; }

/* Cada bloque separado por una línea fina, como el texto largo de Luma */
.ws-bloque {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.ws-sub {
  margin-bottom: 1rem;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}

.ws-sub2 {
  margin: 1.5rem 0 0.75rem;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.ws-sub + .ws-sub2 { margin-top: 0; }

/* Listas con ícono chico, sin tarjetas */
.ws-lista {
  display: grid;
  gap: 0.85rem;
}

.ws-lista li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
}

.ws-lista svg {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--accent);
}

.ws-lista--no svg { color: var(--ink-3); }

.ws-lista p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.ws-lista strong {
  font-weight: 600;
  color: var(--ink);
}

/* En lo que incluye, el nombre va en su propia línea */
.ws-lista--incluye strong {
  display: block;
  margin-bottom: 0.1rem;
}

/* Enlaces dentro del texto */
.ws-texto a,
.ws-lista a,
.ws-precio-caja a,
.ws-presenta__lineas a,
.ws-cierre__contacto a,
.ws-letra a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inversión: el único bloque con borde */
.ws-precio-caja {
  padding: clamp(1.1rem, 3vw, 1.4rem);
  background: var(--ws-superficie);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.ws-precio-caja > p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.ws-precio-caja > .ws-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.85rem;
  line-height: 1.1;
  color: var(--ink);
}

.ws-precio strong {
  font-size: clamp(30px, 1.2vw + 24px, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ws-precio span {
  font-size: 14px;
  color: var(--ink-3);
}

.ws-precio-caja > .ws-garantia {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--ink);
}

.ws-garantia svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--accent);
}

/* Preguntas: el acordeón de hub.css, un poco más compacto */
.ws-acerca .faq-item__btn {
  padding-block: 1rem;
  font-size: 16px;
}

.ws-acerca .faq-item__body p { color: var(--ink-2); }

/* ── VENTANA DE COMPRA: cupos agotados mientras elegía ──────── */
.ws-sin-cupos {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.ws-sin-cupos a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Sin cupos ya no hay nada que pagar: se va el botón y "Cerrar" toma el
   ancho. Lo mismo en la lista de espera cuando ya quedó anotado. */
.prod-modal__botones .hub-boton[hidden] + .hub-boton { grid-column: 1 / -1; }

/* "¿Estás fuera de Chile?", bajo los botones de pagar y cancelar */
.prod-modal__botones + .ws-letra { margin-top: 0.85rem; }

/* ── VENTANA DE LA LISTA DE ESPERA ───────────────────────────── */
/* Usa las piezas de la ventana de compra (.prod-modal); acá va lo propio */
.ws-espera__nombre { margin-top: 0.6rem; }

/* Campo trampa: fuera de la pantalla y no con hidden, que los bots detectan.
   Hacia la izquierda no genera scroll dentro de la ventana. */
.ws-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile: se reserva el alto del widget para que la ventana no salte
   cuando aparece */
.ws-ts {
  min-height: 65px;
  margin-top: 0.9rem;
}

.ws-espera__ok {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.ws-espera__wa {
  margin-top: 0.5rem;
  font-size: 14px;
}

.ws-espera__wa a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── BARRA DE RESERVA ────────────────────────────────────────── */
/* La muestra y la esconde workshop.js con el atributo hidden. */
.ws-barra {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 95; /* bajo la nav (100) y su menú (99), sobre el WhatsApp (90) */
  background: var(--ws-superficie);
}

.ws-barra__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% - 2rem, var(--ws-ancho));
  margin-inline: auto;
}

.ws-barra__titulo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.ws-barra__titulo strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ws-barra__titulo span {
  font-size: 13px;
  color: var(--ink-3);
}

.ws-barra .hub-boton {
  flex-shrink: 0;
  min-height: 42px;
  padding: 0.55rem 1.1rem;
  font-size: 15px;
}

/* Escritorio: barra fina bajo la nav */
@media (min-width: 720px) {
  .ws-barra {
    top: var(--nav-h);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 24px -18px rgb(0 0 0 / 0.6);
  }

  .ws-barra__caja {
    min-height: var(--ws-barra-alto);
    padding-block: 0.5rem;
  }

  @media (min-width: 900px) {
    .ws-barra__caja { width: min(100% - 4rem, var(--ws-ancho)); }
  }

  /* Lo que se enfoca con el teclado no queda debajo de la nav ni de la barra */
  html { scroll-padding-top: calc(var(--nav-h) + var(--ws-barra-alto) + 1rem); }
}

/* Celular: barra fija abajo, solo con el botón. El body guarda su alto al
   final para que la barra nunca tape el pie de la página, y el WhatsApp
   flotante sube mientras la barra está a la vista. */
@media not all and (min-width: 720px) {
  .ws-barra {
    bottom: 0;
    padding: 0.65rem 0 max(0.65rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 24px -18px rgb(0 0 0 / 0.6);
  }

  .ws-barra__titulo { display: none; }

  .ws-barra .hub-boton {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  .ws-luma:has(.ws-barra) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .ws-luma.ws-con-barra .wa-float { bottom: calc(88px + env(safe-area-inset-bottom)); }

  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}