/* ============================================================================
   BROOK
   ----------------------------------------------------------------------------
   El asistente de la web: una sola pantalla, el chat. El lanzador abre
   derecho al hilo — la portada intermedia se eliminó el 2026-08-23.

   Tres decisiones que conviene no deshacer sin leer esto:

   · EL REDONDEO ES UNA EXCEPCIÓN DELIBERADA. Todo el sitio habla el lenguaje
     cuadrado de «La Carta» (radios 0, sombras duras desplazadas). Brook no: es
     una capa de sistema que flota SOBRE la publicación, no una pieza de ella, y
     el vocabulario universal de «esto es un chat, se puede tocar y se puede
     cerrar» son las esquinas redondas. Cuadrarlo lo haría leer como un aviso
     de la página en vez de como una ventana.

   · EL LANZADOR ES ROSADO, NO AZUL NI VERDE. El azul suprime el apetito —en una
     marca de pastelería es el peor color posible— y el verde de WhatsApp
     rompería la paleta y prometería un canal que no es. El rosado es --blush,
     que ya está en la paleta oficial.

     Pero --blush contra el papel del sitio tiene apenas 1,3:1 de contraste: un
     círculo rosado solo se disolvería en el fondo. Por eso lleva anillo vino y
     sombra — el color lo hace amable, el anillo lo hace visible. El ícono va en
     vino sobre rosado: 5,85:1, pasa AA.

   · CADA BURBUJA DECLARA SU COLOR, ninguna hereda. Es la regla dura del
     proyecto (§3.l), y este componente es el caso extremo: cambia de fondo
     dentro de sí mismo tres veces.
   ========================================================================= */

/* `display:flex` de una clase gana sobre el `display:none` que el navegador le
   da a [hidden], así que la ventana salía ABIERTA en todas las páginas tapando
   el contenido. Hay que apagarla explícitamente. Vale para el lanzador —que se
   oculta al abrir— y para la pantalla del chat. */
.brook[hidden],
.brook-fab[hidden],
.brook-pantalla[hidden] { display: none !important; }

.brook {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--wine);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(43, 43, 43, .22);
  display: flex;
  flex-direction: column;
  /* La pantalla tiene su propio fondo de borde a borde: sin esto, las esquinas
     del encabezado se salen del redondeo. */
  overflow: hidden;
}

.brook--fija {
  /* Solo lateral: el espacio vertical entre secciones lo pone el ritmo único
     de components.css. Un margen propio acá se sumaba al ritmo y dejaba a
     Brook más separado que cualquier otra sección de la página. */
  margin-inline: var(--edge);
  box-shadow: 2px 2px 0 0 rgba(110, 44, 52, .16);
}

/*
 * En escritorio la ventana empotrada se alinea con la columna de lectura.
 *
 * Esta regla vivía en contacto.css y NO se aplicaba: brook.css se encola
 * después, así que el `margin` de la línea de arriba —misma especificidad,
 * declarado más tarde— le ganaba al `margin-inline: auto`. El resultado era que
 * en Contacto el texto arrancaba centrado y el panel de Brook pegado al borde
 * izquierdo, desalineados entre sí. Vive acá porque es un asunto del propio
 * componente, no de la página.
 */
@media (min-width: 900px) {
  .brook--fija {
    max-width: var(--reading);
    margin-inline: auto;
  }
}

/* En móvil la ventana es una hoja a ancho completo menos 2×16px. Nunca tapa el
   100% de la pantalla: se sigue viendo un borde de la página detrás, para que
   quede claro que Brook es una capa y no otra web. */
.brook--flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 390px;
  margin-left: auto;
  z-index: 60;
  max-height: min(78vh, 640px);
}

/* La pantalla ocupa el panel completo y maneja su propio scroll interno.
   `min-height:0` es obligatorio: sin él, el hilo con overflow no se encoge
   dentro del flex y la ventana crece hasta romper el max-height. */
.brook-pantalla {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   PANTALLA 2 · CHAT
   ------------------------------------------------------------------------ */

.brook-cab {
  background: var(--white);
  color: var(--ink);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  border-bottom: 1px solid rgba(121, 87, 87, .18);
}

/* Misma geometría que el lanzador y que el conversor de moneda: círculo
   blush, borde vino, anillo interior. Acá el anillo se aproxima con un
   `box-shadow` inset en vez de un <svg> — son avatares de texto reutilizados
   en varios tamaños chicos y no vale la pena duplicar el marcado del ícono
   para 28-40px. */
.brook-b {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--blush);
  color: var(--wine);
  border: 1.5px solid var(--wine);
  box-shadow: inset 0 0 0 1px rgba(110, 44, 52, .38);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.brook-b--grande { width: 36px; height: 36px; font-size: 19px; }

.brook-cab-txt { flex: 1; min-width: 0; }
.brook-cab-txt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.1; color: var(--ink); }
/* En --body y no en --mono: la mono es para eyebrows, precios y stats. Una
   frase completa en mono se ensancha tanto que «Janice Del Aguila» parte en
   dos líneas por la mitad del apellido. */
.brook-cab-txt i { display: block; font-style: normal; font-family: var(--body); font-size: 10.5px; line-height: 1.3; color: var(--cacao); margin-top: 2px; }

/* «Asistente digital de Janice Del Aguila» son 38 caracteres y en un teléfono
   quedan ~196px de ancho después del avatar y el cerrar. A 11,5px
   parte en «Janice Del / Aguila», que corta el nombre por la mitad. Se achica
   solo en móvil y recupera tamaño donde sí cabe entero. */
@media (min-width: 560px) {
  .brook-cab-txt i { font-size: 11.5px; }
}

.brook-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; }

.brook-cerrar {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cacao);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.brook-cerrar { margin-right: -8px; }

.brook-cerrar:hover { background: rgba(110, 44, 52, .08); color: var(--wine); }

.brook-hilo {
  /* El hilo es el contenedor de scroll, así que también tiene que ser el
     offsetParent de las burbujas. Sin esto lo era `.brook--flotante`
     (position:fixed) y cualquier cálculo con offsetTop venía inflado por el
     alto de la cabecera. El JS ya mide por rectángulos y no depende de esto,
     pero se deja para que la próxima medición por offsetTop dé lo correcto. */
  position: relative;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: var(--papel);
}

.brook-msg {
  padding: 12px 14px;
  font-size: 15.5px;
  line-height: var(--lh-texto);
  max-width: 88%;
  border-radius: var(--r-md);
}

.brook-msg--brook {
  align-self: flex-start;
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(121, 87, 87, .18);
  border-bottom-left-radius: 4px;
  white-space: pre-line;
  border-radius: var(--r-md);
}

.brook-msg--yo {
  align-self: flex-end;
  background: var(--wine);
  color: var(--papel);
  border: 0;
  border-bottom-right-radius: 4px;
  max-width: 78%;
}

.brook-msg.is-esperando { opacity: .6; font-family: var(--mono); font-size: 12px; }
.brook-msg--error { border-left: 3px solid var(--terracotta); }

/*
 * El escalamiento es la jerarquía más alta del componente: es el momento
 * donde se gana o se pierde la confianza que costó tres pantallas construir.
 * Por eso es la ÚNICA tarjeta del hilo con borde vino —el color de las
 * personas y las acciones, no el de Brook— y por eso el mensaje que le va a
 * llegar a Janice se ve completo ANTES de salir: verlo es lo que convierte
 * «el bot se rindió» en «alguien ya sabe lo que necesito».
 */
.brook-escala {
  align-self: stretch;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--wine);
  border-radius: var(--r-md);
  padding: 16px;
}

.brook-escala-cab { display: flex; align-items: center; gap: 11px; }

/* El monograma de Janice, no el de Brook: vino sólido, no blush con borde —
   son personas distintas y el color lo dice sin una palabra más. */
.brook-escala-j {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--papel);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.brook-escala-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wine);
}

.brook-escala-titulo {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 4px;
}

.brook-escala-copy { margin: 14px 0 0; font-size: 14.5px; line-height: var(--lh-texto); color: var(--tinta-2); }

.brook-escala-mensaje {
  margin: 14px 0 0;
  background: rgba(110, 44, 52, .06);
  border-radius: var(--r-sm);
  padding: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
  white-space: pre-line;
}

.brook-escala-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--wine);
  color: var(--papel);
  border-radius: 999px;
  padding: 0 15px;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
}

.brook-escala-cta:hover { background: var(--wine-dark); color: var(--papel); text-decoration: none; }

.brook-escala-tel {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--cacao);
  text-align: center;
}

/* Los temas viven DENTRO del hilo, no como una barra aparte: así se desplazan
   con la conversación en vez de robarle alto fijo a la ventana, y al hacer la
   primera pregunta desaparecen sin dejar un hueco. Alineados a la derecha
   porque son lo que la visitante va a decir, igual que sus propias burbujas. */
.brook-temas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.brook-temas button {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid rgba(110, 44, 52, .35);
  border-radius: 999px;
  background: var(--white);
  color: var(--wine);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.brook-temas button:hover { background: rgba(110, 44, 52, .07); border-color: var(--wine); }

/* El menú raíz va en una sola columna: son tres decisiones excluyentes —qué
   vine a hacer a este sitio— y en fila se leen como etiquetas sueltas. Los
   subtemas sí van en fila, porque ahí ya se está comparando dentro de un mismo
   tema y el ojo los abarca de un vistazo. */
.brook-temas--columna {
  flex-direction: column;
  align-items: stretch;
}

.brook-temas--columna button { text-align: center; }

/* «Volver a los temas» es una salida, no un tema: va con menos peso para que no
   compita con los subtemas, que son lo que se vino a tocar. */
.brook-temas .brook-tema--volver {
  border-color: rgba(121, 87, 87, .28);
  background: transparent;
  color: var(--cacao);
  font-size: 13.5px;
}

.brook-temas .brook-tema--volver:hover {
  background: rgba(121, 87, 87, .07);
  border-color: var(--cacao);
}

.brook-barra {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: var(--white);
  border-top: 1px solid rgba(121, 87, 87, .18);
  flex: none;
}

.brook-barra input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 1px solid rgba(121, 87, 87, .35);
  border-radius: 999px;
  background: var(--papel);
  color: var(--ink);
  padding: 0 16px;
  font-family: var(--body);
  /* 16px exactos: por debajo iOS hace zoom al enfocar. */
  font-size: 16px;
  box-sizing: border-box;
}

.brook-barra button {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast);
}

.brook-barra button:hover { background: var(--wine-dark); }

/* ---------------------------------------------------------------------------
   LANZADOR
   ------------------------------------------------------------------------ */

.brook-fab {
  position: fixed;
  right: 16px;
  /* `--fab-lift` lo mide initFabs() en app.js: es el alto de la barra fija de
     compra cuando está apoyada abajo, y 0 el resto del tiempo. Antes esto era
     una clase puesta desde PHP por tipo de página, que dejaba fuera la
     colección —donde vive la barra del Bundle— y subía el lanzador aunque la
     barra estuviese escondida. */
  bottom: calc(16px + var(--fab-lift, 0px));
  z-index: 55;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: var(--blush);
  border: 1.5px solid var(--wine);
  box-shadow: var(--shadow-md);
  color: var(--wine);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.brook-fab:hover {
  background: #dfa9c1;
  box-shadow: 0 10px 26px rgba(43, 43, 43, .26);
  transform: translateY(-2px);
}

.brook-fab-anillo { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--wine); }

.brook-fab-b {
  position: relative;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1;
  color: var(--wine);
}

.brook-fab-punto {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--sage);
  border: 2px solid var(--papel);
  box-sizing: border-box;
}

/* Mientras hay barra fija de compra el lanzador además se encoge: subirlo no
   basta, porque encima de la barra sigue habiendo contenido de la página.
   Mismas medidas que su par en la esquina opuesta, el conversor. */
.bk-fabs-arriba .brook-fab { width: 44px; height: 44px; }
.bk-fabs-arriba .brook-fab .brook-fab-b { font-size: 19px; }
.bk-fabs-arriba .brook-fab .brook-fab-punto { width: 9px; height: 9px; }

/* El lanzador se despega del borde igual que el resto del sitio: --edge pasa de
   20 a 24px en pantallas anchas. Esta regla vivía en contacto.css y NUNCA se
   aplicó, porque el lanzador es justo lo único que NO se renderiza en Contacto
   —ahí Brook va empotrado—. Es la misma trampa que el proyecto ya pisó diez
   veces: CSS de un componente compartido escrito en la hoja de una página. */
@media (min-width: 561px) {
  .brook-fab { right: 24px; bottom: calc(24px + var(--fab-lift, 0px)); }
  .brook--flotante { right: 24px; bottom: 24px; }
}

/* En escritorio la barra de compra no llega a los bordes —el contenido se
   encolumna— así que el lanzador no le estorba y conserva su tamaño. */
@media (min-width: 900px) {
  .bk-fabs-arriba .brook-fab { width: 56px; height: 56px; }
  .bk-fabs-arriba .brook-fab .brook-fab-b { font-size: 25px; }
  .bk-fabs-arriba .brook-fab .brook-fab-punto { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .brook-fab { transition: none; }
  .brook-fab:hover { transform: none; }
}

/* Apartado al bajar (ver initFabs en app.js). No se usa `display:none` ni
   `visibility`: la traslación conserva el foco de teclado y la transición, y
   basta un gesto hacia arriba para tenerlo de vuelta. */
.bk-fabs-fuera .brook-fab {
  transform: translateY(calc(100% + 24px + var(--fab-lift, 0px)));
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   EL RITMO DE LA CONVERSACIÓN
   ---------------------------------------------------------------------------
   Los tres puntos mientras Brook «escribe». No es adorno: sin la pausa, la
   respuesta aparecía en el mismo instante del toque y delataba que no había
   nadie del otro lado. El indicador es lo que hace que esa pausa se lea como
   alguien escribiendo y no como un sitio colgado.
   ------------------------------------------------------------------------ */
.brook-escribiendo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px 16px;
}

.brook-escribiendo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cacao);
  opacity: .35;
  animation: brook-punteo 1.05s infinite ease-in-out;
}

.brook-escribiendo i:nth-child(2) { animation-delay: .16s; }
.brook-escribiendo i:nth-child(3) { animation-delay: .32s; }

@keyframes brook-punteo {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: .85; transform: translateY(-3px); }
}

/* Quien pidió menos animación ve los puntos quietos: el JS además le quita la
   espera, así que la respuesta le llega directa. */
@media (prefers-reduced-motion: reduce) {
  .brook-escribiendo i { animation: none; }
}

/* El botón que sigue a una respuesta —«Ver los ebooks», «Ir a Mi cuenta»—.
   Va alineado a la izquierda, del lado de Brook: es ella la que lo ofrece.
   Contorno y no sólido, para que no compita con la tarjeta de WhatsApp, que es
   la única acción sólida del hilo. */
.brook-cta {
  align-self: flex-start;
  max-width: 88%;
  margin-top: -2px;
  padding: 11px 18px;
  border: 1.5px solid var(--wine);
  border-radius: 999px;
  background: var(--white);
  color: var(--wine);
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.brook-cta:hover { background: var(--wine); color: var(--papel); }