/* Landing pública de Conexión C.O.R.E.
   =====================================================================
   IDENTIDAD: el libro de registro.

   C.O.R.E. no es un mercado, es un consorcio que lleva un registro y
   emite folios. De ahí sale todo lo visual: papel cálido, tinta negra
   cálida y un solo acento en rojo de sello. Nada de pizarra con neón,
   nada de crema con serif: eso es el aspecto por defecto de cualquier
   plantilla, y este proyecto ya pagó el precio de parecerse a todas.

   TIPOGRAFÍA A COSTE CERO: dos voces, ninguna descargada. Sans del
   sistema para la prosa; monoespaciada para los DATOS — folios,
   índices, cupos, sectores. La mono no es un adorno retro: es la voz
   real de un registro, y el producto ya emite folios como
   CORE-28393F89DA. Cero kilobytes de fuente, que con el público de este
   consorcio navegando con datos móviles es una virtud, no una renuncia.

   ALCANCE: este archivo redefine los tokens de /tema.css, pero SOLO
   aquí — el portal (/app/) no carga esta hoja y conserva su aspecto
   hasta que se rediseñe aparte.
   ===================================================================== */

/* La paleta, las voces, la forma y el movimiento viven en /tema.css,
   compartidos con el portal. Aquí solo va lo propio de la landing. */

:root {
  /* Márgenes laterales que respetan la muesca. El viewport va en
     `viewport-fit=cover`, así que en un iPhone apaisado el texto se metería
     bajo el notch sin esto. `env()` vale 0 donde no aplica, así que el
     `max()` deja 1.5rem en todo lo demás. */
  --margen-izq: max(1.5rem, env(safe-area-inset-left));
  --margen-der: max(1.5rem, env(safe-area-inset-right));
}

/* Salto al contenido: fuera de la vista hasta que se enfoca con el teclado. */
.saltar {
  /* `fixed`, no `absolute`: con `absolute` el enlace vive en el documento y se
     va con el desplazamiento, así que al tabular a media página aparecía
     fuera de la pantalla. Medido: quedaba a -1240 px del viewport. */
  position: fixed;
  left: 0.5rem;
  top: -4rem;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--acento);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--normal) var(--curva);
}
.saltar:focus { transform: translateY(4.6rem); }

/* --------------------------------- Voces --------------------------------- */

/* El rótulo: la voz del registro. Va en versalitas monoespaciadas porque
   etiqueta, no narra. */
.rotulo {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0 0 1rem;
}

/* Un dato literal del sistema (un folio, un código). Se marca como tal. */
.dato {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--acento);
  white-space: nowrap;
}

.marca { color: var(--acento); }

/* --------------------------------- Barra --------------------------------- */

.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem var(--margen-der) 1rem var(--margen-izq);
  border-bottom: var(--regla);
  background: var(--fondo);
  position: sticky;
  top: 0;
  z-index: 5;
}

.barra .marca { font-size: 1.05rem; text-decoration: none; }

.barra nav { display: flex; align-items: center; gap: 1.5rem; }

.barra nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  text-decoration: none;
  transition: color var(--rapido) var(--curva);
}
.barra nav a:hover { color: var(--texto); }

.boton-barra {
  padding: 0.5rem 0.9rem;
  border: var(--regla);
  color: var(--texto) !important;
  transition: background-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva);
}
.boton-barra:hover { background: var(--texto); color: var(--fondo) !important; }

@media (max-width: 640px) {
  .barra nav a:not(.boton-barra) { display: none; }
}

/* -------------------------------- Portada -------------------------------- */

main {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--margen-izq);
  padding-right: var(--margen-der);
}

/* `relative` no es decorativo: es lo que ancla la capa de la presentación a
   ESTA sección. Sin él, un `position: absolute; inset: 0` se cuelga del
   viewport y la intro taparía la página entera, que es justo lo que se
   descartó por retrasar el mensaje. */
.portada { position: relative; padding: 4.5rem 0 4rem; }

/* `balance` reparte las lineas del titular para que no quede una palabra
   suelta al final. Solo en titulares: en parrafos largos el navegador lo
   ignora, y ahi tampoco aporta. */
.portada h1 {
  text-wrap: balance;
  font-size: clamp(2.6rem, 8.5vw, 5.4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0 0 1.5rem;
  max-width: 14ch;
}

/* El acento aparece exactamente una vez en la portada: en la tesis. */
.una-de-dos { color: var(--acento); }

.entrada {
  max-width: 54ch;
  color: var(--tinta-media);
  font-size: 1.08rem;
  margin: 0 0 2.5rem;
}

.pie-portada {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.25rem 0 0;
}

/* ------------------------------- LA ESCISIÓN -----------------------------
   La firma de la página. El consorcio funciona porque cada miembro ocupa
   exactamente uno de dos polos, así que la portada no lo explica: lo
   enseña. Dos paños que comparten un canto duro, uno en papel y otro en
   tinta. La misma pieza, invertida.

   Se construye con dos <a> reales: sin JavaScript sigue siendo un par de
   enlaces al portal, legibles y navegables con teclado.
------------------------------------------------------------------------- */

.escision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--regla);
}

.pano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1.75rem 1.75rem;
  text-decoration: none;
  overflow: hidden;
}

.pano-oferta {
  background: var(--fondo);
  color: var(--texto);
  border-right: var(--regla);
}

/* El polo contrario, literalmente invertido. */
.pano-demanda {
  background: var(--texto);
  color: var(--fondo);
}

/* El código real que el sistema guarda en `perfiles.rol`, no un número de
   orden. Oferta y demanda no son una secuencia sino una alternativa: numerarlas
   habría sido decorar fingiendo estructura. La numeración se queda donde sí
   significa algo, en los pasos del método. */
.pano-indice {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  /* 0.55 se veía bien sobre papel y daba 3.83:1 sobre tinta, por debajo del
     mínimo. Medido en el navegador, no estimado a ojo. */
  opacity: 0.75;
}

.pano-verbo {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.pano-glosa {
  font-size: 0.94rem;
  max-width: 30ch;
  opacity: 0.75;
  margin-bottom: 0.75rem;
}

.pano-accion {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: auto;
}

/* La barra del canto inferior crece al señalar el paño. Es transform puro
   (compone en GPU) y dice de qué lado se está. */
.pano::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--normal) var(--curva);
}

/* El puntero fino no existe en táctil: allí el :hover se dispara al tocar
   y deja el estado pegado. */
@media (hover: hover) and (pointer: fine) {
  .pano:hover::after { transform: scaleX(1); }
  .pano:hover .pano-accion { transform: translateX(4px); }
}
.pano:focus-visible::after { transform: scaleX(1); }

.pano-accion { transition: transform var(--normal) var(--curva); }

@media (max-width: 720px) {
  .escision { grid-template-columns: 1fr; }
  .pano-oferta { border-right: 0; border-bottom: var(--regla); }
}

/* -------------------------------- Franjas -------------------------------- */

.franja { padding: 4.5rem 0; border-top: var(--regla); }

.franja > h2,
.cierre h2 {
  text-wrap: balance;
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  max-width: 20ch;
}

/* Franja invertida: el mismo recurso del héroe, a lo ancho. Separa
   bloques sin añadir ni un color más. */
.franja-tinta {
  background: var(--texto);
  color: var(--fondo);
  margin-left: calc(var(--margen-izq) * -1);
  margin-right: calc(var(--margen-der) * -1);
  padding-left: var(--margen-izq);
  padding-right: var(--margen-der);
  border-top: 0;
}
.franja-tinta .rotulo,
.franja-tinta .tenue { color: color-mix(in srgb, var(--fondo) 62%, transparent); }
.franja-tinta a { color: var(--fondo); }

/* --------------------------------- Pasos ---------------------------------
   La numeración se gana el sitio: es una secuencia real y el miembro no
   puede saltarse ningún paso.
--------------------------------------------------------------------------- */

.pasos {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: var(--regla);
}

.paso {
  padding: 1.75rem 1.5rem 2rem;
  border-bottom: var(--regla);
  border-right: 1px solid var(--borde);
}
.paso:last-child { border-right: 0; }

.paso-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--acento);
  margin-bottom: 1.25rem;
}

.paso h3 { font-size: 1.05rem; margin: 0 0 0.5rem; letter-spacing: -0.015em; }
.paso p { color: var(--tinta-media); font-size: 0.94rem; margin: 0; }

/* -------------------------------- Motores -------------------------------- */

.motores {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 3rem;
  border-top: 1px solid color-mix(in srgb, var(--fondo) 25%, transparent);
}

.motor {
  padding: 2rem 1.75rem;
  border-right: 1px solid color-mix(in srgb, var(--fondo) 25%, transparent);
}
.motor:last-child { border-right: 0; }

.motor h3 { font-size: 1.2rem; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
.motor p { opacity: 0.78; font-size: 0.96rem; margin: 0; }

.motor ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.motor li { padding: 0.5rem 0; border-top: 1px solid color-mix(in srgb, var(--fondo) 18%, transparent); }

/* ------------------------------- Fundadores ------------------------------
   El sello es la ÚNICA pieza decorativa de la página. Se la gana porque el
   cupo es real: el número lo pone el servidor desde /api/fundadores, no el
   maquetador.
--------------------------------------------------------------------------- */

.fundadores {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 2.5rem 0 3.5rem;
  padding: 2rem;
  border: var(--regla);
  background: var(--fondo-2);
}

.sello {
  display: grid;
  place-content: center;
  gap: 0.15rem;
  width: 168px;
  height: 168px;
  padding: 1rem;
  text-align: center;
  color: var(--acento);
  border: 2px solid var(--acento);
  outline: 1px solid var(--acento);
  outline-offset: 4px;
  border-radius: 50%;
  transform: rotate(-7deg);
  font-family: var(--mono);
  text-transform: uppercase;
}
.sello-linea-1 { font-size: 0.78rem; letter-spacing: 0.2em; }
.sello-linea-2 { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; }
.sello-cupo {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--acento);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.fundadores h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  letter-spacing: -0.025em;
  margin: 0 0 0.6rem;
}
.fundadores p { color: var(--tinta-media); margin: 0 0 1.5rem; max-width: 48ch; }

@media (max-width: 720px) {
  .fundadores { grid-template-columns: 1fr; justify-items: start; gap: 1.75rem; }
}

/* --------------------------------- Planes -------------------------------- */

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border: var(--regla);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--borde);
}
.plan:last-child { border-right: 0; }

/* Solo el intermedio se destaca: destacar dos es no destacar ninguno. */
.plan.destacado { background: var(--fondo-2); }

.plan h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0;
}

.precio {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0.75rem 0 0;
  font-variant-numeric: tabular-nums;
}
.precio span {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--tenue);
}

.anual { font-size: 0.82rem; color: var(--tenue); margin: 0.3rem 0 0; }

/* Anclada ARRIBA, no abajo. Las cabeceras de los tres planes miden lo mismo
   (nombre + precio + línea anual), así que alineando por arriba las reglas
   horizontales casan de columna a columna. Ancladas abajo quedaban a distinta
   altura y en una estética de registro eso se nota enseguida. */
.incluye { list-style: none; padding: 1.75rem 0 0; margin: 0; }
.incluye li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--borde);
  font-size: 0.9rem;
  color: var(--tinta-media);
}
.incluye strong { color: var(--texto); }

.franja .nota { text-align: left; margin-top: 1.75rem; }

/* --------------------------------- Reglas -------------------------------- */

.reglas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin-top: 3rem;
  border-top: 1px solid color-mix(in srgb, var(--fondo) 25%, transparent);
}

.regla {
  padding: 1.75rem 1.5rem;
  border-right: 1px solid color-mix(in srgb, var(--fondo) 25%, transparent);
}
.regla:last-child { border-right: 0; }
.regla h3 { font-size: 1rem; margin: 0 0 0.5rem; letter-spacing: -0.015em; }
.regla p { opacity: 0.75; font-size: 0.92rem; margin: 0; }

/* -------------------------------- Botones -------------------------------- */

.boton {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  background: var(--acento);
  color: #fff;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid var(--acento);
  transition: transform var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva);
}
.boton:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: transparent; color: var(--acento); }
}

.boton.grande { padding: 1.1rem 2.4rem; font-size: 0.82rem; }

/* --------------------------------- Cierre -------------------------------- */

.cierre {
  padding: 6rem 0;
  border-top: var(--regla);
}
.cierre .entrada { margin-bottom: 2.5rem; }
.acciones { margin: 0; }

footer {
  border-top: var(--regla);
  padding: 3rem var(--margen-der) max(4rem, env(safe-area-inset-bottom)) var(--margen-izq);
}
footer .marca { font-size: 1.05rem; margin-bottom: 0.75rem; }
footer .rotulo { margin-bottom: 0.75rem; }
footer a { color: var(--acento); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ------------------------------ Accesibilidad ---------------------------- */

/* El foco tiene que verse sobre papel Y sobre tinta, así que se dibuja con
   el acento, que contrasta contra los dos. */
a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

section[id] { scroll-margin-top: 4.5rem; }
html { scroll-behavior: smooth; }

/* ------------------------------- Movimiento ------------------------------ */

/* Revelado al entrar en pantalla. El estado oculto SOLO se aplica si
   `inicio.js` marcó el body: sin JS, todo se ve. Una landing que depende del
   script para mostrar texto es una landing en blanco cuando algo falla. */
.con-revelado .revela {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva);
}

.con-revelado .revela.visible {
  opacity: 1;
  transform: none;
}

/* Escalonado dentro de una misma rejilla: lectura de izquierda a derecha sin
   que el último tarde tanto que se perciba como lentitud. */
.con-revelado .pasos > *:nth-child(2),
.con-revelado .motores > *:nth-child(2),
.con-revelado .planes > *:nth-child(2),
.con-revelado .reglas > *:nth-child(2) { transition-delay: 60ms; }

.con-revelado .pasos > *:nth-child(3),
.con-revelado .motores > *:nth-child(3),
.con-revelado .planes > *:nth-child(3),
.con-revelado .reglas > *:nth-child(3) { transition-delay: 120ms; }

/* Si el sistema pide menos movimiento, no hay movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------- La marca -------------------------------
   El logotipo se pinta como MÁSCARA, no como imagen.

   El SVG aporta la forma; el color lo pone `background-color` desde aquí, que
   es la única capa que conoce el tema de la página. Se llegó a esto tras dos
   intentos fallidos, y el segundo solo se vio en un móvil real:

   · `currentColor` no cruza la frontera de una imagen externa. Medido: el
     logotipo salía negro puro (0,0,0) sobre el fondo de tinta (22,20,15).
   · Resolver `prefers-color-scheme` DENTRO del SVG funciona en Chrome de
     escritorio —también medido— pero no en móvil, donde una imagen externa no
     siempre hereda el esquema del sistema. En modo oscuro no se veía nada.

   Con máscara no hay frontera que cruzar: el color nace en la hoja de estilos.
--------------------------------------------------------------------------- */

.lockup-palabra {
  display: block;
  width: 118px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("/logotipo.svg") no-repeat center / contain;
  mask: url("/logotipo.svg") no-repeat center / contain;
}

.barra .marca { color: var(--acento); }
footer .marca { color: var(--acento); margin-bottom: 0.75rem; }

/* ============================ LA PRESENTACIÓN ==============================
   La entrada de la portada. Ejecuta la escisión —el recurso que ya define la
   marca— en lugar de añadir efectos nuevos.

   TRES DECISIONES QUE NO SON DE GUSTO:

   1. Acotada a la portada, no a la pantalla. Una cortina a pantalla completa
      retrasa el mensaje, y esta página tiene que convencer en segundos. Así la
      barra y el resto se ven desde el primer fotograma.

   2. El contenido real está DEBAJO desde el principio. Si el script falla no
      hay cortina: la landing sale normal. Nunca al revés.

   3. La marca y la firma van duplicadas y recortadas por mitades. El color lo
      hace el corte, así que nada cambia de tono a mitad de vuelo. Es la misma
      técnica de la imagen de compartir.
--------------------------------------------------------------------------- */

.presentacion {
  position: absolute;
  /* Cubre solo la banda del titular: la escisión asoma DEBAJO desde el primer
     fotograma. Se ve el mecanismo —los dos paños, papel y tinta— mientras la
     marca se monta encima, así que la intro deja de parecer una cortina y pasa
     a ser lo que dice ser: la misma idea, ejecutándose. */
  inset: 0 0 auto 0;
  height: clamp(240px, 46%, 420px);
  z-index: 4;
  overflow: hidden;
  background: var(--texto);
  /* Nunca intercepta un clic ni una pulsación, ni siquiera mientras corre. */
  pointer-events: none;
  /* Sin la clase que pone el script, no existe. */
  display: none;
}

.con-presentacion .presentacion { display: block; }

/* El paño de papel que abre la costura. */
.pres-papel {
  position: absolute;
  inset: 0 50% 0 0;
  background: var(--fondo);
  transform: scaleX(0);
  transform-origin: left;
}

.pres-marca { position: absolute; inset: 0; }
.pres-marca svg {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(38%, 190px);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.pres-arco { fill: none; stroke-width: 54; transform-origin: 256px 256px; }

/* Cada copia se recorta a su mitad de la costura. */
.pres-mitad-izq { clip-path: inset(0 50% 0 0); }
.pres-mitad-der { clip-path: inset(0 0 0 50%); }

/* La firma: logotipo dibujado y nombre completo, debajo de la marca. */
.pres-firma {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  margin-top: min(11%, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  transform: translateY(8px);
}
.pres-firma.pres-mitad-izq { color: var(--texto); }
.pres-firma.pres-mitad-der { color: var(--fondo); }

/* El logotipo se pinta con máscara, igual que en la barra: el color viene de
   `color`, que aquí lo fija cada mitad. */
.pres-palabra {
  display: block;
  width: min(30vw, 168px);
  height: min(5vw, 28px);
  background-color: currentColor;
  -webkit-mask: url("/logotipo.svg") no-repeat center / contain;
  mask: url("/logotipo.svg") no-repeat center / contain;
}

.pres-nombre {
  font-family: var(--mono);
  font-size: clamp(0.52rem, 1.4vw, 0.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 1rem;
}

/* Con movimiento reducido no hay presentación: el script ni siquiera marca el
   body. Esto es la red por si algo lo marcara igualmente. */
@media (prefers-reduced-motion: reduce) {
  .presentacion { display: none !important; }
}

/* ---------------------------------------------------------------------------
   ASISTENTE DE LA LANDING (Fase 7)

   Burbuja flotante, cerrada de entrada. Quien viene a leer la página de venta
   no debe encontrarse un chat encima del contenido.

   Reutiliza las clases de burbuja del portal (.chat-fila, .chat-burbuja) para
   que el lenguaje visual sea el mismo; aquí solo va el contenedor flotante.
   Sin movimiento nuevo: aparece y desaparece, no se desliza.
--------------------------------------------------------------------------- */

.chat-burbuja-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  padding: 0.8rem 1.1rem;
  background: var(--acento);
  color: #fff;
  border: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.chat-panel-landing {
  position: fixed;
  right: 1rem;
  bottom: 4.2rem;
  z-index: 31;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border: 1px solid var(--texto);
}

.chat-panel-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--borde);
}

.chat-puerta { padding: 0.9rem; }
.chat-puerta p { font-size: 0.85rem; }

.chat-hilo-landing {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--fondo-2);
}

.chat-panel-landing .chat-escritura {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem;
  border-top: 1px solid var(--borde);
}
.chat-panel-landing .chat-campo { flex: 1; margin: 0; }
.chat-panel-landing .chat-escritura button.primario { width: auto; padding: 0.6rem 0.9rem; }

.chat-pie-landing {
  width: 100%;
  padding: 0.7rem;
  border-top: 1px solid var(--borde);
  text-align: center;
}

/* En móvil ocupa el ancho: un panel de 360 px en una pantalla de 360 px se
   sale por el borde. */
@media (max-width: 420px) {
  .chat-panel-landing { right: 0.5rem; left: 0.5rem; width: auto; }
}